WebUI Save Config Complete

ESPMegaPRO-firmware/lib/ESPMegaPRO/html/config.html

@@ -1,4 +1,8 @@
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<div id="loadingSpinner" class="spinner-container" style="display: none;">
+  <div class="spinner"></div>
+  <p id="loadingText">Saving Configuration Please wait (<span id="countdown">15s</span>)</p>
+</div>
+</div>
 <form enctype="multipart/form-data" id="config_form" onsubmit="send_config(event)">
   <h1>ESPMega PRO</h1>
   <h3>Device Configurations</h3>
@@ -71,10 +75,26 @@
         // Handle any errors
         console.error(error);
       });
+    // Show the loading spinner
+    document.getElementById('loadingSpinner').style.display = 'block';
+
+    // Start the countdown
+    var countdown = document.getElementById('countdown');
+    var timeLeft = 15;
+    var countdownTimer = setInterval(function () {
+      timeLeft--;
+      countdown.textContent = timeLeft+"s";
+      if (timeLeft <= 0) clearInterval(countdownTimer);
+    }, 1000);
+
+    // Wait for 15 seconds
+    setTimeout(function () {
+      // Redirect user to homepage based on Form's IP
+      window.location.replace("http://"+formData.ip_address);
+    }, 15000);
   }
 </script>
 <style>
- 
   p.config_title {
     font-size: 12;
     font-weight: bold;
@@ -169,6 +189,7 @@
     font-size: 15px;
     border: 0;
   }
+
   .conf_txt {
     background-color: #e2e2e2;
   }
@@ -177,6 +198,7 @@
     size: 4;
     display: inline-block;
   }
+
   .container {
     display: block;
     position: relative;
@@ -236,4 +258,49 @@
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }
+
+  .spinner {
+    position: fixed;
+    top: 40%;
+    left: 44%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    border: 16px solid #f3f3f3;
+    border-top: 16px solid #3498db;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  #loadingText {
+    color: #fff;
+    font-size: 40px;
+    text-align: center;
+    position: fixed;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9); /* semi-transparent black background */
+}
 </style>