← back to Hormuzy
mockups/058-stadium-scoreboard.html
249 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>stadium-scoreboard — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DSEG14+Modern:wght@400&family=Inter:wght@400;600&display=swap" />
<style>
:root {
--bg: #0a0a0a;
--primary: #39ff14;
--accent1: #ff5252;
--accent2: #ffeb3b;
--text: #ffffff;
--border: #1a1a1a;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--bg);
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px;
background: linear-gradient(90deg, var(--accent2), var(--primary));
color: var(--bg);
font-family: 'DSEG14 Modern', monospace;
font-size: 24px;
position: relative;
z-index: 1;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--accent1);
}
.project-picker {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.project-picker select {
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
padding: 5px 10px;
font-family: 'Inter', sans-serif;
}
.status {
font-size: 14px;
padding: 4px 12px;
background: var(--accent1);
border-radius: 4px;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-pane {
width: 40%;
background: #1a1a1a;
display: flex;
flex-direction: column;
padding: 20px;
overflow-y: auto;
}
.chat-messages {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.message {
display: flex;
gap: 10px;
align-items: flex-start;
}
.message.user {
justify-content: flex-end;
}
.message-content {
background: var(--primary);
color: var(--bg);
padding: 10px 16px;
border-radius: 8px;
max-width: 70%;
font-size: 14px;
}
.message-system {
background: var(--accent2);
color: var(--bg);
flex: 1;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
}
.chat-input {
display: flex;
gap: 10px;
}
.chat-input input {
flex: 1;
padding: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 14px;
}
.chat-input button {
background: var(--primary);
color: var(--bg);
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.panels {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;
overflow-y: auto;
}
.panel {
background: var(--bg);
border: 1px solid var(--border);
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel-header {
font-family: 'DSEG14 Modern', monospace;
font-size: 20px;
color: var(--primary);
}
.panel-content {
font-size: 14px;
color: #ccc;
display: flex;
flex-direction: column;
gap: 4px;
}
.panel-content div {
padding: 4px 8px;
background: var(--accent2);
border-radius: 4px;
font-family: monospace;
}
.panel-content p {
font-family: 'Inter', sans-serif;
color: #aaa;
}
</style>
</head>
<body>
<header>
<div>FOUR HORSEMEN</div>
<div class="project-picker">
<select>
<option value="1">HORMUZ</option>
<option value="2">NEON SPECTRUM</option>
<option value="3">VOID RITUAL</option>
</select>
<div class="status">idle</div>
</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-messages">
<div class="message user">
<div class="message-content">/run-topic "Cyberpunk Aesthetics"</div>
</div>
<div class="message system">
<div class="message-content">TOPIC ENGAGED: GENERATING 3D NEON SIGNAGE PROTOTYPE</div>
</div>
<div class="message user">
<div class="message-content">/stampede 5</div>
</div>
<div class="message system">
<div class="message-content">STAMPEDE INITIATED: 5 AGENTS IN MOTION</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="type /help for commands" />
<button>SEND</button>
</div>
</div>
<div class="panels">
<div class="panel">
<div class="panel-header">PREVIEW</div>
<div class="panel-content">
<div>🎯 LIVE FEED: NEON SIGNAGE PROTOTYPE</div>
<div>✨ 76% COMPLETION</div>
<div>⏱️ EST. 2:14 Q4</div>
<p>AGENT 3: RENDERING CYBERPUNK TEXTURE LAYER 2</p>
</div>
</div>
<div class="panel">
<div class="panel-header">PAPER</div>
<div class="panel-content">
<div>📄 DRAFT 1.2: "GLOWING VAPORWAVE LOGO"</div>
<div>🖋️ STAMPED BY AGENT 5</div>
<div>⚠️ NEEDS 2 MORE STAMPEDES</div>
<p>HOME 21 · AWAY 17 · TIME-OUT</p>
</div>
</div>
<div class="panel">
<div class="panel-header">FIGMA</div>
<div class="panel-content">
<div>🖼️ COMPONENT: "NEON BUTTON"</div>
<div>🎨 3 VARIANTS IN PROGRESS</div>
<div>🔄 AUTO-SYNCING TO AGENT 2</div>
<p>AGENT 2: EXPORTING SVG TO PREVIEW</p>
</div>
</div>
<div class="panel">
<div class="panel-header">CANVA</div>
<div class="panel-content">
<div>🖌️ LAYOUT: "HYPERSPACE POSTER"</div>
<div>📊 4 LAYERS COMPLETED</div>
<div>🔥 AGENT 4: APPLYING GLITCH EFFECTS</div>
<p>TIME-OUT · HOME 21 · AWAY 17</p>
</div>
</div>
</div>
</main>
</body>
</html>