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

211 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 - Designer Wallcoverings</title>
    <style>
        :root {
            --bg: #faf8f4;
            --surface: #ffffff;
            --text: #1c1a17;
            --muted: #9b948a;
            --accent: #b0472e; /* Primary Accent */
            --accent-secondary: #2f4c39;
            --line: rgba(0, 0, 0, .08);
            --shadow: rgba(0, 0, 0, .12);
            --ease: cubic-bezier(.22, 1, .36, 1);
        }

        body {
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        /* Fixed Top Bar */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--surface);
            padding: 32px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
            z-index: 1000; /* Ensure it stays on top */
        }

        .wordmark {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: calc(1em + 2vw); /* Responsive font size */
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--text);
            display: inline-block;
        }

        /* Color Wheel Container */
        .color-wheel-container {
            padding: 96px;
            position: relative; /* For absolute positioning of the wheel */
        }

        /* Color Wheel */
        .color-wheel {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, var(--accent) 0deg, var(--accent) 90deg, var(--accent-secondary) 90deg, var(--accent-secondary) 180deg, var(--accent) 180deg, var(--accent) 270deg, var(--accent-secondary) 270deg, var(--accent-secondary) 360deg);
            cursor: grab;
            user-select: none; /* Prevent text selection on drag */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .color-wheel:active {
            cursor: grabbing;
        }


        /* Pattern Filmstrip Container */
        .pattern-filmstrip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
            padding: 96px;
        }

        /* Pattern Tile */
        .pattern-tile {
            width: calc(33.33% - 24px); /* Three tiles per row, accounting for gap */
            height: 180px;
            border-radius: 14px;
            background-color: var(--surface);
            box-shadow: 0 8px 24px var(--shadow);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            text-align: center; /* Center text within the tile */
        }

         .pattern-tile:hover {
            box-shadow: 0 16px 48px var(--shadow);
        }

        /* Share Bar */
        .share-bar {
            background-color: var(--surface);
            padding: 24px;
            text-align: center; /* Center share buttons */
        }

         .share-button {
            display: inline-block;
            margin: 0 16px;
            padding: 8px 16px;
            background-color: var(--accent);
            color: var(--surface);
            text-decoration: none;
            border-radius: 4px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .wordmark {
                font-size: calc(1em + 1vw);
            }

            .color-wheel-container {
                padding: 48px;
            }

            .pattern-filmstrip {
                padding: 48px;
            }

            .pattern-tile{
              width: calc(50% - 24px); /* Two tiles per row */
            }

        }



    </style>
</head>
<body>

    <div class="top-bar">
        <div class="wordmark">DESIGNER WALLCOVERINGS</div>
    </div>

    <div class="color-wheel-container">
        <div class="color-wheel" id="colorWheel"></div>
    </div>

    <div class="pattern-filmstrip" id="patternFilmstrip">
       <!-- Pattern Tiles will be dynamically added here -->
    </div>

     <div class="share-bar">
        <a href="#" class="share-button">Share on Pinterest</a>
        <a href="#" class="share-button">Share on Facebook</a>
        <a href="#" class="share-button">Share on Twitter</a>
    </div>


    <script>
      const colorWheel = document.getElementById('colorWheel');
      const patternFilmstrip = document.getElementById('patternFilmstrip');

      let angle = 0; // Initial hue angle

       // Sample CSS patterns (replace with more sophisticated patterns)
        const patterns = [
            { name: "Linear Stripe", css: "linear-gradient(to right, var(--accent) 20%, var(--surface) 20%)" },
            { name: "Geometric Block", css: "repeating-radial-gradient(circle, var(--accent) 10px, var(--surface) 10px)" },
            { name: "Subtle Texture", css: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCBtwP//8AAAAASUVORK5CYII=')" },
            { name: "Organic Swirl", css: "repeating-linear-gradient(45deg, var(--accent) 10px, var(--surface) 10px)" }
        ];


      function updatePatterns(hueAngle) {
          patternFilmstrip.innerHTML = ''; // Clear existing tiles

          patterns.forEach((pattern, index) => {
              const tile = document.createElement('div');
              tile.classList.add('pattern-tile');
              tile.style.backgroundColor = `rgba(${hueAngle % 360}, 100%, 100%)`; // Simple hue-based color
              tile.innerHTML = pattern.name;
              patternFilmstrip.appendChild(tile);
          });
      }

        colorWheel.addEventListener('mousedown', (e) => {
            let startAngle = angle;
            document.addEventListener('mousemove', (event) => {
                const deltaX = event.clientX - colorWheel.offsetLeft;
                angle = ((startAngle + deltaX)) % 360; // Keep angle within 0-360 range
                updatePatterns(angle);
            });

             document.addEventListener('mouseup', () => {
               document.removeEventListener('mousemove', (event) => {});
                 document.removeEventListener('mouseup', () => {});
              });
        });


      // Initial pattern update
      updatePatterns(0);

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