diff --git a/src/main/resources/static/css/bughunter.css b/src/main/resources/static/css/bughunter.css index 5a5b565..574d7a2 100644 --- a/src/main/resources/static/css/bughunter.css +++ b/src/main/resources/static/css/bughunter.css @@ -1 +1,2 @@ +.bh-cabinet{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;margin-top:.8rem;padding:1.2rem;border:10px solid #231b18;border-radius:8px;background:linear-gradient(90deg,#171110,#2a211d 8%,#16100f 92%,#2a211d);box-shadow:inset 0 0 0 2px #57433a,0 14px 32px rgba(0,0,0,.3);position:relative}.bh-cabinet-label{grid-column:1/-1;margin:-.4rem 0 .2rem;color:#c9b29a;font:700 .63rem "Courier New",monospace;letter-spacing:.17em;text-align:center}.bh-drawer{min-height:116px;display:grid;grid-template-rows:auto 1fr auto;gap:.35rem;position:relative;text-align:left;padding:1.05rem 1rem .8rem;border:1px solid #6d5145;border-radius:5px;background:linear-gradient(180deg,#3a2d28,#211918);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -4px 0 rgba(0,0,0,.32),0 3px 0 #120d0c;color:var(--text);cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.bh-drawer:hover,.bh-drawer:focus-visible{transform:translateY(-3px);border-color:var(--bh-accent);outline:2px solid color-mix(in srgb,var(--bh-accent) 45%,transparent);outline-offset:2px}.bh-drawer.active{background:linear-gradient(180deg,color-mix(in srgb,var(--bh-accent) 22%,#3a2d28),#2b1c21);border-color:var(--bh-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px color-mix(in srgb,var(--bh-accent) 22%,transparent),0 3px 0 #120d0c}.bh-drawer-handle{position:absolute;top:8px;right:10px;width:34px;height:6px;border:1px solid #947663;border-radius:8px;background:#1a1311;box-shadow:inset 0 1px 1px rgba(255,255,255,.16)}.bh-drawer strong{align-self:center;padding-right:1.8rem;color:var(--heading);font-size:1.03rem;line-height:1.18}.bh-drawer small{font:700 .65rem "Courier New",monospace;color:var(--muted);letter-spacing:.04em}.bh-case-detail{margin-top:1rem;padding:1.35rem 1.45rem;border:1px solid color-mix(in srgb,var(--bh-accent) 55%,var(--border));border-left:6px solid var(--bh-accent);border-radius:10px;background:linear-gradient(105deg,color-mix(in srgb,var(--bh-accent) 10%,var(--surface)),var(--surface));box-shadow:0 10px 26px rgba(0,0,0,.2)}.bh-case-detail h2{margin:.4rem 0;color:var(--heading)}.bh-case-detail p{max-width:760px;margin:.5rem 0;color:var(--muted);line-height:1.55} .bh-app{--accent:var(--bh-accent);--glow-s:var(--bh-glow);min-height:100vh;color:var(--text);background:radial-gradient(circle at 10% 0,color-mix(in srgb,var(--bh-accent) 14%,transparent),transparent 33%),linear-gradient(135deg,rgba(0,0,0,.28),transparent 55%),var(--bg);font-family:Georgia,"Times New Roman",serif}.bh-top{min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 24px;border-bottom:1px solid color-mix(in srgb,var(--bh-accent) 45%,var(--border));background:color-mix(in srgb,var(--panel) 94%,transparent);position:sticky;top:0;z-index:5}.bh-back{color:var(--muted);text-decoration:none}.bh-brand{text-align:center}.bh-brand b{display:block;color:var(--bh-accent);font:700 1.25rem/1 "Courier New",monospace;letter-spacing:.2em;text-shadow:0 0 14px var(--bh-glow)}.bh-brand span,.bh-kicker{font:700 .66rem/1.3 "Courier New",monospace;letter-spacing:.13em;color:var(--muted)}.bh-top .mf-a11y-host{justify-self:end}.bh-view{max-width:1240px;margin:auto;padding:2rem 1.25rem}.bh-loading{text-align:center;padding:20vh 0;color:var(--muted);font-family:"Courier New",monospace}.bh-hero,.bh-briefing,.bh-debrief,.bh-result{position:relative;border:1px solid color-mix(in srgb,var(--bh-accent) 55%,var(--border));border-radius:14px;background:linear-gradient(110deg,color-mix(in srgb,var(--surface) 95%,transparent),var(--surface));padding:1.6rem;box-shadow:0 12px 34px rgba(0,0,0,.18)}.bh-hero:before,.bh-briefing:before,.bh-debrief:before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--bh-accent) 26%,transparent);pointer-events:none}.bh-hero h1,.bh-briefing h1,.bh-hunt-head h1,.bh-debrief h1,.bh-result h1{color:var(--heading);margin:.45rem 0}.bh-hero p,.bh-briefing p,.bh-case p,.bh-debrief p{line-height:1.6;color:var(--muted);max-width:850px}.bh-stamp{display:inline-block;border:2px solid var(--bh-accent);color:var(--bh-accent);font:700 .7rem/1 "Courier New",monospace;letter-spacing:.12em;padding:.28rem .42rem;transform:rotate(-3deg);margin:0 .65rem .4rem 0}.bh-archive{margin-top:1.2rem}.bh-archive-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:0 .5rem}.bh-archive-head h2{margin:.3rem 0;color:var(--heading)}.bh-archive-head p{margin:0;color:var(--muted);font-size:.9rem}.bh-case-deck{position:relative;min-height:540px;margin-top:.8rem}.bh-case{position:absolute;inset:0 auto auto 50%;width:min(680px,92%);min-height:260px;transform:translateX(-50%) translateY(calc(var(--stack) * 25px)) rotate(var(--tilt));z-index:calc(30 - var(--stack));border:1px solid var(--border);border-radius:10px;background:linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--bh-accent) 6%,var(--surface)));padding:1.15rem 1.25rem;box-shadow:4px 6px 0 color-mix(in srgb,var(--bh-accent) 16%,transparent),0 10px 26px rgba(0,0,0,.2);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.bh-case:hover,.bh-case:focus-visible{border-color:var(--bh-accent);outline:none}.bh-case.active{min-height:355px;border-color:color-mix(in srgb,var(--bh-accent) 70%,var(--border));box-shadow:7px 9px 0 color-mix(in srgb,var(--bh-accent) 22%,transparent),0 16px 40px rgba(0,0,0,.32)}.bh-case h2{color:var(--heading);margin:.4rem 0}.bh-case-no{color:var(--bh-accent);font:700 .68rem "Courier New",monospace;letter-spacing:.08em}.bh-case-peek{display:block;margin-top:5.5rem;color:var(--muted);font:italic .88rem Georgia,serif}.bh-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.9rem 0}.bh-tags span{border:1px solid var(--border);border-radius:99px;padding:.22rem .5rem;font:700 .65rem "Courier New",monospace;color:var(--muted)}.bh-btn{border:1px solid var(--bh-accent);background:transparent;border-radius:6px;padding:.65rem .85rem;color:var(--bh-accent);font:700 .72rem "Courier New",monospace;letter-spacing:.06em;cursor:pointer}.bh-btn:hover,.bh-btn.primary{background:var(--bh-accent);color:#19090e;box-shadow:0 0 16px var(--bh-glow)}.bh-briefing pre,.bh-evidence pre{white-space:pre-wrap;background:#0d0c0f;color:#d8cbd0;border-left:3px solid var(--bh-accent);padding:.8rem;font:normal .78rem/1.5 "Courier New",monospace}.bh-rules{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}.bh-rules div{background:var(--surface-2);padding:.65rem;border-radius:7px;color:var(--muted)}.bh-rules b{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--bh-accent);color:#210c12;margin-right:.35rem}.bh-hunt-head{display:flex;justify-content:space-between;gap:1rem;align-items:center}.bh-combo{border:1px solid var(--bh-accent);border-radius:50%;width:68px;height:68px;display:grid;place-content:center;text-align:center;color:var(--bh-accent);font:700 1.25rem "Courier New",monospace}.bh-combo small{font-size:.46rem;text-transform:uppercase;color:var(--muted)}.bh-progress{display:flex;gap:.45rem;margin:1rem 0}.bh-progress i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);font:700 .75rem "Courier New",monospace;color:var(--muted);font-style:normal}.bh-progress i.current{border-color:var(--bh-accent);color:var(--bh-accent);box-shadow:0 0 10px var(--bh-glow)}.bh-progress i.done{background:var(--success);border-color:var(--success);color:#08131a}.bh-layout{display:grid;grid-template-columns:3fr 2fr;gap:1rem}.bh-code-area,.bh-side>*,.bh-action{border:1px solid var(--border);border-radius:10px;background:var(--surface)}.bh-tabs{display:flex;overflow:auto;border-bottom:1px solid var(--border)}.bh-tabs button{border:0;border-right:1px solid var(--border);background:transparent;padding:.7rem .9rem;color:var(--muted);font:700 .73rem "Courier New",monospace;cursor:pointer}.bh-tabs button.active{background:color-mix(in srgb,var(--bh-accent) 14%,transparent);color:var(--bh-accent)}.bh-code{padding:.55rem 0;overflow:auto;max-height:65vh;background:#0a090b}.bh-line{width:100%;min-width:max-content;display:grid;grid-template-columns:52px 1fr;gap:.8rem;text-align:left;border:0;border-left:3px solid transparent;padding:.1rem .8rem;background:transparent;color:#dad5d7;font:normal .83rem/1.55 "Courier New",monospace}.bh-line:not(:disabled){cursor:pointer}.bh-line:not(:disabled):hover,.bh-line.selected{background:color-mix(in srgb,var(--bh-accent) 17%,transparent);border-left-color:var(--bh-accent)}.bh-line span{text-align:right;color:#776e72;user-select:none}.bh-side{display:grid;gap:1rem;align-content:start}.bh-evidence,.bh-action{padding:1rem}.bh-evidence p{line-height:1.5}.bh-action h2{color:var(--heading);margin:.4rem 0}.bh-action p{color:var(--muted);line-height:1.45}.bh-handoff{border-color:var(--bh-accent);box-shadow:0 0 22px color-mix(in srgb,var(--bh-accent) 15%,transparent)}.bh-selected{font-family:"Courier New",monospace;color:var(--bh-accent)!important}.bh-options{display:grid;gap:.45rem;margin:.8rem 0}.bh-options button{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:.65rem;color:var(--text);text-align:left;cursor:pointer}.bh-options button.selected{border-color:var(--bh-accent);color:var(--bh-accent);box-shadow:inset 0 0 0 1px var(--bh-accent)}.bh-attempts{font:normal .75rem "Courier New",monospace!important}.bh-feedback{min-height:1.4rem;font:700 .8rem "Courier New",monospace}.bh-feedback.ok{color:var(--success)}.bh-feedback.bad{color:var(--danger)}.bh-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.6rem}.bh-debrief,.bh-result{text-align:center;max-width:780px;margin:7vh auto}.bh-diff{display:grid;gap:.35rem;text-align:left;background:#0b0a0c;padding:1rem;margin:1rem 0;font:normal .8rem "Courier New",monospace}.bh-diff span:first-child{color:var(--danger)}.bh-diff span:nth-of-type(2){color:var(--success)}.bh-diff code{color:#ded7db}.bh-score{font:700 3.5rem "Courier New",monospace;color:var(--bh-accent);text-shadow:0 0 20px var(--bh-glow)}.bh-stars{color:var(--bh-accent);font-size:1.5rem}.bh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.bh-stats div{padding:.75rem;background:var(--surface-2);border-radius:7px;color:var(--muted);font-size:.8rem}.bh-stats b{display:block;color:var(--heading);font:700 1.1rem "Courier New",monospace;margin-bottom:.2rem}@media(max-width:850px){.bh-layout{grid-template-columns:1fr}.bh-code{max-height:45vh}.bh-case-deck{min-height:590px}}@media(max-width:560px){.bh-top{grid-template-columns:1fr auto}.bh-brand{display:none}.bh-stats{grid-template-columns:1fr 1fr}.bh-view{padding:1.1rem .75rem}.bh-line{grid-template-columns:38px 1fr;font-size:.74rem}.bh-hunt-head h1{font-size:1.35rem}.bh-archive-head{display:block}.bh-archive-head p{margin-top:.5rem}.bh-case-deck{min-height:auto;display:grid;gap:.7rem}.bh-case{position:relative;inset:auto;width:100%;min-height:0;transform:none!important}.bh-case.active{min-height:0}.bh-case-peek{margin-top:.5rem}} diff --git a/src/main/resources/static/js/bughunter.js b/src/main/resources/static/js/bughunter.js index 79fedd6..15ca06b 100644 --- a/src/main/resources/static/js/bughunter.js +++ b/src/main/resources/static/js/bughunter.js @@ -13,10 +13,9 @@ if (!catalog.length) { error(new Error('Zurzeit sind keine Fallakten verfügbar.')); return; } selectedCase = Math.max(0, Math.min(selectedCase, catalog.length - 1)); const selectedHunt = catalog[selectedCase]; - const deck = [selectedHunt, ...catalog.filter((_, i) => i !== selectedCase)]; - view.innerHTML = `
VERTRAULICHDEBUG-FALLAKTEN

Welche Spur verfolgst du?

Öffne eine Akte, lies die Beweise und sichere deinen Befund Schritt für Schritt. Jede Akte bleibt so lange offen, wie du sie brauchst.

FALLARCHIV · ${catalog.length} AKTEN

${esc(selectedHunt.title)}

Klicke eine Akte an, um sie nach vorn zu holen.

${deck.map((h, stackIndex) => { const originalIndex = catalog.indexOf(h), active = originalIndex === selectedCase; return `
${esc(h.examScope)} · ${esc(h.difficulty).toUpperCase()}

${esc(h.title)}

${active ? `

${esc(h.description)}

${esc(h.language)}${h.fileCount} ${h.fileCount === 1 ? 'Datei' : 'Dateien'}${h.bugCount} Bug${h.bugCount === 1 ? '' : 's'}
` : 'Zum Öffnen nach vorn holen'}
`; }).join('')}
`; - view.querySelectorAll('[data-select]').forEach(card => { const select = () => { selectedCase = Number(card.dataset.select); renderCatalog(); }; card.addEventListener('click', event => { if (!event.target.closest('[data-start]')) select(); }); card.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); select(); } }); }); - view.querySelector('[data-start]')?.addEventListener('click', event => { event.stopPropagation(); begin(event.currentTarget.dataset.start); }); + view.innerHTML = `
VERTRAULICHDEBUG-FALLAKTEN

Welche Spur verfolgst du?

Öffne eine Akte, lies die Beweise und sichere deinen Befund Schritt für Schritt. Jede Akte bleibt so lange offen, wie du sie brauchst.

AKTENSCHRANK · ${catalog.length} AKTEN

Fallarchiv

Wähle eine Schublade, um die Akte zu prüfen.

BUGHUNTER · ARCHIV
${catalog.map((hunt, i) => ``).join('')}
AUSGEWÄHLTE AKTE${esc(selectedHunt.examScope)} · ${esc(selectedHunt.difficulty).toUpperCase()} · ${esc(selectedHunt.language)}

${esc(selectedHunt.title)}

${esc(selectedHunt.description)}

${selectedHunt.fileCount} ${selectedHunt.fileCount === 1 ? 'Datei' : 'Dateien'}${selectedHunt.bugCount} Bug${selectedHunt.bugCount === 1 ? '' : 's'}
`; + view.querySelectorAll('[data-select]').forEach(drawer => drawer.addEventListener('click', () => { selectedCase = Number(drawer.dataset.select); renderCatalog(); })); + view.querySelector('[data-start]')?.addEventListener('click', event => begin(event.currentTarget.dataset.start)); } function begin(slug) { api('/session/' + encodeURIComponent(slug)).then(data => { if (!data.found) throw new Error('Fallakte nicht verfügbar.'); session = data; index = 0; handoff = null; answers = session.bugs.map(() => ({locate:null, classify:null, fix:null})); started = Date.now(); renderBriefing(); }).catch(error); } function renderBriefing() {