<?php

/**
 * @id 5
 * @name 颜色拾取器
 * @version 2.0.0
 * @description 简单实用的在线颜色拾取工具，支持从色板选择颜色，实时显示并复制颜色值，方便设计和开发使用。
 * @price 0
 * @type 工具
 * @website 
 * @width 285
 * @height 360
 * @thumbnail /img/id5.png
 */
?>
<div class="simple-color-picker">
    <div class="color-area" id="colorArea"></div>
    <div class="hue-bar" id="hueBar">
        <div class="hue-thumb" id="hueThumb"></div>
    </div>
    <div class="current-color" id="currentColor"></div>
    <div class="color-inputs">
        <input type="text" id="hexValue" readonly>
        <div class="action-buttons">
            <button id="pickBtn" title="屏幕取色">
                <svg viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M17.85 1.85c-.31-.31-.82-.31-1.13 0L9.03 8.67C8.4 9.31 8.4 10.29 9.03 10.92l1.06 1.06L5.5 18.5c-.25.25-.25.67 0 .92l.71.71c.25.25.67.25.92 0L11.92 15l1.06 1.06c.63.63 1.61.63 2.24 0l6.82-6.82c.31-.31.31-.82 0-1.13l-3.54-3.54z" />
                </svg>
            </button>
            <button id="copyBtn" title="复制颜色值">
                <svg viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
                </svg>
            </button>
        </div>
    </div>
</div>

<style>
    .simple-color-picker {
        width: 250px;
        padding: 15px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #ddd;
        font-family: Arial, sans-serif;
    }

    .color-area {
        width: 100%;
        height: 150px;
        background: #ff0000;
        border-radius: 6px;
        margin-bottom: 10px;
        cursor: crosshair;
        position: relative;
    }

    .color-area::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #fff, transparent);
    }

    .color-area::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000, transparent);
    }

    .hue-bar {
        height: 20px;
        background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
        border-radius: 4px;
        margin: 10px 0;
        position: relative;
        cursor: pointer;
    }

    .hue-thumb {
        width: 12px;
        height: 24px;
        background: #fff;
        border: 2px solid #333;
        border-radius: 3px;
        position: absolute;
        top: -2px;
        left: 0;
    }

    .current-color {
        width: 100%;
        height: 40px;
        background: #ff0000;
        border-radius: 6px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
    }

    .color-inputs {
        display: flex;
        gap: 8px;
    }

    #hexValue {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
        font-family: monospace;
        font-size: 14px;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .action-buttons button {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .action-buttons button:hover {
        background: #f5f5f5;
    }

    .action-buttons button:active {
        transform: scale(0.95);
    }

    #copyBtn:hover {
        border-color: #4CAF50;
        color: #4CAF50;
    }

    #pickBtn:hover {
        border-color: #2196F3;
        color: #2196F3;
    }
</style>

