← back to Hormuzy
mockups/064-rave-flyer-1996.html
95 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rave-flyer-1996 — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #000000; color: #ff00ff; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #ffff00; font-family: 'VT323', monospace; }
header h1 { font-size: 24px; }
.project-picker { padding: 8px 16px; background: #00ffff; border: 2px solid #ff00ff; border-radius: 4px; color: #000000; }
.status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #ff00ff; margin-left: 10px; }
main { display: flex; flex: 1; }
.left-pane { width: 40%; padding: 20px; overflow-y: auto; }
.chat-log { display: flex; flex-direction: column; gap: 10px; }
.message { padding: 10px 15px; background: #000000; border: 1px solid #ffff00; border-radius: 6px; }
.message.user { background: #1a1a1a; }
.input-bar { margin-top: 20px; display: flex; }
.input-bar input { flex: 1; padding: 10px; font-size: 16px; border: 2px solid #ff00ff; border-radius: 6px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
.panel { background: #000000; border: 2px solid #ff00ff; border-radius: 8px; padding: 20px; }
.panel h2 { margin: 0 0 15px; font-family: 'VT323', monospace; color: #ff00ff; }
.panel-body { font-size: 14px; }
.panel-body code { color: #ffff00; }
.panel-body pre { background: #1a1a1a; padding: 10px; border: 1px solid #00ffff; }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN STUDIO</h1>
<div>
<select class="project-picker">
<option>Neon Pulse</option>
<option>Synthwave 2024</option>
<option>Rave 6AM</option>
</select>
<div class="status-indicator"></div>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="message user">/run-topic "synthwave nostalgia"</div>
<div class="message">Topic set. Let's get retro. 🎶</div>
<div class="message user">/stampede "neon chaos"</div>
<div class="message">Initiating stampede mode. Let the chaos flow. 🔥</div>
</div>
<div class="input-bar">
<input type="text" placeholder="Type /run-topic or /stampede...">
</div>
</div>
<div class="right-pane">
<div class="panel">
<h2>PREVIEW</h2>
<div class="panel-body">
<p>Currently rendering: <code>synthwave nostalgia</code></p>
<p>Visuals: Glitching neon grids at <code>128 BPM</code></p>
<pre>
|---\\---|---\\---|
| / | / |
|---\\---|---\\---|
</pre>
</div>
</div>
<div class="panel">
<h2>PAPER</h2>
<div class="panel-body">
<p><strong>FLYER DRAFT:</strong></p>
<p>🔥 <code>NEON PULSE</code> 🔥</p>
<p><code>128 BPM • 6AM • SYNTHWAVE</code></p>
<p>⚠️ Stampede mode: 30% chaos, 70% euphoria</p>
</div>
</div>
<div class="panel">
<h2>FIGMA</h2>
<div class="panel-body">
<p>Designing: <code>Glitching UI</code> (43% complete)</p>
<p>Elements: 3D neon text, animated waveforms, <code>00ffff</code> gradients</p>
<p>Layer count: <code>17</code> (warning: this is getting <code>unstable</code>)</p>
</div>
</div>
<div class="panel">
<h2>CANVA</h2>
<div class="panel-body">
<p>Template: <code>"Rave 6AM" Flyer</code></p>
<p>Drag and drop: <code>neon shapes</code>, <code>synthwave fonts</code>, <code>glitch effects</code></p>
<p>Export ready: <code>YES</code> (but only if you promise to play <code>128 BPM</code>)</p>
</div>
</div>
</div>
</main>
</body>
</html>