`data/artifacts/15bc10e7ee25/gemma3-12b.html`

247 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 */
        :root {
            --bg-color: #faf8f4;
            --surface-color: #ffffff;
            --text-color: #1c1a17;
            --muted-color: #9b948a;
            --accent-color-1: #b0472e;
            --accent-color-2: #2f4c39;
            --caption-size: 12px;
            --body-size: 16px;
            --lead-size: 21px;
            --h3-size: 28px;
            --h2-size: 38px;
            --h1-size: 50px;
            --display-size: 67px;
            --spacing-scale: 4/8/12/16/24/32/48/64/96/128px;
            --card-radius: 14px;
            --grid-gap: 24px;
        }

        body {
            font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        header {
            background-color: var(--surface-color);
            padding: 32px;
            text-align: center;
        }

        h1 {
            font-family: 'Playfair Display', serif;
            font-size: var(--display-size);
            margin: 0;
            line-height: 1;
            color: #1c1a17;
        }

        .carousel-container {
            padding: 96px;
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
        }

        .card {
            background-color: var(--surface-color);
            border-radius: var(--card-radius);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            padding: 32px;
            margin-bottom: 48px;
            width: calc(100% - 2 * var(--grid-gap)); /* Adjust width to fit grid */
            display: inline-block; /* Required for horizontal scrolling */
            transition: transform .3s ease;
        }

        .card:hover {
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
            transform: translateY(-5px);
        }

        .card img {
            width: 100%;
            border-radius: var(--card-radius);
            margin-bottom: 24px;
        }

        .card-text {
            display: flex;
            flex-direction: column;
        }

        h2 {
            font-family: 'Didot', serif;
            font-size: var(--h2-size);
            margin: 0;
            line-height: 1.2;
        }

        p {
            font-size: var(--body-size);
            line-height: 1.6;
            margin: 8px 0;
        }

        .pattern-swatch {
            width: 150px;
            height: 150px;
            background: linear-gradient(to right, var(--accent-color-1) 0%, var(--accent-color-2) 100%);
            border-radius: 8px;
            margin-right: 24px;
        }

        .room-vignette {
            width: 350px;
            height: 250px;
            background: linear-gradient(to bottom, #fbf7e6, #eee9d8); /* Simulating a room */
            border-radius: 8px;
        }

        .cta {
            text-align: center;
            padding: 32px;
        }

        .cta button {
            background-color: var(--accent-color-1);
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: var(--lead-size);
            border-radius: 8px;
            cursor: pointer;
        }

        /* Dots */
        .dots {
            text-align: center;
            margin-top: 16px;
        }

        .dots button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ccc;
            border: none;
            padding: 0;
            margin: 0 4px;
            cursor: pointer;
        }

        .dots button.active {
            background-color: var(--accent-color-1);
        }

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

    </style>
</head>
<body>

    <header>
        <h1>DESIGNER WALLCOVERINGS</h1>
    </header>

    <div class="carousel-container">
        <!-- Slide 1 -->
        <div class="card" id="slide1">
            <img src="" alt="Grandmillennial Pattern & Room">
            <div class="card-text">
                <h2>Floral Medallion</h2>
                <p>Pair a classic floral medallion pattern with antique furniture and soft lighting for a cozy, nostalgic feel.</p>
            </div>
            <div style="display: flex; align-items: center;">
                <div class="pattern-swatch" style="background: conic-gradient(from 0deg, #b0472e 90%, #2f4c39);"></div>
                <div class="room-vignette"></div>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="card" id="slide2">
            <img src="" alt="Grandmillennial Pattern & Room">
            <div class="card-text">
                <h2>Toile de Jouy</h2>
                <p>Combine a traditional Toile de Jouy fabric with modern accents and playful artwork to create an unexpected contrast.</p>
            </div>
             <div style="display: flex; align-items: center;">
                <div class="pattern-swatch" style="background: repeating-linear-gradient(45deg, #b0472e 0%,#b0472e 10px ,#2f4c39 10px, #2f4c39 20px);"></div>
                <div class="room-vignette"></div>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="card" id="slide3">
            <img src="" alt="Grandmillennial Pattern & Room">
            <div class="card-text">
                <h2>Chintz</h2>
                <p>Layer a vibrant chintz wallpaper with vintage rugs and comfortable seating for a welcoming, lived-in atmosphere.</p>
            </div>
             <div style="display: flex; align-items: center;">
                <div class="pattern-swatch" style="background: radial-gradient(circle, #b0472e 10%,#2f4c39 60%);"></div>
                <div class="room-vignette"></div>
            </div>
        </div>

         <!-- CTA -->
        <div class="cta">
            <h2>Explore Our Collection</h2>
            <button>Shop Now</button>
        </div>
    </div>

    <div class="dots">
        <button class="active"></button>
        <button></button>
        <button></button>
    </div>

    <script>
        const carouselContainer = document.querySelector('.carousel-container');
        const cards = document.querySelectorAll('.card');
        const dots = document.querySelectorAll('.dots button');
        let currentSlide = 0;

        function updateDots() {
            dots.forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }


        // Initial setup: Activate the first dot
        updateDots();

        function showSlide(n) {
            cards[n].scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
             updateDots();
        }


       showSlide(0); // Show initial slide.



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