diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 6291e6e..0dff3e2 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -55,22 +55,10 @@ .progress { height: 6px; background: var(--line); } .progress > div { height: 100%; background: var(--accent); transition: width .3s; } - .layout { display: grid; grid-template-columns: 1fr; gap: 0; min-height: calc(100% - 55px); } + .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; } } - /* 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 { border-right: 1px solid var(--line); background: var(--panel); padding: 14px; overflow:auto; } 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; @@ -153,7 +141,6 @@ 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); } @@ -192,11 +179,6 @@ .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} @@ -219,12 +201,10 @@ v0.6
-
-
@@ -891,7 +871,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 = ""; for(const ph in PHASEN){ if(!groups[ph]) continue; html += `

${PHASEN[ph].label}

`; @@ -907,9 +887,8 @@ function renderList(){ } $("#stationList").innerHTML = html; $("#stationList").querySelectorAll(".stationItem").forEach(el=>{ - el.onclick = ()=>{ document.body.classList.remove("navOpen"); enterStation(+el.dataset.i); save(); draw(); }; + el.onclick = ()=>{ 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+"%"; } @@ -917,7 +896,6 @@ 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(); @@ -971,15 +949,11 @@ function renderClassify(){ ? `
Nicht ganz — überlegt nochmal und probiert es erneut.
` : ``; $("#panel").innerHTML = `
Schritt 2 · Change-Art bestimmen
-
- ${card.titel} -
-

Welche Art von Change ist das?

-

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

- ${hint} -
${choices}
-
-
+ ${thumb} +

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=>{ @@ -1230,8 +1204,6 @@ 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(); })();