Schüler-Ansicht: Menü ohne "Meine" (Module/Erfolge/Schulbuch/Profil), Schulbuch-Links
- Top-Menü: "Meine Module"→"Module", "Meine Erfolge"→"Erfolge", neu "Schulbuch" (→ /buch), switchTab auf data-tab umgestellt (robust gegen zusätzliche Menüpunkte) - Pro Modul-Karte ein "📘 Schulbuch"-Link zum passenden buch-<id>-Kapitel (klima-3d→klima) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
+16
-8
@@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
.tabs{display:flex;gap:0;margin-bottom:1.2rem;border-radius:10px;overflow:hidden;border:1.5px solid rgba(0,0,0,.06);background:#fff}
|
.tabs{display:flex;gap:0;margin-bottom:1.2rem;border-radius:10px;overflow:hidden;border:1.5px solid rgba(0,0,0,.06);background:#fff}
|
||||||
.tab{flex:1;padding:.6rem;text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;color:#8a8a8a;transition:all .15s;border:none;background:transparent}
|
.tab{flex:1;padding:.6rem;text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;color:#8a8a8a;transition:all .15s;border:none;background:transparent;text-decoration:none}
|
||||||
.tab.on{background:#4a7c8a;color:#fff}
|
.tab.on{background:#4a7c8a;color:#fff}
|
||||||
|
|
||||||
/* Module grid */
|
/* Module grid */
|
||||||
@@ -99,9 +99,10 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="tab on" onclick="switchTab('modules')">Meine Module</div>
|
<div class="tab on" data-tab="modules" onclick="switchTab('modules')">Module</div>
|
||||||
<div class="tab" onclick="switchTab('achievements')">Meine Erfolge</div>
|
<div class="tab" data-tab="achievements" onclick="switchTab('achievements')">Erfolge</div>
|
||||||
<div class="tab" onclick="switchTab('profile')">Profil</div>
|
<a class="tab" href="buch">Schulbuch</a>
|
||||||
|
<div class="tab" data-tab="profile" onclick="switchTab('profile')">Profil</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tab-modules"></div>
|
<div id="tab-modules"></div>
|
||||||
@@ -140,9 +141,8 @@ async function api(endpoint, data) {
|
|||||||
function logout() { api('auth', {action:'logout'}).then(function() { location.href = 'index.html'; }); }
|
function logout() { api('auth', {action:'logout'}).then(function() { location.href = 'index.html'; }); }
|
||||||
|
|
||||||
function switchTab(tab) {
|
function switchTab(tab) {
|
||||||
document.querySelectorAll('.tab').forEach(function(t, i) {
|
document.querySelectorAll('.tab[data-tab]').forEach(function(t) {
|
||||||
var tabs = ['modules','achievements','profile'];
|
t.classList.toggle('on', t.getAttribute('data-tab') === tab);
|
||||||
t.classList.toggle('on', tabs[i] === tab);
|
|
||||||
});
|
});
|
||||||
document.getElementById('tab-modules').classList.toggle('hidden', tab !== 'modules');
|
document.getElementById('tab-modules').classList.toggle('hidden', tab !== 'modules');
|
||||||
document.getElementById('tab-achievements').classList.toggle('hidden', tab !== 'achievements');
|
document.getElementById('tab-achievements').classList.toggle('hidden', tab !== 'achievements');
|
||||||
@@ -196,6 +196,12 @@ function buildModuleUrl(mod) {
|
|||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Module mit Schulbuch-Kapitel (pages/buch-<id>.php). klima-3d teilt sich das Klima-Kapitel.
|
||||||
|
var BUCH_KAP = {tourismustal:1,tourismusregion:1,kofferdetektiv:1,busfahrt:1,logistik:1,
|
||||||
|
weltkueche:1,farmer:1,klima:1,'klima-3d':'klima',fluss:1,energiemanager:1,heli:1,
|
||||||
|
sonnensystem:1,'eu-werkstatt':1};
|
||||||
|
function buchKapitel(id){ var t = BUCH_KAP[id]; if (!t) return null; return 'buch-' + (t === 1 ? id : t); }
|
||||||
|
|
||||||
async function renderModules() {
|
async function renderModules() {
|
||||||
var html = '';
|
var html = '';
|
||||||
var modList = [];
|
var modList = [];
|
||||||
@@ -237,6 +243,7 @@ async function renderModules() {
|
|||||||
var moduleId = m.id;
|
var moduleId = m.id;
|
||||||
var infoHref = 'modul-' + moduleId;
|
var infoHref = 'modul-' + moduleId;
|
||||||
var glossarHref = 'glossar?module=' + moduleId;
|
var glossarHref = 'glossar?module=' + moduleId;
|
||||||
|
var buchHref = buchKapitel(moduleId);
|
||||||
|
|
||||||
var cls = isComing ? 'coming' : (isLocked ? 'locked' : 'spielbar');
|
var cls = isComing ? 'coming' : (isLocked ? 'locked' : 'spielbar');
|
||||||
var s = '<div class="mod-card '+cls+'">';
|
var s = '<div class="mod-card '+cls+'">';
|
||||||
@@ -259,6 +266,7 @@ async function renderModules() {
|
|||||||
if (isSpielbar) s += '<a href="'+url+'" class="mod-btn primary">▶ Starten</a>';
|
if (isSpielbar) s += '<a href="'+url+'" class="mod-btn primary">▶ Starten</a>';
|
||||||
s += '<a href="'+infoHref+'" class="mod-btn" title="Mehr Infos">📖 Infos</a>';
|
s += '<a href="'+infoHref+'" class="mod-btn" title="Mehr Infos">📖 Infos</a>';
|
||||||
if (!isComing) s += '<a href="'+glossarHref+'" class="mod-btn" title="Glossar zu diesem Modul">📚 Glossar</a>';
|
if (!isComing) s += '<a href="'+glossarHref+'" class="mod-btn" title="Glossar zu diesem Modul">📚 Glossar</a>';
|
||||||
|
if (buchHref) s += '<a href="'+buchHref+'" class="mod-btn" title="Schulbuch-Kapitel zu diesem Modul">📘 Schulbuch</a>';
|
||||||
s += '</div>';
|
s += '</div>';
|
||||||
s += '</div></div>';
|
s += '</div></div>';
|
||||||
return s;
|
return s;
|
||||||
@@ -324,7 +332,7 @@ async function renderAchievements() {
|
|||||||
// Modul-Erfolge-Liste
|
// Modul-Erfolge-Liste
|
||||||
html += '<p style="font-size:.85rem;font-weight:700;color:#4a7c8a;margin-bottom:.5rem">Was du in den Modulen geschafft hast</p>';
|
html += '<p style="font-size:.85rem;font-weight:700;color:#4a7c8a;margin-bottom:.5rem">Was du in den Modulen geschafft hast</p>';
|
||||||
if (allProgress.length === 0) {
|
if (allProgress.length === 0) {
|
||||||
html += '<div class="ach-empty">Noch keine Module gespielt. Geh auf <strong>Meine Module</strong> und starte einen Durchgang.</div>';
|
html += '<div class="ach-empty">Noch keine Module gespielt. Geh auf <strong>Module</strong> und starte einen Durchgang.</div>';
|
||||||
} else {
|
} else {
|
||||||
html += '<div class="ach-modules">';
|
html += '<div class="ach-modules">';
|
||||||
allProgress.forEach(function(p) {
|
allProgress.forEach(function(p) {
|
||||||
|
|||||||
Reference in New Issue
Block a user