Update testing.html

vansh-codes · Oct 15, 2024 · ebff300 · ebff300
1 parent 0f42a60
commit ebff300
Showing 1 changed file with 55 additions and 11 deletions.
diff --git a/testing.html b/testing.html
@@ -6,29 +6,38 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChaosWeb - The Disorderly UI Experiment</title>
     <link rel="stylesheet" href="preloaderStyle.css">
-
     <style>
         body {
             background: #000;
-            text-align: center;
+            display: flex;
+            justify-content: center;
             align-items: center;
+            height: 100vh;
+            /* Full viewport height */
+            margin: 0;
+            /* Remove default margin */
+            flex-direction: column;
+            /* Align content vertically */
+            text-align: center;
         }
 
         @keyframes wave {
             0% {
                 transform: translateY(0);
-
             }
-            25%{
+
+            25% {
                 background: #d5fa01;
                 color: #000;
             }
+
             50% {
                 transform: translateY(-10px);
                 background: #00076e;
                 color: white;
             }
-            100%{
+
+            100% {
                 background: #35fc3c;
                 transform: scale(1.03);
                 color: #050051;
@@ -62,7 +71,8 @@
             display: inline-block;
             animation: wave 1s infinite;
             color: rgb(246, 255, 0);
-            font-size: 36px;
+            font-size: 2.5vw;
+            /* Responsive font size */
             font-weight: 600;
             margin-bottom: 70px;
             padding: 5px;
@@ -78,9 +88,16 @@
         }
 
         #tester_section {
-            width: 500px;
-            margin-left: 25%;
+            width: 80%;
+            /* Responsive width */
+            max-width: 500px;
+            /* Max width for larger screens */
+            margin: 0 auto;
+            /* Centering */
+            display: flex;
+            flex-direction: column;
             align-items: center;
+            /* Center items */
         }
 
         #testLink {
@@ -96,7 +113,10 @@
             font-weight: 500;
             font-size: 24px;
             animation: shake 1.5s infinite alternate;
-            width: 80%;
+            width: 100%;
+            /* Full width */
+            max-width: 400px;
+            /* Max width for larger screens */
             margin-bottom: 75px;
         }
 
@@ -106,10 +126,34 @@
             color: #0008ff;
             border-radius: 10px;
             border: none;
-            margin-left: 25%;
             font-size: 24px;
             font-weight: 600;
             animation: wave 1s infinite;
+            cursor: pointer;
+            /* Pointer cursor */
+            width: 100%;
+            /* Full width */
+            max-width: 200px;
+            /* Max width for button */
+        }
+
+        /* Optional: Add a preloader style to cover full page */
+        .container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 10;
+            /* Ensure it's on top */
+        }
+
+        .preloader {
+            /* Add styles for the preloader here if necessary */
         }
     </style>
 </head>
@@ -174,4 +218,4 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
     <script src="preloader.js"></script>
 </body>
 
-</html>
+</html>