`data/artifacts/1cc50031c12f/qwen3-14b.html`

299 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Instagram Carousel Lookbook</title>
  <style>
    :root {
      --bg: #faf8f4;
      --surface: #ffffff;
      --text: #1c1a17;
      --muted: #9b948a;
      --accent: #b0472e;
      --line: #e8e4e0;
      --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      overflow: hidden;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 12px 32px;
      font-family: var(--font-display);
      font-size: 40px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text);
      z-index: 1000;
    }

    .carousel {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 96px;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(28px);
      animation: fadeUp 0.7s var(--ease) forwards;
      pointer-events: none;
    }

    .slide.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .slide-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 48px;
      background-color: var(--surface);
      border-radius: 14px;
      box-shadow: var(--shadow);
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }

    .slide-content h2 {
      font-family: var(--font-display);
      font-size: 38px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text);
    }

    .slide-content p {
      font-size: 16px;
      color: var(--muted);
    }

    .swatch {
      width: 100px;
      height: 100px;
      background-color: var(--accent);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;
    }

    .room {
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #f5f2ea 25%, #eae6e0 50%, #f5f2ea 75%);
      background-size: 400% 400%;
      animation: drift 18s linear infinite;
      border-radius: 14px;
      box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.35);
    }

    .room::before {
      content: '';
      position: absolute;
      top: 20%;
      left: 20%;
      width: 60%;
      height: 60%;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat center center;
      background-size: contain;
    }

    .slide.cta {
      background-color: var(--surface);
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .cta-text {
      font-family: var(--font-display);
      font-size: 38px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .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 0.3s;
    }

    .dot.active {
      background-color: var(--accent);
    }

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

    @keyframes drift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  </style>
</head>
<body>
  <header>DESIGNER WALLCOVERINGS</header>
  <div class="carousel" id="carousel">
    <div class="slide active" data-index="0">
      <div class="slide-content">
        <h2>GRANDMILLENNIAL</h2>
      </div>
    </div>
    <div class="slide" data-index="1">
      <div class="slide-content">
        <div class="swatch"></div>
        <div class="room"></div>
        <p>Soft pastels and ornate detailing for a timeless, romantic feel.</p>
      </div>
    </div>
    <div class="slide" data-index="2">
      <div class="slide-content">
        <div class="swatch"></div>
        <div class="room"></div>
        <p>Luxurious textures and opulent gold accents for a decadent mood.</p>
      </div>
    </div>
    <div class="slide" data-index="3">
      <div class="slide-content">
        <div class="swatch"></div>
        <div class="room"></div>
        <p>Rich damasks and floral prints for an elegant, vintage-inspired look.</p>
      </div>
    </div>
    <div class="slide" data-index="4">
      <div class="slide-content cta">
        <div class="cta-text">EXPLORE THE STYLE</div>
      </div>
    </div>
  </div>
  <div class="dots" id="dots"></div>

  <script>
    const carousel = document.getElementById('carousel');
    const slides = carousel.querySelectorAll('.slide');
    const dots = document.getElementById('dots');
    const totalSlides = slides.length;
    let currentSlide = 0;

    function createDots() {
      dots.innerHTML = '';
      for (let i = 0; i < totalSlides; i++) {
        const dot = document.createElement('div');
        dot.classList.add('dot');
        dot.dataset.index = i;
        if (i === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(i));
        dots.appendChild(dot);
      }
    }

    function goToSlide(index) {
      if (index < 0 || index >= totalSlides) return;
      currentSlide = index;
      slides.forEach((slide, i) => {
        slide.classList.toggle('active', i === index);
      });
      updateDots();
    }

    function updateDots() {
      dots.querySelectorAll('.dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === currentSlide);
      });
    }

    function nextSlide() {
      goToSlide((currentSlide + 1) % totalSlides);
    }

    function prevSlide() {
      goToSlide((currentSlide - 1 + totalSlides) % totalSlides);
    }

    function showNext() {
      if (currentSlide < totalSlides - 1) {
        nextSlide();
      }
    }

    function showPrev() {
      if (currentSlide > 0) {
        prevSlide();
      }
    }

    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight') showNext();
      if (e.key === 'ArrowLeft') showPrev();
    });

    createDots();
  </script>
</body>
</html>