← back to Hormuzy
mockups/034-blueprint-roll.html
230 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>architects-blueprint — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;600&display=swap">
<style>
:root {
--bg: #0e3a5f;
--fg: #ffffff;
--accent: #fcd13e;
--support: #a4c5e8;
--secondary: #1d4d7a;
}
* { 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; }
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
background: var(--secondary);
border-bottom: 1px solid var(--accent);
font-size: 1.25rem;
font-weight: 600;
}
header .brand { font-family: 'Architects Daughter', cursive; }
header select {
padding: 0.5rem 1rem;
border: 1px solid var(--accent);
border-radius: 4px;
background: var(--fg);
color: var(--secondary);
font-size: 0.9rem;
}
header .status {
padding: 0.5rem 1rem;
border-radius: 4px;
background: var(--accent);
color: var(--bg);
font-size: 0.9rem;
}
main {
display: flex;
flex:1;
overflow: hidden;
}
.left-pane {
width: 40%;
display: flex;
flex-direction: column;
padding: 2rem;
border-right: 1px solid var(--accent);
background: var(--support);
}
.chat-log {
flex:1;
overflow-y: auto;
margin-bottom: 1rem;
}
.chat-message {
margin: 1rem 0;
padding: 0.75rem 1rem;
background: var(--fg);
border: 1px solid var(--accent);
border-radius: 6px;
font-size: 0.95rem;
}
.chat-message.user::before { content: "User: "; color: var(--accent); }
.chat-message.agent::before { content: "Agent: "; color: var(--secondary); }
.chat-input {
display: flex;
input {
flex:1;
padding: 0.75rem;
font-size: 1rem;
border: 1px solid var(--accent);
border-radius: 4px 0 0 4px;
}
button {
padding: 0.75rem 1.5rem;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 0 4px 4px 0;
font-weight: 600;
cursor: pointer;
}
}
.right-pane {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
padding: 2rem;
}
.panel {
background: var(--fg);
border: 1px solid var(--accent);
border-radius: 6px;
padding: 1.5rem;
font-size: 0.95rem;
color: var(--secondary);
display: flex;
flex-direction: column;
}
.panel-header {
font-family: 'Architects Daughter', cursive;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.preview {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin-top: 1rem;
}
.preview-item {
background: var(--secondary);
border: 1px solid var(--accent);
border-radius: 4px;
padding: 1rem;
text-align: center;
}
.paper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.paper-note {
background: var(--support);
padding: 0.75rem;
border: 1px solid var(--accent);
border-radius: 4px;
}
.figma {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.figma-layer {
background: var(--fg);
padding: 0.5rem;
border: 1px solid var(--accent);
border-radius: 4px;
}
.canva {
display: flex;
flex-direction: column;
gap: 1rem;
}
.canva-section {
background: var(--support);
padding: 1rem;
border: 1px solid var(--accent);
border-radius: 4px;
}
</style>
</head>
<body>
<header>
<div class="brand">FOUR HORSEMEN STUDIO</div>
<div>
<select>
<option value="project-a">Project A: Urban Renewal Framework</option>
<option value="project-b">Project B: Coastal Infrastructure</option>
<option value="project-c">Project C: Modular Housing Initiative</option>
</select>
<div class="status">idle</div>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic "Structural Integrity Analysis"</div>
<div class="chat-message agent">Initiating topic run. Calculating load distribution matrices for phase 3.</div>
<div class="chat-message user">/stampede "Material Optimization"</div>
<div class="chat-message agent">Engaging stampede protocol. Cross-referencing 427 material samples against 18 stress parameters.</div>
<div class="chat-message user">What is the current status of the load-bearing calculations?</div>
<div class="chat-message agent">Status: 78% complete. Identifying 3 critical junctions requiring reinforcement.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Enter command or message..." />
<button>Send</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="preview">
<div class="preview-item">Floor Plan 1:200</div>
<div class="preview-item">Elevation A</div>
<div class="preview-item">Section B</div>
<div class="preview-item">Detail 3</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="paper">
<div class="paper-note">Note: All material specifications must adhere to ISO 19902-1:2023 standards.</div>
<div class="paper-note">Reminder: Schedule site inspection for 22nd March, 14:00.</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="figma">
<div class="figma-layer">Layer: Structural Grid</div>
<div class="figma-layer">Layer: Load Paths</div>
<div class="figma-layer">Layer: Material Tags</div>
<div class="figma-layer">Layer: Stress Indicators</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="canva">
<div class="canva-section">
<div>Design: Project Overview Slide</div>
<div>Elements: Logo, 3D Model, Timeline</div>
</div>
<div class="canva-section">
<div>Design: Client Presentation Deck</div>
<div>Elements: Material Samples, Cost Breakdown</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>