← back to Model Arena
data/artifacts/0a809ac3ac48/qwen3-14b.html
284 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color of the Season</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--line: #eae8e3;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--font-display: 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--scale: 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
font-family: var(--font-display);
font-size: 48px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
padding: var(--scale[4]) var(--scale[8]);
background-color: var(--surface);
box-shadow: var(--shadow);
display: flex;
align-items: center;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--scale[8]) var(--scale[4]);
position: relative;
}
.reel {
width: 100%;
max-width: 600px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background-color: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: var(--scale[8]) var(--scale[4]);
animation: fadeUp 0.7s var(--ease) both;
}
.scene {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.6s var(--ease);
}
.scene.active {
opacity: 1;
}
.hook {
font-size: var(--scale[6]);
text-transform: uppercase;
letter-spacing: 0.15em;
font-family: var(--font-body);
margin-bottom: var(--scale[8]);
}
.hue {
font-size: var(--scale[8]);
font-family: var(--font-display);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--scale[8]);
}
.swatch {
width: 100%;
height: 120px;
margin-bottom: var(--scale[4]);
border: 1px solid var(--line);
box-shadow: 0 0 12px var(--accent);
background-color: var(--accent);
}
.swatch:nth-child(2) {
background: linear-gradient(135deg, var(--accent), var(--muted));
}
.swatch:nth-child(3) {
background: radial-gradient(circle at 30% 30%, var(--accent), var(--muted));
}
.tip {
font-size: var(--scale[4]);
margin-bottom: var(--scale[8]);
text-align: center;
max-width: 80%;
}
.cta {
font-size: var(--scale[6]);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
color: var(--accent);
cursor: pointer;
transition: transform 0.2s var(--ease);
}
.cta:hover {
transform: scale(1.1);
}
.progress-bar {
width: 100%;
height: 6px;
background: var(--muted);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: var(--accent);
transition: width 0.5s var(--ease);
}
.controls {
position: absolute;
bottom: var(--scale[8]);
left: 50%;
transform: translateX(-50%);
font-size: var(--scale[4]);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.play {
color: var(--accent);
}
.pause {
color: var(--text);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes drift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
body {
background: linear-gradient(135deg, #f9f8f5 0%, #f6f4f0 100%);
animation: drift 18s linear infinite;
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<main>
<div class="reel">
<div class="scene active" id="scene0">
<div class="hook">This season it's all about...</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 0%"></div>
</div>
</div>
<div class="scene" id="scene1">
<div class="hue">Celadon</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 33%"></div>
</div>
</div>
<div class="scene" id="scene2">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="progress-bar">
<div class="progress-fill" style="width: 66%"></div>
</div>
</div>
<div class="scene" id="scene3">
<div class="tip">Pair with warm metals for a timeless, elegant look.</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%"></div>
</div>
</div>
<div class="scene" id="scene4">
<div class="cta">Explore Collections</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%"></div>
</div>
</div>
<div class="controls">
<span id="control" class="play">Play</span>
</div>
</div>
</main>
<script>
const scenes = document.querySelectorAll('.scene');
const control = document.getElementById('control');
let currentScene = 0;
let isPlaying = false;
let interval;
function advanceScene() {
scenes[currentScene].classList.remove('active');
currentScene = (currentScene + 1) % scenes.length;
scenes[currentScene].classList.add('active');
updateProgress();
}
function updateProgress() {
const percent = ((currentScene + 1) / scenes.length) * 100;
document.querySelector('.progress-fill').style.width = percent + '%';
}
function togglePlayPause() {
isPlaying = !isPlaying;
if (isPlaying) {
interval = setInterval(advanceScene, 3000);
control.classList.remove('play');
control.classList.add('pause');
control.textContent = 'Pause';
} else {
clearInterval(interval);
control.classList.remove('pause');
control.classList.add('play');
control.textContent = 'Play';
}
}
control.addEventListener('click', togglePlayPause);
// Initial scene
scenes[currentScene].classList.add('active');
updateProgress();
</script>
</body>
</html>