Spaces:

triflix
/

speedtest

Running

App Files Files Community

triflix commited on Mar 20, 2025

Commit

38dfb36

verified ·

1 Parent(s): ab5cf5c

Upload 6 files

Browse files

Files changed (6) hide show

main.py +114 -0
requirements.txt +4 -0
static/css/style.css +0 -0
templates/index.html +373 -0
templates/index1.html +357 -0
templates/testing.html +90 -0

main.py ADDED Viewed

	@@ -0,0 +1,114 @@

+from fastapi import FastAPI, Request, BackgroundTasks
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse
+import speedtest
+import time
+import uuid
+import os
+from pydantic import BaseModel
+app = FastAPI(title="Internet Speed Test")
+# Create templates directory if it doesn't exist
+os.makedirs("templates", exist_ok=True)
+# Mount static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+# Templates
+templates = Jinja2Templates(directory="templates")
+# Store test results
+test_results = {}
+class SpeedTestResult(BaseModel):
+    download_mbps: float
+    upload_mbps: float
+    ping: float
+    download_MBps: float
+    upload_MBps: float
+    status: str
+    progress: int = 0
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+def run_speed_test(test_id: str):
+    try:
+        # Update progress
+        test_results[test_id].progress = 10
+        test_results[test_id].status = "Initializing..."
+        # Initialize speedtest
+        st = speedtest.Speedtest()
+        # Get best server
+        test_results[test_id].status = "Finding best server..."
+        test_results[test_id].progress = 20
+        st.get_best_server()
+        # Measure download speed
+        test_results[test_id].status = "Testing download speed..."
+        test_results[test_id].progress = 30
+        start_time = time.time()
+        download_speed = st.download()
+        end_time = time.time()
+        # Calculate download speed in MB/s
+        download_speed_MBps = (download_speed / 8) / 1_000_000
+        test_results[test_id].download_MBps = round(download_speed_MBps, 2)
+        test_results[test_id].download_mbps = round(download_speed / 1_000_000, 2)
+        test_results[test_id].progress = 60
+        # Measure upload speed
+        test_results[test_id].status = "Testing upload speed..."
+        start_time = time.time()
+        upload_speed = st.upload()
+        end_time = time.time()
+        # Calculate upload speed in MB/s
+        upload_speed_MBps = (upload_speed / 8) / 1_000_000
+        test_results[test_id].upload_MBps = round(upload_speed_MBps, 2)
+        test_results[test_id].upload_mbps = round(upload_speed / 1_000_000, 2)
+        test_results[test_id].progress = 90
+        # Get ping
+        ping = st.results.ping
+        test_results[test_id].ping = round(ping, 2)
+        # Update status
+        test_results[test_id].status = "Complete"
+        test_results[test_id].progress = 100
+    except Exception as e:
+        test_results[test_id].status = f"Error: {str(e)}"
+        test_results[test_id].progress = -1
+@app.post("/start-test")
+async def start_test(background_tasks: BackgroundTasks):
+    test_id = str(uuid.uuid4())
+    test_results[test_id] = SpeedTestResult(
+        download_mbps=0,
+        upload_mbps=0,
+        ping=0,
+        download_MBps=0,
+        upload_MBps=0,
+        status="Starting...",
+        progress=0
+    )
+    background_tasks.add_task(run_speed_test, test_id)
+    return {"test_id": test_id}
+@app.get("/test-status/{test_id}")
+async def test_status(test_id: str):
+    if test_id not in test_results:
+        return JSONResponse(status_code=404, content={"error": "Test not found"})
+    return test_results[test_id]
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

requirements.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+fastapi
+uvicorn
+jinja2
+speedtest-cli

static/css/style.css ADDED Viewed

File without changes

templates/index.html ADDED Viewed

	@@ -0,0 +1,373 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Speed Test - Glassmorphism UI</title>
