`data/artifacts/15fb25164101/hf-qwen-coder-32b.html`

191 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: #dcdcdc;
            --shadow: rgba(0, 0, 0, .12);
            --hover-shadow: rgba(0, 0, 0, .18);
            --glow: rgba(176, 71, 46, .35);
            --ease: cubic-bezier(.22, 1, .36, 1);
        }
        body {
            margin: 0;
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg);
            color: var(--ink);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--bg);
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
            z-index: 1000;
        }
        .wordmark {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 38px;
            letter-spacing: .18em;
            text-transform: uppercase;
            margin: 0;
        }
        main {
            padding-top: 128px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .color-wheel-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin-bottom: 48px;
        }
        .color-wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-image: conic-gradient(from 90deg, #ff6f61, #6b5b95, #88b04b, #f7cac9, #ff6f61);
            cursor: pointer;
        }
        .color-wheel::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            background-color: var(--surface);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .patterns {
            display: flex;
            gap: 16px;
            transition: opacity .3s ease-in-out;
        }
        .pattern {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px var(--shadow);
        }
        .pattern::before,
        .pattern::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background-color: var(--surface);
        }
        .pattern:nth-child(1)::before { background-image: repeating-linear-gradient(45deg, #ff6f61, #ff6f61 8px, transparent 8px, transparent 16px); }
        .pattern:nth-child(2)::before { background-image: repeating-radial-gradient(circle, #6b5b95, #6b5b95 4px, transparent 4px, transparent 8px); }
        .pattern:nth-child(3)::before { background-image: repeating-linear-gradient(to right, #88b04b, #88b04b 8px, transparent 8px, transparent 16px); }
        .pattern:nth-child(4)::before { background-image: repeating-linear-gradient(to bottom, #f7cac9, #f7cac9 8px, transparent 8px, transparent 16px); }
        .pattern::after {
            height: 50%;
            top: auto;
            bottom: 0;
            opacity: 0.5;
        }
        .share-bar {
            display: flex;
            gap: 16px;
            margin-top: 48px;
        }
        .share-button {
            background-color: var(--surface);
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 12px;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--muted);
            cursor: pointer;
            box-shadow: 0 4px 12px var(--shadow);
            transition: background-color .3s ease-in-out, transform .2s ease-in-out;
        }
        .share-button:hover {
            background-color: var(--accent);
            color: var(--surface);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <header>
        <h1 class="wordmark">DESIGNER WALLCOVERINGS</h1>
    </header>
    <main>
        <div class="color-wheel-container">
            <div class="color-wheel" id="colorWheel"></div>
        </div>
        <div class="patterns" id="patternsContainer"></div>
        <div class="share-bar">
            <button class="share-button">SHARE ON INSTAGRAM</button>
            <button class="share-button">PIN TO PINTEREST</button>
        </div>
    </main>
    <script>
        const colorWheel = document.getElementById('colorWheel');
        const patternsContainer = document.getElementById('patternsContainer');

        let selectedColorIndex = 0;
        const colors = ['#ff6f61', '#6b5b95', '#88b04b', '#f7cac9'];
        const patterns = [
            { name: 'Sunrise Bloom' },
            { name: 'Midnight Velvet' },
            { name: 'Forest Mist' },
            { name: 'Blush Silk' }
        ];

        colorWheel.addEventListener('click', (event) => {
            const rect = event.target.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            const angle = Math.atan2(y - rect.height / 2, x - rect.width / 2);
            let deg = angle * (180 / Math.PI) + 90; // Convert to degrees and adjust for top position
            if (deg < 0) deg += 360;

            selectedColorIndex = Math.floor(deg / 90) % colors.length;
            updatePatterns();
        });

        function updatePatterns() {
            patternsContainer.innerHTML = '';
            const color = colors[selectedColorIndex];
            patterns.forEach((pattern, index) => {
                const patternDiv = document.createElement('div');
                patternDiv.className = 'pattern';
                patternDiv.style.backgroundColor = color;
                patternDiv.title = pattern.name; // Tooltip for color name
                patternsContainer.appendChild(patternDiv);
            });
        }

        updatePatterns(); // Initial load
    </script>
</body>
</html>