Spaces:

nhkr
/

css

Running

App Files Files Community

css / index.html

nhkr

Add 3 files

915d521 verified 12 months ago

raw

history blame contribute delete

21.3 kB

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