← back to Hormuzy
mockups/045-subway-token.html
73 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>subway-token-vending — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #1a1a1a; color: #fcd13e; height: 100%; }
body { display: flex; flex-direction: column; height: 100vh; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #0e2a47; color: #fcd13e; font-family: 'Bebas Neue', cursive; }
header h1 { font-size: 24px; }
.project-picker { padding: 8px 16px; background: #1a1a1a; border: 1px solid #e84545; border-radius: 4px; }
.status { padding: 8px 16px; background: #fffaee; color: #e84545; border: 1px solid #e84545; border-radius: 4px; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; padding: 24px; background: #1a1a1a; border-right: 1px solid #e84545; }
.chat-log { height: 80%; overflow-y: auto; margin-bottom: 16px; }
.chat-message { margin: 8px 0; }
.chat-message.user { color: #e84545; }
.chat-message.agent { color: #fcd13e; }
.chat-input { display: flex; }
.chat-input input { flex: 1; padding: 8px; font-size: 14px; background: #1a1a1a; color: #fcd13e; border: 1px solid #e84545; }
.right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; padding: 24px; }
.sub-panel { background: #0e2a47; padding: 16px; border: 1px solid #e84545; }
.sub-panel h2 { margin: 0 0 12px; font-family: 'Bebas Neue', cursive; color: #fcd13e; }
.sub-panel p { margin: 0; font-size: 14px; color: #fffaee; }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN STUDIO</h1>
<div>
<select class="project-picker">
<option>Project Neon</option>
<option>Project Hail Mary</option>
<option>Project Echo</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic "Cyberpunk Aesthetics"</div>
<div class="chat-message agent">TOPIC INITIATED. GENERATING TOKENS...</div>
<div class="chat-message user">/stampede "Neon Grid"</div>
<div class="chat-message agent">STAMPEDE ENGAGED. 3D RENDER QUEUE: 7 ITEMS. PLEASE WAIT.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="PLEASE INSERT COMMAND">
</div>
</div>
<div class="right-pane">
<div class="sub-panel">
<h2>PREVIEW</h2>
<p>TOKEN PREVIEW: 3D RENDER NOT AVAILABLE. PLEASE INSERT FEE.</p>
</div>
<div class="sub-panel">
<h2>PAPER</h2>
<p>PAPER FEED JAMMED. PLEASE EJECT AND REINSERT.</p>
</div>
<div class="sub-panel">
<h2>FIGMA</h2>
<p>FIGMA INTEGRATION: OFFLINE. PLEASE CHECK CONNECTION.</p>
</div>
<div class="sub-panel">
<h2>CANVA</h2>
<p>CANVA TOKEN EXPIRED. PLEASE REDEEM.</p>
</div>
</div>
</main>
</body>
</html>