← back to Hormuzy
mockups/008-control-tower.html
288 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>control-tower — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap">
<style>
:root {
--bg-ground: #0b1d2a;
--primary: #56ccf2;
--accent: #f2c94c;
--error: #ff6b6b;
--text-dark: #1c2c3a;
--text-light: #ffffff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text-light);
background-color: var(--bg-ground);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
position: relative;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
background-color: #1c2c3a;
font-family: 'Bebas Neue', cursive;
font-size: 1.8rem;
position: relative;
z-index: 2;
}
header .brand {
color: var(--primary);
}
header .dropdown {
position: relative;
}
header .dropdown select {
background-color: var(--bg-ground);
color: var(--text-light);
border: 1px solid var(--primary);
padding: 0.5rem 1rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
}
header .status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
padding: 0.5rem 1rem;
background-color: #1c2c3a;
border: 1px solid var(--primary);
border-radius: 20px;
}
.status-circle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--accent);
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.left-pane {
width: 40%;
background-color: #0b1d2a;
display: flex;
flex-direction: column;
padding: 2rem;
overflow-y: auto;
}
.chat-log {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
}
.message {
display: flex;
gap: 0.5rem;
}
.message .user {
font-weight: 600;
color: var(--primary);
}
.message .content {
background-color: #1c2c3a;
padding: 0.5rem 1rem;
border-radius: 8px;
flex: 1;
}
.chat-input {
display: flex;
gap: 0.5rem;
input {
flex: 1;
padding: 0.5rem;
border: 1px solid var(--primary);
border-radius: 4px;
color: var(--text-light);
}
button {
background-color: var(--primary);
color: var(--bg-ground);
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
}
.right-pane {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
padding: 2rem;
overflow-y: auto;
}
.panel {
background-color: #0b1d2a;
border: 1px solid var(--accent);
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.panel-header {
font-family: 'Bebas Neue', cursive;
font-size: 1.2rem;
color: var(--primary);
}
.panel-content {
font-size: 0.9rem;
color: var(--text-light);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.panel-content div {
padding: 0.5rem 1rem;
background-color: #1c2c3a;
border-radius: 6px;
}
.panel-content .note {
background-color: #1c2c3a;
color: var(--accent);
}
.panel-content .component {
background-color: #1c2c3a;
color: var(--primary);
}
.panel-content .layout {
background-color: #1c2c3a;
color: var(--error);
}
</style>
</head>
<body>
<header>
<div class="brand">FOUR HORSEMEN</div>
<div class="dropdown">
<select>
<option value="project1">HORMUZ-7A</option>
<option value="project2">CYPHER-9</option>
<option value="project3">ECHO-12</option>
</select>
</div>
<div class="status">
<div class="status-circle"></div>
<span>idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="message">
<span class="user">AGENT-7:</span>
<span class="content">/run-topic 'cyberpunk interface redesign' — QUEUED</span>
</div>
<div class="message">
<span class="user">SYSTEM:</span>
<span class="content">TOPIC INITIATED: GENERATING 3D MOCKUPS FOR NEON-UI</span>
</div>
<div class="message">
<span class="user">AGENT-7:</span>
<span class="content">/stampede 'iterate on color scheme'</span>
</div>
<div class="message">
<span class="user">SYSTEM:</span>
<span class="content">STAMPEDE ENGAGED: 5 AGENTS NOW WORKING ON TERTIARY COLOR PALETTES</span>
</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="panel">
<div class="panel-header">PREVIEW</div>
<div class="panel-content">
<div class="component">
<svg width="100" height="50" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="30" fill="#56ccf2"/>
<text x="50" y="30" font-family="Inter" font-size="14" fill="#0b1d2a" text-anchor="middle">DASHBOARD</text>
</svg>
</div>
<div class="layout">
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div style="background: #ff6b6b; width: 100px; height: 50px;"></div>
<div style="background: #f2c94c; width: 100px; height: 50px;"></div>
<div style="background: #56ccf2; width: 100px; height: 50px;"></div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">PAPER</div>
<div class="panel-content">
<div class="note">
<div style="font-style: italic;">sketch 2023-07-15</div>
<div>neon interface: 1. pulsing gradients 2. holographic overlays 3. 3D depth cues</div>
</div>
<div class="note">
<div style="font-style: italic;">todo</div>
<div>• finalize color hex codes • test with low-light environments • add tactile feedback</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">FIGMA</div>
<div class="panel-content">
<div class="component">
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div style="background: #56ccf2; width: 80px; height: 40px; border-radius: 8px;"></div>
<div style="background: #f2c94c; width: 80px; height: 40px; border-radius: 8px;"></div>
<div style="background: #ff6b6b; width: 80px; height: 40px; border-radius: 8px;"></div>
</div>
</div>
<div class="component">
<div style="font-family: 'Inter'; font-weight: 600;">COMPONENT TREE</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Header</div>
<div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Navigation</div>
<div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Card</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">CANVA</div>
<div class="panel-content">
<div class="layout">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
<div style="background: #56ccf2; height: 80px;"></div>
<div style="background: #f2c94c; height: 80px;"></div>
<div style="background: #ff6b6b; height: 80px;"></div>
<div style="background: #1c2c3a; height: 80px;"></div>
<div style="background: #1c2c3a; height: 80px;"></div>
<div style="background: #1c2c3a; height: 80px;"></div>
</div>
</div>
<div class="note">
<div style="font-style: italic;">layer notes</div>
<div>1. base grid (24px) 2. neon highlights (30% opacity) 3. shadow layers (blur 12px)</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>