update example_acdemo.html

OpenNHP · Oct 23, 2024 · 0fde7f2 · 0fde7f2
1 parent 0eff4f4
commit 0fde7f2
Showing 1 changed file with 36 additions and 2 deletions.
diff --git a/server/plugins/example/templates/example_acdemo.html b/server/plugins/example/templates/example_acdemo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -32,6 +32,12 @@
             margin-top: 1rem;
             font-weight: bold;
         }
+        #countdown {
+            margin-top: 2rem;
+            color: red;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
         #message {
             margin-top: 1rem;
             color: green;
@@ -45,7 +51,35 @@
         <h1>Welcome to the Demo NHP-AC Server</h1>
         <p>acdemo.opennhp.org</p>
         <div><a href="https://dnschecker.org/port-scanner.php?query=acdemo.opennhp.org" target="_blank">Scan Its Ports &gt;&gt;</a></div>
-        <div id="message"></div>
+        <!-- Add countdown display -->
+        <div id="countdown">This Server Will be Hidden after <span id="timer">15</span> seconds ...</div>
+        <!-- Messages with hidden information -->
+        <div id="message">The Server Has been Hidden.</div>
     </div>
+
+    <script>
+        // Initialize countdown seconds
+        let seconds = 15;
+
+        // Retrieve DOM elements
+        const timerElement = document.getElementById('timer');
+        const countdownElement = document.getElementById('countdown');
+        const messageElement = document.getElementById('message');
+
+        // Update countdown every second
+        const countdownInterval = setInterval(() => {
+            seconds--;
+            timerElement.textContent = seconds;
+
+            if (seconds <= 0) {
+                clearInterval(countdownInterval);
+                // Hide Countdown
+                countdownElement.style.display = 'none';
+                // Show hidden messages
+                messageElement.style.display = 'block';
+            }
+        }, 1000);
+    </script>
 </body>
 </html>
+