← back to Model Arena
data/artifacts/131728b7aeb6/qwen3-14b.html
307 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: #e0e0e0;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--fade-up: 0.7s var(--ease) both;
--stagger: 90ms;
--section-padding: 96px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-96: 96px;
--card-radius: 14px;
--card-gap: 24px;
--glow: 0 0 24px var(--accent)35%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
margin: 0;
overflow: hidden;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: var(--spacing-16) var(--spacing-24);
background: var(--surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 1000;
display: flex;
align-items: center;
font-family: 'Playfair Display', Georgia, serif;
font-size: 24px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
}
.reel-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: var(--section-padding);
}
.reel {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.scene {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
animation: fadeUp var(--fade-up) forwards;
}
.scene.active {
opacity: 1;
}
.hook {
font-size: 48px;
font-family: 'Playfair Display', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
margin-bottom: var(--spacing-32);
animation-delay: 0s;
}
.hue-name {
font-size: 64px;
font-family: 'Playfair Display', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
animation-delay: var(--stagger);
}
.swatch-container {
display: flex;
gap: var(--spacing-32);
margin: var(--spacing-48) 0;
}
.swatch {
width: 120px;
height: 120px;
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: var(--card-radius);
animation: fadeUp var(--fade-up) forwards;
}
.swatch:nth-child(1) {
animation-delay: var(--stagger) * 2;
}
.swatch:nth-child(2) {
animation-delay: var(--stagger) * 3;
}
.swatch:nth-child(3) {
animation-delay: var(--stagger) * 4;
}
.style-tip {
font-size: 24px;
margin-bottom: var(--spacing-32);
animation-delay: var(--stagger) * 5;
}
.cta {
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: var(--spacing-16) var(--spacing-32);
background: var(--accent);
color: var(--text);
border-radius: var(--card-radius);
box-shadow: var(--glow);
animation-delay: var(--stagger) * 6;
}
.progress-bar {
position: absolute;
bottom: var(--spacing-24);
left: 0;
width: 100%;
height: 6px;
background: var(--muted);
border-radius: 100px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: var(--accent);
transition: width 0.5s var(--ease);
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: var(--spacing-24);
background: transparent;
border: 2px solid var(--accent);
color: var(--accent);
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: var(--spacing-8) var(--spacing-16);
border-radius: var(--card-radius);
cursor: pointer;
transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
button:hover {
background: var(--accent);
color: var(--text);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<header>
DESIGNER WALLCOVERINGS
</header>
<div class="reel-container">
<div class="reel">
<div class="scene active" data-scene="0">
<div class="hook">This season it's all about...</div>
</div>
<div class="scene" data-scene="1">
<div class="hue-name">Celadon</div>
</div>
<div class="scene" data-scene="2">
<div class="swatch-container">
<div class="swatch" style="background: #a6d8a6;"></div>
<div class="swatch" style="background: #c0e0c0;"></div>
<div class="swatch" style="background: #d0f0d0;"></div>
</div>
</div>
<div class="scene" data-scene="3">
<div class="style-tip">Pair with warm wood tones and natural textures for a balanced, modern look.</div>
</div>
<div class="scene" data-scene="4">
<div class="cta">Explore the collection</div>
</div>
</div>
<div class="progress-bar">
<div class="progress-bar-fill"></div>
</div>
<button id="toggle">Play/Pause</button>
</div>
<script>
const scenes = document.querySelectorAll('.scene');
const progressBarFill = document.querySelector('.progress-bar-fill');
const toggleButton = document.getElementById('toggle');
let isPlaying = true;
let currentScene = 0;
let interval;
function showScene(index) {
scenes.forEach((scene, i) => {
scene.classList.remove('active');
if (i === index) {
scene.classList.add('active');
}
});
const progress = ((index + 1) / scenes.length) * 100;
progressBarFill.style.width = progress + '%';
}
function startReel() {
if (!isPlaying) return;
if (currentScene >= scenes.length - 1) {
currentScene = 0;
showScene(currentScene);
} else {
currentScene++;
showScene(currentScene);
}
}
function togglePlayPause() {
isPlaying = !isPlaying;
toggleButton.textContent = isPlaying ? 'Pause' : 'Play';
if (isPlaying) {
interval = setInterval(startReel, 3000);
} else {
clearInterval(interval);
}
}
toggleButton.addEventListener('click', togglePlayPause);
showScene(currentScene);
interval = setInterval(startReel, 3000);
</script>
</body>
</html>