`data/artifacts/131728b7aeb6/qwen25-7b.html`

117 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: #f7efe6;
            --surface: #fff9f1;
            --text: #3a2c22;
            --muted: #a08c7a;
            --accent: #c65f38;
            --line: 1px solid var(--bg);
            --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18);
            --ease: cubic-bezier(.22,1,.36,1) both;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: 'Didot', Georgia, serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--surface);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            box-shadow: var(--shadow);
        }
        .logo {
            font-size: 38px;
            letter-spacing: .18em;
        }
        .timer-bar {
            width: 100%;
            height: 2px;
            background-color: var(--accent);
            margin-top: 48px;
        }
        .scene {
            position: relative;
            text-align: center;
            padding: 96px;
            box-shadow: var(--shadow);
            animation: fadeUp .7s;
        }
        .caption {
            font-size: 21px;
            letter-spacing: .15em;
            margin-bottom: 32px;
        }
        .cta {
            display: inline-block;
            padding: 16px 48px;
            background-color: var(--accent);
            color: white;
            text-decoration: none;
            font-size: 16px;
            letter-spacing: .15em;
            border-radius: 14px;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">DESIGNER WALLCOVERINGS</div>
    <div class="timer-bar"></div>
</div>

<div id="scene" class="scene">
    <h2 class="caption">This season it's all about...</h2>
    <p class="caption">Celadon</p>
    <div style="display: flex; justify-content: center;">
        <div style="background-color: var(--accent); width: 100px; height: 100px;"></div>
        <div style="margin: 8px; background-color: var(--accent); width: 100px; height: 100px;"></div>
        <div style="margin: 8px; background-color: var(--accent); width: 100px; height: 100px;"></div>
    </div>
    <p class="caption">Styling Tip: Keep the color consistent for a cohesive look.</p>
    <a href="#" class="cta">Explore More</a>
</div>

<script>
    const scenes = document.querySelectorAll('.scene');
    let currentSceneIndex = 0;

    function advanceScene() {
        if (currentSceneIndex >= scenes.length) return;
        scenes[currentSceneIndex].style.opacity = '0';
        setTimeout(() => {
            currentSceneIndex++;
            scenes[currentSceneIndex].style.opacity = '1';
        }, 500);
    }

    setInterval(advanceScene, 3000);

    document.body.style.overflowY = 'hidden'; // Prevent scrolling
</script>

</body>
</html>