+  <!-- Optional: Font Awesome for icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Google Font for a clean, modern feel -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
+  <style>
+    /* -----------------------------
+       BASIC RESET & BODY STYLING
+    ------------------------------*/
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(to right, #0a0b0d, #17181b);
+      color: #fff;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 2rem;
+    }
+    /* -----------------------------
+       DASHBOARD GRID
+    ------------------------------*/
+    .dashboard {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 1.5rem;
+      max-width: 1200px;
+      width: 100%;
+    }
+    /* -----------------------------
+       GLASSMORPHISM CARD BASE
+    ------------------------------*/
+    .card {
+      position: relative;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 1rem;
+      overflow: hidden;
+      backdrop-filter: blur(15px);
+      -webkit-backdrop-filter: blur(15px);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+      display: flex;
+      flex-direction: column;
+      padding: 1.5rem;
+    }
+    .card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 153, 0, 0.08));
+      pointer-events: none;
+      mix-blend-mode: overlay;
+    }
+    .card h2, .card h3, .card h4, .card h5, .card p {
+      position: relative;
+      margin-bottom: 0.4rem;
+    }
+    .card h2, .card h3 {
+      font-weight: 500;
+    }
+    /* -----------------------------
+       1) DOWNLOAD SPEED CARD
+    ------------------------------*/
+    .download-card .metric-value {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 0.2rem;
+    }
+    .download-card .sub-info {
+      font-size: 0.85rem;
+      opacity: 0.7;
+      margin-bottom: 0.6rem;
+    }
+    .download-card .download-icon {
+      font-size: 2rem;
+      color: #ff9900;
+      margin-bottom: 1rem;
+    }
+    /* -----------------------------
+       2) UPLOAD SPEED CARD
+    ------------------------------*/
+    .upload-card .metric-value {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 0.2rem;
+    }
+    .upload-card .sub-info {
+      font-size: 0.85rem;
+      opacity: 0.7;
+      margin-bottom: 0.6rem;
+    }
+    .upload-card .upload-icon {
+      font-size: 2rem;
+      color: #ff9900;
+      margin-bottom: 1rem;
+    }
+    /* -----------------------------
+       3) PING CARD
+    ------------------------------*/
+    .ping-card .metric-value {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 0.2rem;
+    }
+    .ping-card .sub-info {
+      font-size: 0.85rem;
+      opacity: 0.7;
+      margin-bottom: 0.6rem;
+    }
+    .ping-card .ping-icon {
+      font-size: 2rem;
+      color: #ff9900;
+      margin-bottom: 1rem;
+    }
+    /* -----------------------------
+       4) START TEST CARD (Large, center focus)
+    ------------------------------*/
+    .start-test-card {
+      background: url('https://via.placeholder.com/300x400?text=SpeedTest+Blur') center/cover no-repeat;
+      background-blend-mode: overlay;
+      background-color: rgba(0,0,0,0.5);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      color: #fff;
+      text-align: center;
+      padding: 2rem;
+    }
+    .start-test-card h3 {
+      font-size: 1.3rem;
+      margin-bottom: 0.4rem;
+    }
+    .start-test-card p {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      margin-bottom: 1.2rem;
+    }
+    .start-btn {
+      display: inline-block;
+      background-color: rgba(255,255,255,0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 0.8rem 1.2rem;
+      border-radius: 0.5rem;
+      color: #fff;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+    .start-btn:hover {
+      background-color: rgba(255, 153, 0, 0.2);
+    }
+    /* -----------------------------
+       5) CLOCK CARD / STATUS CARD
+    ------------------------------*/
+    .clock-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+    .clock-card h4 {
+      margin-top: 1rem;
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+    }
+    .clock-face {
+      margin-top: 1rem;
+      width: 80px;
+      height: 80px;
+      border: 4px solid rgba(255,255,255,0.3);
+      border-radius: 50%;
+      position: relative;
+    }
+    .clock-face::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 4px;
+      height: 20px;
+      background: #ff9900;
+      transform: translate(-50%, -90%);
+      border-radius: 2px;
+    }
+    /* -----------------------------
+       6) PROGRESS CARD
+    ------------------------------*/
+    .progress-card .progress-icon {
+      font-size: 2rem;
+      color: #ff9900;
+      margin-bottom: 1rem;
+    }
+    .progress-card .progress-value {
+      font-size: 1.6rem;
+      font-weight: 600;
+      margin-bottom: 0.2rem;
+    }
+    .progress-card .small-text {
+      font-size: 0.85rem;
+      opacity: 0.7;
+    }
+    /* -----------------------------
+       7) RESULTS / INFO CARD
+    ------------------------------*/
+    .results-card {
+      text-align: center;
+    }
+    .results-card h4 {
+      font-size: 1.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .results-card .summary {
+      font-size: 0.9rem;
+      opacity: 0.8;
+    }
+  </style>
+</head>
+<body>
+  <div class="dashboard">
+    <!-- 1) DOWNLOAD SPEED CARD -->
+    <div class="card download-card">
+      <i class="fas fa-download download-icon"></i>
+      <h3>Download Speed</h3>
+      <div class="metric-value" id="downloadValue">--</div>
+      <p class="sub-info">Mbps</p>
+      <p class="sub-info">(<span id="downloadMBps">--</span> MB/s)</p>
+    </div>
+    <!-- 2) UPLOAD SPEED CARD -->
+    <div class="card upload-card">
+      <i class="fas fa-upload upload-icon"></i>
+      <h3>Upload Speed</h3>
+      <div class="metric-value" id="uploadValue">--</div>
+      <p class="sub-info">Mbps</p>
+      <p class="sub-info">(<span id="uploadMBps">--</span> MB/s)</p>
+    </div>
+    <!-- 3) PING CARD -->
+    <div class="card ping-card">
+      <i class="fas fa-stopwatch ping-icon"></i>
+      <h3>Ping</h3>
+      <div class="metric-value" id="pingValue">--</div>
+      <p class="sub-info">ms</p>
+      <p class="sub-info">Rating: <span id="pingRating">--</span></p>
+    </div>
+    <!-- 4) START TEST CARD -->
+    <div class="card start-test-card">
+      <h3>Speed Test Ready</h3>
+      <p>Tap below to begin measuring your connection.</p>
+      <button class="start-btn" id="startTest">Start Test</button>
+    </div>
+    <!-- 5) CLOCK CARD / STATUS CARD -->
+    <div class="card clock-card">
+      <h4>Test Status</h4>
+      <div class="clock-face"></div>
+      <p id="statusText" style="margin-top:1rem; opacity:0.8;">Not started</p>
+    </div>
+    <!-- 6) PROGRESS CARD -->
+    <div class="card progress-card">
+      <i class="fas fa-spinner progress-icon"></i>
+      <h4>Progress</h4>
+      <div class="progress-value" id="progressPercent">0%</div>
+      <p class="small-text">Current Step</p>
+    </div>
+    <!-- 7) RESULTS CARD -->
+    <div class="card results-card">
+      <h4>Test Summary</h4>
+      <p class="summary" id="resultSummary">No data yet.</p>
+    </div>
+  </div>
+  <script>
+    const startBtn = document.getElementById('startTest');
+    const statusText = document.getElementById('statusText');
+    const progressPercent = document.getElementById('progressPercent');
+    const downloadValue = document.getElementById('downloadValue');
+    const uploadValue = document.getElementById('uploadValue');
+    const pingValue = document.getElementById('pingValue');
+    const downloadMBps = document.getElementById('downloadMBps');
+    const pingRating = document.getElementById('pingRating');
+    const resultSummary = document.getElementById('resultSummary');
+    let testId = null;
+    let pollInterval = null;
+    startBtn.addEventListener('click', async () => {
+      // Reset UI
+      statusText.textContent = "Starting test...";
+      progressPercent.textContent = "0%";
+      downloadValue.textContent = "--";
+      uploadValue.textContent = "--";
+      pingValue.textContent = "--";
+      pingRating.textContent = "--";
+      downloadMBps.textContent = "--";
+      resultSummary.textContent = "Measuring your connection...";
+      // Start test by calling the backend
+      try {
+        const res = await fetch('/start-test', { method: 'POST' });
+        const data = await res.json();
+        testId = data.test_id;
+        // Begin polling for test status every 1 second
+        pollInterval = setInterval(fetchTestStatus, 1000);
+      } catch (error) {
+        statusText.textContent = "Error starting test.";
+        console.error("Error:", error);
+      }
+    });
+    async function fetchTestStatus() {
+      if (!testId) return;
+      try {
+        const res = await fetch(`/test-status/${testId}`);
+        if (res.status !== 200) {
+          statusText.textContent = "Test not found.";
+          clearInterval(pollInterval);
+          return;
+        }
+        const result = await res.json();
+        // Update UI based on backend response
+        statusText.textContent = result.status;
+        progressPercent.textContent = result.progress + "%";
+        if (result.download_mbps) {
+          downloadValue.textContent = result.download_mbps;
+          downloadMBps.textContent = result.download_MBps;
+        }
+        if (result.upload_mbps) {
+          uploadValue.textContent = result.upload_mbps;
+          document.getElementById('uploadMBps').textContent = result.upload_MBps;
+        }
+        if (result.ping) {
+          pingValue.textContent = result.ping;
+          pingRating.textContent = result.ping <= 20 ? "Excellent" :
+                                   result.ping <= 50 ? "Good" :
+                                   result.ping <= 100 ? "Average" : "Poor";
+        }
+        if (result.progress === 100 || result.progress < 0) {
+          // Test complete or encountered error
+          clearInterval(pollInterval);
+          resultSummary.textContent = `Download: ${result.download_mbps} Mbps, Upload: ${result.upload_mbps} Mbps, Ping: ${result.ping} ms`;
+        }
+      } catch (error) {
+        console.error("Error fetching test status:", error);
+      }
+    }
+  </script>
+</body>
+</html>

