Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login | EUROHINCA Business Hub</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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .login-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .input-field { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: rgba(59, 130, 246, 0.5); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 text-white flex items-center justify-center p-4 relative overflow-hidden"> | |
| <!-- Background animation --> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-900/50 to-indigo-900/50"></div> | |
| </div> | |
| <div class="login-card w-full max-w-md p-6 sm:p-8 z-10 mx-4"> | |
| <div class="text-center mb-8"> | |
| <div class="flex justify-center mb-2 sm:mb-4"> | |
| <i data-feather="briefcase" class="w-12 h-12 text-blue-300"></i> | |
| </div> | |
| <h1 class="text-xl sm:text-2xl font-bold mb-2">Welcome Back</h1> | |
| <p class="text-blue-100">Sign in with your company Microsoft 365 account</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Work Email</label> | |
| <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="your.name@eurohinca.com"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium mb-1">Password</label> | |
| <input type="password" id="password" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="••••••••"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="remember" class="rounded bg-blue-900 border-blue-700 text-blue-500 focus:ring-blue-500"> | |
| <label for="remember" class="ml-2 text-sm">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-300 hover:text-blue-200">Forgot password?</a> | |
| </div> | |
| <a href="dashboard.html" class="block w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 px-4 rounded-lg transition shadow-md text-center"> | |
| Continue with Microsoft 365 | |
| <i data-feather="arrow-right" class="inline ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-blue-200"> | |
| By continuing, you agree to our <a href="#" class="text-white hover:underline">Terms of Service</a>. | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Handle mobile view better | |
| document.addEventListener('DOMContentLoaded', () => { | |
| if (window.innerWidth < 768) { | |
| const loginCard = document.querySelector('.login-card'); | |
| loginCard.classList.add('mx-2', 'mt-16', 'mb-8'); | |
| } | |
| // Auto-redirect for demo purposes (remove in production) | |
| }); | |
| </script> | |
| </body> | |
| </html> | |