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
-
- Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.
- ${hint} -Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.
+ ${hint} +