← back to Hormuzy
mockups/065-punk-zine-1980.html
82 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>punk-zine-cut-paste — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
<style>
html, body {margin:0;padding:0;min-height:100vh;font-family:Inter,sans-serif;background:#fbf6e9;color:#1a1a1a}
body {display:flex;flex-direction:column}
header {display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#1a1a1a;color:#fbf6e9;font-family:Special Elite,serif}
header select {padding:0.5rem;background:#3a3a3a;border:none;border-radius:3px;color:#fbf6e9}
header .status {padding:0.5rem 1rem;background:#a83232;border-radius:5px;font-size:0.8rem}
main {display:flex;flex:1;overflow:hidden}
.left-pane {width:40%;padding:2rem;background:#3a3a3a;overflow-y:auto}
.chat-log {max-height:80vh}
.chat-message {margin:1rem 0;padding:0.5rem 1rem;background:#666666;border-radius:5px;word-break:break-word}
.chat-input {position:fixed;bottom:0;left:0;width:40%;padding:1rem;background:#3a3a3a}
.chat-input input {width:100%;padding:0.5rem;border:none;border-radius:3px}
.right-pane {width:60%;display:flex;flex-wrap:wrap}
.sub-panel {width:48%;margin:1%;padding:2rem;background:#1a1a1a;color:#fbf6e9;font-family:Inter,sans-serif}
.sub-panel h2 {margin-top:0;font-size:1.2rem;margin-bottom:1rem}
.sub-panel .content {font-size:0.9rem;line-height:1.4}
.sub-panel .content pre {background:#fbf6e9;padding:1rem;border-radius:3px;overflow-x:auto}
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN</span>
<div>
<select>
<option>Project Neon Wires</option>
<option>Project Static Pulse</option>
<option>Project Analog Frenzy</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message">/run-topic: Cyberpunk 2077</div>
<div class="chat-message">AGENT: Stampede initiated: glitching the matrix, baby. 3D-printing chaos into the void.</div>
<div class="chat-message">/stampede: 1984 meets the internet of things</div>
<div class="chat-message">AGENT: Overloading the neural net with scissors and duct tape. 404 ERROR: no coherence found.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type /help for chaos">
</div>
</div>
<div class="right-pane">
<div class="sub-panel">
<h2>Preview</h2>
<div class="content">
<pre>┌───────────────┐
│ 404 ERROR │
│ NO COHERENCE│
└───────────────┘
</pre>
</div>
</div>
<div class="sub-panel">
<h2>Paper</h2>
<div class="content">
<p>ROUGH DRAFT: "The Future is Glitchy" — a zine about AI that dreams in xeroxed paper. Includes 3 pages of scribbled code, a torn-out newspaper clipping about 2001: A Space Odyssey, and a collage of cat photos from the 90s.</p>
</div>
</div>
<div class="sub-panel">
<h2>Figma</h2>
<div class="content">
<p>FILE: "Neon Wires Mockup.fig" — layers named "Glitch Layer 1", "Scissors Tool", "Duct Tape Texture", "Ransom Note Font". 173 open layers. Last saved: 3:17 AM. Warning: may contain sentient paperclips.</p>
</div>
</div>
<div class="sub-panel">
<h2>Canva</h2>
<div class="content">
<p>COLLAGE: "Digital Punk Zine" — 12 images pasted in, including a screenshot of a broken website, a photo of a cat wearing a gas mask, and a hand-drawn diagram of a neural network made of sticky notes. Text: "WARNING: THIS ZINE MAY CAUSE UNAUTHORIZED INVENTIONS."</p>
</div>
</div>
</div>
</main>
</body>
</html>