From fbbedc5f420407e2f79068281270d0c532b3b25d Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan.shirvanian@beyondpricing.com>
Date: Wed, 23 Jul 2025 16:54:11 -0400
Subject: [PATCH 1/7] improve UI

---
 index.html | 720 +++++++++++++++++++++++++++++------------------------
 1 file changed, 400 insertions(+), 320 deletions(-)
diff --git a/index.html b/index.html
index 120ea5685..4bad511e7 100755
--- a/index.html
+++ b/index.html
@@ -1,32 +1,45 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" class="h-full">
 <head>
 <link rel="shortcut icon" href="favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
 <meta charset="UTF-8" />
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+    tailwind.config = {
+        darkMode: 'class',
+        theme: {
+            extend: {
+                animation: {
+                    'pulse-slow': 'pulse 3s ease-in-out infinite',
+                    'spin-slow': 'spin 3s linear infinite',
+                }
+            }
+        }
+    }
+</script>
 <script type="text/javascript" src="speedtest.js"></script>
 <script type="text/javascript">
 function I(i){return document.getElementById(i);}
 
 //LIST OF TEST SERVERS. Leave empty if you're doing a standalone installation. See documentation for details
 var SPEEDTEST_SERVERS=[
-	/*{	//this server doesn't actually exist, remove it
-		name:"Example Server 1", //user friendly name for the server
-		server:"//test1.mydomain.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+	{	//this server doesn't actually exist, remove it
+		name:"netflakes (local)", //user friendly name for the server
+		server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
 		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
 		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
 		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
 		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
 	},
 	{	//this server doesn't actually exist, remove it
-		name:"Example Server 2", //user friendly name for the server
-		server:"//test2.example.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-		dlURL:"garbage.php",  //path to download test on this server (garbage.php or replacement)
-		ulURL:"empty.php",  //path to upload test on this server (empty.php or replacement)
-		pingURL:"empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-		getIpURL:"getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	}*/
-	//add other servers here, comma separated
+		name:"netflakes (public)", //user friendly name for the server
+		server:"https://netflakes.fyi/speedtest", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	}
 ];
 
 //INITIALIZE SPEEDTEST
@@ -200,318 +213,385 @@
 }
 </script>
 <style type="text/css">
-	html,body{
-		border:none; padding:0; margin:0;
-		background:#FFFFFF;
-		color:#202020;
-	}
-	body{
-		text-align:center;
-		font-family:"Roboto",sans-serif;
-	}
-	h1{
-		color:#404040;
-	}
-	#loading{
-		background-color:#FFFFFF;
-		color:#404040;
-		text-align:center;
-	}
-	span.loadCircle{
-		display:inline-block;
-		width:2em;
-		height:2em;
-		vertical-align:middle;
-		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAP1BMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZyFzwnAAAAFHRSTlMAEvRFvX406baecwbf0casimhSHyiwmqgAAADpSURBVHja7dbJbQMxAENRahnN5lkc//5rDRAkDeRgHszXgACJoKiIiIiIiIiIiIiIiIiIiIj4HHspsrpAVhdVVguzrA4OWc10WcEqpwKbnBo0OU1Q5NSpsoJFTgOecrrdEag85DRgktNqfoEdTjnd7hrEHMEJvmRUYJbTYk5Agy6nau6Abp5Cm7mDBtRdPi9gyKdU7w4p1fsLvyqs8hl4z9/w3n/Hmr9WoQ65lAU4d7lMYOz//QboRR5jBZibLMZdAR6O/Vfa1PlxNr3XdS3HzK/HVPRu/KnLs8iAOh993VpRRERERMT/fAN60wwWaVyWwAAAAABJRU5ErkJggg==');
-		background-size:2em 2em;
-		margin-right:0.5em;
-		animation: spin 0.6s linear infinite;
-	}
-	@keyframes spin{
-		0%{transform:rotate(0deg);}
-		100%{transform:rotate(359deg);}
-	}
-	#startStopBtn{
-		display:inline-block;
-		margin:0 auto;
-		color:#6060AA;
-		background-color:rgba(0,0,0,0);
-		border:0.15em solid #6060FF;
-		border-radius:0.3em;
-		transition:all 0.3s;
-		box-sizing:border-box;
-		width:8em; height:3em;
-		line-height:2.7em;
-		cursor:pointer;
-		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
-	}
-	#startStopBtn:hover{
-		box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
-	}
-	#startStopBtn.running{
-		background-color:#FF3030;
-		border-color:#FF6060;
-		color:#FFFFFF;
-	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
-	#serverArea{
-		margin-top:1em;
-	}
-	#server{
-		font-size:1em;
-		padding:0.2em;
-	}
-	#test{
-		margin-top:2em;
-		margin-bottom:12em;
-	}
-	div.testArea{
-		display:inline-block;
-		width:16em;
-		height:12.5em;
-		position:relative;
-		box-sizing:border-box;
-	}
-	div.testArea2{
-		display:inline-block;
-		width:14em;
-		height:7em;
-		position:relative;
-		box-sizing:border-box;
-		text-align:center;
-	}
-	div.testArea div.testName{
-		position:absolute;
-		top:0.1em; left:0;
-		width:100%;
-		font-size:1.4em;
-		z-index:9;
-	}
-	div.testArea2 div.testName{
-        display:block;
-        text-align:center;
-        font-size:1.4em;
-	}
-	div.testArea div.meterText{
-		position:absolute;
-		bottom:1.55em; left:0;
-		width:100%;
-		font-size:2.5em;
-		z-index:9;
-	}
-	div.testArea2 div.meterText{
-        display:inline-block;
-        font-size:2.5em;
-	}
-	div.meterText:empty:before{
-		content:"0.00";
-	}
-	div.testArea div.unit{
-		position:absolute;
-		bottom:2em; left:0;
-		width:100%;
-		z-index:9;
-	}
-	div.testArea2 div.unit{
-		display:inline-block;
-	}
-	div.testArea canvas{
-		position:absolute;
-		top:0; left:0; width:100%; height:100%;
-		z-index:1;
-	}
-	div.testGroup{
-		display:block;
-        margin: 0 auto;
-	}
-	#shareArea{
-		width:95%;
-		max-width:40em;
-		margin:0 auto;
-		margin-top:2em;
-	}
-	#shareArea > *{
-		display:block;
-		width:100%;
-		height:auto;
-		margin: 0.25em 0;
-	}
-	#privacyPolicy{
-        position:fixed;
-        top:2em;
-        bottom:2em;
-        left:2em;
-        right:2em;
-        overflow-y:auto;
-        width:auto;
-        height:auto;
-        box-shadow:0 0 3em 1em #000000;
-        z-index:999999;
-        text-align:left;
-        background-color:#FFFFFF;
-        padding:1em;
-	}
-	a.privacy{
-        text-align:center;
-        font-size:0.8em;
-        color:#808080;
-        padding: 0 3em;
-	}
-    div.closePrivacyPolicy {
-        width: 100%;
-        text-align: center;
-    }
-    div.closePrivacyPolicy a.privacy {
-        padding: 1em 3em;
-    }
-	@media all and (max-width:40em){
-		body{
-			font-size:0.8em;
-		}
-	}
-	div.visible{
-		animation: fadeIn 0.4s;
-		display:block;
-	}
-	div.hidden{
-		animation: fadeOut 0.4s;
-		display:none;
-	}
-	@keyframes fadeIn{
-		0%{
-			opacity:0;
-		}
-		100%{
-			opacity:1;
-		}
-	}
-	@keyframes fadeOut{
-		0%{
-			display:block;
-			opacity:1;
-		}
-		100%{
-			display:block;
-			opacity:0;
-		}
-	}
-	@media all and (prefers-color-scheme: dark){
-		html,body,#loading{
-			background:#202020;
-			color:#F4F4F4;
-			color-scheme:dark;
-		}
-		h1{
-			color:#E0E0E0;
-		}
-		a{
-			color:#9090FF;
-		}
-		#privacyPolicy{
-			background:#000000;
-		}
-		#resultsImg{
-			filter: invert(1);
-		}
+	/* Modern canvas meter styling */
+	.meter-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	/* Maintain existing canvas functionality */
+	div.testArea canvas {
+		position: absolute;
+		top: 50%;
+		left: 50%; 
+		width: 100%; 
+		height: 100%;
+		transform: translate(-50%, -50%);
+		z-index: 1;
+	}
+	
+	/* Animation keyframes */
+	@keyframes fadeIn {
+		0% { opacity: 0; transform: translateY(10px); }
+		100% { opacity: 1; transform: translateY(0); }
+	}
+	
+	@keyframes fadeOut {
+		0% { opacity: 1; transform: translateY(0); }
+		100% { opacity: 0; transform: translateY(10px); }
+	}
+	
+	div.visible {
+		animation: fadeIn 0.4s ease-out;
+		display: block;
+	}
+	
+	div.hidden {
+		animation: fadeOut 0.4s ease-out;
+		display: none;
+	}
+	
+	/* Custom button styling */
+	#startStopBtn {
+		transition: all 0.3s ease;
+	}
+	
+	#startStopBtn:before {
+		content: "Start Test";
+	}
+	
+	#startStopBtn.running {
+		background: linear-gradient(to right, #dc2626, #ef4444) !important;
+		color: white !important;
+		font-weight: 600 !important;
+		padding: 1rem 2rem !important;
+		border-radius: 9999px !important;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+		transition: all 0.2s !important;
+	}
+	
+	#startStopBtn.running:hover {
+		background: linear-gradient(to right, #b91c1c, #dc2626) !important;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+		transform: scale(1.05) !important;
+	}
+	
+	#startStopBtn.running:before {
+		content: "Abort Test";
+	}
+	
+	/* Loading spinner */
+	.loadCircle {
+		display: inline-block;
+		width: 1.5rem;
+		height: 1.5rem;
+		border: 2px solid transparent;
+		border-top: 2px solid currentColor;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+		margin-right: 0.5rem;
+	}
+	
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+	
+	/* Privacy policy modal */
+	#privacyPolicy {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.8);
+		z-index: 999999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem;
+	}
+	
+	#privacyPolicy > div {
+		background: white;
+		max-height: 80vh;
+		overflow-y: auto;
+		border-radius: 0.5rem;
+		padding: 2rem;
+		max-width: 600px;
+		width: 100%;
+	}
+	
+	.dark #privacyPolicy > div {
+		background: rgb(31, 41, 55);
+		color: white;
 	}
 </style>
 <title>LibreSpeed</title>
 </head>
