← back to Hormuzy
mockups/026-cassette-mixtape.html
249 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cassette-mixtape — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Open+Sans&display=swap">
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #1a0d2e;
color: #ffe066;
height: 900px;
width: 1440px;
display: flex;
flex-direction: column;
overflow: hidden;
}
header {
height: 80px;
background: linear-gradient(90deg, #ff61a6, #5fb7ff);
display: flex;
align-items: center;
padding: 0 40px;
position: relative;
font-family: 'Bungee Inline', cursive;
color: #0d0617;
text-shadow: 1px 1px 2px #0d0617;
}
header h1 {
font-size: 2.5em;
margin: 0;
}
.project-picker, .status {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
.project-picker select {
background: #ff61a6;
color: #0d0617;
padding: 8px 12px;
border: none;
font-size: 1em;
border-radius: 4px;
}
.status {
background: #ffe066;
padding: 4px 8px;
font-size: 0.8em;
border-radius: 20px;
margin-left: 16px;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-pane {
width: 40%;
background: #1a0d2e;
display: flex;
flex-direction: column;
padding: 20px;
overflow: hidden;
}
.chat-log {
flex: 1;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
border-right: 1px solid #5fb7ff;
}
.chat-message {
margin-bottom: 15px;
padding: 10px;
background: #0d0617;
border-radius: 6px;
box-shadow: inset 0 0 5px #ff61a6;
}
.chat-message.user {
background: #ffe066;
color: #0d0617;
text-align: right;
}
.chat-input {
display: flex;
border-top: 1px solid #5fb7ff;
padding: 10px;
}
.chat-input input {
flex: 1;
padding: 8px;
font-size: 1em;
border: none;
background: #0d0617;
color: #ffe066;
}
.chat-input button {
background: #ff61a6;
color: #0d0617;
border: none;
padding: 8px 16px;
font-size: 1em;
margin-left: 10px;
border-radius: 4px;
cursor: pointer;
}
.panels {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
}
.panel {
background: #0d0617;
border: 2px solid #ff61a6;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.panel-header {
font-family: 'Bungee Inline', cursive;
color: #ff61a6;
padding: 15px;
text-align: center;
background: linear-gradient(135deg, #1a0d2e, #0d0617);
box-shadow: inset 0 0 10px #ff61a6;
}
.panel-body {
flex: 1;
padding: 20px;
color: #ffe066;
font-size: 0.9em;
line-height: 1.6;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.panel-body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, #5fb7ff 20%, transparent 50%), radial-gradient(circle at 70% 70%, #ffe066 20%, transparent 50%);
opacity: 0.1;
pointer-events: none;
}
</style>
</head>
<body>
<header>
<h1>Four Horsemen</h1>
<div class="project-picker">
<select>
<option>Neon Reverie</option>
<option>Cybernetic Dreams</option>
<option>Pixelated Echoes</option>
</select>
</div>
<div class="status">idle</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message user">
<span>/run-topic "Neon Reverie"</span>
</div>
<div class="chat-message">
<span>Side B: Topic loaded. Synthwave textures detected. Initiating tape-speed warp.</span>
</div>
<div class="chat-message user">
<span>/stampede 3</span>
</div>
<div class="chat-message">
<span>Master: Tripling the beat. Vinyl crackle intensifies. Warning: Side A may go rogue.</span>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type /help for commands">
<button>Send</button>
</div>
</div>
<div class="panels">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<div style="display: flex; flex-direction: column; align-items: center;">
<svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h100v60H0z" fill="#ff61a6" />
<rect x="20" y="20" width="60" height="20" fill="#0d0617" />
<text x="50" y="40" font-family="monospace" fill="#ffe066" text-anchor="middle" font-size="14">SIDE A</text>
</svg>
<p>Currently spinning: <strong>Neon Reverie</strong> · 4:22 · Tape speed: 1.5x</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body">
<pre style="font-family: monospace; font-size: 0.8em; line-height: 1.2;">
[00:00] Side A: Needle drop
[01:15] Synthwave loop detected
[02:30] Dub-master override: 3x speed
[03:45] Vinyl crackle: 75% intensity
[04:22] Fade to silence
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body">
<div style="display: flex; align-items: center; justify-content: center;">
<div style="width: 80%; height: 80%; background: #0d0617; border: 2px dashed #ff61a6; display: flex; align-items: center; justify-content: center;">
<svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h100v60H0z" fill="#5fb7ff" />
<text x="50" y="35" font-family="monospace" fill="#0d0617" text-anchor="middle" font-size="16">FIGMA</text>
</svg>
</div>
</div>
<p>Design assets locked in <strong>Side B</strong> · 3D render mode: off</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-body">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 80%; height: 60px; background: #ffe066; border: 2px solid #ff61a6; display: flex; align-items: center; justify-content: center;">
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18" fill="#0d0617" />
<path d="M10 20h20v10H10z" fill="#ff61a6" />
</svg>
</div>
<p>Canva template: <strong>Cyberpunk Poster</strong> · 1200x800px</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>