← back to Hormuzy
mockups/056-monastery-illuminated.html
236 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>monastery-illuminated — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Inter:wght@400;600&display=swap">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff8e7;
font-family: 'Inter', sans-serif;
color: #1a0e00;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(110deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%);
z-index: -1;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
background: #1a0e00;
color: #fff8e7;
font-family: 'UnifrakturCook', serif;
font-size: 2rem;
position: relative;
z-index: 10;
}
header::after {
content: '☧';
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: #d4af37;
}
.project-picker {
position: relative;
margin-left: 2rem;
}
.project-picker select {
padding: 0.5rem 1rem;
background: #fff8e7;
color: #1a0e00;
border: 2px solid #a83232;
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.status-indicator {
padding: 0.5rem 1rem;
background: #0a4d3c;
color: #fff8e7;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
}
.container {
display: flex;
height: calc(100% - 60px);
}
.chat-pane {
width: 40%;
border-right: 1px solid #d4af37;
overflow-y: auto;
padding: 2rem;
background: #fff8e7;
}
.chat-log {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.message {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.message-header {
font-size: 0.85rem;
color: #a83232;
}
.message-body {
background: #fff8e7;
border: 1px solid #d4af37;
padding: 1rem;
border-radius: 4px;
font-size: 1rem;
}
.chat-input {
margin-top: 2rem;
display: flex;
gap: 1rem;
}
.chat-input input {
flex: 1;
padding: 0.75rem;
font-size: 1rem;
border: 2px solid #a83232;
border-radius: 4px;
}
.chat-input button {
padding: 0.75rem 1.5rem;
background: #d4af37;
color: #1a0e00;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
.panels {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
padding: 2rem;
}
.panel {
background: #fff8e7;
border: 1px solid #a83232;
border-radius: 4px;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.panel-header {
font-family: 'UnifrakturCook', serif;
font-size: 1.5rem;
color: #1a0e00;
text-align: center;
position: relative;
}
.panel-header::after {
content: '☧';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
color: #d4af37;
}
.panel-content {
font-size: 0.95rem;
line-height: 1.6;
color: #1a0e00;
}
.panel-content code {
background: #0a4d3c;
color: #fff8e7;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<header>
<div>FOUR HORSEMEN</div>
<div class="project-picker">
<select>
<option>Sanctum of the Unwritten</option>
<option>Chalice of the Red Queen</option>
<option>Parchment of the Unseen</option>
</select>
</div>
<div class="status-indicator">idle</div>
</header>
<div class="container">
<div class="chat-pane">
<div class="chat-log">
<div class="message">
<div class="message-header">[12:34] USER</div>
<div class="message-body">/run-topic: "illumination of the celestial script"</div>
</div>
<div class="message">
<div class="message-header">[12:35] ORCHESTRATOR</div>
<div class="message-body">Engaging sanctum protocols. Aethereal quills activated. Expect radiant calligraphy.</div>
</div>
<div class="message">
<div class="message-header">[12:36] USER</div>
<div class="message-body">/stampede: "golden ink"</div>
</div>
<div class="message">
<div class="message-header">[12:37] ORCHESTRATOR</div>
<div class="message-body">Stampede initiated. 1000 golden ink droplets in flight. Calculating optimal vellum trajectories.</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="command or text">
<button>SEND</button>
</div>
</div>
<div class="panels">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-content">
<p>Behold the radiant script: <code>☧</code> shall be inscribed in gold upon the vellum of the cosmos. The quills of the celestial scribes are poised, their nibs gilded with the light of the first dawn.</p>
<p>Observe the interplay of <code>#d4af37</code> and <code>#0a4d3c</code> in the sacred geometry of the illumination.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-content">
<p>Raw vellum awaits the touch of the quill. The parchment is prepared from the hides of the sacred oxen, stretched and smoothed by the hands of the scribes.</p>
<p>Notes: "Avoid the use of iron gall ink; the vellum shall not be stained. Use only the light of the moon and the gold of the sun."</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-content">
<p>Mockup of the illuminated manuscript: a 12th-century style codex with gilded edges and marginalia of celestial beings. The central illumination depicts the four horsemen in their eternal gallop.</p>
<p>Layer notes: "Apply texture of aged vellum. Use #1a0e00 for ink, #d4af37 for gold leaf."</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-content">
<p>Template for the modern scribe: a digital vellum with placeholder text fields and a gold leaf overlay. Includes a dropdown for selecting the sacred script font.</p>
<p>Instructions: "Select 'UnifrakturCook' for headings, 'Inter' for body text. Apply a parchment texture filter."</p>
</div>
</div>
</div>
</div>
</body>
</html>