-<body onload="initServers()">
-<h1>LibreSpeed</h1>
-<div id="loading" class="visible">
-	<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
-</div>
-<div id="testWrapper" class="hidden">
-	<div id="startStopBtn" onclick="startStop()"></div><br/>
-	<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
-	<div id="serverArea">
-		Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
-	</div>
-	<div id="test">
-		<div class="testGroup">
-            <div class="testArea2">
-				<div class="testName">Ping</div>
-				<div id="pingText" class="meterText" style="color:#AA6060"></div>
-				<div class="unit">ms</div>
-			</div>
-			<div class="testArea2">
-				<div class="testName">Jitter</div>
-				<div id="jitText" class="meterText" style="color:#AA6060"></div>
-				<div class="unit">ms</div>
-			</div>
-		</div>
-		<div class="testGroup">
-			<div class="testArea">
-				<div class="testName">Download</div>
-				<canvas id="dlMeter" class="meter"></canvas>
-				<div id="dlText" class="meterText"></div>
-				<div class="unit">Mbit/s</div>
-			</div>
-			<div class="testArea">
-				<div class="testName">Upload</div>
-				<canvas id="ulMeter" class="meter"></canvas>
-				<div id="ulText" class="meterText"></div>
-				<div class="unit">Mbit/s</div>
-			</div>
-		</div>
-		<div id="ipArea">
-			<span id="ip"></span>
-		</div>
-		<div id="shareArea" style="display:none">
-			<h3>Share results</h3>
-			<p>Test ID: <span id="testId"></span></p>
-			<input type="text" value="" id="resultsURL" readonly="readonly" onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')"/>
-			<img src="" id="resultsImg" />
-		</div>
-	</div>
-	<a href="https://github.com/librespeed/speedtest">Source code</a>
-</div>
-<div id="privacyPolicy" style="display:none">
-    <h2>Privacy Policy</h2>
-    <p>This HTML5 speed test server is configured with telemetry enabled.</p>
-    <h4>What data we collect</h4>
-    <p>
-        At the end of the test, the following data is collected and stored:
-        <ul>
-            <li>Test ID</li>
-            <li>Time of testing</li>
-            <li>Test results (download and upload speed, ping and jitter)</li>
-            <li>IP address</li>
-            <li>ISP information</li>
-            <li>Approximate location (inferred from IP address, not GPS)</li>
-            <li>User agent and browser locale</li>
-            <li>Test log (contains no personal information)</li>
-        </ul>
-    </p>
-    <h4>How we use the data</h4>
-    <p>
-        Data collected through this service is used to:
-        <ul>
-            <li>Allow sharing of test results (sharable image for forums, etc.)</li>
-            <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
-        </ul>
-        No personal information is disclosed to third parties.
-    </p>
-    <h4>Your consent</h4>
-    <p>
-        By starting the test, you consent to the terms of this privacy policy.
-    </p>
-    <h4>Data removal</h4>
-    <p>
-        If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
-        Contact this email address for all deletion requests: <a href="mailto:PUT@YOUR_EMAIL.HERE">TO BE FILLED BY DEVELOPER</a>.
-    </p>
-    <br/><br/>
-    <div class="closePrivacyPolicy">
-        <a class="privacy" href="#" onclick="I('privacyPolicy').style.display='none'">Close</a>
+<body onload="initServers()" class="h-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+    <div class="min-h-full flex flex-col">
+        <!-- Header -->
+        <header class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between items-center py-4">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
+                    </div>
+                    
+                    <!-- Dark mode toggle -->
+                    <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                        </svg>
+                        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Loading Screen -->
+        <div id="loading" class="visible flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <div class="mb-4">
+                    <span class="loadCircle text-blue-500"></span>
+                </div>
+                <p id="message" class="text-lg text-gray-700 dark:text-gray-300">Selecting a server...</p>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <main id="testWrapper" class="hidden flex-1 px-4 py-12">
+            <div class="w-full max-w-6xl mx-auto mt-16">
+                
+                <!-- Server Selection (when available) -->
+                <div id="serverArea" class="mb-6 text-center">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-4 shadow-sm inline-block">
+                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 mr-3">Test Server:</label>
+                        <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])" 
+                                class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Speed Display Section -->
+                <section class="text-center mb-8">
+                    <!-- Start/Stop Button -->
+                    <button id="startStopBtn" onclick="startStop()" 
+                            class="group relative bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 mb-8">
+                    </button>
+                </section>
+
+                <!-- Test Results Grid -->
+                <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" id="test">
+                    <!-- Download Speed -->
+                    <div class="testArea bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative">
+                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
+                            <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
+                            </svg>
+                            Download
+                        </div>
+                        <div class="meter-container w-40 h-32 mx-auto mb-4 relative">
+                            <canvas id="dlMeter" class="w-full h-full"></canvas>
+                        </div>
+                        <div class="text-center">
+                            <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></div>
+                            <div class="unit text-sm text-gray-500 dark:text-gray-400">Mbit/s</div>
+                        </div>
+                    </div>
+
+                    <!-- Upload Speed -->
+                    <div class="testArea bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative">
+                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
+                            <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                            </svg>
+                            Upload
+                        </div>
+                        <div class="meter-container w-40 h-32 mx-auto mb-4 relative">
+                            <canvas id="ulMeter" class="w-full h-full"></canvas>
+                        </div>
+                        <div class="text-center">
+                            <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></div>
+                            <div class="unit text-sm text-gray-500 dark:text-gray-400">Mbit/s</div>
+                        </div>
+                    </div>
+
+                    <!-- Ping -->
+                    <div class="testArea2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
+                            <svg class="w-4 h-4 mr-2 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            Ping
+                        </div>
+                        <div class="text-center">
+                            <div id="pingText" class="text-3xl font-bold text-yellow-600 dark:text-yellow-400 mb-2"></div>
+                            <div class="unit text-sm text-gray-500 dark:text-gray-400">ms</div>
+                        </div>
+                    </div>
+
+                    <!-- Jitter -->
+                    <div class="testArea2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
+                            <svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            </svg>
+                            Jitter
+                        </div>
+                        <div class="text-center">
+                            <div id="jitText" class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2"></div>
+                            <div class="unit text-sm text-gray-500 dark:text-gray-400">ms</div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- IP Address Display -->
+                <section class="text-center mb-8" id="ipArea">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm inline-block">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 flex items-center justify-center">
+                            <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            Your IP Address
+                        </h3>
+                        <span id="ip" class="font-mono text-lg text-gray-900 dark:text-white"></span>
+                    </div>
+                </section>
+
+                <!-- Share Results -->
+                <div id="shareArea" class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm mx-auto max-w-2xl" style="display:none">
+                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">Share Your Results</h3>
+                    <div class="space-y-4">
+                        <div class="text-center">
+                            <span class="text-sm text-gray-600 dark:text-gray-300">Test ID: </span>
+                            <span id="testId" class="font-mono text-gray-900 dark:text-white"></span>
+                        </div>
+                        <input type="text" value="" id="resultsURL" readonly="readonly" 
+                               onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')"
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm cursor-pointer focus:ring-2 focus:ring-blue-500"/>
+                        <div class="text-center">
+                            <img src="" id="resultsImg" class="mx-auto rounded-lg shadow-lg max-w-full h-auto" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                <div class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-600 dark:text-gray-300">
+                    <div class="flex space-x-4 mb-2 sm:mb-0">
+                        <a class="privacy hover:text-blue-500 transition-colors cursor-pointer" onclick="I('privacyPolicy').style.display='flex'">Privacy Policy</a>
+                        <a href="https://github.com/librespeed/speedtest" class="hover:text-blue-500 transition-colors">Source Code</a>
+                    </div>
+                    <p>&copy; 2024 LibreSpeed. Open source speed test.</p>
+                </div>
+            </div>
+        </footer>
     </div>
-    <br/>
-</div>
+
+    <!-- Privacy Policy Modal -->
+    <div id="privacyPolicy" style="display:none">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl">
+            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Privacy Policy</h2>
+            </div>
+            <div class="p-6 space-y-4 text-gray-700 dark:text-gray-300">
+                <p>This HTML5 speed test server is configured with telemetry enabled.</p>
+                <div>
+                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">What data we collect</h4>
+                    <p>At the end of the test, the following data is collected and stored:</p>
+                    <ul class="list-disc list-inside ml-4 space-y-1">
+                        <li>Test ID</li>
+                        <li>Time of testing</li>
+                        <li>Test results (download and upload speed, ping and jitter)</li>
+                        <li>IP address</li>
+                        <li>ISP information</li>
+                        <li>Approximate location (inferred from IP address, not GPS)</li>
+                        <li>User agent and browser locale</li>
+                        <li>Test log (contains no personal information)</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">How we use the data</h4>
+                    <p>Data collected through this service is used to:</p>
+                    <ul class="list-disc list-inside ml-4 space-y-1">
+                        <li>Allow sharing of test results (sharable image for forums, etc.)</li>
+                        <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
+                    </ul>
+                    <p>No personal information is disclosed to third parties.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Your consent</h4>
+                    <p>By starting the test, you consent to the terms of this privacy policy.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Data removal</h4>
+                    <p>If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.</p>
+                    <p>Contact this email address for all deletion requests: <a href="mailto:PUT@YOUR_EMAIL.HERE" class="text-blue-500 hover:text-blue-600">TO BE FILLED BY DEVELOPER</a>.</p>
+                </div>
+            </div>
+            <div class="p-6 border-t border-gray-200 dark:border-gray-700 text-center">
+                <button onclick="I('privacyPolicy').style.display='none'" 
+                        class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Dark Mode Script -->
+    <script>
+        // Dark mode functionality
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+        // Check if dark mode is enabled
+        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            themeToggleLightIcon.classList.remove('hidden');
+            document.documentElement.classList.add('dark');
+        } else {
+            themeToggleDarkIcon.classList.remove('hidden');
+        }
+
+        themeToggleBtn.addEventListener('click', function() {
+            // Toggle icons inside button
+            themeToggleDarkIcon.classList.toggle('hidden');
+            themeToggleLightIcon.classList.toggle('hidden');
+
+            // If set via local storage previously
+            if (localStorage.getItem('color-theme')) {
+                if (localStorage.getItem('color-theme') === 'light') {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                }
+            } else {
+                if (document.documentElement.classList.contains('dark')) {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                } else {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                }
+            }
+        });
+    </script>
 </body>
 </html>

From bf2d1d6a27ea0a27caa4387e2ba9b1593902a04e Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan.shirvanian@beyondpricing.com>
Date: Wed, 23 Jul 2025 20:46:25 -0400
Subject: [PATCH 2/7] improve UI

---
 index.html | 730 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 389 insertions(+), 341 deletions(-)

diff --git a/index.html b/index.html
index 4bad511e7..8262c84a4 100755
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <link rel="shortcut icon" href="favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
 <meta charset="UTF-8" />
