← back to Hormuzy
mockups/053-bauhaus-school.html
251 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bauhaus-school — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bayon&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<style>
html, body {
margin: 0;
padding: 0;
width: 1440px;
height: 900px;
font-family: 'Inter', sans-serif;
background-color: #fdfaf3;
color: #000000;
display: flex;
flex-direction: column;
}
header {
height: 60px;
background-color: #0e3a5f;
color: #fdfaf3;
display: flex;
align-items: center;
padding: 0 24px;
font-family: 'Bayon', serif;
font-size: 24px;
position: relative;
}
header select {
position: absolute;
right: 80px;
background: transparent;
border: none;
color: #fdfaf3;
font-size: 16px;
padding: 4px 8px;
cursor: pointer;
}
header .status {
position: absolute;
right: 24px;
padding: 4px 12px;
background: #fcd13e;
border-radius: 4px;
font-size: 14px;
}
main {
flex: 1;
display: flex;
overflow: hidden;
}
.chat-pane {
width: 40%;
border-right: 1px solid #a83232;
display: flex;
flex-direction: column;
}
.chat-log {
flex: 1;
overflow-y: auto;
padding: 16px;
background: #fdfaf3;
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-message {
display: flex;
gap: 12px;
}
.chat-message.user {
align-items: flex-end;
}
.chat-message.system {
align-items: flex-start;
}
.chat-message .text {
background: #0e3a5f;
color: #fdfaf3;
padding: 8px 12px;
border-radius: 8px;
max-width: 60%;
}
.chat-input {
padding: 12px;
border-top: 1px solid #a83232;
display: flex;
gap: 8px;
}
.chat-input input {
flex: 1;
padding: 8px;
font-size: 14px;
border: none;
outline: none;
background: #fdfaf3;
}
.chat-input button {
background: #0e3a5f;
color: #fdfaf3;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.workspace {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
padding: 24px;
}
.panel {
background: #fdfaf3;
border: 1px solid #a83232;
border-radius: 8px;
display: flex;
flex-direction: column;
}
.panel-header {
padding: 12px;
font-weight: 600;
background: #0e3a5f;
color: #fdfaf3;
border-bottom: 1px solid #a83232;
}
.panel-body {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #000000;
}
.panel-body svg {
width: 100%;
max-width: 200px;
}
.panel-body .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
height: 100%;
}
.panel-body .grid div {
background: #0e3a5f;
border-radius: 4px;
}
.panel-body .sketch {
border: 1px dashed #a83232;
padding: 12px;
}
.panel-body .component {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.panel-body .component div {
background: #0e3a5f;
padding: 8px 12px;
border-radius: 4px;
color: #fdfaf3;
}
.panel-body .layout {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.panel-body .layout div {
flex: 1 1 200px;
background: #0e3a5f;
padding: 12px;
border-radius: 4px;
color: #fdfaf3;
}
</style>
</head>
<body>
<header>
FOUR HORSEMEN STUDIO
<select>
<option>Project Neon</option>
<option>Hormuz Protocol</option>
<option>Klee's Grid</option>
</select>
<div class="status">idle</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message user">
<div class="text">/run-topic: generative grid systems</div>
</div>
<div class="chat-message system">
<div class="text">Executing topic: generative grid systems. Initializing Dessau module.</div>
</div>
<div class="chat-message user">
<div class="text">/stampede: 3</div>
</div>
<div class="chat-message system">
<div class="text">Stampede mode engaged. Generating 3 variants. Estimated duration: 12s.</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="command or text">
<button>→</button>
</div>
</div>
<div class="workspace">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" fill="#0e3a5f" stroke="#a83232" stroke-width="2"/>
<circle cx="50" cy="50" r="20" fill="#fcd13e"/>
<line x1="10" y1="10" x2="90" y2="90" stroke="#a83232" stroke-width="2"/>
</svg>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body sketch">
<div>• 3x3 modular grid</div>
<div>• 12pt baseline</div>
<div>• 2:3:2 column ratios</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body component">
<div>Base Typography</div>
<div>Grid System</div>
<div>Color Palette</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-body layout">
<div>Hero Section</div>
<div>Call to Action</div>
<div>Footer</div>
</div>
</div>
</div>
</main>
</body>
</html>