`data/artifacts/18bd2744dce2/hf-qwen-coder-32b.html`

207 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Designer Wallcoverings</title>
    <style>
        :root {
            --bg: #f7efe6;
            --surface: #fff9f1;
            --ink: #3a2c22;
            --muted: #a08c7a;
            --accent-light: #c65f38;
            --accent-dark: #e0a458;
            --line: 1px solid #ebe9e6;
            --shadow: 0 8px 24px rgba(0,0,0,.12);
            --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
            --glow: 0 0 24px rgba(198, 95, 56, .35);
            --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(--ink);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            background-color: var(--surface);
            padding: 24px;
            box-shadow: var(--shadow);
            z-index: 1000;
        }
        .header h1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 28px;
            letter-spacing: .18em;
            margin: 0;
        }
        .carousel-container {
            width: 1080px;
            height: 1080px;
            position: relative;
            overflow: hidden;
        }
        .carousel-track {
            display: flex;
            transition: transform .7s var(--ease);
        }
        .carousel-slide {
            min-width: 1080px;
            box-sizing: border-box;
            padding: 96px;
            position: relative;
        }
        .slide-content {
            background-color: var(--surface);
            padding: 32px;
            border-radius: 14px;
            box-shadow: var(--shadow);
            transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
        }
        .slide-content:hover {
            transform: translateY(-8px);
            box-shadow: var(--hover-shadow);
        }
        .cover-slide h2 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 67px;
            margin-bottom: 32px;
        }
        .color-swatch {
            width: 100%;
            height: 48px;
            background-color: var(--accent-light);
            border-radius: 8px;
            box-shadow: var(--glow);
            margin-bottom: 24px;
        }
        .color-description h3 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 38px;
            margin-bottom: 16px;
        }
        .color-description p {
            font-size: 21px;
            color: var(--muted);
            margin-bottom: 24px;
        }
        .cta-slide h2 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 50px;
            text-align: center;
        }
        .carousel-dots {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 16px;
        }
        .dot {
            width: 12px;
            height: 12px;
            background-color: var(--muted);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color .3s ease-in-out;
        }
        .dot.active {
            background-color: var(--accent-light);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>DESIGNER WALLCOVERINGS</h1>
    </div>
    <div class="carousel-container">
        <div class="carousel-track" id="carouselTrack">
            <div class="carousel-slide">
                <div class="slide-content">
                    <h2>TERRACOTTA & SAGE</h2>
                </div>
            </div>
            <div class="carousel-slide">
                <div class="slide-content">
                    <div class="color-swatch"></div>
                    <div class="color-description">
                        <h3>Oatmeal</h3>
                        <p>Perfect for living rooms, adding a warm and cozy feel.</p>
                    </div>
                </div>
            </div>
            <div class="carousel-slide">
                <div class="slide-content">
                    <div class="color-swatch" style="background-color: #2f4c39;"></div>
                    <div class="color-description">
                        <h3>Celadon</h3>
                        <p>Great for kitchens, bringing a fresh and calming vibe.</p>
                    </div>
                </div>
            </div>
            <div class="carousel-slide">
                <div class="slide-content">
                    <div class="color-swatch" style="background-color: #c65f38;"></div>
                    <div class="color-description">
                        <h3>Terracotta</h3>
                        <p>Ideal for bedrooms, offering a rich and inviting atmosphere.</p>
                    </div>
                </div>
            </div>
            <div class="carousel-slide">
                <div class="slide-content cta-slide">
                    <h2>EXPLORE MORE PALETTES</h2>
                </div>
            </div>
        </div>
        <div class="carousel-dots" id="carouselDots"></div>
    </div>
    <script>
        const track = document.getElementById('carouselTrack');
        const slides = Array.from(document.querySelectorAll('.carousel-slide'));
        const dotsContainer = document.getElementById('carouselDots');
        let currentIndex = 0;

        function createDot(index) {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => moveToSlide(index));
            dotsContainer.appendChild(dot);
        }

        slides.forEach((slide, index) => createDot(index));

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

        function moveToSlide(index) {
            if (index >= 0 && index < slides.length) {
                currentIndex = index;
                track.style.transform = `translateX(-${currentIndex * 1080}px)`;
                updateDots();
            }
        }

        document.addEventListener('keydown', event => {
            if (event.key === 'ArrowRight') moveToSlide(currentIndex + 1);
            else if (event.key === 'ArrowLeft') moveToSlide(currentIndex - 1);
        });
    </script>
</body>
</html>