<script>
    (function() {
        // 定义callParentToast函数，使用父页面的提示框
        function callParentToast(message, options = {}) {
            window.parent.postMessage({
                type: 'toast',
                func: 'showToast',
                message: message,
                options: options
            }, window.parent.location.origin);
        }
        // 基础元素
        const colorArea = document.getElementById('colorArea');
        const hueBar = document.getElementById('hueBar');
        const hueThumb = document.getElementById('hueThumb');
        const currentColor = document.getElementById('currentColor');
        const hexValue = document.getElementById('hexValue');
        const copyBtn = document.getElementById('copyBtn');
        const pickBtn = document.getElementById('pickBtn');

        // 颜色状态
        let hue = 0; // 色相 0-360
        let sat = 1; // 饱和度 0-1
        let light = 0.5; // 亮度 0-1

        // 初始化
        updateColor();

        // 颜色区域点击
        colorArea.addEventListener('mousedown', (e) => {
            updateSaturationLightness(e);
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });

        // 色相条点击
        hueBar.addEventListener('mousedown', (e) => {
            updateHue(e);
            document.addEventListener('mousemove', onMouseMoveHue);
            document.addEventListener('mouseup', onMouseUpHue);
        });

        // 复制按钮
        copyBtn.addEventListener('click', () => {
            hexValue.select();
            document.execCommand('copy');
            // 短暂显示复制成功效果
            const originalHTML = copyBtn.innerHTML;
            copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/></svg>';
            copyBtn.style.color = '#4CAF50';
            copyBtn.style.borderColor = '#4CAF50';
            setTimeout(() => {
                copyBtn.innerHTML = originalHTML;
                copyBtn.style.color = '';
                copyBtn.style.borderColor = '';
            }, 1000);
        });

        // 屏幕取色
        pickBtn.addEventListener('click', () => {
            if (!window.EyeDropper) {
                // 使用父页面的提示框
                callParentToast('您的浏览器不支持屏幕取色功能', {
                    type: 'error'
                });
                return;
            }
            new EyeDropper().open()
                .then(res => {
                    setColorFromHex(res.sRGBHex);
                })
                .catch(() => {
                    // 用户取消了取色
                });
        });

        // 事件处理函数
        function onMouseMove(e) {
            updateSaturationLightness(e);
        }

        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }

        function onMouseMoveHue(e) {
            updateHue(e);
        }

        function onMouseUpHue() {
            document.removeEventListener('mousemove', onMouseMoveHue);
            document.removeEventListener('mouseup', onMouseUpHue);
        }

        // 更新饱和度亮度
        function updateSaturationLightness(e) {
            const rect = colorArea.getBoundingClientRect();
            sat = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            light = 1 - Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
            updateColor();
        }

        // 更新色相
        function updateHue(e) {
            const rect = hueBar.getBoundingClientRect();
            hue = Math.max(0, Math.min(360, (e.clientX - rect.left) / rect.width * 360));
            hueThumb.style.left = (hue / 360 * 100) + '%';
            colorArea.style.background = hslToHex(hue / 360, 1, 0.5);
            updateColor();
        }

        // 从HEX设置颜色
        function setColorFromHex(hex) {
            const rgb = hexToRgb(hex);
            const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
            hue = hsl.h * 360;
            sat = hsl.s;
            light = hsl.l;

            // 更新界面
            hueThumb.style.left = (hue / 360 * 100) + '%';
            colorArea.style.background = hslToHex(hue / 360, 1, 0.5);
            updateColor();
        }

        // 更新颜色显示
        function updateColor() {
            const rgb = hslToRgb(hue / 360, sat, light);
            const hex = rgbToHex(rgb.r, rgb.g, rgb.b);

            currentColor.style.background = hex;
            hexValue.value = hex;
        }

        // 颜色转换函数
        function hslToRgb(h, s, l) {
            let r, g, b;
            if (s === 0) {
                r = g = b = l;
            } else {
                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                const p = 2 * l - q;
                r = hue2rgb(p, q, h + 1 / 3);
                g = hue2rgb(p, q, h);
                b = hue2rgb(p, q, h - 1 / 3);
            }
            return {
                r: Math.round(r * 255),
                g: Math.round(g * 255),
                b: Math.round(b * 255)
            };
        }

        function hue2rgb(p, q, t) {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1 / 6) return p + (q - p) * 6 * t;
            if (t < 1 / 2) return q;
            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        }

        function rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;
            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
                else if (max === g) h = (b - r) / d + 2;
                else h = (r - g) / d + 4;
                h /= 6;
            }
            return {
                h,
                s,
                l
            };
        }

        function rgbToHex(r, g, b) {
            return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }

        function hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : {
                r: 0,
                g: 0,
                b: 0
            };
        }

        function hslToHex(h, s, l) {
            const rgb = hslToRgb(h, s, l);
            return rgbToHex(rgb.r, rgb.g, rgb.b);
        }
    })();
</script>