Spaces:

nhkr
/

css

Running

App Files Files Community

nhkr commited on Apr 21, 2025

Commit

915d521

verified ·

1 Parent(s): 90d325f

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +480 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Css
-emoji: 🐠
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: css
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,480 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

File without changes