← back to Hormuzy
mockups/055-russian-constructivist.html
110 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>russian-constructivist — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter&display=swap">
<style>
html,body{margin:0;padding:0;min-height:100%;background:#fdfaf3;font-family:Inter, sans-serif;color:#1a1a1a}
*{box-sizing:border-box}
body{display:flex;flex-direction:column;overflow-x:hidden}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 48px;background:#a83232;color:#fdfaf3;font-family:Bungee Inline, cursive}
header h1{font-size:2.5rem;margin:0}
header select{padding:8px 16px;background:#fcd13e;border:none;border-radius:4px;font-size:1rem}
header .status{display:flex;align-items:center;font-size:1rem}
.status span{margin-left:16px}
.main{display:flex;flex:1}
.left-pane{width:40%;padding:24px;background:#fdfaf3;overflow-y:auto}
.chat-log{max-height:calc(100% - 80px)}
.chat-message{margin:16px 0;padding:12px 16px;background:#fdfaf3;border:2px solid #a83232;border-radius:4px}
.chat-message.user{background:#fcd13e}
.chat-input{position:fixed;bottom:0;left:0;width:40%;padding:16px;display:flex}
.chat-input input{flex:1;padding:8px 12px;border:2px solid #a83232;border-radius:4px;margin-right:8px}
.chat-input button{padding:8px 16px;background:#a83232;color:#fdfaf3;border:none;border-radius:4px;font-weight:bold}
.right-pane{width:60%;display:flex;flex-direction:column}
.sub-panels{flex:1;display:flex;flex-wrap:wrap;padding:24px}
.panel{flex:1 1 48%;min-width:48%;margin:12px;background:#fdfaf3;border:2px solid #a83232;border-radius:4px;overflow:hidden;position:relative}
.panel-header{padding:16px;background:#a83232;color:#fdfaf3;text-align:center;font-weight:bold}
.panel-body{padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.panel-body svg{width:100%;max-width:300px}
.panel-body .diagonal{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fcd13e 25%,transparent 25%,transparent 75%,#fcd13e 75%,#fcd13e 100%)}
.panel-body .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel-body .worker{width:100%;display:flex;align-items:center;font-size:1.2rem}
.panel-body .worker svg{width:48px;margin-right:16px}
.panel-body .text{font-size:1.1rem;line-height:1.4}
.panel-body .stampede{position:relative}
.panel-body .stampede::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:#a83232}
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN STUDIO</h1>
<div>
<select>
<option>Project Red</option>
<option>Project Blue</option>
<option>Project Green</option>
</select>
<div class="status"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#fdfaf3"/><path d="M10 6L6 10" stroke="#a83232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>idle</span></div>
</div>
</header>
<div class="main">
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic: "Constructivist typography in industrial design"</div>
<div class="chat-message">[SYSTEM] Initiating stampede mode. Workers mobilized. Diagonals activated.</div>
<div class="chat-message user">/stampede: "Generate 3 variants for the poster"</div>
<div class="chat-message">[SYSTEM] Variant 1: Bold red text on white with black diagonals. Variant 2: Yellow block letters with geometric overlays. Variant 3: Monochrome grid with red accents.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type command...">
<button>/</button>
</div>
</div>
<div class="right-pane">
<div class="sub-panels">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="200" fill="#fdfaf3"/>
<text x="100" y="100" font-family="Inter" font-size="48" fill="#a83232" text-anchor="middle" dominant-baseline="middle" transform="rotate(45 100 100)">FOUR</text>
</svg>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body">
<div class="grid">
<div class="worker"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="#a83232"/></svg>Worker 1: Cutting</div>
<div class="worker"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Worker 2: Assembling</div>
<div class="worker"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Worker 3: Painting</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body">
<div class="diagonal"></div>
<div class="stampede">
<div class="text">DIAGONAL LAYOUT</div>
<div class="text">GEOMETRIC OVERLAYS</div>
<div class="text">RED ACCENTS</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-body">
<div class="grid">
<div><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Block 1: Text</div>
<div><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6l-6-4h10v10z" fill="#a83232"/></svg>Block 2: Image</div>
<div><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Block 3: Grid</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>