Spaces:

KEXEL
/

speedtest

Running

App Files Files Community

KEXEL commited on Apr 17, 2025

Commit

4811977

verified ·

1 Parent(s): 00bb42d

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: speedtest
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 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,428 @@
-<!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>Network Speed Test</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>
+        .gauge {
+            position: relative;
+            width: 300px;
+            height: 150px;
+            margin: 0 auto;
+        }
+        .gauge-body {
+            width: 100%;
+            height: 0;
+            padding-bottom: 50%;
+            position: relative;
+            border-top-left-radius: 100% 200%;
+            border-top-right-radius: 100% 200%;
+            overflow: hidden;
+            background: #e0e0e0;
+        }
+        .gauge-fill {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, #4ade80, #3b82f6, #ef4444);
+            transform-origin: center top;
+            transform: rotate(0.5turn);
+            transition: transform 0.5s ease-out;
+        }
+        .gauge-cover {
+            width: 75%;
+            height: 150%;
+            background: white;
+            border-radius: 50%;
+            position: absolute;
+            top: 25%;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #333;
+        }
+        .progress-bar {
+            height: 10px;
+            background-color: #e0e0e0;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4ade80, #3b82f6);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        .test-btn {
+            transition: all 0.3s ease;
+        }
+        .test-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <header class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4">
+            <h1 class="text-3xl font-bold text-center text-indigo-600">
+                <i class="fas fa-tachometer-alt mr-2"></i>Network Speed Test
+            </h1>
+        </div>
+    </header>
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-semibold text-gray-800">Test Your Internet Speed</h2>
+                <p class="text-gray-600 mt-2">Measure your download, upload speed and ping</p>
+            </div>
+            <div class="flex flex-col md:flex-row justify-around items-center mb-8">
+                <div class="gauge mb-8 md:mb-0">
+                    <div class="gauge-body">
+                        <div class="gauge-fill" id="downloadGauge"></div>
+                    </div>
+                    <div class="gauge-cover" id="downloadSpeed">0 Mbps</div>
+                </div>
+                <div class="gauge">
+                    <div class="gauge-body">
+                        <div class="gauge-fill" id="uploadGauge"></div>
+                    </div>
+                    <div class="gauge-cover" id="uploadSpeed">0 Mbps</div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                <div class="bg-gray-50 p-4 rounded-lg text-center">
+                    <div class="text-gray-500 mb-1"><i class="fas fa-download mr-2"></i>Download</div>
+                    <div class="text-2xl font-bold text-indigo-600" id="finalDownload">0 Mbps</div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg text-center">
+                    <div class="text-gray-500 mb-1"><i class="fas fa-upload mr-2"></i>Upload</div>
+                    <div class="text-2xl font-bold text-indigo-600" id="finalUpload">0 Mbps</div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg text-center">
+                    <div class="text-gray-500 mb-1"><i class="fas fa-stopwatch mr-2"></i>Ping</div>
+                    <div class="text-2xl font-bold text-indigo-600" id="pingResult">0 ms</div>
+                </div>
+            </div>
+            <div class="mb-6">
+                <div class="flex justify-between mb-1">
+                    <span class="text-gray-700">Test Progress</span>
+                    <span class="text-gray-700" id="testStatus">Ready</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" id="testProgress"></div>
+                </div>
+            </div>
+            <div class="text-center">
+                <button id="startTest" class="test-btn bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
+                    <i class="fas fa-play mr-2"></i>Start Test
+                </button>
+            </div>
+            <div class="mt-8 bg-blue-50 border-l-4 border-blue-500 p-4 rounded hidden" id="tips">
+                <div class="flex">
+                    <div class="flex-shrink-0 text-blue-500">
+                        <i class="fas fa-info-circle text-xl"></i>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-sm font-medium text-blue-800">Tips for accurate results</h3>
+                        <div class="mt-2 text-sm text-blue-700">
+                            <p>• Close other tabs and applications</p>
+                            <p>• Connect directly to your router with Ethernet if possible</p>
+                            <p>• Stop any ongoing downloads or uploads</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mt-8">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4"><i class="fas fa-history mr-2"></i>Test History</h3>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Download</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Upload</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ping</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200" id="historyTable">
+                        <!-- History will be populated here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-white shadow-sm py-4 mt-8">
+        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
+            <p>© 2023 Network Speed Test | All rights reserved</p>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const startTestBtn = document.getElementById('startTest');
+            const downloadSpeed = document.getElementById('downloadSpeed');
+            const uploadSpeed = document.getElementById('uploadSpeed');
+            const finalDownload = document.getElementById('finalDownload');
+            const finalUpload = document.getElementById('finalUpload');
+            const pingResult = document.getElementById('pingResult');
+            const testStatus = document.getElementById('testStatus');
+            const testProgress = document.getElementById('testProgress');
+            const downloadGauge = document.getElementById('downloadGauge');
+            const uploadGauge = document.getElementById('uploadGauge');
+            const historyTable = document.getElementById('historyTable');
+            const tipsSection = document.getElementById('tips');
+            let testInProgress = false;
+            let testHistory = JSON.parse(localStorage.getItem('speedTestHistory')) || [];
+            // Display test history
+            renderHistory();
+            startTestBtn.addEventListener('click', function() {
+                if (testInProgress) return;
+                startTest();
+            });
+            function startTest() {
+                testInProgress = true;
+                startTestBtn.disabled = true;
+                startTestBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Testing...';
+                startTestBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
+                startTestBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
+                // Reset values
+                downloadSpeed.textContent = '0 Mbps';
+                uploadSpeed.textContent = '0 Mbps';
+                finalDownload.textContent = '0 Mbps';
+                finalUpload.textContent = '0 Mbps';
+                pingResult.textContent = '0 ms';
+                testStatus.textContent = 'Starting...';
+                testProgress.style.width = '0%';
+                downloadGauge.style.transform = 'rotate(0.5turn)';
+                uploadGauge.style.transform = 'rotate(0.5turn)';
+                tipsSection.classList.add('hidden');
+                // Show pulse animation on gauges
+                downloadGauge.classList.add('pulse');
+                uploadGauge.classList.add('pulse');
+                // Start tests in sequence
+                setTimeout(() => {
+                    testPing().then(ping => {
+                        pingResult.textContent = ping + ' ms';
+                        testStatus.textContent = 'Testing download speed...';
+                        testProgress.style.width = '30%';
+                        return testDownloadSpeed();
+                    }).then(downloadSpeedValue => {
+                        const roundedDownload = Math.round(downloadSpeedValue * 10) / 10;
+                        finalDownload.textContent = roundedDownload + ' Mbps';
+                        testStatus.textContent = 'Testing upload speed...';
+                        testProgress.style.width = '70%';
+                        // Update gauge
+                        const downloadAngle = Math.min(0.5 + (downloadSpeedValue / 200), 1);
+                        downloadGauge.style.transform = `rotate(${downloadAngle}turn)`;
+                        downloadGauge.classList.remove('pulse');
+                        return testUploadSpeed();
+                    }).then(uploadSpeedValue => {
+                        const roundedUpload = Math.round(uploadSpeedValue * 10) / 10;
+                        finalUpload.textContent = roundedUpload + ' Mbps';
+                        testStatus.textContent = 'Test complete!';
+                        testProgress.style.width = '100%';
+                        // Update gauge
+                        const uploadAngle = Math.min(0.5 + (uploadSpeedValue / 50), 1);
+                        uploadGauge.style.transform = `rotate(${uploadAngle}turn)`;
+                        uploadGauge.classList.remove('pulse');
+                        // Save to history
+                        saveTestResult(roundedDownload, roundedUpload, pingResult.textContent);
+                        // Reset button
+                        resetTestButton();
+                    }).catch(error => {
+                        console.error('Test failed:', error);
+                        testStatus.textContent = 'Test failed. Try again.';
+                        testStatus.classList.add('text-red-500');
+                        resetTestButton();
+                    });
+                }, 1000);
+            }
+            function resetTestButton() {
+                testInProgress = false;
+                startTestBtn.disabled = false;
+                startTestBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i>Test Again';
+                startTestBtn.classList.remove('bg-gray-400', 'cursor-not-allowed');
+                startTestBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
+                // Show tips
+                tipsSection.classList.remove('hidden');
+            }
+            function testPing() {
+                return new Promise((resolve) => {
+                    // Simulate ping test with random value (real implementation would use actual ping)
+                    const start = new Date().getTime();
+                    setTimeout(() => {
+                        const latency = Math.floor(Math.random() * 30) + 5;
+                        resolve(latency);
+                    }, 300);
+                });
+            }
+            function testDownloadSpeed() {
+                return new Promise((resolve) => {
+                    let startTime, endTime;
+                    const fileSize = 5 * 1024 * 1024; // 5MB test file
+                    const testUrl = `https://httpbin.org/bytes/${fileSize}?r=${Math.random()}`;
+                    startTime = new Date().getTime();
+                    fetch(testUrl)
+                        .then(response => {
+                            endTime = new Date().getTime();
+                            return response.blob();
+                        })
+                        .then(() => {
+                            const duration = (endTime - startTime) / 1000;
+                            const bitsLoaded = fileSize * 8;
+                            const speedMbps = (bitsLoaded / duration / 1024 / 1024).toFixed(2);
+                            // Update speed in real-time during test
+                            let progress = 0;
+                            const interval = setInterval(() => {
+                                if (progress >= speedMbps) {
+                                    clearInterval(interval);
+                                    resolve(parseFloat(speedMbps));
+                                } else {
+                                    progress += Math.random() * 5;
+                                    downloadSpeed.textContent = Math.min(progress, speedMbps).toFixed(1) + ' Mbps';
+                                }
+                            }, 100);
+                        });
+                });
+            }
+            function testUploadSpeed() {
+                return new Promise((resolve) => {
+                    let startTime, endTime;
+                    const fileSize = 1 * 1024 * 1024; // 1MB test file
+                    const testData = new Blob([new Uint8Array(fileSize)], {type: 'application/octet-stream'});
+                    startTime = new Date().getTime();
+                    fetch('https://httpbin.org/post', {
+                        method: 'POST',
+                        body: testData
+                    })
+                    .then(response => response.json())
+                    .then(() => {
+                        endTime = new Date().getTime();
+                        const duration = (endTime - startTime) / 1000;
+                        const bitsLoaded = fileSize * 8;
+                        const speedMbps = (bitsLoaded / duration / 1024 / 1024).toFixed(2);
+                        // Update speed in real-time during test
+                        let progress = 0;
+                        const interval = setInterval(() => {
+                            if (progress >= speedMbps) {
+                                clearInterval(interval);
+                                resolve(parseFloat(speedMbps));
+                            } else {
+                                progress += Math.random() * 2;
+                                uploadSpeed.textContent = Math.min(progress, speedMbps).toFixed(1) + ' Mbps';
+                            }
+                        }, 100);
+                    });
+                });
+            }
+            function saveTestResult(download, upload, ping) {
+                const now = new Date();
+                const testResult = {
+                    date: now.toLocaleString(),
+                    download: download,
+                    upload: upload,
+                    ping: ping
+                };
+                testHistory.unshift(testResult);
+                if (testHistory.length > 5) {
+                    testHistory = testHistory.slice(0, 5);
+                }
+                localStorage.setItem('speedTestHistory', JSON.stringify(testHistory));
+                renderHistory();
+            }
+            function renderHistory() {
+                historyTable.innerHTML = '';
+                if (testHistory.length === 0) {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td colspan="4" class="px-6 py-4 text-center text-gray-500">No test history yet</td>
+                    `;
+                    historyTable.appendChild(row);
+                    return;
+                }
+                testHistory.forEach(result => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${result.date}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">${result.download} Mbps</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">${result.upload} Mbps</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">${result.ping}</td>
+                    `;
+                    historyTable.appendChild(row);
+                });
+            }
+        });
+    </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=KEXEL/speedtest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ criar um speedtest em html5 css javascript