`data/artifacts/131728b7aeb6/hf-qwen-coder-32b.html`

219 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 Reel</title>
    <style>
        :root {
            --bg: #faf8f4;
            --surface: #ffffff;
            --ink: #1c1a17;
            --muted: #9b948a;
            --accent: #b0472e;
            --line: #eae6df;
            --shadow: 0 8px 24px rgba(0,0,0,.12);
            --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
            --glow: 0 0 24px rgba(176, 71, 46, .35);
            --ease: cubic-bezier(.22,1,.36,1);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg);
            color: var(--ink);
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--bg);
            padding: 16px;
            box-shadow: var(--shadow);
            z-index: 1000;
        }
        .wordmark {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 24px;
            letter-spacing: .18em;
            text-transform: uppercase;
        }
        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 64px;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            position: relative;
        }
        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 96px 24px;
            scroll-snap-align: start;
            position: relative;
        }
        .hook {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 38px;
            margin-bottom: 24px;
        }
        .color-name {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 67px;
            margin-bottom: 24px;
        }
        .swatches {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }
        .swatch {
            width: 150px;
            height: 150px;
            border-radius: 14px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        .swatch::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .3));
            opacity: 0;
            transition: opacity .3s ease-in-out;
        }
        .swatch:hover::before {
            opacity: 1;
        }
        .tip {
            font-size: 21px;
            margin-bottom: 48px;
        }
        .cta {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 38px;
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid var(--accent);
            transition: opacity .2s ease-in-out;
        }
        .cta:hover {
            opacity: .7;
        }
        .controls {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
        }
        .progress-bar {
            width: 100%;
            height: 4px;
            background-color: var(--line);
            border-radius: 2px;
            overflow: hidden;
            margin-right: 32px;
        }
        .progress {
            height: 100%;
            width: 0;
            background-color: var(--accent);
            transition: width .7s var(--ease);
        }
        .play-pause {
            font-size: 16px;
            color: var(--muted);
            cursor: pointer;
            letter-spacing: .15em;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <header>
        <div class="wordmark">DESIGNER WALLCOVERINGS</div>
    </header>
    <main>
        <section id="hook">
            <div class="hook">This season it's all about...</div>
        </section>
        <section id="color-name" style="--color: #a0c4ff;">
            <div class="color-name">Celadon</div>
            <div class="swatches">
                <div class="swatch" style="background-color: #a0c4ff;"></div>
                <div class="swatch" style="background-image: radial-gradient(circle, #a0c4ff, #89b3d7);"></div>
                <div class="swatch" style="background-image: linear-gradient(120deg, #a0c4ff, #eaf5fc);"></div>
            </div>
            <div class="tip">Add a touch of Celadon to your space for a serene and refreshing look.</div>
            <a href="#" class="cta">Shop Now</a>
        </section>
    </main>
    <div class="controls">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <div class="play-pause" id="togglePlayPause">PAUSE</div>
    </div>
    <script>
        const sections = document.querySelectorAll('section');
        const progress = document.querySelector('.progress');
        const togglePlayPause = document.getElementById('togglePlayPause');
        let currentIndex = 0;
        let interval;
        
        function showSection(index) {
            sections.forEach((sec, i) => sec.style.display = i === index ? 'flex' : 'none');
            progress.style.width = ((index + 1) / sections.length * 100) + '%';
        }
        
        function nextSection() {
            currentIndex = (currentIndex + 1) % sections.length;
            showSection(currentIndex);
        }
        
        function startInterval() {
            interval = setInterval(nextSection, 3000);
            togglePlayPause.textContent = 'PAUSE';
        }
        
        function stopInterval() {
            clearInterval(interval);
            togglePlayPause.textContent = 'PLAY';
        }
        
        togglePlayPause.addEventListener('click', () => {
            if (interval) {
                stopInterval();
            } else {
                startInterval();
            }
        });
        
        showSection(currentIndex);
        startInterval();
    </script>
</body>
</html>