patrick/SLC_Game
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

..

Browse source
This commit is contained in:
breitenbach76 2026-06-06 17:36:29 +02:00
parent a6ad426fee
commit bf29d33c35
1 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

48
04_Tablet-Quiz/app/index.html
View file

@ -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 @@
<span class="tag">v0.6</span>
<div id="cardBadge" class="cardBadge"></div>
<div class="spacer"></div>
<button class="ghost" id="stationsBtn" title="Stationsübersicht">☰&nbsp;Stationen</button>
<button class="ghost" id="resetBtn" title="Neue Action Card / Durchlauf zurücksetzen">Neu starten</button>
</header>
<div class="progress"><div id="progressBar" style="width:0%"></div></div>
<div class="navBackdrop" id="navBackdrop"></div>
<div class="layout">
<aside id="stationList"></aside>
<main><div class="card" id="panel"></div></main>
@ -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 = `<div class="navTop"><b>Stationen</b><button id="navClose" title="Schließen">✕</button></div>`;
for(const ph in PHASEN){
if(!groups[ph]) continue;
html += `<h3>${PHASEN[ph].label}</h3>`;
@ -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(){
? `<div class="hint bad">Nicht ganz — überlegt nochmal und probiert es erneut.</div>` : ``;
$("#panel").innerHTML = `
<div class="setupHead">Schritt 2 · Change-Art bestimmen</div>
${thumb}
<h2 class="setupTitle">Welche Art von Change ist das?</h2>
<p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
${hint}
<div class="choiceGrid grid2">${choices}</div>
<div class="classifyTop">
<img class="classifyCard" src="cards/s${S.service}-c${S.change}.png" alt="${card.titel}">
<div class="classifyMain">
<h2 class="setupTitle" style="margin-top:0">Welche Art von Change ist das?</h2>
<p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
${hint}
<div class="choiceGrid grid2">${choices}</div>
</div>
</div>
${legend}
<div class="actions"><button class="ghost" id="backDeck">← Andere Karte</button></div>`;
$("#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();
})();