← back to Hormuzy
mockups/044-passport-stamp.html
221 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>passport-stamp — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap">
<style>
:root {
--bg-dark: #0e2a47;
--bg-light: #fdfaf0;
--red: #a83232;
--green: #3a4a2c;
--brown: #7a5c3e;
--font-display: 'Special Elite', cursive;
--font-body: 'IBM Plex Sans', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--bg-dark); color: var(--bg-light); height: 100%; }
body { display: flex; flex-direction: column; }
header {
display: flex;
align-items: center;
padding: 16px 32px;
background: var(--bg-dark);
border-bottom: 2px solid var(--brown);
font-family: var(--font-display);
font-size: 1.8em;
color: var(--bg-light);
}
header select {
margin-left: auto;
padding: 8px 12px;
font-size: 1em;
background: var(--bg-light);
color: var(--bg-dark);
border: 1px solid var(--brown);
border-radius: 4px;
}
header .status {
margin-left: 24px;
padding: 4px 12px;
background: var(--green);
color: var(--bg-dark);
border-radius: 4px;
font-size: 0.9em;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.left-pane {
width: 40%;
display: flex;
flex-direction: column;
background: var(--bg-light);
color: var(--bg-dark);
padding: 24px;
overflow-y: auto;
}
.chat-log {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.chat-message {
display: flex;
gap: 12px;
}
.chat-message.user {
align-items: flex-end;
}
.chat-message.system {
align-items: flex-start;
}
.chat-bubble {
padding: 12px 16px;
border-radius: 8px;
background: var(--bg-dark);
color: var(--bg-light);
max-width: 70%;
}
.chat-input {
display: flex;
gap: 8px;
}
.chat-input input {
flex: 1;
padding: 8px 12px;
font-size: 1em;
border: 1px solid var(--brown);
border-radius: 4px;
}
.chat-input button {
padding: 8px 16px;
background: var(--green);
color: var(--bg-dark);
border: none;
border-radius: 4px;
font-weight: bold;
}
.right-pane {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
padding: 24px;
overflow-y: auto;
}
.panel {
background: var(--bg-light);
color: var(--bg-dark);
border: 1px solid var(--brown);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.panel h2 {
font-family: var(--font-display);
font-size: 1.2em;
color: var(--red);
}
.panel-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-content div {
padding: 8px 12px;
background: var(--bg-dark);
color: var(--bg-light);
border-radius: 4px;
font-size: 0.95em;
}
footer {
padding: 12px 32px;
text-align: center;
font-size: 0.8em;
color: var(--brown);
border-top: 1px solid var(--brown);
}
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN</span>
<select>
<option>Project HORMUZ</option>
<option>Project BERING</option>
<option>Project SAMAR</option>
</select>
<span class="status">idle</span>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message system">
<div class="chat-bubble">[SYSTEM] ENTRY GRANTED. INITIATING DESIGN ORCHESTRATION.</div>
</div>
<div class="chat-message user">
<div class="chat-bubble">/run-topic "AERIAL VISION"</div>
</div>
<div class="chat-message system">
<div class="chat-bubble">TOPIC AERIAL VISION: DEPLOYING 3D RENDERING PROTOCOLS. STATUS: ACTIVE.</div>
</div>
<div class="chat-message user">
<div class="chat-bubble">/stampede "BATCH 42"</div>
</div>
<div class="chat-message system">
<div class="chat-bubble">STAMPEDE BATCH 42: INITIATED. 12 VECTORS IN TRANSIT. ESTIMATED COMPLETION: 00:04:32.</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="COMMAND OR QUERY">
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<h2>PREVIEW</h2>
<div class="panel-content">
<div>ENTRY GRANTED. DISPLAYING PROTOTYPE 0042-3A.</div>
<div>3D MODEL: 78% COMPLETION. TEXTURE MAPS: 92%.</div>
<div>WARNING: LIGHTING CONFIGURATION MAY NEED RECALIBRATION.</div>
</div>
</div>
<div class="panel">
<h2>PAPER</h2>
<div class="panel-content">
<div>DOCUMENT VERIFICATION: PENDING.</div>
<div>REQUIRED FORMS: 3A, 5C, 7X.</div>
<div>NOTE: STAMPED APPROVAL REQUIRED FOR FINAL SUBMISSION.</div>
</div>
</div>
<div class="panel">
<h2>FIGMA</h2>
<div class="panel-content">
<div>FILE: DESIGN-0042-3A.fig</div>
<div>LAST MODIFIED: 2023-11-05T14:22:17Z</div>
<div>STATUS: SYNCED WITH MAINFRAME. 3 UNCOMMITTED CHANGES.</div>
</div>
</div>
<div class="panel">
<h2>CANVA</h2>
<div class="panel-content">
<div>TEMPLATE: BRANDING KIT V2.0</div>
<div>ASSETS: 12/15 COMPLETED.</div>
<div>NOTE: COLOR PALETTE MUST ALIGN WITH PASSPORT-LEVEL APPROVAL.</div>
</div>
</div>
</div>
</main>
<footer>
passport-stamp — Four Horsemen Studio © 2023
</footer>
</body>
</html>