Update index.html

index.html

@@ -14,25 +14,22 @@
             padding: 0;
             box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
-            /* Disable blue highlight on touch devices */
             -webkit-tap-highlight-color: transparent; 
         }
 
         body {
             min-height: 100vh;
-            /* Fix for mobile height issues */
             min-height: -webkit-fill-available;
             display: flex;
             justify-content: center;
             align-items: center;
             background-color: #0f0f1a;
-            overflow: hidden; /* Prevents scrollbars */
+            overflow: hidden;
             position: relative;
-            /* Disables browser handling of gestures like pinch-zoom */
             touch-action: none; 
         }
 
-        /* --- AURORA BACKGROUND ANIMATION --- */
+        /* --- AURORA BACKGROUND --- */
         body::before {
             content: '';
             position: absolute;
@@ -54,7 +51,7 @@
             100% { transform: translate(5%, -10%) rotate(-5deg); }
         }
 
-        /* --- CARD CONTAINER --- */
+        /* --- CARD STYLING --- */
         .login-card-container {
             perspective: 1500px;
             width: 100%;
@@ -63,10 +60,9 @@
             padding: 20px;
         }
 
-        /* --- GLASS CARD STYLING --- */
         .login-card {
             width: 100%;
-            max-width: 420px; /* Responsive limit */
+            max-width: 420px;
             padding: 50px 30px;
             border-radius: 40px; 
             background: rgba(255, 255, 255, 0.05);
@@ -77,7 +73,7 @@
                         0 20px 40px rgba(0, 0, 0, 0.3);
             color: #fff;
             text-align: center;
-            transition: transform 0.1s ease-out; /* Faster transition for smoother tilt */
+            transition: transform 0.1s ease-out;
             transform-style: preserve-3d;
             will-change: transform;
         }
@@ -95,7 +91,7 @@
         .login-card p.subtitle {
             font-size: 14px;
             color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 35px;
+            margin-bottom: 30px;
         }
 
         /* --- INPUT FIELDS --- */
@@ -112,7 +108,7 @@
             transform: translateY(-50%);
             color: rgba(255, 255, 255, 0.5);
             font-size: 16px;
-            pointer-events: none; /* Allows clicking through icon */
+            pointer-events: none;
             transition: 0.3s;
         }
 
@@ -124,25 +120,20 @@
             outline: none;
             background: rgba(255, 255, 255, 0.08);
             color: #fff;
-            /* Font size 16px prevents iOS zoom on focus */
             font-size: 16px; 
             font-weight: 400;
             transition: all 0.3s ease;
             box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
         }
 
-        .input-group input::placeholder {
-            color: rgba(255, 255, 255, 0.4);
-        }
+        .input-group input::placeholder { color: rgba(255, 255, 255, 0.4); }
 
         .input-group input:focus {
             background: rgba(255, 255, 255, 0.15);
             box-shadow: 0 0 15px rgba(124, 58, 237, 0.3), inset 2px 2px 5px rgba(0,0,0,0.1);
         }
         
