Spaces:
Running
Running
File size: 3,978 Bytes
6e93efd 79b52d6 6e93efd 6cd921d 10a65b0 6cd921d 10a65b0 6e93efd 10a65b0 6e93efd 2eb6ae2 6e93efd 2eb6ae2 b7a427e 6e93efd 6cd921d b7a427e 2eb6ae2 b7a427e 6e93efd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html>
<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>
|