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{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) {
|
||||
|
||||
Reference in New Issue
Block a user