Spaces:

api-ix
/

Gemini

Running

App Files Files Community

api-ix commited on Nov 22, 2025

Commit

b72d137

verified ·

1 Parent(s): 58e9048

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -99

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ultra Modern Login</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -14,20 +14,25 @@
             padding: 0;
             box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
         body {
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
-            background-color: #0f0f1a; /* Deep dark base */
-            overflow: hidden;
             position: relative;
         }
         /* --- AURORA BACKGROUND ANIMATION --- */
-        /* Using a pseudo-element for the flowing gradient background */
         body::before {
             content: '';
             position: absolute;
@@ -40,7 +45,7 @@
             animation: auroraMove 15s ease infinite alternate;
             opacity: 0.5;
             z-index: -1;
-            filter: blur(80px); /* Extreme blur for soft color washes */
         }
         @keyframes auroraMove {
@@ -49,44 +54,39 @@
             100% { transform: translate(5%, -10%) rotate(-5deg); }
         }
-        /* --- MAIN CARD CONTAINER --- */
         .login-card-container {
-            /* Perspective for 3D tilt */
             perspective: 1500px;
         }
-        /* --- THE ULTRA CURVY GLASS CARD --- */
         .login-card {
-            width: 420px;
-            padding: 60px 40px;
-            /* The "Curvy" Aesthetic */
-            border-radius: 50px;
-            /* Refined Glassmorphism */
             background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(30px); /* Heavier blur for depth */
-            -webkit-backdrop-filter: blur(30px);
             border: 1px solid rgba(255, 255, 255, 0.15);
-            /* Inner glow to define rounded edges */
             box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
-                        0 20px 40px rgba(0, 0, 0, 0.3); /* Soft outer shadow */
             color: #fff;
             text-align: center;
-            /* Smooth tilt transition */
-            transition: transform 0.2s ease-out;
             transform-style: preserve-3d;
             will-change: transform;
         }
         .login-card h2 {
             font-weight: 700;
-            font-size: 36px;
-            margin-bottom: 10px;
-            letter-spacing: -1px;
-            /* Gradient text effect */
             background: linear-gradient(to right, #fff, #c4b5fd);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -95,39 +95,39 @@
         .login-card p.subtitle {
             font-size: 14px;
             color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 40px;
         }
-        /* --- INPUT FIELDS (PILL SHAPE) --- */
         .input-group {
             position: relative;
-            margin-bottom: 25px;
             text-align: left;
         }
         .input-group i.field-icon {
             position: absolute;
             top: 50%;
-            left: 25px;
             transform: translateY(-50%);
             color: rgba(255, 255, 255, 0.5);
-            font-size: 18px;
             transition: 0.3s;
         }
-        /* Full "Pill" shaped inputs */
         .input-group input {
             width: 100%;
-            padding: 18px 60px 18px 60px; /* Padding for icons */
-            border-radius: 50px; /* Extreme curves */
             border: none;
             outline: none;
             background: rgba(255, 255, 255, 0.08);
             color: #fff;
-            font-size: 15px;
             font-weight: 400;
             transition: all 0.3s ease;
-            /* Subtle inner shadow for depth */
             box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
         }
@@ -135,56 +135,58 @@
             color: rgba(255, 255, 255, 0.4);
         }
-        /* Input Focus State */
         .input-group input:focus {
             background: rgba(255, 255, 255, 0.15);
-            box-shadow: 0 0 20px 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;
         }
-        /* Password toggle eye */
         .toggle-password {
             position: absolute;
-            right: 25px;
             top: 50%;
             transform: translateY(-50%);
             cursor: pointer;
             color: rgba(255, 255, 255, 0.5);
             transition: 0.3s;
         }
         .toggle-password:hover { color: #fff; }
-        /* --- LOGIN BUTTON (GRADIENT PILL) --- */
         .login-btn {
             width: 100%;
-            padding: 18px;
             border-radius: 50px;
             border: none;
-            outline: none;
-            font-size: 18px;
             font-weight: 600;
             color: #fff;
             cursor: pointer;
-            /* Vibrant gradient */
             background: linear-gradient(135deg, #4F46E5, #EC4899);
-            box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
-            transition: all 0.4s ease;
             margin-top: 10px;
         }
         .login-btn:hover {
-             /* Shift gradient and lift button */
              background: linear-gradient(135deg, #4338ca, #db2777);
-             transform: translateY(-5px) scale(1.02);
-             box-shadow: 0 15px 35px rgba(124, 58, 237, 0.6);
         }
-        /* --- FOOTER LINKS --- */
         .links {
-            margin-top: 30px;
-            font-size: 14px;
             color: rgba(255, 255, 255, 0.6);
         }
         .links a {
@@ -193,14 +195,23 @@
             font-weight: 600;
             margin-left: 5px;
         }
-        .links a:hover { text-decoration: underline; }
-        /* --- ERROR SHAKE ANIMATION --- */
         .shake { animation: shake 0.4s ease-in-out; }
         @keyframes shake {
             0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-10px); }
-            75% { transform: translateX(10px); }
         }
     </style>
 </head>
@@ -213,12 +224,12 @@
             <form id="loginForm">
                 <div class="input-group">
-                    <input type="text" id="username" placeholder="Username or Email" autocomplete="off">
                     <i class="fa-regular fa-user field-icon"></i>
                 </div>
                 <div class="input-group">
-                    <input type="password" id="password" placeholder="Password">
                     <i class="fa-solid fa-lock field-icon"></i>
                     <i class="fa-regular fa-eye toggle-password" id="togglePassword"></i>
                 </div>
@@ -232,79 +243,70 @@
         </div>
     </div>
     <script>
-        // 1. 3D TILT EFFECT (Refined for smoother feel)
         const card = document.getElementById('tiltCard');
         const container = document.querySelector('.login-card-container');
-        container.addEventListener('mousemove', (e) => {
-            const rect = container.getBoundingClientRect();
-            // Calculate mouse position relative to the center of the container
-            const x = e.clientX - rect.left - rect.width / 2;
-            const y = e.clientY - rect.top - rect.height / 2;
-            // Multiplier controls the intensity of the tilt (lower = subtler)
-            const multiple = 20;
-            const rotateX = (y / rect.height) * -multiple;
-            const rotateY = (x / rect.width) * multiple;
-            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-        });
-        // Reset position when mouse leaves
-        container.addEventListener('mouseleave', () => {
-            card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-        });
-        // 2. PASSWORD VISIBILITY TOGGLE
         const passwordInput = document.getElementById('password');
         const toggleBtn = document.getElementById('togglePassword');
         toggleBtn.addEventListener('click', () => {
             const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
             passwordInput.setAttribute('type', type);
             toggleBtn.classList.toggle('fa-eye');
             toggleBtn.classList.toggle('fa-eye-slash');
         });
-        // 3. FORM SUBMISSION MOCKUP (Validation & Loading)
         const form = document.getElementById('loginForm');
         const loginBtn = document.getElementById('loginBtn');
-        const originalBtnText = loginBtn.innerText;
         form.addEventListener('submit', (e) => {
-            e.preventDefault(); // Stop actual form submission
             const username = document.getElementById('username').value;
             const password = document.getElementById('password').value;
-            if (!username || !password) {
-                // Error state: Shake card
                 card.classList.add('shake');
-                // Remove class after animation plays
                 setTimeout(() => card.classList.remove('shake'), 400);
                 return;
             }
-            // Success state: Show loading
-            loginBtn.innerText = 'Authenticating...';
             loginBtn.style.opacity = '0.8';
-            loginBtn.disabled = true;
-            // Simulate network request delay
             setTimeout(() => {
-                loginBtn.innerText = 'Success!';
-                loginBtn.style.background = 'linear-gradient(135deg, #10B981, #059669)'; // Green gradient
-                // Optional: redirect after success
-                // window.location.href = '/dashboard';
             }, 2000);
         });
     </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Ultra Modern Login</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
             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 */
             position: relative;
+            /* Disables browser handling of gestures like pinch-zoom */
+            touch-action: none;
         }
         /* --- AURORA BACKGROUND ANIMATION --- */
         body::before {
             content: '';
             position: absolute;
             animation: auroraMove 15s ease infinite alternate;
             opacity: 0.5;
             z-index: -1;
+            filter: blur(80px);
         }
         @keyframes auroraMove {
             100% { transform: translate(5%, -10%) rotate(-5deg); }
         }
+        /* --- CARD CONTAINER --- */
         .login-card-container {
             perspective: 1500px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            padding: 20px;
         }
+        /* --- GLASS CARD STYLING --- */
         .login-card {
+            width: 100%;
+            max-width: 420px; /* Responsive limit */
+            padding: 50px 30px;
+            border-radius: 40px;
             background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
             border: 1px solid rgba(255, 255, 255, 0.15);
             box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
+                        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 */
             transform-style: preserve-3d;
             will-change: transform;
         }
         .login-card h2 {
             font-weight: 700;
+            font-size: 32px;
+            margin-bottom: 8px;
+            letter-spacing: -0.5px;
             background: linear-gradient(to right, #fff, #c4b5fd);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         .login-card p.subtitle {
             font-size: 14px;
             color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 35px;
         }
+        /* --- INPUT FIELDS --- */
         .input-group {
             position: relative;
+            margin-bottom: 20px;
             text-align: left;
         }
         .input-group i.field-icon {
             position: absolute;
             top: 50%;
+            left: 20px;
             transform: translateY(-50%);
             color: rgba(255, 255, 255, 0.5);
+            font-size: 16px;
+            pointer-events: none; /* Allows clicking through icon */
             transition: 0.3s;
         }
         .input-group input {
             width: 100%;
+            padding: 16px 50px 16px 50px;
+            border-radius: 50px;
             border: none;
             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);
         }
             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;
         }
         .toggle-password {
             position: absolute;
+            right: 20px;
             top: 50%;
             transform: translateY(-50%);
             cursor: pointer;
             color: rgba(255, 255, 255, 0.5);
             transition: 0.3s;
+            padding: 5px; /* Bigger touch target */
         }
         .toggle-password:hover { color: #fff; }
+        /* --- BUTTON --- */
         .login-btn {
             width: 100%;
+            padding: 16px;
             border-radius: 50px;
             border: none;
+            font-size: 16px;
             font-weight: 600;
             color: #fff;
             cursor: pointer;
             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);
+             box-shadow: 0 15px 30px rgba(124, 58, 237, 0.6);
+        }
+        .login-btn:active {
+            transform: translateY(0) scale(0.98);
         }
         .links {
+            margin-top: 25px;
+            font-size: 13px;
             color: rgba(255, 255, 255, 0.6);
         }
         .links a {
             font-weight: 600;
             margin-left: 5px;
         }