-        .input-group input:focus + i.field-icon {
-             color: #c4b5fd;
-        }
+        .input-group input:focus + i.field-icon { color: #c4b5fd; }
 
         .toggle-password {
             position: absolute;
@@ -152,11 +143,11 @@
             cursor: pointer;
             color: rgba(255, 255, 255, 0.5);
             transition: 0.3s;
-            padding: 5px; /* Bigger touch target */
+            padding: 5px;
         }
         .toggle-password:hover { color: #fff; }
 
-        /* --- BUTTON --- */
+        /* --- MAIN BUTTON --- */
         .login-btn {
             width: 100%;
             padding: 16px;
@@ -169,23 +160,75 @@
             background: linear-gradient(135deg, #4F46E5, #EC4899);
             box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
             transition: all 0.3s ease;
-            margin-top: 10px;
-            /* Disable selection */
             user-select: none;
         }
 
         .login-btn:hover {
              background: linear-gradient(135deg, #4338ca, #db2777);
-             transform: translateY(-3px) scale(1.02);
+             transform: translateY(-2px) scale(1.01);
              box-shadow: 0 15px 30px rgba(124, 58, 237, 0.6);
         }
 
-        .login-btn:active {
-            transform: translateY(0) scale(0.98);
+        /* --- DIVIDER --- */
+        .divider {
+            margin: 25px 0 20px;
+            display: flex;
+            align-items: center;
+            color: rgba(255, 255, 255, 0.4);
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .divider::before, .divider::after {
+            content: "";
+            flex: 1;
+            height: 1px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .divider span { margin: 0 10px; }
+
+        /* --- SOCIAL BUTTONS --- */
+        .social-container {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+
+        .social-btn {
+            flex: 1;
+            height: 50px;
+            border-radius: 50px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.05);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px; /* Icon size */
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Hover Effects for Socials */
+        .social-btn:hover {
+            transform: translateY(-2px);
+            border-color: transparent;
+        }
+        
+        .social-btn.google:hover {
+            background-color: #DB4437; /* Google Red */
+            box-shadow: 0 5px 15px rgba(219, 68, 55, 0.4);
+        }
+        
+        .social-btn.github:hover {
+            background-color: #111; /* Github Black */
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
         }
 
         .links {
-            margin-top: 25px;
+            margin-top: 10px;
             font-size: 13px;
             color: rgba(255, 255, 255, 0.6);
         }
@@ -206,12 +249,9 @@
 
         /* Mobile Adjustments */
         @media (max-width: 480px) {
-            .login-card {
-                padding: 40px 20px;
-            }
-            .login-card h2 {
-                font-size: 28px;
-            }
+            .login-card { padding: 40px 20px; }
+            .login-card h2 { font-size: 28px; }
+            .social-container { gap: 10px; }
         }
     </style>
 </head>
@@ -220,7 +260,7 @@
     <div class="login-card-container">
         <div class="login-card" id="tiltCard">
             <h2>Welcome Back</h2>
-            <p class="subtitle">Enter your credentials to access your account.</p>
+            <p class="subtitle">Access your dashboard</p>
 
             <form id="loginForm">
                 <div class="input-group">
@@ -234,11 +274,24 @@
                     <i class="fa-regular fa-eye toggle-password" id="togglePassword"></i>
                 </div>
 
-                <button type="submit" class="login-btn" id="loginBtn">Let's Go</button>
+                <button type="submit" class="login-btn" id="loginBtn">Log In</button>
             </form>
 
+            <div class="divider">
+                <span>Or continue with</span>
+            </div>
+
+            <div class="social-container">
+                <button class="social-btn google" onclick="alert('Google Login clicked!')">
+                    <i class="fab fa-google"></i>
+                </button>
+                <button class="social-btn github" onclick="alert('GitHub Login clicked!')">
+                    <i class="fab fa-github"></i>
+                </button>
+            </div>
+
             <div class="links">
-                Don't have an account? <a href="#">Sign Up</a>
+                No account? <a href="#">Create One</a>
             </div>
         </div>
     </div>
@@ -250,14 +303,12 @@
         const card = document.getElementById('tiltCard');
         const container = document.querySelector('.login-card-container');
 
-        // Only apply tilt on non-touch devices to save battery/performance on mobile
         if (window.matchMedia("(pointer: fine)").matches) {
             container.addEventListener('mousemove', (e) => {
                 const rect = container.getBoundingClientRect();
                 const x = e.clientX - rect.left - rect.width / 2;
                 const y = e.clientY - rect.top - rect.height / 2;
                 
-                // Reduced multiplier for subtler effect
                 const multiple = 15; 
                 const rotateX = (y / rect.height) * -multiple;
                 const rotateY = (x / rect.width) * multiple;
@@ -291,15 +342,13 @@
             const username = document.getElementById('username').value;
             const password = document.getElementById('password').value;
 
-            // Simple validation check
             if (username === "" || password === "") {
                 card.classList.add('shake');
                 setTimeout(() => card.classList.remove('shake'), 400);
                 return;
             }
 
-            // Loading state
-            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Authenticating...';
+            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Checking...';
             loginBtn.style.opacity = '0.8';
             
             setTimeout(() => {