+<title>LibreSpeed - Internet Speed Test</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
     tailwind.config = {
@@ -24,22 +25,22 @@
 
 //LIST OF TEST SERVERS. Leave empty if you're doing a standalone installation. See documentation for details
 var SPEEDTEST_SERVERS=[
-	{	//this server doesn't actually exist, remove it
-		name:"netflakes (local)", //user friendly name for the server
-		server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
-		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
-		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	},
-	{	//this server doesn't actually exist, remove it
-		name:"netflakes (public)", //user friendly name for the server
-		server:"https://netflakes.fyi/speedtest", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
-		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
-		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	}
+	// {	//this server doesn't actually exist, remove it
+	// 	name:"local", //user friendly name for the server
+	// 	server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+	// 	dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+	// 	ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+	// 	pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+	// 	getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	// },
+	// {	//this server doesn't actually exist, remove it
+	// 	name:"kamilszczepanski.com", //user friendly name for the server
+	// 	server:"//la.speedtest.clouvider.net/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+	// 	dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+	// 	ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+	// 	pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+	// 	getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	// }
 ];
 
 //INITIALIZE SPEEDTEST
@@ -48,11 +49,14 @@
 
 //SERVER AUTO SELECTION
 function initServers(){
+	// Initialize theme toggle first
+	initThemeToggle();
+	
 	if(SPEEDTEST_SERVERS.length==0){ //standalone installation
 		//just make the UI visible
-		I("loading").className="hidden";
+		I("loading").style.display="none";
 		I("serverArea").style.display="none";
-		I("testWrapper").className="visible";
+		I("testWrapper").classList.remove("hidden");
 		initUI();
 	}else{ //multiple servers
 		var noServersAvailable=function(){
@@ -61,18 +65,25 @@
 		var runServerSelect=function(){
 			s.selectServer(function(server){
 				if(server!=null){ //at least 1 server is available
-					I("loading").className="hidden"; //hide loading message
+					I("loading").style.display="none"; //hide loading message
 					//populate server list for manual selection
+					var serverSelect = I("server");
+					// Clear existing options except the first "Auto Selected"
+					serverSelect.innerHTML = '<option value="">Auto Selected</option>';
+					
 					for(var i=0;i<SPEEDTEST_SERVERS.length;i++){
 						if(SPEEDTEST_SERVERS[i].pingT==-1) continue;
 						var option=document.createElement("option");
 						option.value=i;
 						option.textContent=SPEEDTEST_SERVERS[i].name;
 						if(SPEEDTEST_SERVERS[i]===server) option.selected=true;
-						I("server").appendChild(option);
+						serverSelect.appendChild(option);
 					}
+					
+					// Initialize server info display
+					updateServerInfo();
 					//show test UI
-					I("testWrapper").className="visible";
+					I("testWrapper").classList.remove("hidden");
 					initUI();
 				}else{ //no servers are available, the test cannot proceed
 					noServersAvailable();
@@ -97,36 +108,73 @@
 	}
 }
 
-var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
-var dlColor="#6060AA",
-	ulColor="#616161";
-var progColor=meterBk;
+var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#E5E7EB";
+var dlColor="#3B82F6",
+	ulColor="#8B5CF6";
+var progColor="#94A3B8";
 
 //CODE FOR GAUGES
 function drawMeter(c,amount,bk,fg,progress,prog){
+	if(!c || !c.getContext) return;
+	
 	var ctx=c.getContext("2d");
 	var dp=window.devicePixelRatio||1;
 	var cw=c.clientWidth*dp, ch=c.clientHeight*dp;
-	var sizScale=ch*0.0055;
+	
+	// Ensure canvas has dimensions
+	if(cw === 0 || ch === 0) {
+		cw = 320 * dp;
+		ch = 320 * dp;
+	}
+	
+	// For the main speedometer, use a different approach
+	var isMainSpeedometer = (c.id === "speedometer");
+	var sizScale = isMainSpeedometer ? Math.min(cw, ch) * 0.002 : ch * 0.0055;
+	
 	if(c.width==cw&&c.height==ch){
 		ctx.clearRect(0,0,cw,ch);
 	}else{
 		c.width=cw;
 		c.height=ch;
 	}
-	ctx.beginPath();
-	ctx.strokeStyle=bk;
-	ctx.lineWidth=12*sizScale;
-	ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,Math.PI*0.1);
-	ctx.stroke();
-	ctx.beginPath();
-	ctx.strokeStyle=fg;
-	ctx.lineWidth=12*sizScale;
-	ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,amount*Math.PI*1.2-Math.PI*1.1);
-	ctx.stroke();
-	if(typeof progress !== "undefined"){
-		ctx.fillStyle=prog;
-		ctx.fillRect(c.width*0.3,c.height-16*sizScale,c.width*0.4*progress,4*sizScale);
+	
+	if(isMainSpeedometer) {
+		// Draw circular speedometer for main display
+		var centerX = cw / 2;
+		var centerY = ch / 2;
+		var radius = Math.min(cw, ch) * 0.4;
+		
+		// Background circle
+		ctx.beginPath();
+		ctx.strokeStyle=bk;
+		ctx.lineWidth=Math.max(4, 8*sizScale);
+		ctx.arc(centerX, centerY, radius, 0.75*Math.PI, 0.25*Math.PI);
+		ctx.stroke();
+		
+		// Progress circle
+		ctx.beginPath();
+		ctx.strokeStyle=fg;
+		ctx.lineWidth=Math.max(6, 10*sizScale);
+		ctx.lineCap="round";
+		var endAngle = 0.75*Math.PI + amount * 1.5 * Math.PI;
+		ctx.arc(centerX, centerY, radius, 0.75*Math.PI, endAngle);
+		ctx.stroke();
+	} else {
+		// Original meter drawing for smaller gauges
+		ctx.beginPath();
+		ctx.strokeStyle=bk;
+		ctx.lineWidth=12*sizScale;
+		ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,Math.PI*0.1);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.strokeStyle=fg;
+		ctx.lineWidth=12*sizScale;
+		ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,amount*Math.PI*1.2-Math.PI*1.1);
+		ctx.stroke();
+		if(typeof progress !== "undefined"){
+			ctx.fillStyle=prog;
+			ctx.fillRect(c.width*0.3,c.height-16*sizScale,c.width*0.4*progress,4*sizScale);
+		}
 	}
 }
 function mbpsToAmount(s){
@@ -146,19 +194,22 @@
 		//speed test is running, abort
 		s.abort();
 		data=null;
-		I("startStopBtn").className="";
+		I("startStopBtn").classList.remove("opacity-50");
+		I("button-text").textContent="Start Test";
 		I("server").disabled=false;
 		initUI();
 	}else{
 		//test is not running, begin
-		I("startStopBtn").className="running";
+		I("startStopBtn").classList.add("opacity-50");
+		I("button-text").textContent="Stop Test";
 		I("shareArea").style.display="none";
 		I("server").disabled=true;
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
-            I("startStopBtn").className="";
+            I("startStopBtn").classList.remove("opacity-50");
+            I("button-text").textContent="Start Test";
             I("server").disabled=false;
             updateUI(true);
             if(!aborted){
@@ -183,13 +234,73 @@
 	if(!forced&&s.getState()!=3) return;
 	if(uiData==null) return;
 	var status=uiData.testState;
-	I("ip").textContent=uiData.clientIp;
-	I("dlText").textContent=(status==1&&uiData.dlStatus==0)?"...":format(uiData.dlStatus);
-	drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
-	I("ulText").textContent=(status==3&&uiData.ulStatus==0)?"...":format(uiData.ulStatus);
-	drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
+	
+	// Update IP address and related info
+	I("ip").textContent=uiData.clientIp || "-";
+	
+	// Update ISP information if available
+	if(uiData.ispInfo) {
+		I("isp").textContent=uiData.ispInfo.rawIspInfo || uiData.ispInfo.processedString || "-";
+	} else if(uiData.clientIspInfo) {
+		I("isp").textContent=uiData.clientIspInfo || "-";
+	} else {
+		// Try other possible ISP field names
+		I("isp").textContent=uiData.ispOrganization || uiData.isp || "-";
+	}
+	
+	// Update location information if available
+	if(uiData.ispInfo && (uiData.ispInfo.country || uiData.ispInfo.region)) {
+		var location = "";
+		if(uiData.ispInfo.region) location += uiData.ispInfo.region;
+		if(uiData.ispInfo.country) {
+			if(location) location += ", ";
+			location += uiData.ispInfo.country;
+		}
+		I("location").textContent = location || "-";
+	} else if(uiData.clientLocation) {
+		I("location").textContent = uiData.clientLocation || "-";
+	} else {
+		// Try other possible location field combinations
+		var location = "";
+		if(uiData.city) location += uiData.city;
+		if(uiData.region || uiData.state) {
+			if(location) location += ", ";
+			location += (uiData.region || uiData.state);
+		}
+		if(uiData.country) {
+			if(location) location += ", ";
+			location += uiData.country;
+		}
+		I("location").textContent = location || "-";
+	}
+	
+	// Update download speed
+	var dlSpeed = (status==1&&uiData.dlStatus==0)?"...":format(uiData.dlStatus);
+	I("dlText").textContent=dlSpeed;
+	I("speed-value").textContent = (status==1) ? dlSpeed : (uiData.dlStatus ? format(uiData.dlStatus) : "0.00");
+	I("speed-type").textContent = (status==1) ? "Download" : (status==3) ? "Upload" : (status==2) ? "Ping" : "Ready";
+	
+	// Update upload speed
+	var ulSpeed = (status==3&&uiData.ulStatus==0)?"...":format(uiData.ulStatus);
+	I("ulText").textContent=ulSpeed;
+	if(status==3) {
+		I("speed-value").textContent = ulSpeed;
+	}
+	
+	// Update ping and jitter
 	I("pingText").textContent=format(uiData.pingStatus);
 	I("jitText").textContent=format(uiData.jitterStatus);
+	
+	// Draw meters (keeping original canvas functionality)
+	drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
+	drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
+	
+	// Draw main speedometer
+	var currentSpeed = (status==1) ? uiData.dlStatus : (status==3) ? uiData.ulStatus : 0;
+	var speedometerCanvas = I("speedometer");
+	if(speedometerCanvas) {
+		drawMeter(speedometerCanvas,mbpsToAmount(Number(currentSpeed*(status>=1&&status<=3?oscillate():1))),meterBk,(status==1)?dlColor:ulColor,0,progColor);
+	}
 }
 function oscillate(){
 	return 1+0.02*Math.sin(Date.now()/100);
@@ -201,137 +312,90 @@
 	updateUI();
 }
 frame(); //start frame loop
+
+// Function to update server info display
+function updateServerInfo() {
+	var serverSelect = I("server");
+	var selectedIndex = serverSelect.value;
+	if(selectedIndex && SPEEDTEST_SERVERS[selectedIndex]) {
+		var selectedServer = SPEEDTEST_SERVERS[selectedIndex];
+		I("server-distance").textContent = selectedServer.distance || "-";
+		I("server-sponsor").textContent = selectedServer.sponsor || "LibreSpeed";
+	} else {
+		I("server-distance").textContent = "-";
+		I("server-sponsor").textContent = "LibreSpeed";
+	}
+}
+
+// Dark Mode Script - initialize after DOM is loaded
+function initThemeToggle() {
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+    if (!themeToggleBtn || !themeToggleDarkIcon || !themeToggleLightIcon) {
+        return; // Elements not found, skip theme toggle setup
+    }
+
+    // Check if dark mode is enabled
+    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        themeToggleLightIcon.classList.remove('hidden');
+        document.documentElement.classList.add('dark');
+    } else {
+        themeToggleDarkIcon.classList.remove('hidden');
+    }
+
+    themeToggleBtn.addEventListener('click', function() {
+        // Toggle icons inside button
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+
+        // If set via local storage previously
+        if (localStorage.getItem('color-theme')) {
+            if (localStorage.getItem('color-theme') === 'light') {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            }
+        } else {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            }
+        }
+    });
+}
 //function to (re)initialize UI
 function initUI(){
 	drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
 	drawMeter(I("ulMeter"),0,meterBk,ulColor,0);
-	I("dlText").textContent="";
-	I("ulText").textContent="";
-	I("pingText").textContent="";
-	I("jitText").textContent="";
-	I("ip").textContent="";
+	var speedometerCanvas = I("speedometer");
+	if(speedometerCanvas) {
+		// Force canvas to have visible dimensions
+		setTimeout(function() {
+			drawMeter(speedometerCanvas,0,meterBk,dlColor,0);
+		}, 100);
+	}
+	I("dlText").textContent="0.00";
+	I("ulText").textContent="0.00";
+	I("pingText").textContent="0";
+	I("jitText").textContent="0.0";
+	I("ip").textContent="-";
+	I("isp").textContent="-";
+	I("location").textContent="-";
+	I("speed-value").textContent="0.00";
+	I("speed-type").textContent="Ready";
+	// Reset button text
+	I("button-text").textContent="Start Test";
 }
 </script>
-<style type="text/css">
-	/* Modern canvas meter styling */
-	.meter-container {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	
-	/* Maintain existing canvas functionality */
-	div.testArea canvas {
-		position: absolute;
-		top: 50%;
-		left: 50%; 
-		width: 100%; 
-		height: 100%;
-		transform: translate(-50%, -50%);
-		z-index: 1;
-	}
-	
-	/* Animation keyframes */
-	@keyframes fadeIn {
-		0% { opacity: 0; transform: translateY(10px); }
-		100% { opacity: 1; transform: translateY(0); }
-	}
-	
-	@keyframes fadeOut {
-		0% { opacity: 1; transform: translateY(0); }
-		100% { opacity: 0; transform: translateY(10px); }
-	}
-	
-	div.visible {
-		animation: fadeIn 0.4s ease-out;
-		display: block;
-	}
-	
-	div.hidden {
-		animation: fadeOut 0.4s ease-out;
-		display: none;
-	}
-	
-	/* Custom button styling */
-	#startStopBtn {
-		transition: all 0.3s ease;
-	}
-	
-	#startStopBtn:before {
-		content: "Start Test";
-	}
-	
-	#startStopBtn.running {
-		background: linear-gradient(to right, #dc2626, #ef4444) !important;
-		color: white !important;
-		font-weight: 600 !important;
-		padding: 1rem 2rem !important;
-		border-radius: 9999px !important;
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
-		transition: all 0.2s !important;
-	}
-	
-	#startStopBtn.running:hover {
-		background: linear-gradient(to right, #b91c1c, #dc2626) !important;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
-		transform: scale(1.05) !important;
-	}
-	
-	#startStopBtn.running:before {
-		content: "Abort Test";
-	}
-	
-	/* Loading spinner */
-	.loadCircle {
-		display: inline-block;
-		width: 1.5rem;
-		height: 1.5rem;
-		border: 2px solid transparent;
-		border-top: 2px solid currentColor;
-		border-radius: 50%;
-		animation: spin 1s linear infinite;
-		margin-right: 0.5rem;
-	}
-	
-	@keyframes spin {
-		0% { transform: rotate(0deg); }
-		100% { transform: rotate(360deg); }
-	}
-	
-	/* Privacy policy modal */
-	#privacyPolicy {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: rgba(0, 0, 0, 0.8);
-		z-index: 999999;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 2rem;
-	}
-	
-	#privacyPolicy > div {
-		background: white;
-		max-height: 80vh;
-		overflow-y: auto;
-		border-radius: 0.5rem;
-		padding: 2rem;
-		max-width: 600px;
-		width: 100%;
-	}
-	
-	.dark #privacyPolicy > div {
-		background: rgb(31, 41, 55);
-		color: white;
-	}
-</style>
-<title>LibreSpeed</title>
 </head>
-<body onload="initServers()" class="h-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+<body class="h-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300" onload="initServers()">
     <div class="min-h-full flex flex-col">
         <!-- Header -->
         <header class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm">
@@ -362,130 +426,158 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
         <!-- Loading Screen -->
         <div id="loading" class="visible flex-1 flex items-center justify-center">
             <div class="text-center">
-                <div class="mb-4">
-                    <span class="loadCircle text-blue-500"></span>
-                </div>
-                <p id="message" class="text-lg text-gray-700 dark:text-gray-300">Selecting a server...</p>
+                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent mx-auto mb-4"></div>
+                <p id="message" class="text-gray-600 dark:text-gray-300">Selecting a server...</p>
             </div>
         </div>
 
         <!-- Main Content -->
-        <main id="testWrapper" class="hidden flex-1 px-4 py-12">
-            <div class="w-full max-w-6xl mx-auto mt-16">
+        <main id="testWrapper" class="hidden flex-1 flex items-center justify-center px-4 py-8">
+            <div class="w-full max-w-4xl mx-auto">
                 
-                <!-- Server Selection (when available) -->
-                <div id="serverArea" class="mb-6 text-center">
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-4 shadow-sm inline-block">
-                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 mr-3">Test Server:</label>
-                        <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])" 
-                                class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-                        </select>
-                    </div>
-                </div>
-
-                <!-- Speed Display Section -->
+                
+                <!-- Speed Display -->
                 <section class="text-center mb-8">
-                    <!-- Start/Stop Button -->
-                    <button id="startStopBtn" onclick="startStop()" 
-                            class="group relative bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 mb-8">
-                    </button>
+                    <div class="relative inline-block">
+                        <!-- Speedometer Circle -->
+                        <div class="relative w-64 h-64 sm:w-80 sm:h-80 mx-auto mb-6">
+                            <canvas id="speedometer" class="absolute inset-0 w-full h-full"></canvas>
+                            
+                            <!-- Speed Value -->
+                            <div class="absolute inset-0 flex flex-col items-center justify-center z-10">
+                                <div id="speed-value" class="text-4xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-2">0.00</div>
+                                <div id="speed-unit" class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 font-medium">Mbps</div>
+                                <div id="speed-type" class="text-sm text-gray-500 dark:text-gray-400 mt-1">Ready</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Test Button -->
+                        <div id="startStopBtn" onclick="startStop()" class="group relative bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 cursor-pointer inline-flex items-center space-x-2">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-2-14V3a2 2 0 00-2-2H9a2 2 0 00-2 2v1M7 7h10l4 4v6a2 2 0 01-2 2H5a2 2 0 01-2-2V11l4-4z"></path>
+                            </svg>
+                            <span id="button-text">Start Test</span>
+                        </div>
+                    </div>
                 </section>
 
                 <!-- Test Results Grid -->
-                <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" id="test">
+                <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                     <!-- Download Speed -->
-                    <div class="testArea bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative">
-                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
-                            <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Download</h3>
+                            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
                             </svg>
-                            Download
-                        </div>
-                        <div class="meter-container w-40 h-32 mx-auto mb-4 relative">
-                            <canvas id="dlMeter" class="w-full h-full"></canvas>
-                        </div>
-                        <div class="text-center">
-                            <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></div>
-                            <div class="unit text-sm text-gray-500 dark:text-gray-400">Mbit/s</div>
                         </div>
+                        <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
+                        <canvas id="dlMeter" class="hidden"></canvas>
                     </div>
 
                     <!-- Upload Speed -->
-                    <div class="testArea bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative">
-                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
-                            <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Upload</h3>
+                            <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                             </svg>
-                            Upload
-                        </div>
-                        <div class="meter-container w-40 h-32 mx-auto mb-4 relative">
-                            <canvas id="ulMeter" class="w-full h-full"></canvas>
-                        </div>
-                        <div class="text-center">
-                            <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></div>
-                            <div class="unit text-sm text-gray-500 dark:text-gray-400">Mbit/s</div>
                         </div>
