romfast/escape-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

S3 pas 3: restyle complet 5 stiluri (din STYLES.md)

Browse Source 
Classic: fundal radial spotlight, card cu glow accent, tile-uri 44px bouncy,
progres bar 10px cu neon glow. Terminal: FIX WCAG critic .line.dim (#1f9c4a→
#2ecc71, 3.1:1→6.1:1) + bordura CRT + flicker cu motion guard + #cmd 44px.
Arcade: canvas border neon violet, dpad butoane fizice 56x52px, titlu neon,
fundal radial. Chat: header frosted-glass (backdrop-filter), bule NPC distincte
(#1e2d45) cu shadow, tile reward bouncy. Point: fundal distinct fata de arcade,
fix contrast .note (#a89fd4), usa cu glow pulsant. prefers-reduced-motion peste tot.

Toate 5 demo-urile regenerate. Smoke 21/21 + capturi vizuale pe fiecare stil.
S3 COMPLET (Bomberman + Overworld + restyle). Board: TODOS.md S3 [x].

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-06-13 10:57:12 +00:00
parent 309103fb59
commit 4454df9c3b
7 changed files with 152 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
exemplu-terminal.html
View File

@@ -6,21 +6,24 @@
<title>Comoara ascunsa</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #04130a; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; }
#crt { max-width: 760px; margin: 0 auto; padding: 20px 16px 80px; }
.line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
.line.dim { color: #1f9c4a; }
body { margin: 0; min-height: 100vh; background: #040f08; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; animation: crt-flicker 6s infinite; }
@keyframes crt-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: 1; } 98% { opacity: .94; } 99% { opacity: .98; } }
#crt { max-width: 680px; margin: 0 auto; padding: 20px 16px 80px; }
.line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
.line.dim { color: #2ecc71; }
.line.warn { color: #ffd24a; text-shadow: 0 0 7px rgba(255,210,74,.45); }
.line.bad { color: #ff6b6b; text-shadow: 0 0 7px rgba(255,107,107,.45); }
.line.ok { color: #9dffc0; }
#inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
#cmd { flex: 1; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
.scan { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.vign { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
#inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; min-height: 44px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
#cmd { flex: 1; min-height: 44px; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.vign { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
#crt-frame { position: fixed; inset: 0; pointer-events: none; z-index: 3; border: 8px solid #0d1f12; border-radius: 18px; box-shadow: inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 1px #1a3a24; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }
</style>
</head>
<body>
<div class="scan"></div><div class="vign"></div>
<div class="scan"></div><div class="vign"></div><div id="crt-frame"></div>
<div id="crt"><div id="out"></div>
<div id="inline"><span>&gt;</span><input id="cmd" autocomplete="off" autofocus spellcheck="false"></div>
</div>