Update index.html

shabir-mp · web-flow · commit a080a1ec9b4a · 2024-05-24T10:26:25.000+07:00
Added Features:
1. More beautiful ui and ux
2. Add 2 features, check if device on and check if device can open the web.
3. Add support button project
diff --git a/index.html b/index.html
@@ -1,19 +1,67 @@
 <!DOCTYPE html>
 <html>
-  <body>
-    <button id="device-button">Check My Device</button>
-    <p id="device-status"></p>
+<head>
+    <title>Device Checker</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        
+        h1 {
+            color: #333;
+        }
+        
+        button {
+            background-color: #4CAF50;
+            color: #fff;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 10px;
+            text-decoration: none;
+        }
+        
+        button:hover {
+            background-color: #3e8e41;
+        }
+        
+        .github-button {
+            background-color: #000;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 80px;
+            cursor: pointer;
+            margin: 10px;
+            text-decoration: none;
+        }
+        
+        .github-button:hover {
+            background-color: #0a6d;
+        }
+    </style>
+</head>
+<body>
+    <h1>Device Check</h1>
+    <button id="deviceOnButton">Is my Device on?</button>
+    <button id="deviceCanOpenButton">Is my Device can open this web?</button>
+    <a href="https://github.com/shabir-mp" target="_blank" class="github-button">Support My Project</a>
 
     <script>
-      // Get the button and status element
-      const button = document.getElementById("device-button");
-      const status = document.getElementById("device-status");
+        document.getElementById("deviceOnButton").addEventListener("click", function() {
+            alert("Yes, your device now on.");
+        });
 
-      // Add an event listener to the button
-      button.addEventListener("click", () => {
-        // When the button is clicked, change the text of the status element
-        status.textContent = "Your Device is On";
-      });
+        document.getElementById("deviceCanOpenButton").addEventListener("click", function() {
+            alert("Yes, your device support to open this website.");
+        });
     </script>
-  </body>
+</body>
 </html>
