← back to Hormuzy
mockups/095-dive-flag.html
71 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scuba-dive-log — 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; width: 100%; height: 100%; font-family: 'IBM Plex Mono', monospace; background: #0a1428; color: #fdfaf0; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: linear-gradient(135deg, #1c4966, #0a1428); color: #fdfaf0; font-family: 'Special Elite', cursive; font-size: 1.5rem; }
header .project-picker { background: #1c4966; padding: 0.5rem 1rem; border-radius: 4px; }
header .status { padding: 0.5rem 1rem; border-radius: 4px; background: #7dffe9; }
main { display: flex; flex: 1; overflow: hidden; }
.chat-pane { width: 40%; border-right: 1px solid #333; display: flex; flex-direction: column; }
.chat-log { flex: 1; padding: 1rem; overflow-y: auto; }
.chat-log .message { margin: 0.5rem 0; padding: 0.5rem; background: #1c4966; border-radius: 4px; }
.chat-log .message.user { background: #a83232; color: #fdfaf0; }
.chat-input { padding: 0.5rem; }
.chat-input input { width: 100%; padding: 0.5rem; border: none; border-radius: 4px; background: #1c4966; color: #fdfaf0; }
.panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; padding: 1rem; }
.panel { background: #1c4966; padding: 1rem; border-radius: 4px; }
.panel h3 { margin: 0 0 0.5rem; font-family: 'Special Elite', cursive; color: #a83232; }
.panel p { margin: 0; font-size: 0.9rem; }
</style>
</head>
<body>
<header>
<span>Four Horsemen / HORMUZ</span>
<div>
<select class="project-picker">
<option>Deep Blue Project</option>
<option>Coral Reefs UI</option>
<option>Submerged Branding</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="message user">/run-topic: "Deco stop at 5m, pressure stable"</div>
<div class="message">Depth: 30m, pressure: 4.2ATA</div>
<div class="message user">/stampede: "Surface interval: 42 minutes"</div>
<div class="message">Nitrox blend: 32% O2, 68% N2</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type /run-topic or /stampede...">
</div>
</div>
<div class="panels">
<div class="panel">
<h3>Preview</h3>
<p>Depth: 30m, pressure: 4.2ATA | Surface interval: 42 minutes | Deco stop: 5m</p>
</div>
<div class="panel">
<h3>Paper</h3>
<p>Sketches of pressure gauges and dive tables in progress. Current focus: optimizing deco stop calculations.</p>
</div>
<div class="panel">
<h3>Figma</h3>
<p>Wireframes for the "Deco Planner" module. Current state: 75% complete. Next: integrating real-time depth tracking.</p>
</div>
<div class="panel">
<h3>Canva</h3>
<p>Mockups for dive log templates. Using color palette: #0a1428 (depth), #7dffe9 (surface), #a83232 (warning).</p>
</div>
</div>
</main>
</body>
</html>