From bf29d33c352831feabae14a4a4ca274976d749d6 Mon Sep 17 00:00:00 2001 From: breitenbach76 Date: Sat, 6 Jun 2026 17:36:29 +0200 Subject: [PATCH] .. --- 04_Tablet-Quiz/app/index.html | 48 +++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 0dff3e2..6291e6e 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -55,10 +55,22 @@ .progress { height: 6px; background: var(--line); } .progress > div { height: 100%; background: var(--accent); transition: width .3s; } - .layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: calc(100% - 55px); } - @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } aside { display:none; } } + .layout { display: grid; grid-template-columns: 1fr; gap: 0; min-height: calc(100% - 55px); } - aside { border-right: 1px solid var(--line); background: var(--panel); padding: 14px; overflow:auto; } + /* Stationsliste als aufklappbares Overlay (Header-Button ☰ Stationen) */ + aside { + position: fixed; top:0; left:0; bottom:0; width: 320px; max-width: 86vw; + background: var(--panel); border-right:1px solid var(--line); padding: 14px; + overflow:auto; z-index: 30; + transform: translateX(-100%); transition: transform .22s ease; + box-shadow: 0 0 40px rgba(20,30,50,.18); + } + body.navOpen aside { transform: translateX(0); } + .navBackdrop { position:fixed; inset:0; background:rgba(15,22,35,.42); z-index:29; opacity:0; pointer-events:none; transition:opacity .2s; } + body.navOpen .navBackdrop { opacity:1; pointer-events:auto; } + .navTop { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } + .navTop b { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); } + .navTop button { border:none; background:none; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; } aside h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 16px 0 6px; } .stationItem { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; @@ -141,6 +153,7 @@ body:not(.runMode) aside { display:none; } body:not(.runMode) .layout { grid-template-columns: 1fr; } body:not(.runMode) .progress { display:none; } + body:not(.runMode) #stationsBtn { display:none; } .cardBadge { display:none; align-items:center; gap:8px; font-size:13px; } .cardBadge .cb-svc { font-weight:600; } .setupHead { font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); } @@ -179,6 +192,11 @@ .choiceGrid{display:flex;flex-direction:column;gap:8px;margin:10px 0} .choiceGrid.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(max-width:440px){.choiceGrid.grid2{grid-template-columns:1fr}} + /* Klassifizieren: links große Karte, rechts Frage + Antworten */ + .classifyTop{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:start;margin:18px 0 6px} + .classifyCard{display:block;width:100%;border-radius:12px;box-shadow:0 3px 16px rgba(0,0,0,.16)} + .classifyMain{min-width:0} + @media(max-width:680px){.classifyTop{grid-template-columns:1fr}.classifyCard{max-width:300px;margin:0 auto}.classifyMain{margin-top:6px}} .choice{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:15px;font-weight:600} .choice:hover{border-color:var(--ink)} .choice.bad{border-color:var(--bad);background:#fdf3f3} @@ -201,10 +219,12 @@ v0.6
+
+
@@ -871,7 +891,7 @@ function cardMedia(si, ci){ const f = cardImg(si, ci); function renderList(){ const groups = {}; STATIONEN.forEach((st,i)=>{ (groups[st.phase]=groups[st.phase]||[]).push({st,i}); }); - let html = ""; + let html = `
Stationen
`; for(const ph in PHASEN){ if(!groups[ph]) continue; html += `

${PHASEN[ph].label}

`; @@ -887,8 +907,9 @@ function renderList(){ } $("#stationList").innerHTML = html; $("#stationList").querySelectorAll(".stationItem").forEach(el=>{ - el.onclick = ()=>{ enterStation(+el.dataset.i); save(); draw(); }; + el.onclick = ()=>{ document.body.classList.remove("navOpen"); enterStation(+el.dataset.i); save(); draw(); }; }); + const nc = $("#navClose"); if(nc) nc.onclick = ()=> document.body.classList.remove("navOpen"); const pct = Math.round(Object.keys(S.done).length / STATIONEN.length * 100); $("#progressBar").style.width = pct+"%"; } @@ -896,6 +917,7 @@ function renderList(){ /* ====================== VIEW DISPATCH ====================== */ function draw(){ document.body.classList.toggle("runMode", S.view==="run"); + if(S.view!=="run") document.body.classList.remove("navOpen"); renderCardBadge(); if(S.view==="deck") return renderDeck(); if(S.view==="classify") return renderClassify(); @@ -949,11 +971,15 @@ function renderClassify(){ ? `
Nicht ganz — überlegt nochmal und probiert es erneut.
` : ``; $("#panel").innerHTML = `
Schritt 2 · Change-Art bestimmen
- ${thumb} -

Welche Art von Change ist das?

-

Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.

- ${hint} -
${choices}
+
+ ${card.titel} +
+

Welche Art von Change ist das?

+

Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.

+ ${hint} +
${choices}
+
+
${legend}
`; $("#panel").querySelectorAll(".choice").forEach(el=>{ @@ -1204,6 +1230,8 @@ function renderEnd(){ /* ====================== INIT ====================== */ (function init(){ $("#resetBtn").onclick = ()=>{ if(confirm("Neue Action Card ziehen und Durchlauf zurücksetzen?")){ S=defaultState(); save(); draw(); } }; + $("#stationsBtn").onclick = ()=> document.body.classList.toggle("navOpen"); + $("#navBackdrop").onclick = ()=> document.body.classList.remove("navOpen"); draw(); })();