+        /* --- ANIMATIONS --- */
         .shake { animation: shake 0.4s ease-in-out; }
         @keyframes shake {
             0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-8px); }
+            75% { transform: translateX(8px); }
+        }
+        /* Mobile Adjustments */
+        @media (max-width: 480px) {
+            .login-card {
+                padding: 40px 20px;
+            }
+            .login-card h2 {
+                font-size: 28px;
+            }
         }
     </style>
 </head>
             <form id="loginForm">
                 <div class="input-group">
+                    <input type="email" id="username" placeholder="Email" autocomplete="off" required>
                     <i class="fa-regular fa-user field-icon"></i>
                 </div>
                 <div class="input-group">
+                    <input type="password" id="password" placeholder="Password" required>
                     <i class="fa-solid fa-lock field-icon"></i>
                     <i class="fa-regular fa-eye toggle-password" id="togglePassword"></i>
                 </div>
         </div>
     </div>
     <script>
+        /* --- LOGIC --- */
+        // 1. TILT EFFECT
         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;
+                card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+            });
+            container.addEventListener('mouseleave', () => {
+                card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+            });
+        }
+        // 2. PASSWORD TOGGLE
         const passwordInput = document.getElementById('password');
         const toggleBtn = document.getElementById('togglePassword');
         toggleBtn.addEventListener('click', () => {
             const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
             passwordInput.setAttribute('type', type);
             toggleBtn.classList.toggle('fa-eye');
             toggleBtn.classList.toggle('fa-eye-slash');
         });
+        // 3. SUBMIT ANIMATION
         const form = document.getElementById('loginForm');
         const loginBtn = document.getElementById('loginBtn');
         form.addEventListener('submit', (e) => {
+            e.preventDefault();
             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.style.opacity = '0.8';
             setTimeout(() => {
+                loginBtn.innerHTML = 'Success!';
+                loginBtn.style.background = 'linear-gradient(135deg, #10B981, #059669)';
             }, 2000);
         });
     </script>
 </body>
 </html>