Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prime Number Finder by MOUSE(VIDraft-mouse1.hf.space)</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: #1a1a1a; | |
| color: #fff; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .title { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| color: #6a5acd; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .controls { | |
| background: #2a2a2a; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 2rem; | |
| } | |
| .range-container { | |
| margin-bottom: 1rem; | |
| } | |
| .range-slider { | |
| width: 100%; | |
| height: 10px; | |
| -webkit-appearance: none; | |
| background: #3a3a3a; | |
| border-radius: 5px; | |
| outline: none; | |
| } | |
| .range-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: #6a5acd; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .range-slider::-webkit-slider-thumb:hover { | |
| background: #8a7aed; | |
| } | |
| .btn { | |
| padding: 0.8rem 1.5rem; | |
| background: #6a5acd; | |
| border: none; | |
| border-radius: 5px; | |
| color: white; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .btn:hover { | |
| background: #8a7aed; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); | |
| gap: 5px; | |
| margin-top: 2rem; | |
| } | |
| .number { | |
| aspect-ratio: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #2a2a2a; | |
| border-radius: 5px; | |
| font-size: 0.9rem; | |
| transition: all 0.3s; | |
| } | |
| .prime { | |
| animation: highlight 0.5s ease-out; | |
| } | |
| @keyframes highlight { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .stats { | |
| margin-top: 2rem; | |
| padding: 1rem; | |
| background: #2a2a2a; | |
| border-radius: 10px; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 10px; | |
| background: #3a3a3a; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| margin-top: 1rem; | |
| } | |
| .progress { | |
| width: 0%; | |
| height: 100%; | |
| background: linear-gradient(90deg, #6a5acd, #8a7aed); | |
| transition: width 0.3s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="title">Prime Number Finder by MOUSE(VIDraft-mouse1.hf.space)</h1> | |
| <div class="controls"> | |
| <div class="range-container"> | |
| <input type="range" min="1" max="999999" value="100" class="range-slider" id="range"> | |
| <div>Range: <span id="rangeValue">100</span></div> | |
| </div> | |
| <button class="btn" id="findPrimes">Find Primes</button> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress" id="progress"></div> | |
| </div> | |
| <div class="stats" id="stats"> | |
| Primes found: 0 | |
| </div> | |
| <div class="grid" id="grid"></div> | |
| </div> | |
| <script> | |
| const range = document.getElementById('range'); | |
| const rangeValue = document.getElementById('rangeValue'); | |
| const findPrimesBtn = document.getElementById('findPrimes'); | |
| const grid = document.getElementById('grid'); | |
| const progress = document.getElementById('progress'); | |
| const stats = document.getElementById('stats'); | |
| range.addEventListener('input', () => { | |
| rangeValue.textContent = range.value; | |
| }); | |
| function isPrime(num) { | |
| if (num < 2) return false; | |
| for (let i = 2; i <= Math.sqrt(num); i++) { | |
| if (num % i === 0) return false; | |
| } | |
| return true; | |
| } | |
| function getRandomColor() { | |
| const hue = Math.random() * 360; | |
| return `hsl(${hue}, 70%, 60%)`; | |
| } | |
| async function findPrimes() { | |
| const maxNum = parseInt(range.value); | |
| grid.innerHTML = ''; | |
| let primeCount = 0; | |
| for (let i = 1; i <= maxNum; i++) { | |
| const div = document.createElement('div'); | |
| div.className = 'number'; | |
| div.textContent = i; | |
| if (isPrime(i)) { | |
| primeCount++; | |
| div.style.backgroundColor = getRandomColor(); | |
| div.classList.add('prime'); | |
| } | |
| grid.appendChild(div); | |
| // Update progress | |
| const progressValue = (i / maxNum) * 100; | |
| progress.style.width = `${progressValue}%`; | |
| // Update stats | |
| stats.textContent = `Primes found: ${primeCount}`; | |
| // Add small delay for visual effect and prevent browser freeze | |
| if (i % 100 === 0) { | |
| await new Promise(resolve => setTimeout(resolve, 0)); | |
| } | |
| } | |
| } | |
| findPrimesBtn.addEventListener('click', findPrimes); | |
| </script> | |
| </body> | |
| </html> |