`data/artifacts/258516d076e6/hf-qwen-coder-32b.html`

219 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;
            --text: #1c1a17;
            --muted: #9b948a;
            --accent: #b0472e;
            --line: #e5e5e5;
            --shadow: rgba(0, 0, 0, 0.12);
            --hover-shadow: rgba(0, 0, 0, 0.18);
            --glow: rgba(176, 71, 46, 0.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(--text);
            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(--surface);
            padding: 24px;
            box-shadow: 0 8px 24px var(--shadow);
            z-index: 1000;
        }
        header h1 {
            font-family: 'Playfair Display', Georgia, serif;
            letter-spacing: .18em;
            text-transform: uppercase;
            margin: 0;
            font-size: 50px;
        }
        .color-wheel-container {
            position: relative;
            width: 320px;
            height: 320px;
            margin-top: 128px;
        }
        .color-wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(#c9a961, #b0472e, #2f4c39, #c9a961);
            position: relative;
        }
        .draggable-circle {
            width: 48px;
            height: 48px;
            background-color: var(--surface);
            border-radius: 50%;
            box-shadow: 0 8px 24px var(--shadow), 0 0 16px var(--glow);
            position: absolute;
            top: 136px; /* Center vertically */
            left: 136px; /* Center horizontally */
            cursor: pointer;
        }
        .filmstrip {
            display: flex;
            gap: 24px;
            margin-top: 96px;
        }
        .pattern-card {
            width: 80px;
            height: 80px;
            border-radius: 14px;
            box-shadow: 0 8px 24px var(--shadow);
            background-size: cover;
            position: relative;
            transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
        }
        .pattern-card:hover {
            transform: translateY(-16px);
            box-shadow: 0 16px 48px var(--hover-shadow);
        }
        .pattern-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, 0.8);
        }
        .pattern-card h3 {
            position: absolute;
            bottom: 8px;
            left: 8px;
            font-size: 16px;
            color: var(--text);
            margin: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        .share-bar {
            display: flex;
            gap: 16px;
            margin-top: 96px;
            font-size: 12px;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--muted);
        }
        .share-bar button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: color 0.3s var(--ease);
        }
        .share-bar button:hover {
            color: var(--accent);
        }
    </style>
</head>
<body>
    <header>
        <h1>DESIGNER WALLCOVERINGS</h1>
    </header>
    <div class="color-wheel-container">
        <div id="colorWheel" class="color-wheel"></div>
        <div id="draggableCircle" class="draggable-circle"></div>
    </div>
    <div id="filmstrip" class="filmstrip">
        <div class="pattern-card" style="background: linear-gradient(135deg, #f5f2ea 0%, #c9a961 100%);"><h3>Golden Bloom</h3></div>
        <div class="pattern-card" style="background: linear-gradient(45deg, #b0472e 0%, #8a8578 100%);"><h3>Crimson Mist</h3></div>
        <div class="pattern-card" style="background: radial-gradient(circle at center, #f5f2ea 0%, #2f4c39 100%);"><h3>Verdant Oasis</h3></div>
        <div class="pattern-card" style="background: repeating-linear-gradient(45deg, #f5f2ea, #f5f2ea 8px, #b0472e 8px, #b0472e 16px);"><h3>Geometric Harmony</h3></div>
    </div>
    <div class="share-bar">
        <button onclick="copyToClipboard()">SHARE</button>
    </div>

    <script>
        const draggableCircle = document.getElementById('draggableCircle');
        let isDragging = false;
        let startX, startY;

        function handleMouseDown(e) {
            e.preventDefault();
            isDragging = true;
            startX = e.clientX - draggableCircle.offsetLeft;
            startY = e.clientY - draggableCircle.offsetTop;
        }

        function handleMouseMove(e) {
            if (!isDragging) return;
            const x = e.clientX - startX;
            const y = e.clientY - startY;
            const wheelRect = document.getElementById('colorWheel').getBoundingClientRect();
            const radius = wheelRect.width / 2;
            const centerX = wheelRect.left + radius;
            const centerY = wheelRect.top + radius;

            const distanceX = x - centerX;
            const distanceY = y - centerY;
            const angle = Math.atan2(distanceY, distanceX) * (180 / Math.PI);

            draggableCircle.style.transform = `translate(${x}px, ${y}px)`;

            // Limit the circle inside the wheel
            if (distanceX * distanceX + distanceY * distanceY > radius * radius) {
                const constrainedX = centerX + radius * Math.cos(angle * Math.PI / 180);
                const constrainedY = centerY + radius * Math.sin(angle * Math.PI / 180);
                draggableCircle.style.transform = `translate(${constrainedX - startX}px, ${constrainedY - startY}px)`;
            }

            updateFilmstrip(angle);
        }

        function handleMouseUp() {
            isDragging = false;
        }

        document.addEventListener('mousedown', handleMouseDown);
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);

        function updateFilmstrip(angle) {
            const patterns = [
                { gradient: 'linear-gradient(135deg, #f5f2ea 0%, #c9a961 100%)', name: 'Golden Bloom' },
                { gradient: 'linear-gradient(45deg, #b0472e 0%, #8a8578 100%)', name: 'Crimson Mist' },
                { gradient: 'radial-gradient(circle at center, #f5f2ea 0%, #2f4c39 100%)', name: 'Verdant Oasis' },
                { gradient: 'repeating-linear-gradient(45deg, #f5f2ea, #f5f2ea 8px, #b0472e 8px, #b0472e 16px)', name: 'Geometric Harmony' }
            ];

            const patternIndex = Math.floor(((angle + 360) % 360) / 90);
            const selectedPattern = patterns[patternIndex];

            document.querySelectorAll('.pattern-card').forEach((card, index) => {
                card.style.background = selectedPattern.gradient;
                card.querySelector('h3').textContent = selectedPattern.name;
            });
        }

        function copyToClipboard() {
            navigator.clipboard.writeText(window.location.href).then(() => {
                alert('Link copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }
    </script>
</body>
</html>