templates/index1.html ADDED Viewed

	@@ -0,0 +1,357 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Internet Speed Test</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            background-color: #f8f9fa;
+        }
+        .speed-card {
+            transition: all 0.3s ease;
+        }
+        .speed-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .progress {
+            height: 10px;
+        }
+        .result-section {
+            display: none;
+        }
+        .gauge-container {
+            width: 200px;
+            height: 200px;
+            margin: 0 auto;
+            position: relative;
+        }
+        .gauge {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+        .gauge-value {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .loading-spinner {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-md-10">
+                <div class="card shadow-lg">
+                    <div class="card-header bg-primary text-white">
+                        <h2 class="text-center mb-0">
+                            <i class="fas fa-tachometer-alt me-2"></i>Internet Speed Test
+                        </h2>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-center mb-4">
+                            <p class="lead">Test your internet connection speed with our fast and reliable tool</p>
+                            <button id="startTest" class="btn btn-primary btn-lg px-5">
+                                <i class="fas fa-play me-2"></i>Start Test
+                            </button>
+                            <div class="loading-spinner mt-4" id="loadingSpinner">
+                                <div class="progress mb-3">
+                                    <div class="progress-bar progress-bar-striped progress-bar-animated"
+                                         id="progressBar" role="progressbar" style="width: 0%"></div>
+                                </div>
+                                <p id="statusText" class="text-muted">Initializing...</p>
+                            </div>
+                        </div>
+                        <div class="result-section" id="resultSection">
+                            <div class="row">
+                                <div class="col-md-4">
+                                    <div class="card speed-card text-center mb-3">
+                                        <div class="card-body">
+                                            <h5 class="card-title">
+                                                <i class="fas fa-download text-primary me-2"></i>Download
+                                            </h5>
+                                            <div class="gauge-container">
+                                                <div class="gauge">
+                                                    <canvas id="downloadGauge"></canvas>
+                                                    <div class="gauge-value">
+                                                        <span id="downloadValue">0</span> Mbps
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <p class="text-muted mt-2">
+                                                <span id="downloadMBps">0</span> MB/s
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="card speed-card text-center mb-3">
+                                        <div class="card-body">
+                                            <h5 class="card-title">
+                                                <i class="fas fa-upload text-success me-2"></i>Upload
+                                            </h5>
+                                            <div class="gauge-container">
+                                                <div class="gauge">
+                                                    <canvas id="uploadGauge"></canvas>
+                                                    <div class="gauge-value">
+                                                        <span id="uploadValue">0</span> Mbps
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <p class="text-muted mt-2">
+                                                <span id="uploadMBps">0</span> MB/s
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="card speed-card text-center mb-3">
+                                        <div class="card-body">
+                                            <h5 class="card-title">
+                                                <i class="fas fa-stopwatch text-warning me-2"></i>Ping
+                                            </h5>
+                                            <div class="gauge-container">
+                                                <div class="gauge">
+                                                    <canvas id="pingGauge"></canvas>
+                                                    <div class="gauge-value">
+                                                        <span id="pingValue">0</span> ms
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <p class="text-muted mt-2">
+                                                <span id="pingRating">-</span>
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="text-center mt-4">
+                                <button id="retestButton" class="btn btn-outline-primary">
+                                    <i class="fas fa-redo me-2"></i>Test Again
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Chart.js for gauges -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const startButton = document.getElementById('startTest');
+            const retestButton = document.getElementById('retestButton');
+            const loadingSpinner = document.getElementById('loadingSpinner');
+            const resultSection = document.getElementById('resultSection');
+            const progressBar = document.getElementById('progressBar');
+            const statusText = document.getElementById('statusText');
+            let downloadGauge, uploadGauge, pingGauge;
+            let currentTestId = null;
+            let pollingInterval = null;
+            // Initialize gauges
+            function initGauges() {
+                // Download gauge
+                downloadGauge = new Chart(document.getElementById('downloadGauge'), {
+                    type: 'doughnut',
+                    data: {
+                        datasets: [{
+                            data: [0, 100],
+                            backgroundColor: ['#0d6efd', '#e9ecef']
+                        }]
+                    },
+                    options: {
+                        cutout: '80%',
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        animation: {
+                            duration: 1000
+                        },
+                        plugins: {
+                            tooltip: {
+                                enabled: false
+                            }
+                        }
+                    }
+                });
+                // Upload gauge
+                uploadGauge = new Chart(document.getElementById('uploadGauge'), {
+                    type: 'doughnut',
+                    data: {
+                        datasets: [{
+                            data: [0, 100],
+                            backgroundColor: ['#198754', '#e9ecef']
+                        }]
+                    },
+                    options: {
+                        cutout: '80%',
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        animation: {
+                            duration: 1000
+                        },
+                        plugins: {
+                            tooltip: {
+                                enabled: false
+                            }
+                        }
+                    }
+                });
+                // Ping gauge
+                pingGauge = new Chart(document.getElementById('pingGauge'), {
+                    type: 'doughnut',
+                    data: {
+                        datasets: [{
+                            data: [0, 100],
+                            backgroundColor: ['#ffc107', '#e9ecef']
+                        }]
+                    },
+                    options: {
+                        cutout: '80%',
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        animation: {
+                            duration: 1000
+                        },
+                        plugins: {
+                            tooltip: {
+                                enabled: false
+                            }
+                        }
+                    }
+                });
+            }
+            // Start the speed test
+            async function startTest() {
+                startButton.disabled = true;
+                loadingSpinner.style.display = 'block';
+                resultSection.style.display = 'none';
+                progressBar.style.width = '0%';
+                statusText.textContent = 'Initializing...';
+                try {
+                    const response = await fetch('/start-test', {
+                        method: 'POST'
+                    });
+                    const data = await response.json();
+                    currentTestId = data.test_id;
+                    // Start polling for updates
+                    pollingInterval = setInterval(pollTestStatus, 1000);
+                } catch (error) {
+                    console.error('Error starting test:', error);
+                    statusText.textContent = 'Error starting test. Please try again.';
+                    startButton.disabled = false;
+                }
+            }
+            // Poll for test status
+            async function pollTestStatus() {
+                try {
+                    const response = await fetch(`/test-status/${currentTestId}`);
+                    const data = await response.json();
+                    // Update progress
+                    progressBar.style.width = `${data.progress}%`;
+                    statusText.textContent = data.status;
+                    // Check if test is complete
+                    if (data.progress === 100) {
+                        clearInterval(pollingInterval);
+                        displayResults(data);
+                    } else if (data.progress === -1) {
+                        // Error occurred
+                        clearInterval(pollingInterval);
+                        statusText.textContent = data.status;
+                        startButton.disabled = false;
+                    }
+                } catch (error) {
+                    console.error('Error polling test status:', error);
+                    clearInterval(pollingInterval);
+                    statusText.textContent = 'Error getting test results. Please try again.';
+                    startButton.disabled = false;
+                }
+            }
+            // Display test results
+            function displayResults(data) {
+                loadingSpinner.style.display = 'none';
+                resultSection.style.display = 'block';
+                startButton.disabled = false;
+                // Update download values
+                document.getElementById('downloadValue').textContent = data.download_mbps;
+                document.getElementById('downloadMBps').textContent = data.download_MBps;
+                // Update upload values
+                document.getElementById('uploadValue').textContent = data.upload_mbps;
+                document.getElementById('uploadMBps').textContent = data.upload_MBps;
+                // Update ping values
+                document.getElementById('pingValue').textContent = data.ping;
+                let pingRating = 'Excellent';
+                if (data.ping > 100) {
+                    pingRating = 'Poor';
+                } else if (data.ping > 50) {
+                    pingRating = 'Average';
+                } else if (data.ping > 20) {
+                    pingRating = 'Good';
+                }
+                document.getElementById('pingRating').textContent = pingRating;
+                // Update gauges
+                updateGauges(data);
+            }
+            // Update gauge displays
+            function updateGauges(data) {
+                // Map values to appropriate ranges for gauges
+                const downloadPct = Math.min(data.download_mbps / 150 * 100, 100);
+                const uploadPct = Math.min(data.upload_mbps / 100 * 100, 100);
+                const pingPct = Math.max(0, Math.min((150 - data.ping) / 150 * 100, 100));
+                // Update download gauge
+                downloadGauge.data.datasets[0].data = [downloadPct, 100 - downloadPct];
+                downloadGauge.update();
+                // Update upload gauge
+                uploadGauge.data.datasets[0].data = [uploadPct, 100 - uploadPct];
+                uploadGauge.update();
+                // Update ping gauge
+                pingGauge.data.datasets[0].data = [pingPct, 100 - pingPct];
+                pingGauge.update();
+            }
+            // Initialize gauges
+            initGauges();
+            // Event listeners
+            startButton.addEventListener('click', startTest);
+            retestButton.addEventListener('click', startTest);
+        });
+    </script>
+</body>
+</html>

templates/testing.html ADDED Viewed

	@@ -0,0 +1,90 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Speed Test UI</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    #progress {
+      transform: rotate(-90deg);
+      transform-origin: center;
+      transition: stroke-dasharray 1s ease-in-out;
+    }
+    .glow {
+      box-shadow: 0 0 30px #3b82f6, 0 0 60px #3b82f6;
+    }
+  </style>
+</head>
+<body class="bg-[#0f172a] h-screen flex items-center justify-center">
+  <!-- Container -->
+  <div class="relative w-[600px] h-[400px] bg-[#1e293b] rounded-xl shadow-xl glow">
+    <!-- Gauge -->
+    <div class="flex items-center justify-center h-full">
+      <div class="relative">
+        <svg class="w-64 h-64" viewBox="0 0 36 36">
+          <path class="text-gray-700" fill="none" stroke="currentColor" stroke-width="4" d="M18 2a16 16 0 0 1 0 32 16 16 0 0 1 0-32"></path>
+          <path id="progress" fill="none" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" stroke-dasharray="0, 100" d="M18 2a16 16 0 0 1 0 32 16 16 0 0 1 0-32"></path>
+        </svg>
+        <div class="absolute inset-0 flex items-center justify-center text-white text-5xl font-bold" id="speed">0</div>
+        <div class="absolute bottom-5 left-10 text-white">
+          <span class="text-sm">Ping</span>
+          <div class="text-lg" id="ping">-- ms</div>
+        </div>
+        <div class="absolute bottom-5 right-10 text-white">
+          <span class="text-sm">Download</span>
+          <div class="text-lg" id="download">-- Mbps</div>
+        </div>
+      </div>
+    </div>
+    <!-- Light Effect -->
+    <div class="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-blue-600 opacity-75 animate-pulse"></div>
+  </div>
+  <script>
+    // Fake speed test animation
+    const speedElement = document.getElementById('speed');
+    const pingElement = document.getElementById('ping');
+    const downloadElement = document.getElementById('download');
+    const progressElement = document.getElementById('progress');
+    let speed = 0;
+    let progress = 0;
+    function animateSpeed() {
+      const targetSpeed = Math.floor(Math.random() * 150) + 50;  // Random speed between 50-200 Mbps
+      const ping = Math.floor(Math.random() * 50) + 10;          // Random ping 10-50 ms
+      const download = (targetSpeed - Math.random() * 10).toFixed(2);
+      let interval = setInterval(() => {
+        if (speed >= targetSpeed) {
+          clearInterval(interval);
+        } else {
+          speed += 2;
+          progress = (speed / 200) * 100;
+          speedElement.textContent = speed;
+          progressElement.style.strokeDasharray = `${progress}, 100`;
+        }
+      }, 50);
+      setTimeout(() => {
+        pingElement.textContent = `${ping} ms`;
+        downloadElement.textContent = `${download} Mbps`;
+      }, 2000);
+    }
+    // Start animation after DOM load
+    document.addEventListener('DOMContentLoaded', () => {
+      animateSpeed();
+    });
+  </script>
+</body>
+</html>