← back to Hormuzy
mockups/028-telegram-receipt.html
79 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>telegram-receipt — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'IBM Plex Mono', monospace; background: #fdf6e3; color: #1a1a1a; height: 100%; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #eee8d5; font-size: 24px; font-family: 'Special Elite', cursive; }
header select { background: #586e75; color: #eee8d5; padding: 4px 8px; border: none; font-size: 14px; }
header .status { padding: 4px 12px; background: #268bd2; color: #1a1a1a; font-size: 14px; border-radius: 4px; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; border-right: 1px solid #586e75; padding: 24px; overflow-y: auto; }
.chat-log { display: flex; flex-direction: column; gap: 12px; }
.message { background: #eee8d5; padding: 12px; border: 1px solid #586e75; border-radius: 4px; }
.message.user { background: #586e75; color: #eee8d5; }
.chat-input { margin-top: 24px; display: flex; }
.chat-input input { flex: 1; padding: 8px; font-size: 14px; }
.chat-input button { padding: 8px 16px; background: #268bd2; color: #1a1a1a; border: none; font-size: 14px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
.sub-panel { background: #1a1a1a; color: #eee8d5; padding: 24px; border: 1px solid #586e75; }
.sub-panel h3 { margin: 0 0 16px; font-family: 'Special Elite', cursive; font-size: 18px; }
.sub-panel p { font-size: 14px; }
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN</span>
<div>
<select>
<option value="project1">HORMUZ-001</option>
<option value="project2">ASHES-007</option>
<option value="project3">STAMPED-042</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="message user">/run-topic: BURN THE BLUEPRINTS</div>
<div class="message">⚠️ topic 'BURN THE BLUEPRINTS' activated. all simulations rerouted to pyre. confirm? (y/n)</div>
<div class="message user">y</div>
<div class="message">🔥 pyre engaged. 3000 simulations consumed. status: 🔥🔥🔥</div>
<div class="message user">/stampede: REPLICATE 5X</div>
<div class="message">⚠️ stampede protocol engaged. 5x replication initiated. estimated completion: 3.2s</div>
</div>
<div class="chat-input">
<input type="text" placeholder="type /command or message">
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="sub-panel">
<h3>PREVIEW</h3>
<p>BURN THE BLUEPRINTS — 3000 simulations consumed. pyre status: 🔥🔥🔥</p>
<p>next phase: ASHES-007. expected duration: 2.1s</p>
</div>
<div class="sub-panel">
<h3>PAPER</h3>
<p>PAPER IS FLAMMABLE. 5x replication in progress. 76% complete</p>
<p>WARNING: do not fold. do not staple. do not whisper secrets to the margins</p>
</div>
<div class="sub-panel">
<h3>FIGMA</h3>
<p>FILE: HORMUZ-001.fig. last modified: 3s ago</p>
<p>layers: 127. components: 42. warnings: 3 (see console)</p>
</div>
<div class="sub-panel">
<h3>CANVA</h3>
<p>TEMPLATE: STAMPED-042. assets loaded: 100%</p>
<p>font: SPECIAL ELITE. color: #268bd2. alignment: center</p>
</div>
</div>
</main>
</body>
</html>