`data/artifacts/15fb25164101/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>Shop by Color</title>
  <style>
    :root {
      --bg: #faf8f4;
      --surface: #ffffff;
      --ink: #1c1a17;
      --muted: #9b948a;
      --accent: #b0472e;
      --line: #e8e6e2;
      --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      --glow: 0 0 24px rgba(176, 71, 46, 0.35);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --fade-up: 0.7s var(--ease) both;
      --fade-up-delay: 90ms;
    }

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

    html, body {
      height: 100%;
      font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      overflow: hidden;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 16px 24px;
      font-family: 'Playfair Display', Georgia, serif;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 24px;
      color: var(--ink);
      background: var(--surface);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      z-index: 1000;
    }

    header::after {
      content: "";
      display: block;
      height: 1px;
      background: var(--line);
      margin: 16px 0;
    }

    main {
      padding-top: 80px;
      padding-left: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }

    .color-wheel {
      width: 320px;
      height: 320px;
      background: conic-gradient(
        var(--accent) 0deg,
        var(--accent) 10deg,
        var(--muted) 10deg,
        var(--muted) 20deg,
        var(--ink) 20deg,
        var(--ink) 30deg,
        var(--muted) 30deg,
        var(--muted) 40deg,
        var(--accent) 40deg
      );
      border: 1px solid var(--line);
      border-radius: 50%;
      cursor: pointer;
      transition: box-shadow 0.3s var(--ease);
      touch-action: manipulation;
    }

    .color-wheel:active {
      box-shadow: var(--glow);
    }

    .pattern-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 48px;
      opacity: 0;
      transform: translateY(28px);
      animation: fadeUp 0.7s var(--ease) both;
      animation-delay: 0s;
    }

    .pattern-gallery > div {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px;
      box-shadow: var(--shadow);
      transition: box-shadow 0.2s var(--ease);
    }

    .pattern-gallery > div:hover {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    }

    .pattern-gallery > div > div {
      height: 180px;
      background: var(--muted);
      border-radius: 14px;
      margin-bottom: 16px;
    }

    .pattern-gallery > div > h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 24px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .pattern-gallery > div > p {
      font-size: 14px;
      color: var(--muted);
    }

    .share-bar {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 16px;
      background: var(--surface);
      padding: 12px 24px;
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      font-size: 12px;
    }

    .share-bar button {
      background: none;
      border: none;
      color: var(--accent);
      cursor: pointer;
      padding: 8px;
      transition: color 0.2s var(--ease);
    }

    .share-bar button:hover {
      color: var(--ink);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  </style>
</head>
<body>
  <header>DESIGNER WALLCOVERINGS</header>
  <main>
    <div class="color-wheel" id="colorWheel"></div>
    <div class="pattern-gallery" id="patternGallery">
      <div>
        <div></div>
        <h4>ORANGE BLOSSOM</h4>
        <p>Soft and floral, with warm undertones.</p>
      </div>
      <div>
        <div></div>
        <h4>TEAL GROVE</h4>
        <p>Cool and refreshing, with natural depth.</p>
      </div>
      <div>
        <div></div>
        <h4>PURPLE LILY</h4>
        <p>Elegant and refined, with a rich tone.</p>
      </div>
      <div>
        <div></div>
        <h4>AMBER WAVE</h4>
        <p>Warm and inviting, with golden highlights.</p>
      </div>
    </div>
  </main>
  <div class="share-bar">
    <button>SHARE</button>
    <button>SAVE</button>
    <button>PRINT</button>
  </div>
  <script>
    const colorWheel = document.getElementById('colorWheel');
    const patternGallery = document.getElementById('patternGallery');
    let currentHue = 0;

    colorWheel.addEventListener('click', (e) => {
      const rect = colorWheel.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      const dx = x - centerX;
      const dy = y - centerY;
      const angle = Math.atan2(dy, dx) * (180 / Math.PI);
      const hue = (360 - angle + 360) % 360;
      currentHue = hue;
      updatePatterns();
    });

    function updatePatterns() {
      const patterns = patternGallery.children;
      for (let i = 0; i < patterns.length; i++) {
        const pattern = patterns[i];
        const hue = (currentHue + i * 90) % 360;
        pattern.querySelector('div').style.background = `hsl(${hue}, 60%, 60%)`;
      }
    }
  </script>
</body>
</html>