Spaces:

nhkr
/

css

Running

File size: 21,274 Bytes

915d521

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>בורר צבעים מתקדם</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .color-preview {
            width: 150px;
            height: 150px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            border: 2px solid white;
        }
        
        .color-code-display {
            font-family: 'Courier New', monospace;
            background-color: #f8f9fa;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            font-size: 1.1rem;
        }
        
        .color-code-display.copied {
            background-color: #4CAF50;
            color: white;
        }
        
        .canvas-container {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
        }
        
        #colorCanvas {
            cursor: crosshair;
            display: block;
            width: 100%;
        }
        
        .picker-circle {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            pointer-events: none;
            transform: translate(-10px, -10px);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        
        .tab-button {
            transition: all 0.3s ease;
        }
        
        .tab-button.active {
            background-color: #3b82f6;
            color: white;
        }
        
        /* Custom slider style */
        .brightness-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: linear-gradient(to right, #000, #fff);
            outline: none;
            margin-top: 15px;
        }
        
        .brightness-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 2px solid #3b82f6;
        }
        
        .brightness-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 2px solid #3b82f6;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex flex-col items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="p-8">
            <div class="flex items-center justify-center mb-6">
                <i class="fas fa-eye-dropper text-4xl ml-3 text-indigo-600"></i>
                <h1 class="text-3xl font-bold text-gray-800">בורר צבעים מתקדם</h1>
            </div>
            
            <div class="flex mb-6 border-b border-gray-200">
                <button class="tab-button active px-4 py-2 rounded-t-lg font-medium" data-tab="picker">בורר צבעים</button>
                <button class="tab-button px-4 py-2 rounded-t-lg font-medium" data-tab="palette">פלטת צבעים</button>
            </div>
            
            <div id="pickerTab" class="tab-content">
                <div class="flex flex-col md:flex-row gap-8 mb-8">
                    <div class="flex-1">
                        <div class="canvas-container relative mb-4">
                            <canvas id="colorCanvas" width="500" height="300"></canvas>
                            <div class="picker-circle" id="pickerCircle"></div>
                        </div>
                        <input type="range" min="0" max="100" value="50" class="brightness-slider" id="brightnessSlider">
                        <p class="text-gray-600 text-center mt-2">גרור את הסליידר כדי לשנות את הבהירות</p>
                        <p class="text-gray-600 text-center mt-2">לחץ או גרור על הקנבס כדי לבחור צבע</p>
                    </div>
                    
                    <div class="flex flex-col items-center">
                        <div class="color-preview mb-4" id="colorPreview"></div>
                        
                        <div class="text-center mb-6">
                            <p class="text-gray-700 mb-3 font-medium">קוד הצבע הנבחר:</p>
                            <div class="color-code-display flex items-center justify-center" id="colorCodeDisplay">
                                <span id="colorCodeText">בחר צבע מהקנבס</span>
                                <button id="copyButton" class="ml-3 p-1 rounded-md hover:bg-gray-200 transition-colors" title="העתק ללוח">
                                    <i class="fas fa-copy text-gray-500"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-4 w-full">
                            <div class="flex flex-col items-center">
                                <p class="text-sm text-gray-600 mb-1">RGB</p>
                                <div class="bg-gray-100 p-2 rounded" id="rgbCode">0, 0, 0</div>
                            </div>
                            <div class="flex flex-col items-center">
                                <p class="text-sm text-gray-600 mb-1">HEX</p>
                                <div class="bg-gray-100 p-2 rounded" id="hexCode">#000000</div>
                            </div>
                            <div class="flex flex-col items-center">
                                <p class="text-sm text-gray-600 mb-1">HSL</p>
                                <div class="bg-gray-100 p-2 rounded" id="hslCode">0°, 0%, 0%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="paletteTab" class="tab-content hidden">
                <div class="flex justify-center mb-6">
                    <div class="grid grid-cols-10 gap-2" id="colorGrid"></div>
                </div>
                <div class="flex justify-center">
                    <div class="color-code-display flex items-center" id="paletteColorCode">
                        <span id="paletteColorText">לחץ על צבע למעלה</span>
                        <button id="paletteCopyButton" class="ml-3 p-1 rounded-md hover:bg-gray-200 transition-colors" title="העתק ללוח">
                            <i class="fas fa-copy text-gray-500"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bg-gray-50 p-4 text-center text-sm text-gray-500">
            <p>השתמש בקוד RGB ב-CSS שלך כך: <code class="bg-gray-100 px-2 py-1 rounded">color: rgb(255, 0, 0);</code></p>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tab switching
            const tabs = document.querySelectorAll('.tab-button');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.getElementById('pickerTab').classList.toggle('hidden', this.dataset.tab !== 'picker');
                    document.getElementById('paletteTab').classList.toggle('hidden', this.dataset.tab !== 'palette');
                });
            });
            
            // Color Picker Tab
            const canvas = document.getElementById('colorCanvas');
            const ctx = canvas.getContext('2d');
            const pickerCircle = document.getElementById('pickerCircle');
            const colorPreview = document.getElementById('colorPreview');
            const colorCodeText = document.getElementById('colorCodeText');
            const colorCodeDisplay = document.getElementById('colorCodeDisplay');
            const copyButton = document.getElementById('copyButton');
            const rgbCode = document.getElementById('rgbCode');
            const hexCode = document.getElementById('hexCode');
            const hslCode = document.getElementById('hslCode');
            const brightnessSlider = document.getElementById('brightnessSlider');
            
            let currentBrightness = 50;
            let currentColor = { r: 0, g: 0, b: 0 };
            
            // Create gradient for canvas
            function createColorCanvas() {
                const width = canvas.width;
                const height = canvas.height;
                
                // Clear canvas
                ctx.clearRect(0, 0, width, height);
                
                // Main gradient (left to right)
                const mainGradient = ctx.createLinearGradient(0, 0, width, 0);
                mainGradient.addColorStop(0, 'rgb(255, 0, 0)');
                mainGradient.addColorStop(0.17, 'rgb(255, 0, 255)');
                mainGradient.addColorStop(0.34, 'rgb(0, 0, 255)');
                mainGradient.addColorStop(0.51, 'rgb(0, 255, 255)');
                mainGradient.addColorStop(0.68, 'rgb(0, 255, 0)');
                mainGradient.addColorStop(0.85, 'rgb(255, 255, 0)');
                mainGradient.addColorStop(1, 'rgb(255, 0, 0)');
                
                ctx.fillStyle = mainGradient;
                ctx.fillRect(0, 0, width, height);
                
                // White to transparent gradient (top to bottom)
                const whiteGradient = ctx.createLinearGradient(0, 0, 0, height);
                whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
                whiteGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
                
                ctx.fillStyle = whiteGradient;
                ctx.fillRect(0, 0, width, height);
                
                // Black to transparent gradient (bottom to top)
                const blackGradient = ctx.createLinearGradient(0, 0, 0, height);
                blackGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
                blackGradient.addColorStop(1, 'rgba(0, 0, 0, ' + (1 - currentBrightness/100) + ')');
                
                ctx.fillStyle = blackGradient;
                ctx.fillRect(0, 0, width, height);
            }
            
            // Get color from canvas
            function pickColor(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // Update picker circle position
                pickerCircle.style.left = x + 'px';
                pickerCircle.style.top = y + 'px';
                
                // Get pixel data
                const pixel = ctx.getImageData(x, y, 1, 1).data;
                currentColor = {
                    r: pixel[0],
                    g: pixel[1],
                    b: pixel[2]
                };
                
                updateColorDisplays();
            }
            
            // Update all color displays
            function updateColorDisplays() {
                const r = currentColor.r;
                const g = currentColor.g;
                const b = currentColor.b;
                
                // Update displays
                const rgbValue = `rgb(${r}, ${g}, ${b})`;
                colorPreview.style.backgroundColor = rgbValue;
                colorCodeText.textContent = rgbValue;
                pickerCircle.style.backgroundColor = rgbValue;
                
                // Update code displays
                rgbCode.textContent = `${r}, ${g}, ${b}`;
                hexCode.textContent = rgbToHex(r, g, b);
                hslCode.textContent = rgbToHsl(r, g, b);
            }
            
            // Event listeners for canvas
            canvas.addEventListener('mousemove', function(e) {
                if (isDragging) {
                    pickColor(e);
                }
            });
            
            canvas.addEventListener('mousedown', function(e) {
                isDragging = true;
                pickColor(e);
            });
            
            canvas.addEventListener('mouseup', function() {
                isDragging = false;
            });
            
            canvas.addEventListener('mouseleave', function() {
                isDragging = false;
            });
            
            canvas.addEventListener('click', pickColor);
            
            // Brightness slider event
            brightnessSlider.addEventListener('input', function() {
                currentBrightness = this.value;
                createColorCanvas();
                
                // If we have a selected color, adjust it to the new brightness
                if (currentColor) {
                    const hsl = rgbToHslObject(currentColor.r, currentColor.g, currentColor.b);
                    hsl.l = currentBrightness / 100;
                    const rgb = hslToRgb(hsl.h, hsl.s, hsl.l);
                    currentColor = {
                        r: rgb[0],
                        g: rgb[1],
                        b: rgb[2]
                    };
                    updateColorDisplays();
                }
            });
            
            let isDragging = false;
            
            // Helper functions
            function rgbToHex(r, g, b) {
                return '#' + [r, g, b].map(x => {
                    const hex = x.toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                }).join('');
            }
            
            function rgbToHsl(r, g, b) {
                const hsl = rgbToHslObject(r, g, b);
                return `${Math.round(hsl.h * 360)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%`;
            }
            
            function rgbToHslObject(r, g, b) {
                r /= 255, g /= 255, b /= 255;
                
                const max = Math.max(r, g, b), min = Math.min(r, g, b);
                let h, s, l = (max + min) / 2;
                
                if (max === min) {
                    h = s = 0; // achromatic
                } else {
                    const d = max - min;
                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                    
                    switch (max) {
                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                        case g: h = (b - r) / d + 2; break;
                        case b: h = (r - g) / d + 4; break;
                    }
                    
                    h /= 6;
                }
                
                return { h, s, l };
            }
            
            // Copy to clipboard
            copyButton.addEventListener('click', function() {
                const textToCopy = colorCodeText.textContent;
                if (textToCopy === 'בחר צבע מהקנבס') return;
                
                navigator.clipboard.writeText(textToCopy).then(function() {
                    colorCodeDisplay.classList.add('copied');
                    colorCodeText.textContent = 'הועתק!';
                    
                    setTimeout(function() {
                        colorCodeDisplay.classList.remove('copied');
                        colorCodeText.textContent = textToCopy;
                    }, 2000);
                });
            });
            
            // Color Palette Tab
            const colorGrid = document.getElementById('colorGrid');
            const paletteColorText = document.getElementById('paletteColorText');
            const paletteColorCode = document.getElementById('paletteColorCode');
            const paletteCopyButton = document.getElementById('paletteCopyButton');
            
            // Generate color grid
            const hueSteps = 10;
            const saturationSteps = 10;
            
            for (let h = 0; h < hueSteps; h++) {
                for (let s = 0; s < saturationSteps; s++) {
                    const hue = Math.floor(h * 360 / hueSteps);
                    const saturation = 30 + Math.floor(s * 70 / saturationSteps);
                    
                    const colorCell = document.createElement('div');
                    colorCell.className = 'w-8 h-8 rounded cursor-pointer transition-transform hover:scale-125';
                    colorCell.style.backgroundColor = `hsl(${hue}, ${saturation}%, 50%)`;
                    
                    const rgbColor = hslToRgb(hue/360, saturation/100, 0.5);
                    colorCell.dataset.rgb = `rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`;
                    
                    colorCell.addEventListener('click', function() {
                        const rgbValue = this.dataset.rgb;
                        paletteColorText.textContent = rgbValue;
                    });
                    
                    colorGrid.appendChild(colorCell);
                }
            }
            
            // Add grayscale colors
            for (let i = 0; i < 10; i++) {
                const grayValue = Math.floor(i * 255 / 9);
                const colorCell = document.createElement('div');
                colorCell.className = 'w-8 h-8 rounded cursor-pointer transition-transform hover:scale-125';
                colorCell.style.backgroundColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
                colorCell.dataset.rgb = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
                
                colorCell.addEventListener('click', function() {
                    const rgbValue = this.dataset.rgb;
                    paletteColorText.textContent = rgbValue;
                });
                
                colorGrid.appendChild(colorCell);
            }
            
            // Copy for palette
            paletteCopyButton.addEventListener('click', function() {
                const textToCopy = paletteColorText.textContent;
                if (textToCopy === 'לחץ על צבע למעלה') return;
                
                navigator.clipboard.writeText(textToCopy).then(function() {
                    paletteColorCode.classList.add('copied');
                    paletteColorText.textContent = 'הועתק!';
                    
                    setTimeout(function() {
                        paletteColorCode.classList.remove('copied');
                        paletteColorText.textContent = textToCopy;
                    }, 2000);
                });
            });
            
            // Helper function for palette
            function hslToRgb(h, s, l) {
                let r, g, b;
                
                if (s === 0) {
                    r = g = b = l;
                } else {
                    const hue2rgb = 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;
                    };
                    
                    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 [
                    Math.round(r * 255),
                    Math.round(g * 255),
                    Math.round(b * 255)
                ];
            }
            
            // Initialize
            createColorCanvas();
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nhkr/css" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>