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

v09

Browse source
This commit is contained in:
breitenbach76 2026-06-09 09:06:43 +02:00
parent a50fb7fe94
commit cd589b79a6
2 changed files with 36 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,17 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>SLC-Workshop — Companion-App</title>
<meta name="description" content="Begleit-App zum SLC-Workshop-Tabletop: führt durch die Stationen, vermittelndes Quiz und Auflösung. Offline lauffähig." />
<meta name="theme-color" content="#1d2430" />
<meta name="theme-color" content="#161b24" />
<link rel="manifest" href="manifest.webmanifest" />
<link rel="apple-touch-icon" href="icon.svg" />
<link rel="icon" href="icon.svg" type="image/svg+xml" />
<style>
:root {
--bg: #f4f5f7;
--panel: #ffffff;
--ink: #1d2430;
--muted: #6b7686;
--line: #e2e6ec;
--bg: #161b24; /* dunkler Hintergrund (nicht voll schwarz) */
--panel: #1f2733; /* Karten/Header */
--ink: #e8edf4; /* heller Text */
--muted: #9aa7b8;
--line: #333d4d;
--accent: #e2001a; /* Freiburg-Rot */
--ok: #1f9d57;
--bad: #d23b3b;
@ -25,7 +25,12 @@
--support: #18a9a0;
--review: #8358c6;
--radius: 14px;
--shadow: 0 1px 3px rgba(20,30,50,.08), 0 6px 24px rgba(20,30,50,.06);
--shadow: 0 1px 3px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.4);
--soft: #28313f; /* leicht erhöhte Fläche */
--okBg: rgba(31,157,87,.16);
--badBg: rgba(210,59,59,.18);
--accentBg: rgba(226,0,26,.14);
--blueBg: rgba(47,128,201,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
@ -300,12 +305,33 @@
.phaseZone:hover{filter:brightness(1.06)}
.phaseZone.bad{outline:3px solid var(--bad);outline-offset:2px}
@media(max-width:760px){.deckRow{grid-template-columns:repeat(3,1fr)}.phaseRow{grid-template-columns:repeat(3,1fr)}}
/* ===== Dark-Theme-Flächen (v0.9) — überschreibt fest verdrahtete helle Farben ===== */
.scenario select, button { background:var(--soft); }
button.ghost { background:var(--soft); }
.cardForm select { background:var(--soft); }
.opt, .choice, .deckCard { background:var(--soft); }
.discuss { background:var(--soft); }
.legend, .raciLegend, .frageBox { background:var(--soft); }
.stationItem:hover, .pickerItem:hover { background:var(--soft); }
.stationItem.active { background:#26313f; }
.phaseDone, .actDone { background:var(--soft); }
.tourNarr { background:var(--blueBg); }
.tourBanner, .ctText { background:var(--accentBg); }
.gateReq.ok, .opt.correct, .pickerItem.correct { background:var(--okBg); color:var(--ok); border-color:rgba(31,157,87,.4); }
.aufBox { background:var(--okBg); border-color:rgba(31,157,87,.4); color:var(--ink); }
.gateReq.bad, .opt.wrong, .choice.bad, .pickerItem.wrongPick { background:var(--badBg); color:var(--bad); border-color:rgba(210,59,59,.4); }
.stepHead .n { background:var(--accent); color:#fff; }
.pickerItem .gate { background:#475061; color:#fff; }
.roleChip { background:var(--soft); color:var(--ink); }
.navBackdrop { background:rgba(0,0,0,.55); }
@keyframes akteFlash { 0%,55%{ background:rgba(255,206,84,.22); } 100%{ background:transparent; } }
</style>
</head>
<body>
<header>
<div class="brand">SLC&nbsp;<b>Companion</b></div>
<span class="tag">v0.7</span>
<div class="brand">SLC&nbsp;Workshop&nbsp;<b>Companion</b></div>
<span class="tag">v0.9</span>
<div id="cardBadge" class="cardBadge"></div>
<div class="spacer"></div>
<button class="ghost" id="akteBtn" title="Service-Akte (gesammelte Artefakte)">📁&nbsp;Service-Akte</button>