+                        <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
+                        <canvas id="ulMeter" class="hidden"></canvas>
                     </div>
 
                     <!-- Ping -->
-                    <div class="testArea2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
-                            <svg class="w-4 h-4 mr-2 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Ping</h3>
+                            <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                             </svg>
-                            Ping
-                        </div>
-                        <div class="text-center">
-                            <div id="pingText" class="text-3xl font-bold text-yellow-600 dark:text-yellow-400 mb-2"></div>
-                            <div class="unit text-sm text-gray-500 dark:text-gray-400">ms</div>
                         </div>
+                        <div id="pingText" class="text-2xl font-bold text-gray-900 dark:text-white">0</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
                     </div>
 
                     <!-- Jitter -->
-                    <div class="testArea2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="testName text-sm font-medium text-gray-600 dark:text-gray-300 mb-4 flex items-center justify-center">
-                            <svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Jitter</h3>
+                            <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                             </svg>
-                            Jitter
-                        </div>
-                        <div class="text-center">
-                            <div id="jitText" class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2"></div>
-                            <div class="unit text-sm text-gray-500 dark:text-gray-400">ms</div>
                         </div>
+                        <div id="jitText" class="text-2xl font-bold text-gray-900 dark:text-white">0.0</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
                     </div>
                 </section>
 
-                <!-- IP Address Display -->
-                <section class="text-center mb-8" id="ipArea">
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm inline-block">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 flex items-center justify-center">
+                <!-- Connection Info -->
+                <section class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                    <!-- IP Address & Location -->
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                             <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                             </svg>
-                            Your IP Address
+                            Your Connection
                         </h3>
-                        <span id="ip" class="font-mono text-lg text-gray-900 dark:text-white"></span>
+                        <div class="space-y-3">
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">IP Address</span>
+                                <span id="ip" class="font-mono text-gray-900 dark:text-white">-</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">ISP</span>
+                                <span id="isp" class="text-gray-900 dark:text-white">-</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">Location</span>
+                                <span id="location" class="text-gray-900 dark:text-white">-</span>
+                            </div>
+                        </div>
                     </div>
-                </section>
 
-                <!-- Share Results -->
-                <div id="shareArea" class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm mx-auto max-w-2xl" style="display:none">
-                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">Share Your Results</h3>
-                    <div class="space-y-4">
-                        <div class="text-center">
-                            <span class="text-sm text-gray-600 dark:text-gray-300">Test ID: </span>
-                            <span id="testId" class="font-mono text-gray-900 dark:text-white"></span>
-                        </div>
-                        <input type="text" value="" id="resultsURL" readonly="readonly" 
-                               onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm cursor-pointer focus:ring-2 focus:ring-blue-500"/>
-                        <div class="text-center">
-                            <img src="" id="resultsImg" class="mx-auto rounded-lg shadow-lg max-w-full h-auto" />
+                    <!-- Server Info -->
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
+                            </svg>
+                            Test Server
+                        </h3>
+                        <div class="space-y-3">
+                            <div id="serverArea" class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">Server</span>
+                                <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value]); updateServerInfo()" class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-1 text-gray-900 dark:text-white text-sm min-w-0 flex-1 ml-4">
+                                    <option value="">Auto Selected</option>
+                                </select>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">Distance</span>
+                                <span id="server-distance" class="text-gray-900 dark:text-white">-</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600 dark:text-gray-300">Sponsor</span>
+                                <span id="server-sponsor" class="text-gray-900 dark:text-white">LibreSpeed</span>
+                            </div>
                         </div>
                     </div>
+                </section>
+
+                <!-- Share Results Area -->
+                <div id="shareArea" style="display:none" class="mb-8">
+                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm text-center">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Share Results</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-2">Test ID: <span id="testId" class="font-mono"></span></p>
+                        <input type="text" value="" id="resultsURL" readonly="readonly" onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')" class="w-full p-2 mb-4 border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"/>
+                        <img src="" id="resultsImg" class="mx-auto max-w-full" />
+                    </div>
                 </div>
+
             </div>
         </main>
 
@@ -493,105 +585,61 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">Sha
         <footer class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                 <div class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-600 dark:text-gray-300">
-                    <div class="flex space-x-4 mb-2 sm:mb-0">
-                        <a class="privacy hover:text-blue-500 transition-colors cursor-pointer" onclick="I('privacyPolicy').style.display='flex'">Privacy Policy</a>
-                        <a href="https://github.com/librespeed/speedtest" class="hover:text-blue-500 transition-colors">Source Code</a>
+                    <p>&copy; 2025 LibreSpeed. Open source speed test.</p>
+                    <div class="flex space-x-4 mt-2 sm:mt-0">
+                        <a href="#" class="hover:text-blue-500 transition-colors" onclick="I('privacyPolicy').style.display=''">Privacy</a>
+                        <a href="https://github.com/librespeed/speedtest" class="hover:text-blue-500 transition-colors">GitHub</a>
                     </div>
-                    <p>&copy; 2024 LibreSpeed. Open source speed test.</p>
                 </div>
             </div>
         </footer>
     </div>
-
     <!-- Privacy Policy Modal -->
-    <div id="privacyPolicy" style="display:none">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl">
-            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
-                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Privacy Policy</h2>
-            </div>
-            <div class="p-6 space-y-4 text-gray-700 dark:text-gray-300">
-                <p>This HTML5 speed test server is configured with telemetry enabled.</p>
-                <div>
-                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">What data we collect</h4>
-                    <p>At the end of the test, the following data is collected and stored:</p>
-                    <ul class="list-disc list-inside ml-4 space-y-1">
-                        <li>Test ID</li>
-                        <li>Time of testing</li>
-                        <li>Test results (download and upload speed, ping and jitter)</li>
-                        <li>IP address</li>
-                        <li>ISP information</li>
-                        <li>Approximate location (inferred from IP address, not GPS)</li>
-                        <li>User agent and browser locale</li>
-                        <li>Test log (contains no personal information)</li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">How we use the data</h4>
-                    <p>Data collected through this service is used to:</p>
-                    <ul class="list-disc list-inside ml-4 space-y-1">
-                        <li>Allow sharing of test results (sharable image for forums, etc.)</li>
-                        <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
-                    </ul>
-                    <p>No personal information is disclosed to third parties.</p>
+    <div id="privacyPolicy" style="display:none" class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen px-4">
+            <div class="fixed inset-0 bg-black opacity-50"></div>
+            <div class="relative bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto p-6">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Privacy Policy</h2>
+                <div class="text-gray-700 dark:text-gray-300 space-y-4">
+                    <p>This HTML5 speed test server is configured with telemetry enabled.</p>
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">What data we collect</h4>
+                    <p>
+                        At the end of the test, the following data is collected and stored:
+                        <ul class="list-disc list-inside ml-4 space-y-1">
+                            <li>Test ID</li>
+                            <li>Time of testing</li>
+                            <li>Test results (download and upload speed, ping and jitter)</li>
+                            <li>IP address</li>
+                            <li>ISP information</li>
+                            <li>Approximate location (inferred from IP address, not GPS)</li>
+                            <li>User agent and browser locale</li>
+                            <li>Test log (contains no personal information)</li>
+                        </ul>
+                    </p>
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">How we use the data</h4>
+                    <p>
+                        Data collected through this service is used to:
+                        <ul class="list-disc list-inside ml-4 space-y-1">
+                            <li>Allow sharing of test results (sharable image for forums, etc.)</li>
+                            <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
+                        </ul>
+                        No personal information is disclosed to third parties.
+                    </p>
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Your consent</h4>
+                    <p>
+                        By starting the test, you consent to the terms of this privacy policy.
+                    </p>
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Data removal</h4>
+                    <p>
+                        If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
+                        Contact this email address for all deletion requests: <a href="mailto:PUT@YOUR_EMAIL.HERE" class="text-blue-500 hover:text-blue-600">TO BE FILLED BY DEVELOPER</a>.
+                    </p>
                 </div>
-                <div>
-                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Your consent</h4>
-                    <p>By starting the test, you consent to the terms of this privacy policy.</p>
+                <div class="mt-6 text-center">
+                    <button onclick="I('privacyPolicy').style.display='none'" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition-colors">Close</button>
                 </div>
-                <div>
-                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Data removal</h4>
-                    <p>If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.</p>
-                    <p>Contact this email address for all deletion requests: <a href="mailto:PUT@YOUR_EMAIL.HERE" class="text-blue-500 hover:text-blue-600">TO BE FILLED BY DEVELOPER</a>.</p>
-                </div>
-            </div>
-            <div class="p-6 border-t border-gray-200 dark:border-gray-700 text-center">
-                <button onclick="I('privacyPolicy').style.display='none'" 
-                        class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
-                    Close
-                </button>
             </div>
         </div>
     </div>
-
-    <!-- Dark Mode Script -->
-    <script>
-        // Dark mode functionality
-        const themeToggleBtn = document.getElementById('theme-toggle');
-        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-
-        // Check if dark mode is enabled
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            themeToggleLightIcon.classList.remove('hidden');
-            document.documentElement.classList.add('dark');
-        } else {
-            themeToggleDarkIcon.classList.remove('hidden');
-        }
-
-        themeToggleBtn.addEventListener('click', function() {
-            // Toggle icons inside button
-            themeToggleDarkIcon.classList.toggle('hidden');
-            themeToggleLightIcon.classList.toggle('hidden');
-
-            // If set via local storage previously
-            if (localStorage.getItem('color-theme')) {
-                if (localStorage.getItem('color-theme') === 'light') {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                } else {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                }
-            } else {
-                if (document.documentElement.classList.contains('dark')) {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                } else {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                }
-            }
-        });
-    </script>
 </body>
-</html>
+</html>
\ No newline at end of file

From c6476741554a487d086417350bf628594ee8cc09 Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan@shirvanian.devm>
Date: Thu, 24 Jul 2025 00:01:30 -0400
Subject: [PATCH 3/7] clean up css and html

---
 index.html | 146 ++++++++++++++++++-----------------------------------
 1 file changed, 49 insertions(+), 97 deletions(-)

diff --git a/index.html b/index.html
index 8262c84a4..02f25889e 100755
--- a/index.html
+++ b/index.html
@@ -8,15 +8,7 @@
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
     tailwind.config = {
-        darkMode: 'class',
-        theme: {
-            extend: {
-                animation: {
-                    'pulse-slow': 'pulse 3s ease-in-out infinite',
-                    'spin-slow': 'spin 3s linear infinite',
-                }
-            }
-        }
+        darkMode: 'class'
     }
 </script>
 <script type="text/javascript" src="speedtest.js"></script>
