← back to Hormuzy
mockups/073-library-microfiche.html
229 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>microfiche-reader — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&family=Inter:wght@400;600&display=swap">
<style>
:root {
--bg: #0a0a0a;
--fg: #fdfaf0;
--support1: #666666;
--support2: #3a3a3a;
--support3: #1a1a1a;
--noise: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' fill='%230a0a0a'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%23ffffff' opacity='0.05'%3E%3C/circle%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--fg); }
body { display: flex; flex-direction: column; overflow: hidden; }
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
background: var(--support3);
font-family: 'IBM Plex Mono', monospace;
font-size: 1.25rem;
border-bottom: 1px solid var(--support1);
}
header select {
padding: 8px 12px;
margin-left: 16px;
background: var(--support2);
color: var(--fg);
border: 1px solid var(--support1);
font-family: 'Inter', sans-serif;
}
header .status {
padding: 6px 12px;
background: var(--support2);
border: 1px solid var(--support1);
border-radius: 4px;
font-size: 0.875rem;
}
.container {
display: flex;
flex: 1;
overflow: hidden;
}
.left-pane {
width: 40%;
display: flex;
flex-direction: column;
padding: 24px;
background: var(--support2);
border-right: 1px solid var(--support1);
}
.chat-log {
flex: 1;
overflow-y: auto;
margin-bottom: 16px;
background: var(--support3);
padding: 12px;
border: 1px solid var(--support1);
border-radius: 4px;
background-image: var(--noise);
background-size: 10px 10px;
}
.chat-message {
margin: 8px 0;
padding: 8px 12px;
background: var(--support3);
border: 1px solid var(--support1);
border-radius: 4px;
}
.chat-message.user { background: var(--support2); }
.chat-input {
display: flex;
gap: 8px;
}
.chat-input input {
flex: 1;
padding: 8px;
font-family: 'Inter', sans-serif;
background: var(--support3);
border: 1px solid var(--support1);
color: var(--fg);
}
.chat-input button {
padding: 8px 16px;
background: var(--support2);
border: 1px solid var(--support1);
font-family: 'Inter', sans-serif;
color: var(--fg);
}
.right-pane {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
padding: 24px;
background: var(--support3);
}
.panel {
display: flex;
flex-direction: column;
background: var(--support2);
border: 1px solid var(--support1);
border-radius: 4px;
padding: 16px;
overflow: hidden;
}
.panel-header {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.125rem;
margin-bottom: 12px;
color: var(--fg);
}
.panel-body {
flex: 1;
background: var(--support3);
padding: 12px;
border: 1px solid var(--support1);
border-radius: 4px;
overflow-y: auto;
background-image: var(--noise);
background-size: 10px 10px;
}
.panel-body pre {
font-family: 'Courier New', monospace;
font-size: 0.875rem;
color: var(--support1);
background: none;
padding: 0;
}
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN STUDIO</span>
<div>
<select>
<option value="project1">Hormuz Initiative</option>
<option value="project2">Crimson Loop</option>
<option value="project3">Eclipse Schema</option>
</select>
<span class="status">idle</span>
</div>
</header>
<div class="container">
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic: "solar flare protocols"</div>
<div class="chat-message">[system] initiating topic run: solar flare protocols (estimated duration: 3m 45s)</div>
<div class="chat-message user">/stampede: "quantum entanglement"</div>
<div class="chat-message">[system] warning: stampede command detected. this will override current topic. confirm? (y/n)</div>
<div class="chat-message user">y</div>
<div class="chat-message">[system] stampede engaged: quantum entanglement. all agents redirected. (status: running)</div>
</div>
<div class="chat-input">
<input type="text" placeholder="agent command or message">
<button>→</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<div class="panel-header">preview</div>
<div class="panel-body">
<pre>
[REEL 412] FRAME 1138
┌───────────────┐
│ 01:23:45:678 │
└───────────────┘
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">paper</div>
<div class="panel-body">
<pre>
[REEL 412] FRAME 1139
┌───────────────┐
│ 01:23:45:679 │
└───────────────┘
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">figma</div>
<div class="panel-body">
<pre>
[REEL 412] FRAME 1140
┌───────────────┐
│ 01:23:45:680 │
└───────────────┘
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">canva</div>
<div class="panel-body">
<pre>
[REEL 412] FRAME 1141
┌───────────────┐
│ 01:23:45:681 │
└───────────────┘
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
</pre>
</div>
</div>
</div>
</div>
</body>
</html>