← back to Hormuzy
mockups/066-magazine-editorial.html
84 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>magazine-editorial — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Serif+Pro:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Source Serif Pro', serif; background: #fdfaf3; color: #1a1a1a; height: 100%; }
body { display: flex; flex-direction: column; font-size: 16px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #ddd5c2; font-family: 'Playfair Display', serif; }
header h1 { margin: 0; font-size: 24px; }
header .project-picker { background: #ddd5c2; padding: 6px 12px; border-radius: 4px; font-size: 14px; }
header .status { padding: 6px 12px; border-radius: 20px; background: #a83232; color: #fff; font-size: 14px; }
main { display: flex; flex: 1; }
.left-pane { width: 40%; border-right: 1px solid #666666; overflow-y: auto; padding: 30px; }
.chat-log { display: flex; flex-direction: column; gap: 15px; }
.chat-message { display: flex; flex-direction: column; }
.user { align-self: flex-end; text-align: right; }
.system { align-self: flex-start; text-align: left; }
.chat-input { margin-top: 20px; display: flex; }
.chat-input input { flex: 1; padding: 10px; font-size: 14px; }
.chat-input button { padding: 10px 20px; background: #a83232; color: #fff; border: none; margin-left: 10px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
.panel { background: #fff; border: 1px solid #ddd5c2; border-radius: 6px; padding: 20px; }
.panel h2 { margin: 0 0 15px; font-family: 'Playfair Display', serif; font-size: 18px; color: #a83232; }
.panel p { margin: 0; font-size: 14px; color: #666666; }
@media (max-width: 1440px) { body { font-size: 15px; } }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN STUDIO</h1>
<div>
<select class="project-picker">
<option>Project: Vol. XII</option>
<option>Project: HORMUZ</option>
<option>Project: The Last Interview</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">
<div>/run-topic: Fashion in the Age of Algorithms</div>
</div>
<div class="chat-message system">
<div>Initiating topic synthesis. Please wait while the editorial team curates perspectives from 2024's most provocative fashion theorists.</div>
</div>
<div class="chat-message user">
<div>/stampede: Generate 5 variant layouts for the lead article</div>
</div>
<div class="chat-message system">
<div>Stampede engaged. Visuals department mobilized. Expect 3D mockups by 17:00 CST.</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type a command or query..." />
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<h2>Preview</h2>
<p>Magazine spread mockup: A single page from Vol. XII, featuring a full-bleed photograph of a 1920s flapper in a digital art filter, with a pull quote in bold italics: "The future is a relic we've already seen."</p>
</div>
<div class="panel">
<h2>Paper</h2>
<p>Editorial note: "Consider the typographic hierarchy in the lead article. The subhead should be a whisper, not a shout. Use 14pt Source Serif Pro with 2pt leading for the body."</p>
</div>
<div class="panel">
<h2>Figma</h2>
<p>Design draft: A 3D isometric mockup of the magazine cover, with interactive elements for the "stampede" feature. Layers include a textured paper background and a holographic foil overlay.</p>
</div>
<div class="panel">
<h2>Canva</h2>
<p>Layout sketch: A responsive grid for the digital edition, featuring a hero image with a dynamic caption that changes based on user interaction. Placeholder text: "Vol. XII: The Unseen Thread."</p>
</div>
</div>
</main>
</body>
</html>