Spaces:

VIDraft
/

prime-number

Running

App Files Files Community

openfree commited on Nov 26, 2024

Commit

34f3376

verified ·

1 Parent(s): 4fe9678

Update index.html

Browse files

Files changed (1) hide show

index.html +215 -19

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prime Number Finder by MOUSE(VIDraft-mouse.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;
+        }
+        .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">
+        <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>