← back to Hormuzy
mockups/091-voting-ballot.html
259 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>voting-ballot — 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>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: 'IBM Plex Sans', sans-serif;
background-color: #fdfaf0;
color: #1a1a1a;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
background-color: #0e2a47;
color: #fdfaf0;
font-family: 'Special Elite', cursive;
font-size: 24px;
position: relative;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #a83232;
}
.project-picker {
position: relative;
margin-left: 24px;
}
.project-picker select {
padding: 8px 16px;
border: 2px solid #666666;
border-radius: 4px;
background-color: #fdfaf0;
color: #1a1a1a;
font-size: 14px;
}
.status-indicator {
padding: 8px 16px;
border-radius: 20px;
background-color: #666666;
color: #0e2a47;
font-size: 14px;
font-weight: 600;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-pane {
width: 40%;
display: flex;
flex-direction: column;
border-right: 1px solid #666666;
overflow: hidden;
}
.chat-log {
flex: 1;
padding: 16px;
overflow-y: auto;
background-color: #fdfaf0;
}
.chat-message {
margin-bottom: 16px;
}
.chat-message.user {
text-align: right;
}
.chat-message.system {
text-align: left;
}
.chat-message .timestamp {
color: #666666;
font-size: 12px;
margin-bottom: 4px;
}
.chat-message .content {
background-color: #1a1a1a;
color: #fdfaf0;
padding: 8px 12px;
border-radius: 6px;
max-width: 70%;
word-wrap: break-word;
}
.chat-input {
display: flex;
padding: 16px;
background-color: #fdfaf0;
border-top: 1px solid #666666;
}
.chat-input input {
flex: 1;
padding: 8px 12px;
border: 2px solid #666666;
border-radius: 4px;
font-size: 14px;
margin-right: 8px;
}
.chat-input button {
padding: 8px 16px;
background-color: #a83232;
color: #fdfaf0;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.panels {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
padding: 16px;
overflow-y: auto;
}
.panel {
background-color: #1a1a1a;
color: #fdfaf0;
padding: 16px;
border-radius: 8px;
display: flex;
flex-direction: column;
}
.panel-header {
font-family: 'Special Elite', cursive;
font-size: 18px;
margin-bottom: 12px;
color: #a83232;
}
.panel-content {
flex: 1;
overflow-y: auto;
font-size: 14px;
line-height: 1.5;
}
.panel-content code {
color: #a83232;
font-family: monospace;
}
.panel-content pre {
background-color: #0e2a47;
color: #fdfaf0;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
font-size: 12px;
}
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN STUDIO</span>
<div class="project-picker">
<select>
<option>Project Hype</option>
<option>Project Echo</option>
<option>Project Vortex</option>
</select>
</div>
<div class="status-indicator">idle</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message user">
<div class="timestamp">10:14 AM</div>
<div class="content">/run-topic "Renaissance of the Grid"</div>
</div>
<div class="chat-message system">
<div class="timestamp">10:15 AM</div>
<div class="content">Topic initiated: Renaissance of the Grid. All agents aligned on 19th-century architectural symmetry.</div>
</div>
<div class="chat-message user">
<div class="timestamp">10:16 AM</div>
<div class="content">/stampede 3</div>
</div>
<div class="chat-message system">
<div class="timestamp">10:17 AM</div>
<div class="content">Stampede mode activated. 3 agents now generating variant layouts. Expected completion: 10:22 AM.</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type a command or message...">
<button>Send</button>
</div>
</div>
<div class="panels">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-content">
<p>Design Concept A: A 19th-century bank vault door rendered in 3D. The texture is a matte black iron with rivet details. The handle is a brass lever with a rose-shaped escutcheon. The door is 3 feet thick, with a 4-inch gap between the door and the frame.</p>
<pre>
// mockup code
const vaultDoor = {
material: 'matte black iron',
handle: 'brass lever',
thickness: '3 feet',
gap: '4 inches'
};
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-content">
<p>Vote on the following: Should the vault door be engraved with the studio's emblem? Options: Yes, No, or Conditional (only if the emblem is a geometric shape).</p>
<pre>
[ ] Yes
[ ] No
[ ] Conditional
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-content">
<p>Current board: "Vault Door 3D Mockup". Layers include: Base Geometry, Rivet Details, Brass Handle, Rose Escutcheon. All layers are grouped under "Vault Door Assembly".</p>
<pre>
// layer structure
Vault Door Assembly
├── Base Geometry
├── Rivet Details
├── Brass Handle
└── Rose Escutcheon
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-content">
<p>Template: "19th-Century Bank Poster". Assets include: Ornate border, serif font, inkwell texture. Placeholder text: "The Vault of Four Horsemen Studio" in 48pt.</p>
<pre>
// template notes
- Border: Ornate gold leaf
- Font: Garamond 48pt
- Background: Inkwell texture
</pre>
</div>
</div>
</div>
</main>
</body>
</html>