← back to Hormuzy
mockups/052-egyptian-tomb.html
74 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>egyptian-tomb-fresco — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #3a2515 0%, #d4b896 100%); color: #0e3a5f; height: 100%; width: 100%; }
body { display: flex; flex-direction: column; font-size: 16px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #3a2515; color: #d4b896; font-family: 'Cinzel', serif; }
header h1 { font-size: 28px; }
.project-picker { background: #fff8e0; border: 2px solid #bf3922; padding: 6px 12px; border-radius: 4px; }
.status-indicator { padding: 6px 12px; background: #bf3922; color: #fff8e0; border-radius: 4px; }
main { display: flex; flex:1; overflow: hidden; }
.chat-pane { width: 40%; border-right: 2px solid #d4b896; padding: 20px; overflow-y: auto; }
.chat-log { display: flex; flex-direction: column; gap: 16px; }
.message { background: #fff8e0; padding: 12px 16px; border-left: 4px solid #bf3922; border-radius: 4px; }
.input-bar { margin-top: 20px; display: flex; }
.input-bar input { flex:1; padding: 10px; font-size: 14px; }
.input-bar button { padding: 10px 20px; margin-left: 10px; background: #d4b896; color: #3a2515; border: none; border-radius: 4px; }
.panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
.panel { background: #fff8e0; padding: 20px; border: 2px solid #d4b896; border-radius: 6px; }
.panel h2 { margin-top: 0; font-family: 'Cinzel', serif; color: #bf3922; }
.panel p { font-size: 14px; color: #0e3a5f; }
@media (max-width: 1440px) { body { font-size: 15px; } }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN OF THE SUN</h1>
<div>
<select class="project-picker">
<option>Pyramid of the Unseen</option>
<option>Valley of the Shattered Sceptre</option>
<option>Temple of the Double Crown</option>
</select>
<span class="status-indicator">idle</span>
</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="message">/run-topic: "The scribe-of-the-house requests a new chamber for the Book of the Dead"</div>
<div class="message">[System] Initiating ritual... Aligning glyphs with the constellations of Ra's chariot</div>
<div class="message">/stampede: "Carve the names of the 42 judges into the inner sanctum"</div>
<div class="message">[System] Stampede engaged. Obsidian chisels now carving hieroglyphs of judgment</div>
</div>
<div class="input-bar">
<input type="text" placeholder="Speak to the overseer...">
<button>SEND</button>
</div>
</div>
<div class="panels">
<div class="panel">
<h2>Preview</h2>
<p>The walls shimmer with the glow of the Eye of Horus. Shadows of the underworld dance in the fresco, their forms shifting like the sands of the Nile. A cartouche bearing the name "Hormuz" is etched in gold leaf.</p>
</div>
<div class="panel">
<h2>Paper</h2>
<p>Scrolls of papyrus lie unfurled on the stone table. Notes in the hand of the scribe: "The sarcophagus must be aligned with the cardinal points. The jackal guardian's eyes must be inlaid with lapis lazuli."</p>
</div>
<div class="panel">
<h2>Figma</h2>
<p>Vector paths trace the contours of a falcon's wing, the symbol of Ra. The design board shows layers: base (sandstone), mid (gold leaf), top (lapis lazuli). A compass rose points to the rising sun.</p>
</div>
<div class="panel">
<h2>Canva</h2>
<p>The color palette is set: ochre for the desert, indigo for the night sky, crimson for the blood of the pharaoh. A grid of 36 squares represents the 360 days of the Egyptian calendar, each square a different shade of the tomb's fresco.</p>
</div>
</div>
</main>
</body>
</html>