| | <!DOCTYPE html> |
| | <html lang="ar" 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> |
| | @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
| | body { |
| | font-family: 'Tajawal', sans-serif; |
| | } |
| | .number-display { |
| | transition: all 0.3s ease; |
| | } |
| | .glow { |
| | animation: glow 1s ease-in-out infinite alternate; |
| | } |
| | @keyframes glow { |
| | from { |
| | box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); |
| | } |
| | to { |
| | box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> |
| | <div class="container mx-auto px-4 py-8"> |
| | <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"> |
| | <div class="p-8"> |
| | <div class="flex items-center justify-center mb-6"> |
| | <i class="fas fa-random text-blue-500 text-3xl mr-2"></i> |
| | <h1 class="text-2xl font-bold text-gray-800">مولد الأرقام العشوائية</h1> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">عدد الأرقام المطلوبة</label> |
| | <div class="flex"> |
| | <input type="number" id="quantity" min="1" max="20" value="1" |
| | class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:ring-blue-500 focus:border-blue-500"> |
| | <button id="generateBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md transition duration-300"> |
| | <i class="fas fa-bolt mr-1"></i> توليد |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">النطاق</label> |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div> |
| | <label for="min" class="block text-xs text-gray-500 mb-1">الحد الأدنى</label> |
| | <input type="number" id="min" min="0" max="9999" value="0" |
| | class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | <div> |
| | <label for="max" class="block text-xs text-gray-500 mb-1">الحد الأعلى</label> |
| | <input type="number" id="max" min="1" max="10000" value="10000" |
| | class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-center mb-6"> |
| | <input type="checkbox" id="unique" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| | <label for="unique" class="mr-2 block text-sm text-gray-700">أرقام فريدة (بدون تكرار)</label> |
| | </div> |
| | |
| | <div id="resultContainer" class="hidden"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| | <i class="fas fa-list-ol text-blue-500 mr-2"></i> النتائج |
| | </h2> |
| | <div id="results" class="space-y-3"></div> |
| | <div class="mt-4 flex justify-between"> |
| | <button id="copyBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm transition duration-300"> |
| | <i class="fas fa-copy mr-1"></i> نسخ النتائج |
| | </button> |
| | <button id="clearBtn" class="text-red-500 hover:text-red-700 text-sm transition duration-300"> |
| | <i class="fas fa-trash-alt mr-1"></i> مسح الكل |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8 text-center text-sm text-gray-500"> |
| | <p>تم التطوير بواسطة مولد الأرقام العشوائية | النطاق من 0 إلى 10000</p> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const generateBtn = document.getElementById('generateBtn'); |
| | const quantityInput = document.getElementById('quantity'); |
| | const minInput = document.getElementById('min'); |
| | const maxInput = document.getElementById('max'); |
| | const uniqueCheckbox = document.getElementById('unique'); |
| | const resultContainer = document.getElementById('resultContainer'); |
| | const resultsDiv = document.getElementById('results'); |
| | const copyBtn = document.getElementById('copyBtn'); |
| | const clearBtn = document.getElementById('clearBtn'); |
| | |
| | |
| | minInput.addEventListener('change', function() { |
| | if (parseInt(this.value) < 0) this.value = 0; |
| | if (parseInt(this.value) > 9999) this.value = 9999; |
| | if (parseInt(this.value) >= parseInt(maxInput.value)) { |
| | maxInput.value = parseInt(this.value) + 1; |
| | } |
| | }); |
| | |
| | maxInput.addEventListener('change', function() { |
| | if (parseInt(this.value) > 10000) this.value = 10000; |
| | if (parseInt(this.value) < 1) this.value = 1; |
| | if (parseInt(this.value) <= parseInt(minInput.value)) { |
| | minInput.value = parseInt(this.value) - 1; |
| | } |
| | }); |
| | |
| | quantityInput.addEventListener('change', function() { |
| | if (parseInt(this.value) < 1) this.value = 1; |
| | if (parseInt(this.value) > 20) this.value = 20; |
| | }); |
| | |
| | |
| | generateBtn.addEventListener('click', function() { |
| | const quantity = parseInt(quantityInput.value); |
| | const min = parseInt(minInput.value); |
| | const max = parseInt(maxInput.value); |
| | const unique = uniqueCheckbox.checked; |
| | |
| | if (min >= max) { |
| | alert('الحد الأدنى يجب أن يكون أقل من الحد الأعلى'); |
| | return; |
| | } |
| | |
| | if (unique && (max - min + 1) < quantity) { |
| | alert('لا يمكن توليد أرقام فريدة أكثر من النطاق المحدد'); |
| | return; |
| | } |
| | |
| | const numbers = generateRandomNumbers(quantity, min, max, unique); |
| | displayResults(numbers); |
| | resultContainer.classList.remove('hidden'); |
| | }); |
| | |
| | function generateRandomNumbers(quantity, min, max, unique) { |
| | const numbers = []; |
| | |
| | if (unique) { |
| | |
| | const possibleNumbers = Array.from({length: max - min + 1}, (_, i) => min + i); |
| | |
| | for (let i = 0; i < quantity && possibleNumbers.length > 0; i++) { |
| | const randomIndex = Math.floor(Math.random() * possibleNumbers.length); |
| | numbers.push(possibleNumbers[randomIndex]); |
| | possibleNumbers.splice(randomIndex, 1); |
| | } |
| | } else { |
| | |
| | for (let i = 0; i < quantity; i++) { |
| | numbers.push(Math.floor(Math.random() * (max - min + 1)) + min); |
| | } |
| | } |
| | |
| | return numbers; |
| | } |
| | |
| | function displayResults(numbers) { |
| | resultsDiv.innerHTML = ''; |
| | |
| | numbers.forEach((num, index) => { |
| | const numberDiv = document.createElement('div'); |
| | numberDiv.className = 'flex items-center justify-between bg-blue-50 p-3 rounded-lg number-display hover:bg-blue-100'; |
| | |
| | const numberInfo = document.createElement('div'); |
| | numberInfo.className = 'flex items-center'; |
| | |
| | const numberIndex = document.createElement('span'); |
| | numberIndex.className = 'bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full mr-2'; |
| | numberIndex.textContent = index + 1; |
| | |
| | const numberValue = document.createElement('span'); |
| | numberValue.className = 'text-gray-800 font-medium'; |
| | numberValue.textContent = num.toLocaleString(); |
| | |
| | numberInfo.appendChild(numberIndex); |
| | numberInfo.appendChild(numberValue); |
| | |
| | const copyIcon = document.createElement('button'); |
| | copyIcon.className = 'text-blue-500 hover:text-blue-700'; |
| | copyIcon.innerHTML = '<i class="fas fa-copy"></i>'; |
| | copyIcon.title = 'نسخ الرقم'; |
| | copyIcon.addEventListener('click', () => { |
| | navigator.clipboard.writeText(num.toString()); |
| | copyIcon.innerHTML = '<i class="fas fa-check text-green-500"></i>'; |
| | setTimeout(() => { |
| | copyIcon.innerHTML = '<i class="fas fa-copy"></i>'; |
| | }, 1000); |
| | }); |
| | |
| | numberDiv.appendChild(numberInfo); |
| | numberDiv.appendChild(copyIcon); |
| | resultsDiv.appendChild(numberDiv); |
| | }); |
| | } |
| | |
| | |
| | copyBtn.addEventListener('click', function() { |
| | const numbers = Array.from(resultsDiv.querySelectorAll('div > div > span:nth-child(2)')) |
| | .map(span => span.textContent.replace(/,/g, '')); |
| | navigator.clipboard.writeText(numbers.join('\n')); |
| | |
| | const originalText = copyBtn.innerHTML; |
| | copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> تم النسخ!'; |
| | copyBtn.classList.remove('bg-gray-200', 'hover:bg-gray-300'); |
| | copyBtn.classList.add('bg-green-100', 'text-green-800'); |
| | |
| | setTimeout(() => { |
| | copyBtn.innerHTML = originalText; |
| | copyBtn.classList.remove('bg-green-100', 'text-green-800'); |
| | copyBtn.classList.add('bg-gray-200', 'hover:bg-gray-300'); |
| | }, 2000); |
| | }); |
| | |
| | |
| | clearBtn.addEventListener('click', function() { |
| | resultsDiv.innerHTML = ''; |
| | resultContainer.classList.add('hidden'); |
| | }); |
| | }); |
| | </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=hader1890/aas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
