`data/artifacts/258516d076e6/qwen25-7b.html`

133 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 - Shop by Color</title>
    <style>
        :root {
            --bg: #f7efe6;
            --surface: #fff9f1;
            --text: #3a2c22;
            --muted: #a08c7a;
            --accent: #c65f38;
            --line: 1px solid var(--bg);
            --shadow: 0 8px 24px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.18);
            --ease: cubic-bezier(.22,1,.36,1);
        }

        body {
            margin: 0;
            font-family: 'Didot', Georgia, serif;
            color: var(--text);
            background-color: var(--bg);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        header {
            text-align: left;
            margin-bottom: 24px;
            font-size: 50px;
            letter-spacing: .18em;
        }

        #colorWheel {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background-color: var(--surface);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
        }

        #colorWheel svg {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: var(--accent);
            stroke-width: 2px;
            transition: stroke 300ms ease-out;
        }

        .patternStripes {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

        .patternStripes div {
            width: 72px;
            height: 96px;
            border-radius: 4px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        #shareBar {
            display: flex;
            gap: 16px;
            margin-top: 32px;
        }
    </style>
</head>
<body>
    <header class="wordmark">DESIGNER WALLCOVERINGS</header>
    <div id="colorWheel">
        <svg></svg>
        <div id="selectedColor"></div>
    </div>

    <section class="patternStripes" id="patternsContainer"></section>

    <footer id="shareBar">
        <button>SHARE</button>
    </footer>

    <script>
        const colorWheel = document.getElementById('colorWheel');
        const selectedColorDisplay = document.getElementById('selectedColor');
        const patternsContainer = document.getElementById('patternsContainer');

        // Define the color family and patterns
        const colorFamily = '#c65f38'; // Accent color
        const patterns = [
            { name: 'Floral', pattern: `radial-gradient(circle, ${colorFamily}, ${colorFamily} 70%, white 100%)` },
            { name: 'Geometric', pattern: `repeating-linear-gradient(45deg, ${colorFamily}, ${colorFamily} 20px, white 20px, white 40px)` },
            { name: 'Leopard', pattern: `radial-gradient(circle, transparent 18%, black 37%)` },
            { name: 'Checkerboard', pattern: `repeating-checkerboard-pattern(${colorFamily} 50px, white 50px)` }
        ];

        function createPatternDiv(name, pattern) {
            const div = document.createElement('div');
            div.style.backgroundImage = pattern;
            div.dataset.name = name;
            return div;
        }

        colorWheel.addEventListener('click', (e) => {
            e.preventDefault();
            selectedColorDisplay.textContent = 'Selected Color';
            patternsContainer.innerHTML = '';
            patterns.forEach(pattern => {
                const div = createPatternDiv(pattern.name, pattern.pattern);
                div.style.backgroundImage = `linear-gradient(to bottom right, ${pattern.pattern}, ${colorFamily} 50%)`;
                patternsContainer.appendChild(div);
            });
        });

        // Initialize the patterns
        if (patterns.length) {
            patterns.forEach(pattern => {
                const div = createPatternDiv(pattern.name, pattern.pattern);
                patternsContainer.appendChild(div);
            });
        }
    </script>
</body>
</html>