From 68a044a679129cc57397a7ff59383bd268f4df19 Mon Sep 17 00:00:00 2001
From: Andrew <andrew@fybe.dev>
Date: Sat, 10 Jan 2026 20:11:42 +0900
Subject: [PATCH] show badge with visual colors

---
 templates/upload.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/templates/upload.html b/templates/upload.html
index 6495773..f41b7fa 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -52,7 +52,7 @@
                 <span style="font-size: 20px; padding-bottom: 7px;">
                     <i class="fa-solid fa-location fa-xs"
                         style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
-                    <span id="location-display" class="loading">Locating...</span> <i class="fa-solid fa-circle-dot fa-2xs" id="mirrorLogo" style="color: #c10101;"></i> <span class="badge text-bg-primary"><span id="ping-value">..</span>ms</span></span>
+                    <span id="location-display" class="loading">Locating...</span> <i class="fa-solid fa-circle-dot fa-2xs" id="mirrorLogo" style="color: #c10101;"></i> <span class="badge text-bg-primary" id="ping-badge"><span id="ping-status"></span> <span id="ping-value">..</span>ms</span></span>
                 </span>
                 <input type="file" name="file" id="fileUpload" class="form-control" required aria-required>
                 <input type="hidden" id="quotaGB" value="{{ quota_gb }}">
@@ -186,6 +186,16 @@
                     const end = Date.now();
                     const latency = end - start;
                     document.getElementById('ping-value').innerText = latency;
+                    if (latency > 200) {
+                        document.getElementById('ping-status').innerText = "BAD";
+                        document.getElementById('ping-badge').className = "badge text-bg-danger";
+                    } else if (latency > 100) {
+                        document.getElementById('ping-status').innerText = "GOOD";
+                        document.getElementById('ping-badge').className = "badge text-bg-success";
+                    } else if (latency <= 100) {
+                        document.getElementById('ping-status').innerText = "BEST";
+                        document.getElementById('ping-badge').className = "badge text-bg-primary";
+                    }
                 })
                 .catch(err => {
                     document.getElementById('ping-value').innerText = "Error";