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:
2026-07-17 01:34:00 +02:00
parent 108053d5da
commit 283780994b
+16 -8
View File
@@ -24,7 +24,7 @@
/* 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}
.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}
/* Module grid */
@@ -99,9 +99,10 @@
<div class="wrap">
<!-- Tabs -->
<div class="tabs">
<div class="tab on" onclick="switchTab('modules')">Meine Module</div>
<div class="tab" onclick="switchTab('achievements')">Meine Erfolge</div>
<div class="tab" onclick="switchTab('profile')">Profil</div>
<div class="tab on" data-tab="modules" onclick="switchTab('modules')">Module</div>
<div class="tab" data-tab="achievements" onclick="switchTab('achievements')">Erfolge</div>
<a class="tab" href="buch">Schulbuch</a>
<div class="tab" data-tab="profile" onclick="switchTab('profile')">Profil</div>
</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 switchTab(tab) {
document.querySelectorAll('.tab').forEach(function(t, i) {
var tabs = ['modules','achievements','profile'];
t.classList.toggle('on', tabs[i] === tab);
document.querySelectorAll('.tab[data-tab]').forEach(function(t) {
t.classList.toggle('on', t.getAttribute('data-tab') === tab);
});
document.getElementById('tab-modules').classList.toggle('hidden', tab !== 'modules');
document.getElementById('tab-achievements').classList.toggle('hidden', tab !== 'achievements');
@@ -196,6 +196,12 @@ function buildModuleUrl(mod) {
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() {
var html = '';
var modList = [];
@@ -237,6 +243,7 @@ async function renderModules() {
var moduleId = m.id;
var infoHref = 'modul-' + moduleId;
var glossarHref = 'glossar?module=' + moduleId;
var buchHref = buchKapitel(moduleId);
var cls = isComing ? 'coming' : (isLocked ? 'locked' : 'spielbar');
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>';
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 (buchHref) s += '<a href="'+buchHref+'" class="mod-btn" title="Schulbuch-Kapitel zu diesem Modul">📘 Schulbuch</a>';
s += '</div>';
s += '</div></div>';
return s;
@@ -324,7 +332,7 @@ async function renderAchievements() {
// 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>';
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 {
html += '<div class="ach-modules">';
allProgress.forEach(function(p) {