@@ -25,22 +17,22 @@
 
 //LIST OF TEST SERVERS. Leave empty if you're doing a standalone installation. See documentation for details
 var SPEEDTEST_SERVERS=[
-	// {	//this server doesn't actually exist, remove it
-	// 	name:"local", //user friendly name for the server
-	// 	server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-	// 	dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
-	// 	ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
-	// 	pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-	// 	getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	// },
-	// {	//this server doesn't actually exist, remove it
-	// 	name:"kamilszczepanski.com", //user friendly name for the server
-	// 	server:"//la.speedtest.clouvider.net/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-	// 	dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
-	// 	ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
-	// 	pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-	// 	getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	// }
+	{	//this server doesn't actually exist, remove it
+		name:"local", //user friendly name for the server
+		server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	},
+	{	//this server doesn't actually exist, remove it
+		name:"kamilszczepanski.com", //user friendly name for the server
+		server:"//la.speedtest.clouvider.net/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	}
 ];
 
 //INITIALIZE SPEEDTEST
@@ -111,10 +103,9 @@
 var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#E5E7EB";
 var dlColor="#3B82F6",
 	ulColor="#8B5CF6";
-var progColor="#94A3B8";
 
-//CODE FOR GAUGES
-function drawMeter(c,amount,bk,fg,progress,prog){
+//CODE FOR SPEEDOMETER
+function drawMeter(c,amount,bk,fg){
 	if(!c || !c.getContext) return;
 	
 	var ctx=c.getContext("2d");
@@ -127,10 +118,6 @@
 		ch = 320 * dp;
 	}
 	
-	// For the main speedometer, use a different approach
-	var isMainSpeedometer = (c.id === "speedometer");
-	var sizScale = isMainSpeedometer ? Math.min(cw, ch) * 0.002 : ch * 0.0055;
-	
 	if(c.width==cw&&c.height==ch){
 		ctx.clearRect(0,0,cw,ch);
 	}else{
@@ -138,44 +125,27 @@
 		c.height=ch;
 	}
 	
-	if(isMainSpeedometer) {
-		// Draw circular speedometer for main display
-		var centerX = cw / 2;
-		var centerY = ch / 2;
-		var radius = Math.min(cw, ch) * 0.4;
-		
-		// Background circle
-		ctx.beginPath();
-		ctx.strokeStyle=bk;
-		ctx.lineWidth=Math.max(4, 8*sizScale);
-		ctx.arc(centerX, centerY, radius, 0.75*Math.PI, 0.25*Math.PI);
-		ctx.stroke();
-		
-		// Progress circle
-		ctx.beginPath();
-		ctx.strokeStyle=fg;
-		ctx.lineWidth=Math.max(6, 10*sizScale);
-		ctx.lineCap="round";
-		var endAngle = 0.75*Math.PI + amount * 1.5 * Math.PI;
-		ctx.arc(centerX, centerY, radius, 0.75*Math.PI, endAngle);
-		ctx.stroke();
-	} else {
-		// Original meter drawing for smaller gauges
-		ctx.beginPath();
-		ctx.strokeStyle=bk;
-		ctx.lineWidth=12*sizScale;
-		ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,Math.PI*0.1);
-		ctx.stroke();
-		ctx.beginPath();
-		ctx.strokeStyle=fg;
-		ctx.lineWidth=12*sizScale;
-		ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,amount*Math.PI*1.2-Math.PI*1.1);
-		ctx.stroke();
-		if(typeof progress !== "undefined"){
-			ctx.fillStyle=prog;
-			ctx.fillRect(c.width*0.3,c.height-16*sizScale,c.width*0.4*progress,4*sizScale);
-		}
-	}
+	// Draw circular speedometer
+	var centerX = cw / 2;
+	var centerY = ch / 2;
+	var radius = Math.min(cw, ch) * 0.4;
+	var sizScale = Math.min(cw, ch) * 0.002;
+	
+	// Background circle
+	ctx.beginPath();
+	ctx.strokeStyle=bk;
+	ctx.lineWidth=Math.max(4, 8*sizScale);
+	ctx.arc(centerX, centerY, radius, 0.75*Math.PI, 0.25*Math.PI);
+	ctx.stroke();
+	
+	// Progress circle
+	ctx.beginPath();
+	ctx.strokeStyle=fg;
+	ctx.lineWidth=Math.max(6, 10*sizScale);
+	ctx.lineCap="round";
+	var endAngle = 0.75*Math.PI + amount * 1.5 * Math.PI;
+	ctx.arc(centerX, centerY, radius, 0.75*Math.PI, endAngle);
+	ctx.stroke();
 }
 function mbpsToAmount(s){
 	return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
@@ -291,15 +261,12 @@
 	I("pingText").textContent=format(uiData.pingStatus);
 	I("jitText").textContent=format(uiData.jitterStatus);
 	
-	// Draw meters (keeping original canvas functionality)
-	drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
-	drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
 	
 	// Draw main speedometer
 	var currentSpeed = (status==1) ? uiData.dlStatus : (status==3) ? uiData.ulStatus : 0;
 	var speedometerCanvas = I("speedometer");
 	if(speedometerCanvas) {
-		drawMeter(speedometerCanvas,mbpsToAmount(Number(currentSpeed*(status>=1&&status<=3?oscillate():1))),meterBk,(status==1)?dlColor:ulColor,0,progColor);
+		drawMeter(speedometerCanvas,mbpsToAmount(Number(currentSpeed*(status>=1&&status<=3?oscillate():1))),meterBk,(status==1)?dlColor:ulColor);
 	}
 }
 function oscillate(){
@@ -350,35 +317,24 @@
         themeToggleDarkIcon.classList.toggle('hidden');
         themeToggleLightIcon.classList.toggle('hidden');
 
-        // If set via local storage previously
-        if (localStorage.getItem('color-theme')) {
-            if (localStorage.getItem('color-theme') === 'light') {
-                document.documentElement.classList.add('dark');
-                localStorage.setItem('color-theme', 'dark');
-            } else {
-                document.documentElement.classList.remove('dark');
-                localStorage.setItem('color-theme', 'light');
-            }
+        // Toggle dark mode
+        var isDark = document.documentElement.classList.contains('dark');
+        if (isDark) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('color-theme', 'light');
         } else {
-            if (document.documentElement.classList.contains('dark')) {
-                document.documentElement.classList.remove('dark');
-                localStorage.setItem('color-theme', 'light');
-            } else {
-                document.documentElement.classList.add('dark');
-                localStorage.setItem('color-theme', 'dark');
-            }
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('color-theme', 'dark');
         }
     });
 }
 //function to (re)initialize UI
 function initUI(){
-	drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
-	drawMeter(I("ulMeter"),0,meterBk,ulColor,0);
 	var speedometerCanvas = I("speedometer");
 	if(speedometerCanvas) {
 		// Force canvas to have visible dimensions
 		setTimeout(function() {
-			drawMeter(speedometerCanvas,0,meterBk,dlColor,0);
+			drawMeter(speedometerCanvas,0,meterBk,dlColor);
 		}, 100);
 	}
 	I("dlText").textContent="0.00";
@@ -434,8 +390,6 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
         <!-- Main Content -->
         <main id="testWrapper" class="hidden flex-1 flex items-center justify-center px-4 py-8">
             <div class="w-full max-w-4xl mx-auto">
-                
-                
                 <!-- Speed Display -->
                 <section class="text-center mb-8">
                     <div class="relative inline-block">
@@ -473,7 +427,6 @@ <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Download</h3>
                         </div>
                         <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
                         <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
-                        <canvas id="dlMeter" class="hidden"></canvas>
                     </div>
 
                     <!-- Upload Speed -->
@@ -486,7 +439,6 @@ <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Upload</h3>
                         </div>
                         <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
                         <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
-                        <canvas id="ulMeter" class="hidden"></canvas>
                     </div>
 
                     <!-- Ping -->

From 5dd25e1da996e1d45799c76c4eb2b0120daca08f Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan@shirvanian.devm>
Date: Thu, 24 Jul 2025 00:12:44 -0400
Subject: [PATCH 4/7] fix isp info

---
 index.html | 260 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 224 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 02f25889e..46d71c25f 100755
--- a/index.html
+++ b/index.html
@@ -104,13 +104,17 @@
 var dlColor="#3B82F6",
 	ulColor="#8B5CF6";
 
-//CODE FOR SPEEDOMETER
-function drawMeter(c,amount,bk,fg){
+//CODE FOR ENHANCED SPEEDOMETER
+var lastDrawnAmount = 0;
+var animationId = null;
+
+function drawMeter(c, targetAmount, bk, fg, animated = true){
 	if(!c || !c.getContext) return;
 	
-	var ctx=c.getContext("2d");
-	var dp=window.devicePixelRatio||1;
-	var cw=c.clientWidth*dp, ch=c.clientHeight*dp;
+	var ctx = c.getContext("2d");
+	var dp = window.devicePixelRatio || 1;
+	var cw = c.clientWidth * dp;
+	var ch = c.clientHeight * dp;
 	
 	// Ensure canvas has dimensions
 	if(cw === 0 || ch === 0) {
@@ -118,37 +122,147 @@
 		ch = 320 * dp;
 	}
 	
-	if(c.width==cw&&c.height==ch){
-		ctx.clearRect(0,0,cw,ch);
-	}else{
-		c.width=cw;
-		c.height=ch;
+	// Only resize canvas if dimensions changed
+	if(c.width !== cw || c.height !== ch){
+		c.width = cw;
+		c.height = ch;
 	}
 	
-	// Draw circular speedometer
 	var centerX = cw / 2;
 	var centerY = ch / 2;
-	var radius = Math.min(cw, ch) * 0.4;
-	var sizScale = Math.min(cw, ch) * 0.002;
+	var radius = Math.min(cw, ch) * 0.38;
+	var lineWidth = Math.max(6, Math.min(cw, ch) * 0.018);
 	
-	// Background circle
-	ctx.beginPath();
-	ctx.strokeStyle=bk;
-	ctx.lineWidth=Math.max(4, 8*sizScale);
-	ctx.arc(centerX, centerY, radius, 0.75*Math.PI, 0.25*Math.PI);
-	ctx.stroke();
+	// Smooth animation
+	if(animated && Math.abs(targetAmount - lastDrawnAmount) > 0.01) {
+		if(animationId) cancelAnimationFrame(animationId);
+		
+		var startAmount = lastDrawnAmount;
+		var startTime = performance.now();
+		var duration = 300; // ms
+		
+		function animate(currentTime) {
+			var elapsed = currentTime - startTime;
+			var progress = Math.min(elapsed / duration, 1);
+			
+			// Easing function for smooth animation
+			var easeProgress = 1 - Math.pow(1 - progress, 3);
+			var currentAmount = startAmount + (targetAmount - startAmount) * easeProgress;
+			
+			drawSpeedometerFrame(ctx, currentAmount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch);
+			
+			if(progress < 1) {
+				animationId = requestAnimationFrame(animate);
+			} else {
+				lastDrawnAmount = targetAmount;
+				animationId = null;
+			}
+		}
+		
+		animationId = requestAnimationFrame(animate);
+	} else {
+		drawSpeedometerFrame(ctx, targetAmount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch);
+		lastDrawnAmount = targetAmount;
+	}
+}
+
+function drawSpeedometerFrame(ctx, amount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch) {
+	// Clear canvas efficiently
+	ctx.clearRect(0, 0, cw, ch);
+	
+	// Enable anti-aliasing for smoother lines
+	ctx.imageSmoothingEnabled = true;
+	ctx.imageSmoothingQuality = 'high';
+	
+	var startAngle = 0.75 * Math.PI;
+	var endAngle = 0.25 * Math.PI;
+	var totalAngle = 1.5 * Math.PI;
+	var currentAngle = startAngle + amount * totalAngle;
+	
+	// Background track with subtle gradient
+	var bgGradient = ctx.createLinearGradient(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
+	bgGradient.addColorStop(0, bk);
+	bgGradient.addColorStop(1, bk + '80'); // Add slight transparency
 	
-	// Progress circle
 	ctx.beginPath();
-	ctx.strokeStyle=fg;
-	ctx.lineWidth=Math.max(6, 10*sizScale);
-	ctx.lineCap="round";
-	var endAngle = 0.75*Math.PI + amount * 1.5 * Math.PI;
-	ctx.arc(centerX, centerY, radius, 0.75*Math.PI, endAngle);
+	ctx.strokeStyle = bgGradient;
+	ctx.lineWidth = lineWidth;
+	ctx.lineCap = "round";
+	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
 	ctx.stroke();
+	
+	// Progress arc with gradient
+	if(amount > 0) {
+		var progressGradient = ctx.createLinearGradient(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
+		progressGradient.addColorStop(0, fg);
+		progressGradient.addColorStop(0.5, fg + 'E6'); // Slightly more opaque
+		progressGradient.addColorStop(1, fg);
+		
+		ctx.beginPath();
+		ctx.strokeStyle = progressGradient;
+		ctx.lineWidth = lineWidth + 1;
+		ctx.lineCap = "round";
+		ctx.arc(centerX, centerY, radius, startAngle, currentAngle);
+		ctx.stroke();
+		
+		// Add glow effect for progress
+		ctx.shadowColor = fg;
+		ctx.shadowBlur = 8;
+		ctx.beginPath();
+		ctx.strokeStyle = fg;
+		ctx.lineWidth = lineWidth - 2;
+		ctx.arc(centerX, centerY, radius, startAngle, currentAngle);
+		ctx.stroke();
+		ctx.shadowBlur = 0;
+		
+		// Progress indicator dot
+		var dotX = centerX + radius * Math.cos(currentAngle);
+		var dotY = centerY + radius * Math.sin(currentAngle);
+		
+		ctx.beginPath();
+		ctx.fillStyle = fg;
+		ctx.arc(dotX, dotY, lineWidth / 3, 0, 2 * Math.PI);
+		ctx.fill();
+		
+		// Dot highlight
+		ctx.beginPath();
+		ctx.fillStyle = '#FFFFFF';
+		ctx.arc(dotX, dotY, lineWidth / 6, 0, 2 * Math.PI);
+		ctx.fill();
+	}
+	
+	// Speed range markers
+	drawSpeedMarkers(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle);
+}
+
+function drawSpeedMarkers(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle) {
+	var markerRadius = radius + lineWidth / 2 + 4;
+	var innerRadius = radius - lineWidth / 2 - 4;
+	
+	// Draw markers for speed ranges (0, 25, 50, 75, 100+ percentiles)
+	for(var i = 0; i <= 4; i++) {
+		var angle = startAngle + (i / 4) * 1.5 * Math.PI;
+		var outerX = centerX + markerRadius * Math.cos(angle);
+		var outerY = centerY + markerRadius * Math.sin(angle);
+		var innerX = centerX + innerRadius * Math.cos(angle);
+		var innerY = centerY + innerRadius * Math.sin(angle);
+		
+		ctx.beginPath();
+		ctx.strokeStyle = '#94A3B8';
+		ctx.lineWidth = 1;
+		ctx.moveTo(outerX, outerY);
+		ctx.lineTo(innerX, innerY);
+		ctx.stroke();
+	}
 }
 function mbpsToAmount(s){
-	return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
+	if(isNaN(s) || s < 0) {
+		console.warn("Invalid speed value for mbpsToAmount:", s);
+		return 0;
+	}
+	var result = 1-(1/(Math.pow(1.3,Math.sqrt(s))));
+	console.log("mbpsToAmount - Input:", s, "Output:", result);
+	return result;
 }
 function format(d){
     d=Number(d);
@@ -206,16 +320,47 @@
 	var status=uiData.testState;
 	
 	// Update IP address and related info
-	I("ip").textContent=uiData.clientIp || "-";
+	var clientIpRaw = uiData.clientIp || "-";
+	var ipAddress = "-";
+	var ispName = "-";
+	
+	// Parse combined IP and ISP info if it contains a separator
+	if(clientIpRaw && clientIpRaw !== "-") {
+		if(clientIpRaw.includes(" - ")) {
+			// Format: "192.168.1.1 - ISP Name"
+			var parts = clientIpRaw.split(" - ");
+			ipAddress = parts[0].trim();
+			ispName = parts[1].trim();
+		} else if(clientIpRaw.includes("-")) {
+			// Format: "192.168.1.1-ISP Name" or "192.168.1.1 -ISP Name"
+			var parts = clientIpRaw.split("-");
+			ipAddress = parts[0].trim();
+			ispName = parts[1] ? parts[1].trim() : "-";
+		} else if(clientIpRaw.includes(" ") && !clientIpRaw.match(/^\d+\.\d+\.\d+\.\d+$/)) {
+			// Format: "192.168.1.1 ISP Company Name"
+			var parts = clientIpRaw.split(" ", 2);
+			ipAddress = parts[0].trim();
+			ispName = clientIpRaw.substring(parts[0].length).trim();
+		} else {
+			// Assume it's just the IP address
+			ipAddress = clientIpRaw;
+		}
+		
+		console.log("IP parsing - Raw:", clientIpRaw, "IP:", ipAddress, "ISP:", ispName);
+	}
+	
+	I("ip").textContent = ipAddress;
 	
-	// Update ISP information if available
-	if(uiData.ispInfo) {
-		I("isp").textContent=uiData.ispInfo.rawIspInfo || uiData.ispInfo.processedString || "-";
+	// Update ISP information with extracted ISP or fallback to other sources
+	if(ispName && ispName !== "-") {
+		I("isp").textContent = ispName;
+	} else if(uiData.ispInfo) {
+		I("isp").textContent = uiData.ispInfo.rawIspInfo || uiData.ispInfo.processedString || "-";
 	} else if(uiData.clientIspInfo) {
-		I("isp").textContent=uiData.clientIspInfo || "-";
+		I("isp").textContent = uiData.clientIspInfo || "-";
 	} else {
 		// Try other possible ISP field names
-		I("isp").textContent=uiData.ispOrganization || uiData.isp || "-";
+		I("isp").textContent = uiData.ispOrganization || uiData.isp || "-";
 	}
 	
 	// Update location information if available
@@ -263,10 +408,46 @@
 	
 	
 	// Draw main speedometer
-	var currentSpeed = (status==1) ? uiData.dlStatus : (status==3) ? uiData.ulStatus : 0;
+	var currentSpeed = 0;
+	var speedColor = dlColor;
+	
+	// Determine current speed and color based on test state
+	if(status == 1) { // Download test - active
+		// Use actual download speed value, not the formatted text
+		currentSpeed = Number(uiData.dlStatus) || 0;
+		speedColor = dlColor;
+		console.log("Download - Status:", status, "Speed:", currentSpeed, "dlStatus:", uiData.dlStatus);
+	} else if(status == 3) { // Upload test - active  
+		currentSpeed = Number(uiData.ulStatus) || 0;
+		speedColor = ulColor;
+		console.log("Upload - Status:", status, "Speed:", currentSpeed, "ulStatus:", uiData.ulStatus);
+	} else if(status == 2) { // Ping test - active
+		currentSpeed = 0; // Don't show speed during ping
+		speedColor = dlColor;
+		console.log("Ping - Status:", status);
+	} else {
+		// Test not running or completed, show final download speed if available
+		currentSpeed = Number(uiData.dlStatus) || 0;
+		speedColor = dlColor;
+		console.log("Idle/Complete - Status:", status, "Speed:", currentSpeed);
+	}
+	
 	var speedometerCanvas = I("speedometer");
 	if(speedometerCanvas) {
-		drawMeter(speedometerCanvas,mbpsToAmount(Number(currentSpeed*(status>=1&&status<=3?oscillate():1))),meterBk,(status==1)?dlColor:ulColor);
+		var oscillation = (status >= 1 && status <= 3) ? oscillate() : 1;
+		var adjustedSpeed = Math.max(0, currentSpeed * oscillation); // Ensure non-negative
+		var speedAmount = mbpsToAmount(adjustedSpeed);
+		
+		// Additional debugging
+		console.log("Drawing speedometer - Status:", status, "Raw Speed:", currentSpeed, "Adjusted:", adjustedSpeed, "Amount:", speedAmount, "Color:", speedColor);
+		
+		// Ensure we have valid values
+		if(speedAmount >= 0 && speedAmount <= 1) {
+			drawMeter(speedometerCanvas, speedAmount, meterBk, speedColor, true);
+		} else {
+			console.warn("Invalid speedAmount:", speedAmount, "using 0 instead");
+			drawMeter(speedometerCanvas, 0, meterBk, speedColor, true);
+		}
 	}
 }
 function oscillate(){
@@ -330,11 +511,18 @@
 }
 //function to (re)initialize UI
 function initUI(){
+	// Reset animation state
+	lastDrawnAmount = 0;
+	if(animationId) {
+		cancelAnimationFrame(animationId);
+		animationId = null;
+	}
+	
 	var speedometerCanvas = I("speedometer");
 	if(speedometerCanvas) {
-		// Force canvas to have visible dimensions
+		// Force canvas to have visible dimensions and initialize without animation
 		setTimeout(function() {
-			drawMeter(speedometerCanvas,0,meterBk,dlColor);
+			drawMeter(speedometerCanvas, 0, meterBk, dlColor, false);
 		}, 100);
 	}
 	I("dlText").textContent="0.00";

From 8c50d05e975a627de70939b24b84608614fd14e8 Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan@shirvanian.devm>
Date: Fri, 25 Jul 2025 12:23:01 -0400
Subject: [PATCH 5/7] clean up

---
 index.html | 334 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 211 insertions(+), 123 deletions(-)

diff --git a/index.html b/index.html
index 46d71c25f..3c7911437 100755
--- a/index.html
+++ b/index.html
@@ -1,14 +1,29 @@
 <!DOCTYPE html>
 <html lang="en" class="h-full">
 <head>
-<link rel="shortcut icon" href="favicon.ico">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
-<meta charset="UTF-8" />
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="LibreSpeed - Free, open-source internet speed test. Test your download, upload, ping and jitter speeds.">
 <title>LibreSpeed - Internet Speed Test</title>
+<link rel="shortcut icon" href="favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
     tailwind.config = {
-        darkMode: 'class'
+        darkMode: 'class',
+        theme: {
+            extend: {
+                animation: {
+                    'pulse-slow': 'pulse 3s ease-in-out infinite',
+                    'fade-in': 'fadeIn 0.5s ease-in-out'
+                },
+                keyframes: {
+                    fadeIn: {
+                        '0%': { opacity: '0', transform: 'translateY(10px)' },
+                        '100%': { opacity: '1', transform: 'translateY(0)' }
+                    }
+                }
+            }
+        }
     }
 </script>
 <script type="text/javascript" src="speedtest.js"></script>
@@ -545,8 +560,8 @@
         <header class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex justify-between items-center py-4">
-                    <div class="flex items-center space-x-2">
-                        <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center" aria-hidden="true">
                             <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                             </svg>
@@ -555,11 +570,13 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
                     </div>
                     
                     <!-- Dark mode toggle -->
-                    <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
-                        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                    <button id="theme-toggle" 
+                            class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800" 
+                            aria-label="Toggle dark mode">
+                        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                             <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                         </svg>
-                        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                             <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
                         </svg>
                     </button>
@@ -568,10 +585,13 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
         </header>
 
         <!-- Loading Screen -->
-        <div id="loading" class="visible flex-1 flex items-center justify-center">
+        <div id="loading" class="visible flex-1 flex items-center justify-center animate-fade-in">
             <div class="text-center">
-                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent mx-auto mb-4"></div>
-                <p id="message" class="text-gray-600 dark:text-gray-300">Selecting a server...</p>
+                <div class="relative mx-auto mb-6">
+                    <div class="animate-spin rounded-full h-16 w-16 border-4 border-blue-500 border-t-transparent"></div>
+                    <div class="animate-pulse-slow absolute inset-2 rounded-full bg-blue-500/20"></div>
+                </div>
+                <p id="message" class="text-lg text-gray-600 dark:text-gray-300 font-medium">Selecting a server...</p>
             </div>
         </div>
 
@@ -579,172 +599,226 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
         <main id="testWrapper" class="hidden flex-1 flex items-center justify-center px-4 py-8">
             <div class="w-full max-w-4xl mx-auto">
                 <!-- Speed Display -->
-                <section class="text-center mb-8">
+                <section class="text-center mb-8" role="main" aria-label="Speed test display">
                     <div class="relative inline-block">
                         <!-- Speedometer Circle -->
-                        <div class="relative w-64 h-64 sm:w-80 sm:h-80 mx-auto mb-6">
-                            <canvas id="speedometer" class="absolute inset-0 w-full h-full"></canvas>
+                        <div class="relative w-64 h-64 sm:w-80 sm:h-80 mx-auto mb-6" role="img" aria-label="Speed meter">
+                            <canvas id="speedometer" class="absolute inset-0 w-full h-full" width="320" height="320" aria-hidden="true"></canvas>
                             
                             <!-- Speed Value -->
                             <div class="absolute inset-0 flex flex-col items-center justify-center z-10">
-                                <div id="speed-value" class="text-4xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-2">0.00</div>
+                                <div id="speed-value" class="text-4xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-2 tabular-nums" aria-live="polite">0.00</div>
                                 <div id="speed-unit" class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 font-medium">Mbps</div>
-                                <div id="speed-type" class="text-sm text-gray-500 dark:text-gray-400 mt-1">Ready</div>
+                                <div id="speed-type" class="text-sm text-gray-500 dark:text-gray-400 mt-1" aria-live="polite">Ready</div>
                             </div>
                         </div>
                         
                         <!-- Test Button -->
-                        <div id="startStopBtn" onclick="startStop()" class="group relative bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 cursor-pointer inline-flex items-center space-x-2">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <button id="startStopBtn" 
+                                onclick="startStop()" 
+                                class="group relative bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 disabled:from-gray-400 disabled:to-gray-500 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 disabled:hover:scale-100 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 inline-flex items-center space-x-2"
+                                aria-describedby="test-status">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-2-14V3a2 2 0 00-2-2H9a2 2 0 00-2 2v1M7 7h10l4 4v6a2 2 0 01-2 2H5a2 2 0 01-2-2V11l4-4z"></path>
                             </svg>
                             <span id="button-text">Start Test</span>
-                        </div>
+                        </button>
+                        <div id="test-status" class="sr-only" aria-live="polite"></div>
                     </div>
                 </section>
 
                 <!-- Test Results Grid -->
-                <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+                <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8" role="region" aria-label="Speed test results">
                     <!-- Download Speed -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="flex items-center justify-between mb-2">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <header class="flex items-center justify-between mb-3">
                             <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Download</h3>
-                            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
                             </svg>
+                        </header>
+                        <div class="space-y-1">
+                            <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white tabular-nums" aria-live="polite">0.00</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
                         </div>
-                        <div id="dlText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
-                    </div>
+                    </article>
 
                     <!-- Upload Speed -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="flex items-center justify-between mb-2">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <header class="flex items-center justify-between mb-3">
                             <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Upload</h3>
-                            <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                             </svg>
+                        </header>
+                        <div class="space-y-1">
+                            <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white tabular-nums" aria-live="polite">0.00</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
                         </div>
-                        <div id="ulText" class="text-2xl font-bold text-gray-900 dark:text-white">0.00</div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400">Mbps</div>
-                    </div>
+                    </article>
 
                     <!-- Ping -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="flex items-center justify-between mb-2">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <header class="flex items-center justify-between mb-3">
                             <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Ping</h3>
-                            <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                             </svg>
+                        </header>
+                        <div class="space-y-1">
+                            <div id="pingText" class="text-2xl font-bold text-gray-900 dark:text-white tabular-nums" aria-live="polite">0</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
                         </div>
-                        <div id="pingText" class="text-2xl font-bold text-gray-900 dark:text-white">0</div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
-                    </div>
+                    </article>
 
                     <!-- Jitter -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                        <div class="flex items-center justify-between mb-2">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                        <header class="flex items-center justify-between mb-3">
                             <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Jitter</h3>
-                            <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                             </svg>
+                        </header>
+                        <div class="space-y-1">
+                            <div id="jitText" class="text-2xl font-bold text-gray-900 dark:text-white tabular-nums" aria-live="polite">0.0</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
                         </div>
-                        <div id="jitText" class="text-2xl font-bold text-gray-900 dark:text-white">0.0</div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400">ms</div>
-                    </div>
+                    </article>
                 </section>
 
                 <!-- Connection Info -->
-                <section class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8" role="region" aria-label="Connection information">
                     <!-- IP Address & Location -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                            <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                            </svg>
-                            Your Connection
-                        </h3>
-                        <div class="space-y-3">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
+                        <header class="mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                                <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                </svg>
+                                Your Connection
+                            </h3>
+                        </header>
+                        <dl class="space-y-3">
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">IP Address</span>
-                                <span id="ip" class="font-mono text-gray-900 dark:text-white">-</span>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">IP Address</dt>
+                                <dd id="ip" class="font-mono text-sm text-gray-900 dark:text-white">-</dd>
                             </div>
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">ISP</span>
-                                <span id="isp" class="text-gray-900 dark:text-white">-</span>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">ISP</dt>
+                                <dd id="isp" class="text-sm text-gray-900 dark:text-white text-right">-</dd>
                             </div>
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">Location</span>
-                                <span id="location" class="text-gray-900 dark:text-white">-</span>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">Location</dt>
+                                <dd id="location" class="text-sm text-gray-900 dark:text-white text-right">-</dd>
                             </div>
-                        </div>
-                    </div>
+                        </dl>
+                    </article>
 
                     <!-- Server Info -->
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
-                            </svg>
-                            Test Server
-                        </h3>
-                        <div class="space-y-3">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm">
+                        <header class="mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                                <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
+                                </svg>
+                                Test Server
+                            </h3>
+                        </header>
+                        <dl class="space-y-3">
                             <div id="serverArea" class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">Server</span>
-                                <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value]); updateServerInfo()" class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-1 text-gray-900 dark:text-white text-sm min-w-0 flex-1 ml-4">
-                                    <option value="">Auto Selected</option>
-                                </select>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">Server</dt>
+                                <dd class="flex-1 ml-4">
+                                    <select id="server" 
+                                            onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value]); updateServerInfo()" 
+                                            class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                            aria-label="Select test server">
+                                        <option value="">Auto Selected</option>
+                                    </select>
+                                </dd>
                             </div>
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">Distance</span>
-                                <span id="server-distance" class="text-gray-900 dark:text-white">-</span>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">Distance</dt>
+                                <dd id="server-distance" class="text-sm text-gray-900 dark:text-white">-</dd>
                             </div>
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-600 dark:text-gray-300">Sponsor</span>
-                                <span id="server-sponsor" class="text-gray-900 dark:text-white">LibreSpeed</span>
+                                <dt class="text-sm text-gray-600 dark:text-gray-300">Sponsor</dt>
+                                <dd id="server-sponsor" class="text-sm text-gray-900 dark:text-white">LibreSpeed</dd>
                             </div>
-                        </div>
-                    </div>
+                        </dl>
+                    </article>
                 </section>
 
                 <!-- Share Results Area -->
-                <div id="shareArea" style="display:none" class="mb-8">
-                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm text-center">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Share Results</h3>
-                        <p class="text-gray-600 dark:text-gray-300 mb-2">Test ID: <span id="testId" class="font-mono"></span></p>
-                        <input type="text" value="" id="resultsURL" readonly="readonly" onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')" class="w-full p-2 mb-4 border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"/>
-                        <img src="" id="resultsImg" class="mx-auto max-w-full" />
-                    </div>
-                </div>
+                <section id="shareArea" style="display:none" class="mb-8" role="region" aria-label="Share test results">
+                    <article class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-6 shadow-sm text-center">
+                        <header class="mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Share Results</h3>
+                        </header>
+                        <div class="space-y-4">
+                            <p class="text-sm text-gray-600 dark:text-gray-300">
+                                Test ID: <span id="testId" class="font-mono font-semibold"></span>
+                            </p>
+                            <div>
+                                <label for="resultsURL" class="sr-only">Results URL</label>
+                                <input type="text" 
+                                       value="" 
+                                       id="resultsURL" 
+                                       readonly="readonly" 
+                                       onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')" 
+                                       class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+                                       placeholder="Results URL will appear here"/>
+                            </div>
+                            <img src="" id="resultsImg" class="mx-auto max-w-full rounded-lg shadow-sm" alt="Speed test results visualization" />
+                        </div>
+                    </article>
+                </section>
 
             </div>
         </main>
 
         <!-- Footer -->
         <footer class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                 <div class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-600 dark:text-gray-300">
                     <p>&copy; 2025 LibreSpeed. Open source speed test.</p>
-                    <div class="flex space-x-4 mt-2 sm:mt-0">
-                        <a href="#" class="hover:text-blue-500 transition-colors" onclick="I('privacyPolicy').style.display=''">Privacy</a>
-                        <a href="https://github.com/librespeed/speedtest" class="hover:text-blue-500 transition-colors">GitHub</a>
-                    </div>
+                    <nav class="flex space-x-6 mt-3 sm:mt-0" aria-label="Footer navigation">
+                        <button onclick="I('privacyPolicy').style.display=''" 
+                                class="hover:text-blue-500 focus:text-blue-500 transition-colors focus:outline-none focus:underline">
+                            Privacy
+                        </button>
+                        <a href="https://github.com/librespeed/speedtest" 
+                           class="hover:text-blue-500 focus:text-blue-500 transition-colors focus:outline-none focus:underline"
+                           target="_blank"
+                           rel="noopener noreferrer">
+                            GitHub
+                        </a>
+                    </nav>
                 </div>
             </div>
         </footer>
     </div>
     <!-- Privacy Policy Modal -->
-    <div id="privacyPolicy" style="display:none" class="fixed inset-0 z-50 overflow-y-auto">
-        <div class="flex items-center justify-center min-h-screen px-4">
-            <div class="fixed inset-0 bg-black opacity-50"></div>
-            <div class="relative bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto p-6">
-                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Privacy Policy</h2>
-                <div class="text-gray-700 dark:text-gray-300 space-y-4">
+    <div id="privacyPolicy" 
+         style="display:none" 
+         class="fixed inset-0 z-50 overflow-y-auto" 
+         role="dialog" 
+         aria-modal="true" 
+         aria-labelledby="privacy-title">
+        <div class="flex items-center justify-center min-h-screen px-4 py-8">
+            <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" 
+                 onclick="I('privacyPolicy').style.display='none'" 
+                 aria-hidden="true"></div>
+            <article class="relative bg-white dark:bg-gray-800 rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6 shadow-2xl">
+                <header class="mb-6">
+                    <h2 id="privacy-title" class="text-2xl font-bold text-gray-900 dark:text-white">Privacy Policy</h2>
+                </header>
+                <div class="text-gray-700 dark:text-gray-300 space-y-6 text-sm leading-relaxed">
                     <p>This HTML5 speed test server is configured with telemetry enabled.</p>
-                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">What data we collect</h4>
-                    <p>
-                        At the end of the test, the following data is collected and stored:
+                    
+                    <section>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">What data we collect</h3>
+                        <p class="mb-2">At the end of the test, the following data is collected and stored:</p>
                         <ul class="list-disc list-inside ml-4 space-y-1">
                             <li>Test ID</li>
                             <li>Time of testing</li>
@@ -755,30 +829,44 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">What data we col
                             <li>User agent and browser locale</li>
                             <li>Test log (contains no personal information)</li>
                         </ul>
-                    </p>
-                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">How we use the data</h4>
-                    <p>
-                        Data collected through this service is used to:
-                        <ul class="list-disc list-inside ml-4 space-y-1">
+                    </section>
+                    
+                    <section>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">How we use the data</h3>
+                        <p class="mb-2">Data collected through this service is used to:</p>
+                        <ul class="list-disc list-inside ml-4 space-y-1 mb-2">
                             <li>Allow sharing of test results (sharable image for forums, etc.)</li>
                             <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
                         </ul>
-                        No personal information is disclosed to third parties.
-                    </p>
-                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Your consent</h4>
-                    <p>
-                        By starting the test, you consent to the terms of this privacy policy.
-                    </p>
-                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Data removal</h4>
-                    <p>
-                        If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
-                        Contact this email address for all deletion requests: <a href="mailto:PUT@YOUR_EMAIL.HERE" class="text-blue-500 hover:text-blue-600">TO BE FILLED BY DEVELOPER</a>.
-                    </p>
-                </div>
-                <div class="mt-6 text-center">
-                    <button onclick="I('privacyPolicy').style.display='none'" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition-colors">Close</button>
+                        <p>No personal information is disclosed to third parties.</p>
+                    </section>
+                    
+                    <section>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Your consent</h3>
+                        <p>By starting the test, you consent to the terms of this privacy policy.</p>
+                    </section>
+                    
+                    <section>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Data removal</h3>
+                        <p>
+                            If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.
+                        </p>
+                        <p class="mt-2">
+                            Contact this email address for all deletion requests: 
+                            <a href="mailto:PUT@YOUR_EMAIL.HERE" 
+                               class="text-blue-500 hover:text-blue-600 focus:text-blue-600 transition-colors focus:outline-none focus:underline">
+                                TO BE FILLED BY DEVELOPER
+                            </a>.
+                        </p>
+                    </section>
                 </div>
-            </div>
+                <footer class="mt-8 text-center">
+                    <button onclick="I('privacyPolicy').style.display='none'" 
+                            class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 text-white px-6 py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800">
+                        Close
+                    </button>
+                </footer>
+            </article>
         </div>
     </div>
 </body>

From 27a9b3825736afa9b2226458466089046520461a Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan@shirvanian.devm>
Date: Fri, 25 Jul 2025 12:32:23 -0400
Subject: [PATCH 6/7] fix speedometer issue

---
 index.html | 310 ++++++++++++++++++++++-------------------------------
 1 file changed, 131 insertions(+), 179 deletions(-)

diff --git a/index.html b/index.html
index 3c7911437..bacfc4f5f 100755
--- a/index.html
+++ b/index.html
@@ -14,12 +14,29 @@
             extend: {
                 animation: {
                     'pulse-slow': 'pulse 3s ease-in-out infinite',
-                    'fade-in': 'fadeIn 0.5s ease-in-out'
+                    'fade-in': 'fadeIn 0.5s ease-in-out',
+                    'spin-slow': 'spin 3s linear infinite',
+                    'progress-fill': 'progressFill 2s ease-out',
+                    'glow-pulse': 'glowPulse 2s ease-in-out infinite',
+                    'bounce-gentle': 'bounceGentle 0.6s ease-out'
                 },
                 keyframes: {
                     fadeIn: {
                         '0%': { opacity: '0', transform: 'translateY(10px)' },
                         '100%': { opacity: '1', transform: 'translateY(0)' }
+                    },
+                    progressFill: {
+                        '0%': { 'stroke-dashoffset': '283' },
+                        '100%': { 'stroke-dashoffset': 'var(--progress-offset)' }
+                    },
+                    glowPulse: {
+                        '0%, 100%': { filter: 'drop-shadow(0 0 8px currentColor)', opacity: '0.8' },
+                        '50%': { filter: 'drop-shadow(0 0 20px currentColor)', opacity: '1' }
+                    },
+                    bounceGentle: {
+                        '0%': { transform: 'scale(1)' },
+                        '50%': { transform: 'scale(1.05)' },
+                        '100%': { transform: 'scale(1)' }
                     }
                 }
             }
@@ -119,156 +136,64 @@
 var dlColor="#3B82F6",
 	ulColor="#8B5CF6";
 
-//CODE FOR ENHANCED SPEEDOMETER
-var lastDrawnAmount = 0;
-var animationId = null;
+//CODE FOR ANIMATED SVG SPEEDOMETER
+var lastProgress = 0;
+var isTestActive = false;
 
-function drawMeter(c, targetAmount, bk, fg, animated = true){
-	if(!c || !c.getContext) return;
+function updateSpeedometer(targetAmount, color, animated = true) {
+	var progressCircle = document.getElementById('speed-progress');
 	
-	var ctx = c.getContext("2d");
-	var dp = window.devicePixelRatio || 1;
-	var cw = c.clientWidth * dp;
-	var ch = c.clientHeight * dp;
+	if (!progressCircle) return;
 	
-	// Ensure canvas has dimensions
-	if(cw === 0 || ch === 0) {
-		cw = 320 * dp;
-		ch = 320 * dp;
-	}
+	// Calculate stroke-dashoffset for progress (283 is full circumference)
+	var circumference = 283;
+	var offset = circumference - (targetAmount * circumference);
 	
-	// Only resize canvas if dimensions changed
-	if(c.width !== cw || c.height !== ch){
-		c.width = cw;
-		c.height = ch;
-	}
+	// Update progress circle
+	progressCircle.style.strokeDashoffset = offset;
 	
-	var centerX = cw / 2;
-	var centerY = ch / 2;
-	var radius = Math.min(cw, ch) * 0.38;
-	var lineWidth = Math.max(6, Math.min(cw, ch) * 0.018);
+	lastProgress = targetAmount;
+}
+
+function setSpeedometerColor(testType) {
+	var speedType = document.getElementById('speed-type');
 	
-	// Smooth animation
-	if(animated && Math.abs(targetAmount - lastDrawnAmount) > 0.01) {
-		if(animationId) cancelAnimationFrame(animationId);
-		
-		var startAmount = lastDrawnAmount;
-		var startTime = performance.now();
-		var duration = 300; // ms
-		
-		function animate(currentTime) {
-			var elapsed = currentTime - startTime;
-			var progress = Math.min(elapsed / duration, 1);
-			
-			// Easing function for smooth animation
-			var easeProgress = 1 - Math.pow(1 - progress, 3);
-			var currentAmount = startAmount + (targetAmount - startAmount) * easeProgress;
-			
-			drawSpeedometerFrame(ctx, currentAmount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch);
-			
-			if(progress < 1) {
-				animationId = requestAnimationFrame(animate);
-			} else {
-				lastDrawnAmount = targetAmount;
-				animationId = null;
-			}
+	// Update gradient colors based on test type
+	var gradient = document.getElementById('progressGradient');
+	if (gradient) {
+		var stops = gradient.querySelectorAll('stop');
+		if (testType === 'download') {
+			stops[0].style.stopColor = '#3B82F6'; // blue-500
+			stops[1].style.stopColor = '#6366F1'; // indigo-500  
+			stops[2].style.stopColor = '#8B5CF6'; // violet-500
+			if (speedType) speedType.style.color = '#3B82F6';
+		} else if (testType === 'upload') {
+			stops[0].style.stopColor = '#8B5CF6'; // violet-500
+			stops[1].style.stopColor = '#A855F7'; // purple-500
+			stops[2].style.stopColor = '#EC4899'; // pink-500
+			if (speedType) speedType.style.color = '#8B5CF6';
+		} else if (testType === 'ping') {
+			stops[0].style.stopColor = '#F59E0B'; // amber-500
+			stops[1].style.stopColor = '#EAB308'; // yellow-500
+			stops[2].style.stopColor = '#84CC16'; // lime-500
+			if (speedType) speedType.style.color = '#F59E0B';
 		}
-		
-		animationId = requestAnimationFrame(animate);
-	} else {
-		drawSpeedometerFrame(ctx, targetAmount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch);
-		lastDrawnAmount = targetAmount;
 	}
 }
 
-function drawSpeedometerFrame(ctx, amount, bk, fg, centerX, centerY, radius, lineWidth, cw, ch) {
-	// Clear canvas efficiently
-	ctx.clearRect(0, 0, cw, ch);
-	
-	// Enable anti-aliasing for smoother lines
-	ctx.imageSmoothingEnabled = true;
-	ctx.imageSmoothingQuality = 'high';
+function startSpeedometerAnimation() {
+	isTestActive = true;
+	var speedValue = document.getElementById('speed-value');
 	
-	var startAngle = 0.75 * Math.PI;
-	var endAngle = 0.25 * Math.PI;
-	var totalAngle = 1.5 * Math.PI;
-	var currentAngle = startAngle + amount * totalAngle;
-	
-	// Background track with subtle gradient
-	var bgGradient = ctx.createLinearGradient(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
-	bgGradient.addColorStop(0, bk);
-	bgGradient.addColorStop(1, bk + '80'); // Add slight transparency
-	
-	ctx.beginPath();
-	ctx.strokeStyle = bgGradient;
-	ctx.lineWidth = lineWidth;
-	ctx.lineCap = "round";
-	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-	ctx.stroke();
-	
-	// Progress arc with gradient
-	if(amount > 0) {
-		var progressGradient = ctx.createLinearGradient(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
-		progressGradient.addColorStop(0, fg);
-		progressGradient.addColorStop(0.5, fg + 'E6'); // Slightly more opaque
-		progressGradient.addColorStop(1, fg);
-		
-		ctx.beginPath();
-		ctx.strokeStyle = progressGradient;
-		ctx.lineWidth = lineWidth + 1;
-		ctx.lineCap = "round";
-		ctx.arc(centerX, centerY, radius, startAngle, currentAngle);
-		ctx.stroke();
-		
-		// Add glow effect for progress
-		ctx.shadowColor = fg;
-		ctx.shadowBlur = 8;
-		ctx.beginPath();
-		ctx.strokeStyle = fg;
-		ctx.lineWidth = lineWidth - 2;
-		ctx.arc(centerX, centerY, radius, startAngle, currentAngle);
-		ctx.stroke();
-		ctx.shadowBlur = 0;
-		
-		// Progress indicator dot
-		var dotX = centerX + radius * Math.cos(currentAngle);
-		var dotY = centerY + radius * Math.sin(currentAngle);
-		
-		ctx.beginPath();
-		ctx.fillStyle = fg;
-		ctx.arc(dotX, dotY, lineWidth / 3, 0, 2 * Math.PI);
-		ctx.fill();
-		
-		// Dot highlight
-		ctx.beginPath();
-		ctx.fillStyle = '#FFFFFF';
-		ctx.arc(dotX, dotY, lineWidth / 6, 0, 2 * Math.PI);
-		ctx.fill();
+	// Add bounce animation to speed value
+	if (speedValue) {
+		speedValue.classList.add('animate-bounce-gentle');
+		setTimeout(() => speedValue.classList.remove('animate-bounce-gentle'), 600);
 	}
-	
-	// Speed range markers
-	drawSpeedMarkers(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle);
 }
 
-function drawSpeedMarkers(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle) {
-	var markerRadius = radius + lineWidth / 2 + 4;
-	var innerRadius = radius - lineWidth / 2 - 4;
-	
-	// Draw markers for speed ranges (0, 25, 50, 75, 100+ percentiles)
-	for(var i = 0; i <= 4; i++) {
-		var angle = startAngle + (i / 4) * 1.5 * Math.PI;
-		var outerX = centerX + markerRadius * Math.cos(angle);
-		var outerY = centerY + markerRadius * Math.sin(angle);
-		var innerX = centerX + innerRadius * Math.cos(angle);
-		var innerY = centerY + innerRadius * Math.sin(angle);
-		
-		ctx.beginPath();
-		ctx.strokeStyle = '#94A3B8';
-		ctx.lineWidth = 1;
-		ctx.moveTo(outerX, outerY);
-		ctx.lineTo(innerX, innerY);
-		ctx.stroke();
-	}
+function stopSpeedometerAnimation() {
+	isTestActive = false;
 }
 function mbpsToAmount(s){
 	if(isNaN(s) || s < 0) {
@@ -296,6 +221,7 @@
 		I("startStopBtn").classList.remove("opacity-50");
 		I("button-text").textContent="Start Test";
 		I("server").disabled=false;
+		stopSpeedometerAnimation();
 		initUI();
 	}else{
 		//test is not running, begin
@@ -303,6 +229,7 @@
 		I("button-text").textContent="Stop Test";
 		I("shareArea").style.display="none";
 		I("server").disabled=true;
+		startSpeedometerAnimation();
 		s.onupdate=function(data){
             uiData=data;
 		};
@@ -310,6 +237,7 @@
             I("startStopBtn").classList.remove("opacity-50");
             I("button-text").textContent="Start Test";
             I("server").disabled=false;
+            stopSpeedometerAnimation();
             updateUI(true);
             if(!aborted){
                 //if testId is present, show sharing panel, otherwise do nothing
@@ -422,47 +350,45 @@
 	I("jitText").textContent=format(uiData.jitterStatus);
 	
 	
-	// Draw main speedometer
+	// Update animated speedometer
 	var currentSpeed = 0;
-	var speedColor = dlColor;
+	var testType = 'download';
 	
-	// Determine current speed and color based on test state
+	// Determine current speed and test type based on test state
 	if(status == 1) { // Download test - active
-		// Use actual download speed value, not the formatted text
 		currentSpeed = Number(uiData.dlStatus) || 0;
-		speedColor = dlColor;
+		testType = 'download';
 		console.log("Download - Status:", status, "Speed:", currentSpeed, "dlStatus:", uiData.dlStatus);
 	} else if(status == 3) { // Upload test - active  
 		currentSpeed = Number(uiData.ulStatus) || 0;
-		speedColor = ulColor;
+		testType = 'upload';
 		console.log("Upload - Status:", status, "Speed:", currentSpeed, "ulStatus:", uiData.ulStatus);
 	} else if(status == 2) { // Ping test - active
 		currentSpeed = 0; // Don't show speed during ping
-		speedColor = dlColor;
+		testType = 'ping';
 		console.log("Ping - Status:", status);
 	} else {
 		// Test not running or completed, show final download speed if available
 		currentSpeed = Number(uiData.dlStatus) || 0;
-		speedColor = dlColor;
+		testType = 'download';
 		console.log("Idle/Complete - Status:", status, "Speed:", currentSpeed);
 	}
 	
-	var speedometerCanvas = I("speedometer");
-	if(speedometerCanvas) {
-		var oscillation = (status >= 1 && status <= 3) ? oscillate() : 1;
-		var adjustedSpeed = Math.max(0, currentSpeed * oscillation); // Ensure non-negative
-		var speedAmount = mbpsToAmount(adjustedSpeed);
-		
-		// Additional debugging
-		console.log("Drawing speedometer - Status:", status, "Raw Speed:", currentSpeed, "Adjusted:", adjustedSpeed, "Amount:", speedAmount, "Color:", speedColor);
-		
-		// Ensure we have valid values
-		if(speedAmount >= 0 && speedAmount <= 1) {
-			drawMeter(speedometerCanvas, speedAmount, meterBk, speedColor, true);
-		} else {
-			console.warn("Invalid speedAmount:", speedAmount, "using 0 instead");
-			drawMeter(speedometerCanvas, 0, meterBk, speedColor, true);
-		}
+	// Update speedometer color scheme
+	setSpeedometerColor(testType);
+	
+	// Calculate progress amount with oscillation during active testing
+	var oscillation = (status >= 1 && status <= 3) ? oscillate() : 1;
+	var adjustedSpeed = Math.max(0, currentSpeed * oscillation);
+	var speedAmount = mbpsToAmount(adjustedSpeed);
+	
+	// Ensure valid progress value
+	if(speedAmount >= 0 && speedAmount <= 1) {
+		updateSpeedometer(speedAmount, testType, true);
+		console.log("Updating speedometer - Status:", status, "Raw Speed:", currentSpeed, "Adjusted:", adjustedSpeed, "Amount:", speedAmount, "Type:", testType);
+	} else {
+		console.warn("Invalid speedAmount:", speedAmount, "using 0 instead");
+		updateSpeedometer(0, testType, true);
 	}
 }
 function oscillate(){
@@ -526,20 +452,16 @@
 }
 //function to (re)initialize UI
 function initUI(){
-	// Reset animation state
-	lastDrawnAmount = 0;
-	if(animationId) {
-		cancelAnimationFrame(animationId);
-		animationId = null;
-	}
+	// Reset speedometer state
+	lastProgress = 0;
+	isTestActive = false;
 	
-	var speedometerCanvas = I("speedometer");
-	if(speedometerCanvas) {
-		// Force canvas to have visible dimensions and initialize without animation
-		setTimeout(function() {
-			drawMeter(speedometerCanvas, 0, meterBk, dlColor, false);
-		}, 100);
-	}
+	// Initialize speedometer to zero state
+	updateSpeedometer(0, 'download', false);
+	setSpeedometerColor('download');
+	stopSpeedometerAnimation();
+	
+	// Reset all text values
 	I("dlText").textContent="0.00";
 	I("ulText").textContent="0.00";
 	I("pingText").textContent="0";
@@ -549,6 +471,7 @@
 	I("location").textContent="-";
 	I("speed-value").textContent="0.00";
 	I("speed-type").textContent="Ready";
+	
 	// Reset button text
 	I("button-text").textContent="Start Test";
 }
@@ -601,15 +524,44 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">LibreSpeed</h1>
                 <!-- Speed Display -->
                 <section class="text-center mb-8" role="main" aria-label="Speed test display">
                     <div class="relative inline-block">
-                        <!-- Speedometer Circle -->
+                        <!-- Animated Speedometer -->
                         <div class="relative w-64 h-64 sm:w-80 sm:h-80 mx-auto mb-6" role="img" aria-label="Speed meter">
-                            <canvas id="speedometer" class="absolute inset-0 w-full h-full" width="320" height="320" aria-hidden="true"></canvas>
+                            <svg class="absolute inset-0 w-full h-full transform -rotate-90" viewBox="0 0 100 100">
+                                <!-- Background track -->
+                                <circle 
+                                    cx="50" cy="50" r="45" 
+                                    fill="none" 
+                                    stroke="currentColor" 
+                                    stroke-width="6" 
+                                    class="text-gray-200 dark:text-gray-700" />
+                                
+                                <!-- Animated gradient definitions -->
+                                <defs>
+                                    <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                                        <stop offset="0%" class="text-blue-400" stop-color="currentColor" />
+                                        <stop offset="50%" class="text-indigo-500" stop-color="currentColor" />
+                                        <stop offset="100%" class="text-purple-600" stop-color="currentColor" />
+                                    </linearGradient>
+                                </defs>
+                                
+                                <!-- Main progress circle -->
+                                <circle 
+                                    id="speed-progress" 
+                                    cx="50" cy="50" r="45" 
+                                    fill="none" 
+                                    stroke="url(#progressGradient)" 
+                                    stroke-width="6" 
+                                    stroke-linecap="round" 
+                                    stroke-dasharray="283" 
+                                    stroke-dashoffset="283"
+                                    class="transition-all duration-1000 ease-out" />
+                            </svg>
                             
-                            <!-- Speed Value -->
+                            <!-- Speed Value Display -->
                             <div class="absolute inset-0 flex flex-col items-center justify-center z-10">
-                                <div id="speed-value" class="text-4xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-2 tabular-nums" aria-live="polite">0.00</div>
+                                <div id="speed-value" class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-2 tabular-nums transition-all duration-300 ease-out" aria-live="polite">0.00</div>
                                 <div id="speed-unit" class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 font-medium">Mbps</div>
-                                <div id="speed-type" class="text-sm text-gray-500 dark:text-gray-400 mt-1" aria-live="polite">Ready</div>
+                                <div id="speed-type" class="text-sm text-gray-500 dark:text-gray-400 mt-1 transition-colors duration-300" aria-live="polite">Ready</div>
                             </div>
                         </div>
                         

From ecbaa57e0c4c6b5fc91bc4ae39d40bf91c18cd3d Mon Sep 17 00:00:00 2001
From: Ehsan Shirvanian <ehsan@shirvanian.dev>
Date: Mon, 25 Aug 2025 22:20:09 -0400
Subject: [PATCH 7/7] undo unwanted change with speedtest servers

---
 index.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index bacfc4f5f..76d2f8d73 100755
--- a/index.html
+++ b/index.html
@@ -49,22 +49,23 @@
 
 //LIST OF TEST SERVERS. Leave empty if you're doing a standalone installation. See documentation for details
 var SPEEDTEST_SERVERS=[
-	{	//this server doesn't actually exist, remove it
-		name:"local", //user friendly name for the server
-		server:"//192.168.2.195:9000", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+	/*{	//this server doesn't actually exist, remove it
+		name:"Example Server 1", //user friendly name for the server
+		server:"//test1.mydomain.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
 		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
 		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
 		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
 		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
 	},
 	{	//this server doesn't actually exist, remove it
-		name:"kamilszczepanski.com", //user friendly name for the server
-		server:"//la.speedtest.clouvider.net/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
-		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
-		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
-	}
+		name:"Example Server 2", //user friendly name for the server
+		server:"//test2.example.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	}*/
+	//add other servers here, comma separated
 ];
 
 //INITIALIZE SPEEDTEST
