`data/artifacts/131728b7aeb6/gemma3-12b.html`

300 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Color of the Season - Designer Wallcoverings</title>
    <style>
        :root {
            --bg: #faf8f4;
            --surface: #ffffff;
            --text: #1c1a17;
            --muted: #9b948a;
            --accent: #b0472e; /* Terracotta-Sun */
            --line: rgba(0, 0, 0, .08);
            --shadow: rgba(0, 0, 0, .12);
            --ease: cubic-bezier(.22, 1, .36, 1);
        }

        body {
            margin: 0;
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            overflow: hidden; /* Prevent scrolling */
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 24px;
            background-color: var(--surface);
            box-shadow: 0 2px 8px var(--shadow);
            z-index: 100; /* Ensure it stays on top */
        }

        .wordmark {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 36px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--text);
        }

       /* Reel Container */
        .reel-container {
            flex: 1; /* Take remaining vertical space */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 80px; /* Account for fixed top bar height */
        }

        .scene {
            position: relative;
            width: 100%;
            height: calc(100vh - 80px); /* Match screen dimensions, minus the top bar*/
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }

        .scene.active {
            opacity: 1;
        }

        h1 {
          font-size: 67px;
          font-family: 'Playfair Display', Georgia, serif;
          text-align: center;
          margin-bottom: 32px;
        }

        .caption {
            font-size: 18px;
            text-align: center;
            margin-top: 48px;
        }


        /* Swatches */
        .swatch-container {
            display: flex;
            gap: 32px;
            justify-content: center;
            width: 100%;
        }

        .swatch {
            width: 160px; /* Fixed size for consistency */
            height: 160px;
            border-radius: 14px;
            background-color: var(--accent);
            box-shadow: 0 8px 24px var(--shadow);

        }


        /* Styling Tip */
        .styling-tip {
            font-size: 21px; /* Lead font size */
            text-align: center;
            margin-top: 48px;
        }

        /* CTA */
        .cta {
            font-size: 16px;
            text-decoration: underline;
            cursor: pointer;
            margin-top: 64px;
        }


        /* Progress Bar & Controls */
        #progress-bar-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--surface);
            padding: 8px;
            z-index: 100;
        }

        #progress-bar {
            width: 0%;
            height: 8px;
            background-color: var(--accent);
        }

        #controls {
            position: fixed;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 16px;
        }

        .control-button {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .15em;
            color: var(--muted);
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 4px;
        }

        /* Overlay for Messages */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .8);
            color: var(--surface);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            z-index: 101; /* Above all */
            opacity: 0;
            transition: opacity .3s ease;
        }

        .overlay.active {
            opacity: 1;
        }


    </style>
</head>
<body>

    <div class="top-bar">
        <div class="wordmark">DESIGNER WALLCOVERINGS</div>
    </div>

    <div class="reel-container">

        <div id="scene1" class="scene">
            <h1>This season it's all about...</h1>
        </div>

        <div id="scene2" class="scene">
           <h1>Celadon</h1>
        </div>

        <div id="scene3" class="scene">
            <div class="swatch-container">
                <div class="swatch" style="background-color: #a8d09b;"></div>
                <div class="swatch" style="background-color: #c7e4bc;"></div>
                <div class="swatch" style="background-color: #e1f2d3;"></div>
            </div>
        </div>

        <div id="scene4" class="scene">
           <p class="styling-tip">Pair Celadon with natural wood tones and soft textures for a serene, organic feel.</p>
        </div>

        <div id="scene5" class="scene">
            <a href="#" class="cta">Explore the Collection</a>
        </div>
    </div>


    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div>

    <div id="controls">
        <button class="control-button" id="playPauseBtn">Play</button>
    </div>



    <div class="overlay" id="messageOverlay">
         <p>Message Content Here</p>
    </div>


    <script>
        const scenes = document.querySelectorAll('.scene');
        const progressBar = document.getElementById('progress-bar');
        const playPauseBtn = document.getElementById('playPauseBtn');
        let currentSceneIndex = 0;
        let isPlaying = true;
        const sceneChangeDelay = 5000; // milliseconds - adjust for pace

        function showScene(index) {
            scenes.forEach((scene, i) => {
                if (i === index) {
                    scene.classList.add('active');
                } else {
                    scene.classList.remove('active');
                }
            });
        }

        function updateProgressBar() {
            const progress = (currentSceneIndex / (scenes.length - 1)) * 100;
            progressBar.style.width = `${progress}%`;
        }


        function nextScene() {
            currentSceneIndex++;
            if (currentSceneIndex >= scenes.length) {
                currentSceneIndex = 0;
            }
            showScene(currentSceneIndex);
            updateProgressBar();

             // Auto-advance if playing
            if (isPlaying) {
                setTimeout(nextScene, sceneChangeDelay);
            }
        }


         function togglePlayPause() {
            isPlaying = !isPlaying;
            playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';

            if (isPlaying) {
               nextScene(); // Start or resume auto-advance
            }
         }



       // Initial scene setup
        showScene(0);

        // Auto-advance the first time if playing
        if (isPlaying) {
            setTimeout(nextScene, sceneChangeDelay);
        }


        playPauseBtn.addEventListener('click', togglePlayPause);




    </script>
</body>
</html>