<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Выбор цвета</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1e1e1e;
            color: #ffffff;
        }
        .container {
            text-align: center;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            background-color: #2c2c2c;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
        }
        canvas {
            border-radius: 50%;
            cursor: crosshair;
        }
        .hex-value {
            margin: 20px 0;
            font-size: 18px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            color: #ffffff;
            background-color: #007bff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Выберите цвет</h1>
        <canvas id="colorWheel" width="300" height="300"></canvas>
        <div class="hex-value" id="hexValue">#ffffff</div>
        <button onclick="copyHexColor()">Скопировать HEX</button>
    </div>

    <script>
        const canvas = document.getElementById('colorWheel');
        const ctx = canvas.getContext('2d');
        const hexValue = document.getElementById('hexValue');
        const radius = canvas.width / 2;

        // Draw color wheel
        function drawColorWheel() {
            const image = ctx.createImageData(canvas.width, canvas.height);
            const data = image.data;

            for (let y = 0; y < canvas.height; y++) {
                for (let x = 0; x < canvas.width; x++) {
                    const dx = x - radius;
                    const dy = y - radius;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance <= radius) {
                        const angle = Math.atan2(dy, dx) + Math.PI;
                        const hue = (angle / (2 * Math.PI)) * 360;
                        const saturation = distance / radius;

                        const [r, g, b] = hslToRgb(hue, saturation, 0.5);
                        const index = (y * canvas.width + x) * 4;

                        data[index] = r;
                        data[index + 1] = g;
                        data[index + 2] = b;
                        data[index + 3] = 255;
                    }
                }
            }
            ctx.putImageData(image, 0, 0);
        }

        // Convert HSL to RGB
        function hslToRgb(h, s, l) {
            const c = (1 - Math.abs(2 * l - 1)) * s;
            const x = c * (1 - Math.abs((h / 60) % 2 - 1));
            const m = l - c / 2;

            let r = 0, g = 0, b = 0;
            if (h < 60) {
                r = c; g = x; b = 0;
            } else if (h < 120) {
                r = x; g = c; b = 0;
            } else if (h < 180) {
                r = 0; g = c; b = x;
            } else if (h < 240) {
                r = 0; g = x; b = c;
            } else if (h < 300) {
                r = x; g = 0; b = c;
            } else {
                r = c; g = 0; b = x;
            }

            return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
        }

        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const pixel = ctx.getImageData(x, y, 1, 1).data;

            const hex = `#${pixel[0].toString(16).padStart(2, '0')}${pixel[1].toString(16).padStart(2, '0')}${pixel[2].toString(16).padStart(2, '0')}`;
            hexValue.textContent = hex;
            document.body.style.backgroundColor = hex;
        });

        function copyHexColor() {
            const hex = hexValue.textContent;
            navigator.clipboard.writeText(hex).then(() => {
                alert(`Скопировано: ${hex}`);
            }).catch(err => {
                console.error('Ошибка копирования: ', err);
            });
        }

        drawColorWheel();
    </script>
</body>
</html>
