`data/artifacts/15bc10e7ee25/qwen25-7b.html`

212 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grandmillennial Lookbook</title>
    <style>
        :root {
            --bg-color: #f7efe6;
            --surface-color: #fff9f1;
            --text-color: #3a2c22;
            --muted-color: #a08c7a;
            --accent-color: #c65f38;
        }

        body {
            font-family: 'Didot', serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .carousel {
            width: 80%;
            max-width: 600px;
            position: relative;
        }

        .slide {
            display: none;
            padding: 24px;
            border-radius: 14px;
            background-color: var(--surface-color);
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
            transition: all .7s cubic-bezier(.22,1,.36,1) both;
        }

        .slide.active {
            display: block;
        }

        .header {
            font-family: 'Didot', serif;
            color: #1c1a17;
            text-align: center;
            margin-bottom: 24px;
        }

        .card {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        h2 {
            font-size: 38px;
            line-height: 45px;
            margin-bottom: 8px;
            letter-spacing: .15em;
        }

        p {
            font-size: 16px;
            line-height: 24px;
        }

        svg {
            width: 100%;
            height: auto;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }

        .next, .prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 3rem;
            color: var(--accent-color);
        }

        .next { right: 24px; }
        .prev { left: 24px; }

        .dots {
            position: absolute;
            bottom: 16px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .dot {
            margin: 0 8px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--muted-color);
            cursor: pointer;
            opacity: .6;
            transition: opacity .2s ease-in-out;
        }

        .dot.active {
            background-color: var(--accent-color);
            opacity: 1;
        }
    </style>
</head>
<body>
    <header class="header">DESIGNER WALLCOVERINGS</header>
    <div class="carousel">
        <div class="slide active" id="cover-slide">
            <h2>Grandmillennial Lookbook</h2>
        </div>

        <div class="slide" id="pattern-swatch1">
            <div class="card">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="320" height="240" rx="14" fill="url(#paint0_linear_6975_807)"/>
                    <defs>
                        <linearGradient id="paint0_linear_6975_807" x1="0.047619" y1="32.693" x2="0.047619" y2="194.307" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#C65F38"/>
                            <stop offset="1" stop-color="#E0A458"/>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="card-text">
                    <h2>Pattern Swatch 1</h2>
                    <p>Soft, warm tones.</p>
                </div>
            </div>
        </div>

        <div class="slide" id="room-vignette1">
            <div class="card">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="320" height="240" rx="14" fill="url(#paint0_radial_8569_703)"/>
                    <defs>
                        <radialGradient id="paint0_radial_8569_703" cx="50%" cy="50%" r="82.5159%" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#F7EFE6"/>
                            <stop offset="1" stop-color="#FFF9F1"/>
                        </radialGradient>
                    </defs>
                </svg>
                <div class="card-text">
                    <h2>Room Vignette 1</h2>
                    <p>Cozy and inviting.</p>
                </div>
            </div>
        </div>

        <!-- Repeat for additional slides -->

        <div class="slide" id="cta-slide">
            <h2>Explore More</h2>
            <button type="button">Shop Now</button>
        </div>

        <div class="dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <!-- Add more dots as needed -->
        </div>

        <script>
            let currentSlide = 0;
            const slides = document.querySelectorAll('.slide');
            const dots = document.querySelectorAll('.dot');

            function showSlide(index) {
                slides.forEach((slide, i) => slide.classList.toggle('active', i === index));
                dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
            }

            document.addEventListener('keydown', e => {
                if (e.key === 'ArrowLeft') {
                    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
                    showSlide(currentSlide);
                } else if (e.key === 'ArrowRight') {
                    currentSlide = (currentSlide + 1) % slides.length;
                    showSlide(currentSlide);
                }
            });

            dots.forEach((dot, index) => dot.addEventListener('click', () => {
                currentSlide = index;
                showSlide(currentSlide);
            }));
        </script>
    </div>
</body>
</html>