115 lines
7.2 KiB
HTML
115 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Utwórz konto - 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-reverse min-h-[650px]">
|
|
<!-- Right Side (Visual) -->
|
|
<div class="md:w-1/2 bg-gradient-to-br from-purple-600 to-indigo-700 p-12 text-white flex flex-col justify-between relative overflow-hidden">
|
|
<div class="relative z-10 text-right md:text-left">
|
|
<div class="flex items-center gap-3 mb-12 md:justify-start justify-end text-right">
|
|
<span class="text-xl font-bold tracking-tight">Gift Planner</span>
|
|
<div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center">
|
|
<i data-lucide="sparkles" class="text-white"></i>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-4xl font-black mb-6 leading-tight">Zacznij planować z AI</h2>
|
|
<p class="text-indigo-100 text-lg leading-relaxed opacity-90">Dołącz do tysięcy użytkowników, którzy odnaleźli radość w dawaniu idealnie trafionych prezentów.</p>
|
|
</div>
|
|
|
|
<div class="relative z-10 hidden md:block">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
|
|
<div class="w-10 h-10 bg-green-400/20 rounded-full flex items-center justify-center text-green-300">
|
|
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
</div>
|
|
<p class="text-sm font-medium">Inteligentne sugestie prezentów</p>
|
|
</div>
|
|
<div class="flex items-center gap-4 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
|
|
<div class="w-10 h-10 bg-blue-400/20 rounded-full flex items-center justify-center text-blue-300">
|
|
<i data-lucide="bell" class="w-5 h-5"></i>
|
|
</div>
|
|
<p class="text-sm font-medium">Alerty o spadkach cen Ceneo</p>
|
|
</div>
|
|
<div class="flex items-center gap-4 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
|
|
<div class="w-10 h-10 bg-purple-400/20 rounded-full flex items-center justify-center text-purple-300">
|
|
<i data-lucide="pie-chart" class="w-5 h-5"></i>
|
|
</div>
|
|
<p class="text-sm font-medium">Automatyczna kontrola budżetu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Decoration -->
|
|
<div class="absolute -top-20 -left-20 w-80 h-80 bg-indigo-500/30 rounded-full blur-3xl"></div>
|
|
<div class="absolute -bottom-20 -right-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Left Side (Form) -->
|
|
<div class="md:w-1/2 p-8 md:p-16 flex flex-col justify-center bg-white">
|
|
<div class="mb-8 text-center md:text-left">
|
|
<h3 class="text-2xl font-black text-gray-900 mb-2">Stwórz darmowe konto</h3>
|
|
<p class="text-gray-500 text-sm">Masz już konto? <a href="login.html" class="text-indigo-600 font-bold hover:underline">Zaloguj się</a></p>
|
|
</div>
|
|
|
|
<form action="dashboard.html" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imię</label>
|
|
<input type="text" placeholder="Jan" class="w-full px-4 py-3 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>
|
|
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwisko</label>
|
|
<input type="text" placeholder="Kowalski" class="w-full px-4 py-3 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>
|
|
<label class="block text-[10px] font-black 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-4 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="email" placeholder="twoj@email.com" class="w-full pl-12 pr-4 py-3 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>
|
|
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Hasło</label>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="w-5 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="password" placeholder="Min. 8 znaków" class="w-full pl-12 pr-4 py-3 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="py-2">
|
|
<div class="flex items-start gap-3 ml-1">
|
|
<input type="checkbox" id="terms" class="mt-1 w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" required>
|
|
<label for="terms" class="text-[11px] text-gray-500 leading-tight">
|
|
Akceptuję <a href="#" class="text-indigo-600 underline font-bold">Regulamin</a> oraz <a href="#" class="text-indigo-600 underline font-bold">Politykę Prywatności</a> serwisu Gift Planner.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-3xl font-bold shadow-xl shadow-indigo-100 hover:opacity-90 transition-all flex items-center justify-center gap-2 group mt-4">
|
|
Załóż konto <i data-lucide="sparkles" class="w-5 h-5 group-hover:rotate-12 transition-transform"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<p class="text-center text-[10px] text-gray-400 mt-6 px-8">
|
|
Rejestrując się, zgadzasz się na otrzymywanie powiadomień o okazjach i trendach prezentowych. Możesz zrezygnować w dowolnym momencie.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|