110 lines
6.5 KiB
HTML
110 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Zaloguj się - Gift Planner</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
|
|
|
|
<div class="max-w-4xl w-full bg-white rounded-[2.5rem] shadow-2xl shadow-indigo-100 overflow-hidden flex flex-col md:flex-row min-h-[600px]">
|
|
<!-- Left Side: Branding/Visual -->
|
|
<div class="md:w-1/2 gradient-bg p-12 text-white flex flex-col justify-between relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-12">
|
|
<div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center">
|
|
<i data-lucide="gift" class="text-white"></i>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight">Gift Planner</span>
|
|
</div>
|
|
<h2 class="text-4xl font-black mb-6 leading-tight">Witaj z powrotem!</h2>
|
|
<p class="text-indigo-100 text-lg leading-relaxed opacity-90">Zaloguj się, aby kontynuować planowanie idealnych prezentów dla Twoich bliskich.</p>
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="bg-white/10 backdrop-blur-lg border border-white/20 p-6 rounded-3xl">
|
|
<p class="text-sm italic mb-4">"Dzięki Gift Planner przestałam stresować się świętami. AI pomogło mi wybrać prezent dla męża w 30 sekund!"</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-indigo-300">
|
|
<img src="https://ui-avatars.com/api/?name=Anna+K&background=6366f1&color=fff" class="rounded-full">
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold">Anna Kowalska</p>
|
|
<p class="text-[10px] text-indigo-200">Użytkowniczka od 2 lat</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Decoration -->
|
|
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
|
|
<div class="absolute -top-20 -right-20 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Right Side: Form -->
|
|
<div class="md:w-1/2 p-8 md:p-16 flex flex-col justify-center bg-white">
|
|
<div class="mb-10 text-center md:text-left">
|
|
<h3 class="text-2xl font-black text-gray-900 mb-2">Zaloguj się</h3>
|
|
<p class="text-gray-500 text-sm">Nie masz jeszcze konta? <a href="register.html" class="text-indigo-600 font-bold hover:underline">Zarejestruj się za darmo</a></p>
|
|
</div>
|
|
|
|
<form action="dashboard.html" class="space-y-6">
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">Adres E-mail</label>
|
|
<div class="relative">
|
|
<i data-lucide="mail" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="email" placeholder="example@email.com" class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-sm" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2 ml-1">
|
|
<label class="block text-xs font-bold text-gray-400 uppercase tracking-widest">Hasło</label>
|
|
<a href="#" class="text-[10px] font-bold text-indigo-500 hover:underline">Zapomniałeś hasła?</a>
|
|
</div>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="password" placeholder="••••••••" class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-sm" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 ml-1">
|
|
<input type="checkbox" id="remember" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
|
<label for="remember" class="text-xs text-gray-500 font-medium">Zapamiętaj mnie na tym urządzeniu</label>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 hover:opacity-90 transition-all flex items-center justify-center gap-2 group">
|
|
Zaloguj się <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-8">
|
|
<div class="relative flex items-center justify-center py-4">
|
|
<div class="flex-grow border-t border-gray-100"></div>
|
|
<span class="flex-shrink mx-4 text-xs font-bold text-gray-300 uppercase letter tracking-widest">Lub kontynuuj przez</span>
|
|
<div class="flex-grow border-t border-gray-100"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-6">
|
|
<button class="flex items-center justify-center gap-3 py-3 border border-gray-100 rounded-xl hover:bg-gray-50 transition-colors">
|
|
<img src="https://www.svgrepo.com/show/475656/google-color.svg" class="w-5 h-5">
|
|
<span class="text-xs font-bold text-gray-600">Google</span>
|
|
</button>
|
|
<button class="flex items-center justify-center gap-3 py-3 border border-gray-100 rounded-xl hover:bg-gray-50 transition-colors">
|
|
<img src="https://www.svgrepo.com/show/475633/apple-black.svg" class="w-5 h-5">
|
|
<span class="text-xs font-bold text-gray-600">Apple</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|