Updated And Fixed some bug

detectinternet.js

@@ -1,17 +1,29 @@
 // Check if the user is online
+function showOfflineAlert() {
+  alert(
+    "This website requires an internet connection. Please check your internet connection and try again."
+  );
+}
+
+function updateOfflineUI() {
+  document.body.innerHTML =
+    "<div class='container'><h1>Internet connection required</h1><p>Please check your connection and reload the page.</p><button class='reload' onClick='window.location.reload();'>Reload</button></div>";
+}
+
 function checkOnlineStatus() {
-    if (!navigator.onLine) {
-      alert(
-        "This website requires an internet connection. Please check your internet connection and try again."
-      );
-      document.body.innerHTML =
-        "<h1>Internet connection required</h1><p>Please check your connection and reload the page.</p>";
-    }
+  const IsOnline = !navigator.onLine;
+  if (IsOnline) {
+    document.body.classList.add("online");
+    showOfflineAlert();
+    updateOfflineUI();
+  } else {
+    document.body.classList.remove("offline");
   }
-
-  // Check online status when the page loads
-  window.addEventListener("load", checkOnlineStatus);
-
-  // Also check when the online/offline status changes
-  window.addEventListener("online", checkOnlineStatus);
-  window.addEventListener("offline", checkOnlineStatus);
+}
+
+// Check online status when the page loads
+window.addEventListener("load", checkOnlineStatus);
+
+// Also check when the online/offline status changes
+window.addEventListener("online", checkOnlineStatus);
+window.addEventListener("offline", checkOnlineStatus);

index.css

@@ -17,6 +17,32 @@ body {
     padding: 20px;
 }
 
+.reload {
+    display: block;
+    padding: 10px 20px;
+    background-color: #8b8b8b;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    justify-content: center;
+    position: relative;
+    align-items: center;
+    margin: 0 auto;
+}
+
+.reload:hover {
+    background-color: #5b5b5b;
+}
+
+.reload:active {
+    background-color: #424242;
+}
+
 .navbar {
     background-color: #333;
     overflow: hidden;