← back to Hormuzy
mockups/004-arcade-crt.html
220 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>arcade-crt — Four Horsemen Studio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; background:#000;
color:#39ff14; font-family:'VT323', monospace; font-size:20px; line-height:1.2;
text-shadow: 0 0 4px #39ff14, 0 0 12px #39ff1444;
overflow:hidden;
}
/* CRT scanlines */
body::before {
content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
}
/* CRT vignette */
body::after {
content:""; position:fixed; inset:0; pointer-events:none; z-index:51;
background: radial-gradient( ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}
.px-font { font-family:'Press Start 2P', monospace; }
.pink { color:#ff00ff; text-shadow: 0 0 4px #ff00ff, 0 0 12px #ff00ff44; }
.cyan { color:#00ffff; text-shadow: 0 0 4px #00ffff, 0 0 12px #00ffff44; }
.yellow{ color:#ffff00; text-shadow: 0 0 4px #ffff00, 0 0 12px #ffff0044; }
.dim { color:#39ff1488; text-shadow:none; }
header {
border-bottom:2px solid #39ff14; padding:14px 24px;
display:flex; align-items:center; gap:24px;
}
header .marquee { font-family:'Press Start 2P', monospace; font-size:14px; color:#ff00ff; text-shadow: 0 0 6px #ff00ff, 0 0 18px #ff00ff66; }
header .credits { margin-left:auto; font-size:18px; }
main { display:grid; grid-template-columns: 40% 60%; height: calc(100vh - 56px); }
.left {
border-right:2px solid #39ff14; display:flex; flex-direction:column;
}
.left .panel-head {
padding:8px 18px; border-bottom:2px solid #39ff14; font-family:'Press Start 2P', monospace; font-size:10px;
display:flex; gap:18px; color:#ffff00; text-shadow: 0 0 6px #ffff0066;
}
.console { flex:1; overflow:auto; padding:18px 22px; }
.console .line { margin-bottom:8px; }
.console .who { font-family:'Press Start 2P', monospace; font-size:9px; padding-right:10px; }
.console .who.p1 { color:#00ffff; }
.console .who.p2 { color:#ff00ff; }
.console .who.cpu { color:#ffff00; }
.console .body { font-size:18px; }
.console .cmd { color:#ff00ff; }
.blink { animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.arrow { color:#ff00ff; }
.input-area {
border-top:2px solid #39ff14; padding:14px 22px;
display:grid; grid-template-columns: 1fr auto; gap:12px;
}
.input-area .prompt { display:flex; align-items:center; gap:10px; }
.input-area .prompt::before { content:"►"; color:#ff00ff; }
.input-area input {
flex:1; background:#000; color:#39ff14; border:2px solid #39ff14; padding:8px 12px;
font:inherit; font-family:'VT323', monospace; font-size:18px;
text-shadow: 0 0 4px #39ff14;
}
.input-area button {
background:#39ff14; color:#000; border:none; padding:8px 18px;
font-family:'Press Start 2P', monospace; font-size:9px; cursor:pointer;
text-shadow:none;
}
.right { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:0; }
.level {
border-right:2px solid #39ff14; border-bottom:2px solid #39ff14; padding:18px 22px;
display:flex; flex-direction:column; min-width:0;
}
.level:nth-child(2n) { border-right:none; }
.level:nth-last-child(-n+2) { border-bottom:none; }
.level .head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding-bottom:6px; border-bottom:1px dashed #39ff1466; }
.level .head .name { font-family:'Press Start 2P', monospace; font-size:13px; }
.level .head .ix { font-family:'Press Start 2P', monospace; font-size:9px; color:#ffff0088; }
.level .head .lives { font-family:'Press Start 2P', monospace; font-size:9px; }
.level .ascii { white-space:pre; font-size:13px; line-height:1.15; flex:1; color:#39ff14; opacity:0.95; }
.level .stats { display:grid; grid-template-columns: 1fr 1fr; gap:6px 18px; margin-top:8px; font-size:18px; }
.level .stats .k { color:#39ff1488; font-size:14px; text-transform:uppercase; }
.level .stats .v { color:#ffff00; }
.level.boss .head .name { color:#ff00ff; }
.level.boss { background: radial-gradient(ellipse at top, rgba(255,0,255,0.1), transparent 70%); }
footer {
position:fixed; bottom:0; left:0; right:0; padding:6px 22px; border-top:2px solid #39ff14;
background:#000; font-family:'Press Start 2P', monospace; font-size:8px;
display:flex; gap:24px;
}
footer .high { color:#ff00ff; }
footer .credits { color:#ffff00; }
</style>
</head>
<body>
<header>
<span class="marquee">★ HORMUZ ★ FOUR HORSEMEN ★ STAGE 25 ★</span>
<span class="dim">PROJECT — PHILIPPE ROMANO PDP</span>
<span class="credits">CREDITS <span class="yellow">∞</span></span>
</header>
<main>
<section class="left">
<div class="panel-head">
<span>1P · OPERATOR</span>
<span style="margin-left:auto;">SESSION #25</span>
<span>QUEUE 6</span>
</div>
<div class="console">
<div class="line"><span class="who cpu">CPU.</span><span class="body dim">STATION READY. ALL FOUR HORSEMEN STANDING BY. INSERT BRIEF.</span></div>
<div class="line"><span class="who p1">1P.</span><span class="body"><span class="cmd">/RUN-TOPIC</span> METALLIC WALLCOVERING PDP FOR ARCHITECTS WITH STRONG SAMPLE CTA</span></div>
<div class="line"><span class="who cpu">CPU.</span><span class="body">BRIEF COMPILED. DISPATCH TO 4 LANES. <span class="yellow">PAPER · FIGMA · CANVA · 21ST</span>. ETA 90S.</span></div>
<div class="line"><span class="who p1">1P.</span><span class="body"><span class="cmd">/STAMPEDE</span> WILD <span class="cyan">3X</span> · MAX · REF · BRU</span></div>
<div class="line"><span class="who cpu">CPU.</span><span class="body">STAMPEDE ARMED. SAVING TO HIGH-SCORE TABLE. <span class="pink">FIRE!</span></span></div>
<div class="line"><span class="who p2">!!.</span><span class="body pink">!! WARNING — 21ST RATE LIMITED — RETRY 18S — 3 LANES STILL UP</span></div>
<div class="line"><span class="arrow">►</span><span class="body blink"> _</span></div>
</div>
<div class="input-area">
<div class="prompt">
<input type="text" placeholder="TYPE BRIEF — OR /STAMPEDE — PRESS START">
</div>
<button>FIRE</button>
</div>
</section>
<section class="right">
<div class="level">
<div class="head"><span class="name">PAPER</span><span class="ix">LEVEL 01</span><span class="lives cyan">▼ ▼ ▼</span></div>
<div class="ascii">┌────────────────────┐
│ ARTBOARD 1440x900 │
│ ░░░░░░░░░░░░░░░░ │
│ ░ HERO ░ │
│ ░░░░░░░░░░░░░░░░ │
│ ░ CARD CARD CRD░ │
│ ░░░░░░░░░░░░░░░░ │
│ NODES: 12 · LIGHT│
└────────────────────┘</div>
<div class="stats">
<span class="k">SCORE</span><span class="v">012,400</span>
<span class="k">LAST WRITE</span><span class="v">14S</span>
<span class="k">DRIFT</span><span class="v">NONE</span>
<span class="k">BONUS</span><span class="v">×2</span>
</div>
</div>
<div class="level">
<div class="head"><span class="name">FIGMA</span><span class="ix">LEVEL 02</span><span class="lives cyan">▼ ▼ ▼</span></div>
<div class="ascii"> + HERO-HEADLINE
+ HERO-SUB
~ CTA-COLOR
~ GRID 4 → 3
-----------
4 NODES STAGED
PRESS A TO SYNC</div>
<div class="stats">
<span class="k">SCORE</span><span class="v">008,700</span>
<span class="k">DIFF</span><span class="v">4</span>
<span class="k">BRANCH</span><span class="v">SES-25</span>
<span class="k">BONUS</span><span class="v">×1</span>
</div>
</div>
<div class="level">
<div class="head"><span class="name">CANVA</span><span class="ix">LEVEL 03</span><span class="lives yellow">▼ ▼ ░</span></div>
<div class="ascii"> ████████████░░░ 38%
RENDERING MAX...
ETA: 22S
-----------
QUEUE: REF · BRU
COIN: ∞</div>
<div class="stats">
<span class="k">SCORE</span><span class="v">004,210</span>
<span class="k">VARIANT</span><span class="v pink">MAX</span>
<span class="k">QUEUE</span><span class="v">2</span>
<span class="k">BONUS</span><span class="v">×1</span>
</div>
</div>
<div class="level boss">
<div class="head"><span class="name pink">21ST · BOSS</span><span class="ix">LEVEL 04</span><span class="lives" style="color:#ff00ff;">▼ ░ ░</span></div>
<div class="ascii"> ★★★ RATE LIMITED ★★★
RESET IN: 18S
-----------
LIVES LOST: 2
CONTINUE? Y/N
PRESS START</div>
<div class="stats">
<span class="k">SCORE</span><span class="v">000,000</span>
<span class="k">STATUS</span><span class="v pink">BOSS RAGE</span>
<span class="k">QUEUE</span><span class="v">3</span>
<span class="k">BONUS</span><span class="v">×0</span>
</div>
</div>
</section>
</main>
<footer>
<span>● HORMUZ ARCADE</span>
<span class="high">HIGH SCORE 142,300 — STEVE</span>
<span class="credits">CREDITS ∞</span>
<span style="margin-left:auto;" class="dim">PRESS 1P TO START · INSERT BRIEF</span>
</footer>
</body>
</html>