← back to Hormuzy
mockups/057-shipping-manifest.html
106 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shipping-manifest-port — 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; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'IBM Plex Mono', monospace; background: #fdfaf0; color: #1a1a1a; }
body { display: flex; flex-direction: column; font-size: 14px; }
header { height: 60px; display: flex; align-items: center; padding: 0 24px; background: #1a1a1a; color: #fdfaf0; }
header h1 { font-family: 'Special Elite', cursive; font-size: 24px; }
header select { margin-left: auto; padding: 8px 12px; border: 1px solid #3a3a3a; background: #0e3a5f; color: #fdfaf0; }
header span { margin-left: 24px; padding: 4px 8px; border: 1px solid #7a5c3e; border-radius: 4px; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; display: flex; flex-direction: column; border-right: 1px solid #3a3a3a; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; background: #fdfaf0; }
.chat-message { margin-bottom: 12px; }
.chat-message.user { text-align: right; }
.chat-message.system { text-align: left; }
.chat-message pre { background: #0e3a5f; color: #fdfaf0; padding: 4px 8px; border-radius: 4px; }
.chat-input { padding: 8px 16px; display: flex; }
.chat-input input { flex: 1; padding: 4px 8px; border: 1px solid #3a3a3a; }
.chat-input button { margin-left: 8px; padding: 4px 12px; background: #0e3a5f; color: #fdfaf0; border: none; }
.right-pane { width: 60%; display: flex; flex-wrap: wrap; }
.panel { flex: 1 1 50%; padding: 16px; border: 1px solid #3a3a3a; margin: 8px; background: #fdfaf0; }
.panel h2 { font-family: 'Special Elite', cursive; margin-bottom: 8px; }
.panel pre { font-size: 12px; color: #3a3a3a; }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN</h1>
<select>
<option>Project Rotterdam</option>
<option>Hormuz Export</option>
<option>Cargo Nexus</option>
</select>
<span>idle</span>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">
<pre>/run-topic "Container Inspection"</pre>
</div>
<div class="chat-message system">
<pre>FOB Rotterdam: Initiating manifest scan for cargo hold 7B. Stowage plan validated. No anomalies detected.</pre>
</div>
<div class="chat-message user">
<pre>/stampede "Port Security Drill"</pre>
</div>
<div class="chat-message system">
<pre>Simulating port lockdown protocol. All containers tagged with RFID markers. Estimated duration: 45 minutes.</pre>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="FOB Rotterdam terminal #7">
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<h2>Preview</h2>
<pre>
┌───────────────────────┐
│ Container ID: 7B-456 │
│ Status: Sealed │
│ Weight: 12.3 tons │
└───────────────────────┘
</pre>
</div>
<div class="panel">
<h2>Paper</h2>
<pre>
BILL OF LADING #H789
PORT OF ORIGIN: ROTTERDAM
PORT OF DISCHARGE: ANTWERP
CARGO: 500 UNITS OF PRECISION INSTRUMENTS
STOWAGE PLAN: 7B-456, 8A-123
</pre>
</div>
<div class="panel">
<h2>Figma</h2>
<pre>
[Design Mockup: Container Inspection UI]
• Thermal imaging overlay
• RFID tag scanner interface
• Real-time weight distribution graph
• Port security alert system
</pre>
</div>
<div class="panel">
<h2>Canva</h2>
<pre>
[Marketing Collage]
"Secure your cargo with Four Horsemen's
end-to-end container tracking.
FOB Rotterdam to global ports."
[SVG ship icon here]
</pre>
</div>
</div>
</main>
</body>
</html>