Update index.html

Author: ToniBloney23

index.html

@@ -13,7 +13,7 @@
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
   <style>
     body {
-      background: #1a1a1a;
+      background: linear-gradient(to right, #232526, #414345);
       color: #f0f0f0;
       font-family: 'Roboto', sans-serif;
       margin: 0;
@@ -22,6 +22,7 @@
       align-items: center;
       justify-content: center;
       min-height: 100vh;
+      text-align: center;
     }
     h1 {
       margin-bottom: 0.5rem;
@@ -45,38 +46,39 @@
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.3);
     }
-    #reset-button, #view-toggle {
+    .control-button, #reset-button, #view-toggle {
       font-size: 1rem;
-      padding: 0.6rem 1.2rem;
+      padding: 0.7rem 1.5rem;
       border: none;
-      border-radius: 5px;
+      border-radius: 25px;
       color: white;
       cursor: pointer;
-      transition: background-color 0.3s, transform 0.2s;
+      transition: all 0.3s ease;
       text-transform: uppercase;
-      letter-spacing: 1px;
+      letter-spacing: 1.5px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     }
 
     #reset-button {
-      background: #f44336;
+      background-image: linear-gradient(to right, #f44336, #d32f2f);
     }
 
     #reset-button:hover {
-      background: #d32f2f;
-      transform: translateY(-2px);
+      transform: translateY(-3px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     }
 
     #controls-container {
       margin-top: 1.5rem;
     }
 
     #view-toggle {
-        background: #2196F3;
+        background-image: linear-gradient(to right, #2196F3, #1976D2);
     }
 
     #view-toggle:hover {
-        background: #1976D2;
-        transform: translateY(-2px);
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     }
     .retry-button {
       font-size: 1rem;
@@ -105,20 +107,11 @@
       margin: 1rem auto;
     }
     .control-button {
-        font-size: 1rem;
-        padding: 0.6rem 1.2rem;
-        border: none;
-        border-radius: 5px;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s, transform 0.2s;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        background: #2196F3;
+        background-image: linear-gradient(to right, #2196F3, #1976D2);
     }
     .control-button:hover {
-        background: #1976D2;
-        transform: translateY(-2px);
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     }
     .modal {
         position: fixed; 
@@ -131,14 +124,15 @@
         background-color: rgba(0,0,0,0.6);
     }
     .modal-content {
-        background-color: #2c2c2c;
+        background: #333;
         margin: 15% auto; 
-        padding: 20px;
-        border: 1px solid #888;
+        padding: 25px;
+        border: none;
         width: 90%;
         max-width: 400px;
-        border-radius: 10px;
+        border-radius: 15px;
         text-align: center;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
     }
     .close-button {
         color: #aaa;
@@ -153,6 +147,24 @@
         cursor: pointer;
     }
 
+    #login-modal input {
+      width: calc(100% - 20px);
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+      border: 1px solid #555;
+      background: #444;
+      color: #f0f0f0;
+    }
+
+    #leaderboard-list li, #session-history-list li {
+      background: #444;
+      margin-bottom: 5px;
+      padding: 10px;
+      border-radius: 5px;
+      list-style-position: inside;
+    }
+
     @media (max-width: 600px) {
       h1 {
         font-size: 2rem;
@@ -253,8 +265,8 @@ <h2>Session History</h2>
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
           video: {
-            width: { ideal: 640 },
-            height: { ideal: 480 },
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
             facingMode: 'user'
           }
         });