Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login - Webmail Client</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .login-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .input-field { | |
| background: rgba(255, 255, 255, 0.15); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-color: rgba(255, 255, 255, 0.5); | |
| box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .login-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .login-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 min-h-screen flex items-center justify-center p-4"> | |
| <!-- Background Animation --> | |
| <div id="vanta-bg" class="absolute inset-0 z-0"></div> | |
| <!-- Login Container --> | |
| <div class="relative z-10 w-full max-w-md"> | |
| <!-- Login Card --> | |
| <div class="login-card rounded-2xl p-8 shadow-2xl"> | |
| <!-- Logo --> | |
| <div class="text-center mb-8"> | |
| <div class="flex items-center justify-center space-x-3 mb-4"> | |
| <i data-feather="mail" class="text-white text-2xl"></i> | |
| <h1 class="text-3xl font-bold text-white">WebMail</h1> | |
| </div> | |
| <p class="text-white text-opacity-80">Sign in to your email account</p> | |
| </div> | |
| <!-- Login Form --> | |
| <form class="space-y-6"> | |
| <!-- Email Field --> | |
| <div> | |
| <label class="block text-white text-sm font-medium mb-2">Email Address</label> | |
| <div class="relative"> | |
| <i data-feather="mail" class="absolute left-3 top-3 text-white text-opacity-70"></i> | |
| <input | |
| type="email" | |
| placeholder="Enter your email" | |
| class="input-field w-full py-3 px-4 pl-10 rounded-xl text-white placeholder-white placeholder-opacity-70 focus:outline-none" | |
| required | |
| > | |
| </div> | |
| </div> | |
| <!-- Password Field --> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="block text-white text-sm font-medium">Password</label> | |
| <a href="#" class="text-white text-opacity-80 hover:text-opacity-100 text-sm transition">Forgot password?</a> | |
| </div> | |
| <div class="relative"> | |
| <i data-feather="lock" class="absolute left-3 top-3 text-white text-opacity-70"></i> | |
| <input | |
| type="password" | |
| placeholder="Enter your password" | |
| class="input-field w-full py-3 px-4 pl-10 rounded-xl text-white placeholder-white placeholder-opacity-70 focus:outline-none" | |
| required | |
| > | |
| </div> | |
| </div> | |
| <!-- Remember Me --> | |
| <div class="flex items-center"> | |
| <input | |
| type="checkbox" | |
| id="remember" | |
| class="w-4 h-4 rounded bg-white bg-opacity-20 border-white border-opacity-30 focus:ring-white focus:ring-opacity-50" | |
| > | |
| <label for="remember" class="ml-2 text-white text-opacity-80 text-sm">Remember me</label> | |
| </div> | |
| <!-- Login Button --> | |
| <button | |
| type="submit" | |
| class="login-btn w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-purple-700 transition-all duration-300" | |
| > | |
| Sign In | |
| </button> | |
| </form> | |
| <!-- Divider --> | |
| <div class="flex items-center my-6"> | |
| <div class="flex-1 border-t border-white border-opacity-20"></div> | |
| <span class="mx-4 text-white text-opacity-60 text-sm">or continue with</button> | |
| <!-- Social Login --> | |
| <div class="flex justify-center space-x-4 mb-6"> | |
| <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition"> | |
| <i data-feather="github" class="text-white"></i> | |
| </button> | |
| <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition"> | |
| <i data-feather="google" class="text-white"></i> | |
| </button> | |
| <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition"> | |
| <i data-feather="twitter" class="text-white"></i> | |
| </button> | |
| </div> | |
| <!-- Sign Up Link --> | |
| <div class="text-center"> | |
| <p class="text-white text-opacity-80"> | |
| Don't have an account? | |
| <a href="#" class="text-white font-medium hover:underline">Sign up</a> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="text-center mt-6"> | |
| <p class="text-white text-opacity-60 text-sm">© 2024 WebMail. All rights reserved.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js Background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x667eea, | |
| color2: 0x764ba2, | |
| backgroundColor: 0x0, | |
| size: 1.00 | |
| }); | |
| // Form submission handler | |
| document.querySelector('form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simulate login process | |
| const email = this.querySelector('input[type="email"]').value; | |
| const password = this.querySelector('input[type="password"]').value; | |
| // Show loading state | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| const originalText = submitBtn.textContent; | |
| submitBtn.textContent = 'Signing in...'; | |
| submitBtn.disabled = true; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| // Redirect to main page after successful login | |
| window.location.href = 'index.html'; | |
| }, 1500); | |
| }); | |
| </script> | |
| </body> | |
| </html> |