`data/artifacts/145b5d1ed01f/qwen3-14b.html`

250 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Design Lookbook</title>
  <style>
    :root {
      --bg: #0d0d0f;
      --surface: #17171c;
      --text: #f5f2ea;
      --muted: #8a8578;
      --accent: #c9a961;
      --glow-accent: #c9a961;
      --card-radius: 14px;
      --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      --hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
      --glow: 0 0 24px rgba(var(--accent), 0.35);
      --spacing: 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      --h1: 67px;
      --h2: 50px;
      --h3: 38px;
      --lead: 21px;
      --body: 16px;
      --caption: 12px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 64px;
      background: var(--surface);
      display: flex;
      align-items: center;
      padding-left: 32px;
      font-family: var(--font-display);
      font-size: var(--h3);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .carousel {
      position: relative;
      height: 100vh;
      max-height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 64px;
    }

    .slide {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: var(--surface);
      text-align: center;
      padding: 64px 32px;
      font-family: var(--font-body);
      transition: all 0.3s ease;
    }

    .slide.active {
      display: flex;
    }

    .slide h1 {
      font-size: var(--h1);
      font-family: var(--font-display);
      margin-bottom: 32px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text);
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .slide .pattern {
      width: 200px;
      height: 100px;
      background: repeating-linear-gradient(
        45deg,
        var(--accent),
        var(--accent) 20px,
        var(--muted) 20px,
        var(--muted) 40px
      );
      margin-bottom: 32px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: var(--card-shadow);
      border-radius: var(--card-radius);
    }

    .slide .room {
      width: 100%;
      max-width: 600px;
      height: 300px;
      background: url('https://source.unsplash.com/600x300/?interior,design') no-repeat center center;
      background-size: cover;
      margin-bottom: 24px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: var(--card-shadow);
      border-radius: var(--card-radius);
    }

    .slide .note {
      font-size: var(--body);
      color: var(--muted);
      margin-bottom: 48px;
    }

    .slide .cta {
      font-size: var(--h2);
      font-family: var(--font-display);
      margin-top: 32px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--accent);
      text-shadow: var(--glow);
      transition: transform 0.2s ease;
    }

    .slide .cta:hover {
      transform: scale(1.05);
    }

    .dots {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 16px;
    }

    .dot {
      width: 12px;
      height: 12px;
      background: var(--muted);
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.2s ease;
    }

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

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

    .fade-up {
      animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  </style>
</head>
<body>
  <div class="top-bar">DESIGNER WALLCOVERINGS</div>
  <div class="carousel" id="carousel">
    <div class="slide active fade-up">
      <h1>GRANDMILLIONAIRE</h1>
      <div class="pattern"></div>
      <div class="room"></div>
      <div class="note">Opulent textures meet refined restraint.</div>
    </div>
    <div class="slide fade-up">
      <div class="pattern" style="background: repeating-linear-gradient(45deg, #c9a961, #c9a961 20px, #8a8578 20px, #8a8578 40px)"></div>
      <div class="room" style="background: url('https://source.unsplash.com/600x300/?antique,design') no-repeat center center;"></div>
      <div class="note">A blend of heirloom craftsmanship and modern minimalism.</div>
    </div>
    <div class="slide fade-up">
      <div class="pattern" style="background: repeating-linear-gradient(45deg, #c9a961, #c9a961 20px, #8a8578 20px, #8a8578 40px)"></div>
      <div class="room" style="background: url('https://source.unsplash.com/600x300/?luxury,interior') no-repeat center center;"></div>
      <div class="note">Statement fabrics in a timeless, elegant palette.</div>
    </div>
    <div class="slide fade-up">
      <div class="cta">EXPLORE MORE</div>
    </div>
  </div>
  <div class="dots" id="dots">
    <div class="dot active" data-index="0"></div>
    <div class="dot" data-index="1"></div>
    <div class="dot" data-index="2"></div>
    <div class="dot" data-index="3"></div>
  </div>
  <script>
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.dot');
    let currentSlide = 0;

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

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        const index = parseInt(dot.getAttribute('data-index'));
        currentSlide = index;
        updateSlides(index);
      });
    });

    function autoSlide() {
      currentSlide = (currentSlide + 1) % slides.length;
      updateSlides(currentSlide);
    }

    setInterval(autoSlide, 8000);
  </script>
</body>
</html>