gitadmin/ai-gift-planner-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add first mockup

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-12-26 23:13:35 +01:00
parent 0be01758e3
commit 0357cf2eb7
19 changed files with 3599 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/avatars.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 KiB

BIN
assets/logo_hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 645 KiB

251
budget.html Normal file
View File

@@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analiza Budżetu - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<header class="mb-10">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Analiza Wydatków</h2>
<p class="text-gray-500 font-medium">Sprawdź ile wydajesz na prezenty i jak optymalizować swój budżet.</p>
</header>
<!-- Top Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
<div class="bg-white p-6 rounded-[2rem] border border-gray-50 shadow-sm">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Całkowity Budżet 2025</p>
<h3 class="text-2xl font-black text-gray-900 leading-none">12 400 PLN</h3>
<div class="mt-4 flex items-center gap-2">
<span class="text-[10px] bg-green-50 text-green-600 px-2 py-0.5 rounded-full font-bold">+5% vs 2024</span>
</div>
</div>
<div class="bg-indigo-600 p-6 rounded-[2rem] text-white shadow-xl shadow-indigo-100">
<p class="text-[10px] font-black text-indigo-200 uppercase tracking-widest mb-1">Wykorzystano do dziś</p>
<h3 class="text-2xl font-black leading-none">8 250 PLN</h3>
<div class="w-full bg-indigo-500/30 h-1.5 rounded-full mt-4">
<div class="h-full bg-white" style="width: 66%"></div>
</div>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-gray-50 shadow-sm">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Średnia na prezent</p>
<h3 class="text-2xl font-black text-gray-900 leading-none">320 PLN</h3>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-gray-50 shadow-sm">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Zaoszczędzone z AI</p>
<h3 class="text-2xl font-black text-indigo-600 leading-none">1 150 PLN</h3>
<div class="mt-4 flex items-center gap-1 text-[10px] text-gray-400 font-medium">
<i data-lucide="sparkles" class="w-3 h-3 text-indigo-500"></i> Dzięki alertom cenowym
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
<!-- Main Chart -->
<div class="lg:col-span-2 bg-white rounded-[2.5rem] p-8 border border-gray-50 shadow-sm">
<div class="flex items-center justify-between mb-8">
<div>
<h4 class="text-xl font-black text-gray-900">Wydatki miesięczne</h4>
<p class="text-xs text-gray-400 font-bold uppercase tracking-widest mt-1">Porównanie z ubiegłym rokiem</p>
</div>
<div class="flex gap-2">
<span class="flex items-center gap-2 text-[10px] font-black text-gray-400"><span class="w-2 h-2 rounded-full bg-indigo-600"></span> 2025</span>
<span class="flex items-center gap-2 text-[10px] font-black text-gray-400"><span class="w-2 h-2 rounded-full bg-gray-200"></span> 2024</span>
</div>
</div>
<div class="h-64">
<canvas id="budgetChart"></canvas>
</div>
</div>
<!-- Breakdown by Occasion -->
<div class="bg-white rounded-[2.5rem] p-8 border border-gray-50 shadow-sm">
<h4 class="text-xl font-black text-gray-900 mb-6">Podział wg okazji</h4>
<div class="space-y-6">
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 shrink-0"><i data-lucide="gift"></i></div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-bold text-gray-700">Święta</span>
<span class="text-xs font-black text-gray-900">5 000 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1 rounded-full"><div class="h-full bg-indigo-600" style="width: 60%"></div></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center text-purple-600 shrink-0"><i data-lucide="cake"></i></div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-bold text-gray-700">Urodziny</span>
<span class="text-xs font-black text-gray-900">3 200 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1 rounded-full"><div class="h-full bg-purple-600" style="width: 40%"></div></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-pink-50 rounded-xl flex items-center justify-center text-pink-600 shrink-0"><i data-lucide="heart"></i></div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-bold text-gray-700">Rocznice</span>
<span class="text-xs font-black text-gray-900">1 800 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1 rounded-full"><div class="h-full bg-pink-600" style="width: 25%"></div></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-gray-400 shrink-0"><i data-lucide="more-horizontal"></i></div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-bold text-gray-700">Inne</span>
<span class="text-xs font-black text-gray-900">2 400 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1 rounded-full"><div class="h-full bg-gray-400" style="width: 35%"></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Detailed History -->
<div class="bg-white rounded-[2.5rem] p-8 border border-gray-50 shadow-sm overflow-hidden">
<div class="flex items-center justify-between mb-8">
<h4 class="text-xl font-black text-gray-900">Historia Ostatnich Zakupów</h4>
<button class="text-xs font-bold text-indigo-600 hover:underline">Eksportuj do PDF</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="text-[10px] font-black text-gray-300 uppercase tracking-widest border-b border-gray-50">
<th class="pb-4">Data</th>
<th class="pb-4">Dla kogo</th>
<th class="pb-4">Przedmiot</th>
<th class="pb-4">Okazja</th>
<th class="pb-4 text-right">Kwota</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
<tr>
<td class="py-4 text-xs font-bold text-gray-500">12.12.2025</td>
<td class="py-4 font-bold text-gray-900">Mama</td>
<td class="py-4 text-xs text-gray-500">Ekspres do kawy Sage</td>
<td class="py-4"><span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Święta</span></td>
<td class="py-4 text-right font-black text-gray-900">2 499 PLN</td>
</tr>
<tr>
<td class="py-4 text-xs font-bold text-gray-500">10.12.2025</td>
<td class="py-4 font-bold text-gray-900">Tata</td>
<td class="py-4 text-xs text-gray-500">Zestaw narzędzi</td>
<td class="py-4"><span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Święta</span></td>
<td class="py-4 text-right font-black text-gray-900">850 PLN</td>
</tr>
<tr>
<td class="py-4 text-xs font-bold text-gray-500">05.12.2025</td>
<td class="py-4 font-bold text-gray-900">Maja</td>
<td class="py-4 text-xs text-gray-500">Słuchawki bezprzewodowe</td>
<td class="py-4"><span class="bg-purple-50 text-purple-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Urodziny</span></td>
<td class="py-4 text-right font-black text-gray-900">1 200 PLN</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<!-- Mobile Nav -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="budget.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="wallet" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Budżet</span>
</a>
</nav>
<script>
lucide.createIcons();
// Chart
const ctx = document.getElementById('budgetChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: '2025',
data: [1200, 1900, 1500, 800, 2200, 1100, 900, 400, 1600, 2500, 4800, 8200],
backgroundColor: '#6366f1',
borderRadius: 8,
barThickness: 12
},
{
label: '2024',
data: [1000, 1700, 1300, 700, 1800, 1000, 800, 300, 1400, 2200, 4000, 7500],
backgroundColor: '#e2e8f0',
borderRadius: 8,
barThickness: 12
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
},
y: {
grid: { color: '#f8fafc' },
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
}
}
}
});
</script>
</body>
</html>

373
dashboard.html Normal file
View File

@@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gift Planner - Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
<meta name="description" content="Planuj prezenty, śledź budżet i korzystaj z sugestii AI. Najlepsza aplikacja do zarządzania okazjami.">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
Gift Planner
</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="settings"></i> Ustawienia
</a>
<div class="flex items-center gap-3 p-4 mt-2">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-indigo-600 font-bold">
NK
</div>
<div class="flex-1 overflow-hidden">
<p class="text-sm font-semibold truncate">Norbert K.</p>
<p class="text-xs text-gray-500 truncate">Premium Plan</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<!-- Header -->
<header class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
<div>
<h2 class="text-2xl font-bold text-gray-900">Witaj, Norbert! 👋</h2>
<p class="text-gray-500">Masz 3 zbliżające się okazje w tym miesiącu.</p>
</div>
<div class="flex gap-3">
<button onclick="openModal('modal-add-person')" class="bg-white border border-gray-200 px-4 py-2 rounded-xl text-sm font-medium hover:bg-gray-50 transition-colors flex items-center gap-2">
<i data-lucide="plus-circle" class="w-4 h-4"></i> Dodaj osobę
</button>
<button onclick="openModal('modal-new-occasion')" class="gradient-bg text-white px-6 py-2 rounded-xl text-sm font-semibold shadow-lg shadow-indigo-200 hover:opacity-90 transition-all flex items-center gap-2">
<i data-lucide="sparkles" class="w-4 h-4"></i> Nowa okazja
</button>
</div>
</header>
<!-- Stats Overview -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<div class="glass-card p-6 rounded-2xl shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
<i data-lucide="shopping-bag"></i>
</div>
<span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-full">+12% vs grudzień 2024</span>
</div>
<p class="text-gray-500 text-sm font-medium">Prezenty do kupienia</p>
<h3 class="text-3xl font-bold mt-1">14 / 28</h3>
<div class="w-full bg-gray-100 h-2 rounded-full mt-4 overflow-hidden">
<div class="h-full progress-bar-gradient" style="width: 50%"></div>
</div>
</div>
<div class="glass-card p-6 rounded-2xl shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600">
<i data-lucide="credit-card"></i>
</div>
<span class="text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-full">Pozostało: 1 200 PLN</span>
</div>
<p class="text-gray-500 text-sm font-medium">Wydany budżet</p>
<h3 class="text-3xl font-bold mt-1">3 800 PLN</h3>
<div class="w-full bg-gray-100 h-2 rounded-full mt-4 overflow-hidden">
<div class="h-full progress-bar-gradient" style="width: 76%"></div>
</div>
</div>
<div class="glass-card p-6 rounded-2xl shadow-sm border-dashed border-2 border-indigo-200 bg-indigo-50/10 flex flex-col items-center justify-center text-center cursor-pointer hover:bg-indigo-50/20">
<div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm mb-3">
<i data-lucide="lightbulb" class="animate-float"></i>
</div>
<p class="text-indigo-600 font-semibold mb-1">Potrzebujesz inspiracji?</p>
<p class="text-gray-500 text-xs px-4">AI pomoże Ci dobrać idealne prezenty na każdą okazję.</p>
</div>
</section>
<!-- Active Occasions -->
<section class="mb-10">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-gray-900">Aktywne okazje</h3>
<a href="occasions.html" class="text-indigo-600 text-sm font-semibold hover:underline">Zobacz wszystkie</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Occasion Card 1 -->
<div class="bg-white rounded-3xl p-1 shadow-sm border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer group">
<div class="flex flex-col h-full bg-white rounded-[1.4rem] overflow-hidden">
<div class="h-40 bg-gray-100 relative overflow-hidden">
<img src="assets/logo_hero.png" alt="Christmas" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-xs font-bold text-indigo-700">
Za 12 dni
</div>
<div class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-xl">
<i data-lucide="external-link" class="w-4 h-4"></i>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<h4 class="text-lg font-bold">Boże Narodzenie 2025</h4>
<span class="text-sm font-semibold text-gray-500">Budżet: 5 000 PLN</span>
</div>
<p class="text-gray-500 text-sm mb-4 line-clamp-1">Tradycyjne spotkanie rodzinne u mamy, prezenty dla 12 osób.</p>
<div class="flex items-center gap-3 mb-4">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Mama&background=random" alt="User">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Tata&background=random" alt="User">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Ania&background=random" alt="User">
<div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-[10px] font-bold text-gray-400">+9</div>
</div>
<span class="text-xs text-gray-400 font-medium">12 osób na liście</span>
</div>
<div class="flex items-center justify-between text-xs font-bold mb-2">
<span class="text-indigo-600">80% Postępu</span>
<span class="text-gray-400">4 000 / 5 000 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
<div class="h-full progress-bar-gradient" style="width: 80%"></div>
</div>
</div>
</div>
</div>
<!-- Occasion Card 2 -->
<div class="bg-white rounded-3xl p-1 shadow-sm border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer group">
<div class="flex flex-col h-full bg-white rounded-[1.4rem] overflow-hidden">
<div class="h-40 bg-gray-100 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1464349172904-124bb97af094?auto=format&fit=crop&q=80&w=800" alt="Birthday" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-xs font-bold text-purple-700">
Za 4 dni
</div>
<div class="absolute bottom-4 right-4 bg-purple-600 text-white p-2 rounded-xl">
<i data-lucide="external-link" class="w-4 h-4"></i>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<h4 class="text-lg font-bold">Urodziny Mai 🎂</h4>
<span class="text-sm font-semibold text-gray-500">Budżet: 300 PLN</span>
</div>
<p class="text-gray-500 text-sm mb-4 line-clamp-1">30-tka przyjaciółki z pracy. Składka na wymarzony zegarek.</p>
<div class="flex items-center gap-3 mb-4">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Maja&background=random" alt="User">
</div>
<span class="text-xs text-gray-400 font-medium">1 osoba na liście</span>
</div>
<div class="flex items-center justify-between text-xs font-bold mb-2">
<span class="text-purple-600">0% Postępu</span>
<span class="text-gray-400">0 / 300 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
<div class="h-full bg-gray-200" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Recently Added Gifts -->
<section class="mb-10">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-gray-900">Ostatnio dodane prezenty</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Gift 1 -->
<div onclick="window.location.href='gift.html'" class="bg-white p-4 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer group">
<div class="w-full h-32 bg-gray-50 rounded-2xl overflow-hidden mb-3">
<img src="https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&q=80&w=300" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
</div>
<h4 class="text-sm font-bold text-gray-900 truncate">Sage Barista Express</h4>
<div class="flex items-center justify-between mt-2">
<span class="text-xs font-black text-indigo-600">2 499 PLN</span>
<span class="bg-green-50 text-green-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Kupiony</span>
</div>
</div>
<!-- Gift 2 -->
<div onclick="window.location.href='gift.html'" class="bg-white p-4 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer group">
<div class="w-full h-32 bg-gray-50 rounded-2xl overflow-hidden mb-3">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=300" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
</div>
<h4 class="text-sm font-bold text-gray-900 truncate">Słuchawki Sony WH-1000XM5</h4>
<div class="flex items-center justify-between mt-2">
<span class="text-xs font-black text-indigo-600">1 399 PLN</span>
<span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Wybrany</span>
</div>
</div>
<!-- Gift 3 -->
<div onclick="window.location.href='gift.html'" class="bg-white p-4 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer group">
<div class="w-full h-32 bg-gray-50 rounded-2xl overflow-hidden mb-3">
<img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=300" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
</div>
<h4 class="text-sm font-bold text-gray-900 truncate">Książka o Jodze</h4>
<div class="flex items-center justify-between mt-2">
<span class="text-xs font-black text-indigo-600">59 PLN</span>
<span class="bg-gray-50 text-gray-400 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Idea</span>
</div>
</div>
<!-- Gift 4 -->
<div onclick="window.location.href='gift.html'" class="bg-white p-4 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer group">
<div class="w-full h-32 bg-gray-50 rounded-2xl overflow-hidden mb-3">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?auto=format&fit=crop&q=80&w=300" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
</div>
<h4 class="text-sm font-bold text-gray-900 truncate">Smartwatch Series 9</h4>
<div class="flex items-center justify-between mt-2">
<span class="text-xs font-black text-indigo-600">1 800 PLN</span>
<span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Wybrany</span>
</div>
</div>
</div>
</section>
<!-- Quick AI Suggestions Banner -->
<section class="mb-10">
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-3xl p-8 text-white relative overflow-hidden shadow-2xl shadow-indigo-200">
<div class="relative z-10 max-w-md">
<span class="inline-block bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-bold mb-4 uppercase tracking-wider">Nowość: AI Recommendation Engine</span>
<h3 class="text-3xl font-bold mb-3">Nie wyrywaj sobie włosów z głowy. Zapytaj AI!</h3>
<p class="text-indigo-100 mb-6 text-sm leading-relaxed">Nasz algorytm przeanalizuje zainteresowania Twoich bliskich i dobierze prezenty, które wywołają prawdziwy uśmiech. Gwarantujemy efekt "WOW".</p>
<button class="bg-white text-indigo-700 px-8 py-3 rounded-2xl font-bold hover:bg-indigo-50 transition-colors flex items-center gap-3 shadow-xl shadow-indigo-900/20">
Sprawdź sugestie <i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</div>
<!-- Decoration element -->
<div class="absolute -right-20 -bottom-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute right-10 top-1/2 -translate-y-1/2 hidden lg:block opacity-20">
<i data-lucide="sparkles" class="w-64 h-64 text-white"></i>
</div>
</div>
</section>
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="updates.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="bell" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Status</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
</nav>
<!-- Modal: Nowa Okazja -->
<div id="modal-new-occasion" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Nowa Okazja</h3>
<button onclick="closeModal('modal-new-occasion')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa Okazji</label>
<input type="text" placeholder="np. Urodziny Kamila" class="form-input" required>
</div>
<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">Data</label>
<input type="date" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Budżet (PLN)</label>
<input type="number" placeholder="0.00" class="form-input">
</div>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Opis (opcjonalnie)</label>
<textarea placeholder="Krótki opis wydarzenia..." class="form-input h-24 resize-none"></textarea>
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Stwórz okazję
</button>
</form>
</div>
</div>
<!-- Modal: Dodaj Osobę -->
<div id="modal-add-person" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Dodaj Osobę</h3>
<button onclick="closeModal('modal-add-person')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imię / Nick</label>
<input type="text" placeholder="np. Kasia" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Relacja</label>
<select class="form-input">
<option>Rodzina</option>
<option>Przyjaciel / Przyjaciółka</option>
<option>Praca</option>
<option>Inna</option>
</select>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Zainteresowania (oddziel przecinkiem)</label>
<input type="text" placeholder="kawa, joga, technologia" class="form-input">
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Dodaj osobę do listy
</button>
</form>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

289
gift.html Normal file
View File

@@ -0,0 +1,289 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Szczegóły Prezentu - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<button onclick="window.history.back()" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-6 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót
</button>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column: Planning Info -->
<div class="lg:col-span-2 space-y-8">
<!-- Planning Record Header -->
<section class="bg-indigo-900 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden text-white">
<div class="relative z-10">
<div class="flex items-center gap-2 mb-4">
<span class="bg-indigo-500 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest">Planowanie Prezentu #1024</span>
<span class="bg-green-500 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest">Kupiony</span>
</div>
<h2 class="text-3xl font-black mb-6">Sage Barista Express dla: Mama</h2>
<div class="flex flex-wrap gap-8 items-center mb-8">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center border border-white/20"><i data-lucide="calendar"></i></div>
<div>
<p class="text-[10px] text-indigo-300 font-bold uppercase">Okazja</p>
<p class="text-sm font-black">Boże Narodzenie 2025</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center border border-white/20"><i data-lucide="wallet"></i></div>
<div>
<p class="text-[10px] text-indigo-300 font-bold uppercase">Budżet na osobę</p>
<p class="text-sm font-black">1 200 PLN</p>
</div>
</div>
</div>
<div class="flex gap-4">
<button onclick="window.location.href='product.html'" class="bg-white text-indigo-900 px-6 py-3 rounded-2xl font-bold flex items-center gap-2 hover:bg-indigo-50 transition-all">
<i data-lucide="box"></i> Zarządzaj produktem
</button>
<button class="bg-indigo-800 text-white px-6 py-3 rounded-2xl font-bold border border-indigo-700 hover:bg-indigo-700 transition-all">
Edytuj plan
</button>
</div>
</div>
<i data-lucide="gift" class="absolute -right-10 -bottom-10 w-64 h-64 text-white/5 opacity-10"></i>
</section>
<!-- Personal Notes -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<h3 class="text-xl font-black text-gray-900 mb-6 flex items-center gap-2">
<i data-lucide="sticky-note" class="text-indigo-600"></i> Twoje Notatki i Planowanie
</h3>
<div class="space-y-6">
<div class="p-6 bg-gray-50 rounded-3xl border border-gray-100">
<p class="text-sm text-gray-600 italic leading-relaxed">"Mówiła, że jej stary ekspres już ledwo zipie. Ten ma wbudowany młynek, na pewno jej się spodoba! Kolor Brushed Stainless Steel pasuje do kuchni."</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-white rounded-2xl border border-gray-100 flex items-center justify-between">
<span class="text-xs font-bold text-gray-500">Sklep zakupu</span>
<span class="text-xs font-black text-indigo-600">Media Expert</span>
</div>
<div class="p-4 bg-white rounded-2xl border border-gray-100 flex items-center justify-between">
<span class="text-xs font-bold text-gray-500">Numer zamówienia</span>
<span class="text-xs font-black text-gray-900">#ME-12345/ABC</span>
</div>
</div>
</div>
</section>
<!-- Price Info (Linked to Master) -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl font-black text-gray-900">Analiza ceny w Twoim planie</h3>
<a href="product.html" class="text-xs font-bold text-indigo-600 hover:underline">Pełna historia produktu</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-6 bg-indigo-50 rounded-3xl border border-indigo-100">
<p class="text-[10px] text-indigo-400 font-black uppercase mb-1">Cena Twojego zakupu</p>
<p class="text-2xl font-black text-indigo-900 leading-none">2 499 PLN</p>
</div>
<div class="p-6 bg-green-50 rounded-3xl border border-green-100">
<p class="text-[10px] text-green-400 font-black uppercase mb-1">Obecna cena rynkowa</p>
<p class="text-2xl font-black text-green-600 leading-none">2 489 PLN</p>
</div>
<div class="p-6 bg-gray-50 rounded-3xl border border-gray-100">
<p class="text-[10px] text-gray-400 font-black uppercase mb-1">Różnica</p>
<p class="text-2xl font-black text-gray-400 leading-none">+10 PLN</p>
</div>
</div>
</section>
</div>
<!-- Link Preview / Action Section -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<h3 class="text-xl font-black text-gray-900 mb-6 flex items-center gap-2">
<i data-lucide="external-link" class="text-indigo-600"></i> Informacje o produkcie
</h3>
<div class="border border-gray-100 rounded-3xl p-6 flex flex-col md:flex-row items-center gap-6 hover:bg-gray-50 transition-colors cursor-pointer mb-8">
<div class="w-20 h-20 bg-indigo-50 rounded-2xl flex items-center justify-center shrink-0">
<span class="text-xl font-black text-indigo-600 uppercase">C</span>
</div>
<div class="flex-1">
<h4 class="font-bold text-gray-900">Sage Barista Express BES875 - Ceneo.pl</h4>
<p class="text-xs text-gray-400 line-clamp-1">https://www.ceneo.pl/31894721#crid=123456&pid=12345</p>
</div>
<button class="bg-indigo-600 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-100 whitespace-nowrap">Otwórz sklep</button>
</div>
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-8 flex flex-col items-center text-center">
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm mb-4">
<i data-lucide="sparkles" class="w-6 h-6 animate-pulse"></i>
</div>
<h4 class="text-lg font-black text-indigo-900 mb-2">Potrzebujesz kartki lub życzeń?</h4>
<p class="text-sm text-indigo-600 mb-6 max-w-sm">AI może wygenerować personalizowane życzenia bożonarodzeniowe, które idealnie pasują do tego prezentu.</p>
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-xl">Generuj życzenia</button>
</div>
</section>
</div>
<!-- Right Column: Price Analysis -->
<div class="space-y-8">
<!-- Price Card -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Aktualna Cena (Ceneo)</p>
<div class="flex items-end gap-3 mb-6">
<h3 class="text-4xl font-black text-gray-900 leading-none">2 499 PLN</h3>
<span class="text-green-600 text-sm font-black flex items-center mb-1">
<i data-lucide="trending-down" class="w-4 h-4 mr-1"></i> -120 PLN
</span>
</div>
<div class="h-48 mb-6">
<canvas id="giftPriceChart"></canvas>
</div>
<div class="space-y-4">
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-between">
<p class="text-xs font-bold text-gray-500">Najwyższa (30 dni)</p>
<p class="text-sm font-black text-gray-900">2 650 PLN</p>
</div>
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-between">
<p class="text-xs font-bold text-gray-500">Najniższa (30 dni)</p>
<p class="text-sm font-black text-green-600">2 489 PLN</p>
</div>
</div>
<button class="w-full mt-6 flex items-center justify-center gap-2 py-4 bg-green-50 text-green-700 font-bold rounded-2xl border border-green-100 hover:bg-green-100 transition-colors">
<i data-lucide="bell" class="w-5 h-5"></i> Alert cenowy aktywny
</button>
</section>
<!-- Status History -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<h4 class="text-sm font-black text-gray-900 mb-6">Historia Statusu</h4>
<div class="space-y-6 relative before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-gray-100">
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-green-500 rounded-full border-4 border-white shadow-sm flex items-center justify-center">
<i data-lucide="check" class="w-3 h-3 text-white"></i>
</div>
<p class="text-xs font-black text-gray-900">Kupiony</p>
<p class="text-[10px] text-gray-400 font-medium">12 Grudnia 2025, 14:20</p>
</div>
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-indigo-500 rounded-full border-4 border-white shadow-sm flex items-center justify-center">
<i data-lucide="mouse-pointer-2" class="w-3 h-3 text-white"></i>
</div>
<p class="text-xs font-black text-gray-900">Wybrany</p>
<p class="text-[10px] text-gray-400 font-medium">08 Grudnia 2025, 09:15</p>
</div>
<div class="relative pl-10 opacity-40">
<div class="absolute left-0 top-1 w-6 h-6 bg-gray-200 rounded-full border-4 border-white shadow-sm"></div>
<p class="text-xs font-black text-gray-900">Idea dodana</p>
<p class="text-[10px] text-gray-400 font-medium">01 Grudnia 2025</p>
</div>
</div>
</section>
</div>
</div>
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="settings.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="settings" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Opcje</span>
</a>
</nav>
<script>
lucide.createIcons();
// Detailed Price History Chart
const ctx = document.getElementById('giftPriceChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1', '5', '10', '15', '20', '25', '30'],
datasets: [{
label: 'Cena (PLN)',
data: [2650, 2600, 2650, 2550, 2500, 2499, 2499],
borderColor: '#6366f1',
borderWidth: 4,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#fff',
pointBorderColor: '#6366f1',
pointBorderWidth: 2,
fill: true,
backgroundColor: (context) => {
const gradient = context.chart.ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.1)');
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
return gradient;
}
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
},
y: {
display: true,
grid: { color: '#f8fafc' },
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
}
}
}
});
</script>
</body>
</html>

279
index.html Normal file
View File

@@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gift Planner - Zaplanuj Perfekcyjne Prezenty z AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
.hero-gradient {
background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent),
radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.15), transparent);
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-white overflow-x-hidden">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-100">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-200">
<i data-lucide="gift"></i>
</div>
<span class="text-xl font-black bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</span>
</div>
<div class="hidden md:flex items-center gap-10">
<a href="#funkcje" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors">Funkcje</a>
<a href="#jak-to-dziala" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors">Jak to działa</a>
<a href="#ai" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors flex items-center gap-2">
Sugestie AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-2 py-0.5 rounded-full">NOWOŚĆ</span>
</a>
</div>
<div class="flex items-center gap-4">
<a href="login.html" class="text-sm font-bold text-gray-700 hover:text-indigo-600 transition-colors">Zaloguj się</a>
<a href="register.html" class="gradient-bg text-white px-6 py-3 rounded-2xl text-sm font-bold shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">Rozpocznij za darmo</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-40 pb-24 hero-gradient overflow-hidden">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
<div class="reveal">
<div class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 px-4 py-2 rounded-full text-xs font-black tracking-widest uppercase mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i> Twój osobisty asystent prezentowy
</div>
<h1 class="text-6xl md:text-7xl font-black text-gray-900 leading-[1.1] mb-8">
Koniec z nietrafionymi <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">prezentami.</span>
</h1>
<p class="text-xl text-gray-500 leading-relaxed mb-10 max-w-lg">
Gift Planner to inteligentna platforma, która pomaga Ci wybierać, śledzić i organizować prezenty na każdą okazję. Zbudowana z myślą o radości dawania.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="register.html" class="gradient-bg text-white px-10 py-5 rounded-[2rem] font-black text-lg shadow-2xl shadow-indigo-200 hover:scale-105 transition-all text-center flex items-center justify-center gap-3">
Zacznij planować <i data-lucide="arrow-right"></i>
</a>
<div class="flex items-center gap-4 px-6">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=A&background=random" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=B&background=random" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=C&background=random" alt="">
</div>
<div class="text-xs font-bold text-gray-400">
<span class="text-gray-900 font-black">2 000+</span> użytkowników już dba o bliskich
</div>
</div>
</div>
</div>
<div class="relative reveal" style="transition-delay: 200ms;">
<div class="bg-white rounded-[3rem] shadow-2xl p-4 md:rotate-3 hover:rotate-0 transition-transform duration-700 relative z-10 overflow-hidden border border-gray-100">
<img src="assets/logo_hero.png" class="w-full h-auto rounded-[2.5rem]">
<!-- Floating Stat UI -->
<div class="absolute bottom-10 left-10 right-10 glass-card p-6 rounded-3xl animate-float border border-white/50 shadow-2xl">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center text-green-600">
<i data-lucide="trending-down"></i>
</div>
<p class="text-xs font-black text-gray-900 leading-none">Cena spadła!<br><span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1 inline-block">Sage Barista Express</span></p>
</div>
<span class="text-lg font-black text-green-600">-200 PLN</span>
</div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
<div class="h-full bg-green-500" style="width: 100%"></div>
</div>
</div>
</div>
<!-- Background Blurs -->
<div class="absolute -top-10 -right-10 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl -z-10"></div>
<div class="absolute -bottom-10 -left-10 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl -z-10"></div>
</div>
</div>
</section>
<!-- Brands/Social Proof -->
<div class="py-12 border-y border-gray-50 bg-gray-50/30">
<div class="max-w-7xl mx-auto px-6 h-20 flex flex-wrap items-center justify-around gap-8 grayscale opacity-40">
<span class="text-2xl font-black tracking-tighter">APPLE</span>
<span class="text-2xl font-black tracking-tighter">CENEO</span>
<span class="text-2xl font-black tracking-tighter">OPENAI</span>
<span class="text-2xl font-black tracking-tighter">STRIPE</span>
<span class="text-2xl font-black tracking-tighter">ALLEGRO</span>
</div>
</div>
<!-- Features Section -->
<section id="funkcje" class="py-32">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center max-w-3xl mx-auto mb-24 reveal">
<h2 class="text-4xl md:text-5xl font-black text-gray-900 mb-6 leading-tight">Wszystko, czego potrzebujesz do planowania radości.</h2>
<p class="text-lg text-gray-500 font-medium leading-relaxed">System, który dba o Twój budżet, pilnuje terminów i podpowiada, czego naprawdę chcą Twoi bliscy.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 100ms;">
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-8 group-hover:scale-110 transition-transform">
<i data-lucide="brain" class="w-8 h-8"></i>
</div>
<h3 class="text-2xl font-black text-gray-900 mb-4">Sugestie AI</h3>
<p class="text-gray-500 leading-relaxed font-medium">Nasz algorytm analizuje wiek, zainteresowania i okazje, by podsunąć Ci listę idealnie dopasowanych propozycji.</p>
</div>
<!-- Feature 2 -->
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 200ms;">
<div class="w-16 h-16 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-8 group-hover:scale-110 transition-transform">
<i data-lucide="line-chart" class="w-8 h-8"></i>
</div>
<h3 class="text-2xl font-black text-gray-900 mb-4">Tracker Cen</h3>
<p class="text-gray-500 leading-relaxed font-medium">Dodaj link z Ceneo, a my będziemy śledzić cenę dla Ciebie. Powiadomimy Cię, gdy nadarzy się okazja na zakup.</p>
</div>
<!-- Feature 3 -->
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 300ms;">
<div class="w-16 h-16 bg-pink-50 rounded-2xl flex items-center justify-center text-pink-600 mb-8 group-hover:scale-110 transition-transform">
<i data-lucide="pie-chart" class="w-8 h-8"></i>
</div>
<h3 class="text-2xl font-black text-gray-900 mb-4">Budżet pod kontrolą</h3>
<p class="text-gray-500 leading-relaxed font-medium">Ustaw limity na osobę lub okazję. System automatycznie przeliczy wydatki i pokaże postęp w czasie rzeczywistym.</p>
</div>
</div>
</div>
</section>
<!-- AI Feature Detail -->
<section id="ai" class="py-24 bg-indigo-900 overflow-hidden relative">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-20 items-center reveal">
<div>
<span class="inline-block px-4 py-2 bg-indigo-800 text-indigo-100 rounded-full text-[10px] font-black tracking-widest uppercase mb-8">AI-Powered Planning</span>
<h2 class="text-5xl font-black text-white mb-8 leading-tight">Nie wiesz co kupić? Zapytaj naszą Sztuczną Inteligencję.</h2>
<div class="space-y-6">
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
<i data-lucide="check" class="w-4 h-4"></i>
</div>
<p class="text-indigo-200 text-lg">Analiza zainteresowań i relacji z osobą.</p>
</div>
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
<i data-lucide="check" class="w-4 h-4"></i>
</div>
<p class="text-indigo-200 text-lg">Weryfikacja dostępności i cen rynkowych.</p>
</div>
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
<i data-lucide="check" class="w-4 h-4"></i>
</div>
<p class="text-indigo-200 text-lg">Unikalne pomysły, których nie znajdziesz na Google.</p>
</div>
</div>
<button class="mt-12 bg-white text-indigo-900 px-10 py-5 rounded-3xl font-black text-lg hover:bg-indigo-50 transition-all shadow-2xl">Wypróbuj AI za darmo</button>
</div>
<div class="relative">
<div class="bg-indigo-800/50 backdrop-blur-2xl p-8 rounded-[3rem] border border-indigo-700/50 relative z-10 shadow-3xl">
<div class="flex items-center gap-4 mb-10">
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 font-black">AI</div>
<p class="text-white font-bold">Nasze propozycje dla: <span class="text-indigo-300">Tata</span></p>
</div>
<div class="space-y-4">
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between">
<p class="text-sm text-white font-bold">Zestaw do pielęgnacji brody Premium</p>
<span class="text-xs text-indigo-400 font-bold">95% Match</span>
</div>
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between opacity-60">
<p class="text-sm text-white font-bold">Kurs warzenia piwa rzemieślniczego</p>
<span class="text-xs text-indigo-400 font-bold">88% Match</span>
</div>
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between opacity-30">
<p class="text-sm text-white font-bold">Album: Historia motoryzacji XX wieku</p>
<span class="text-xs text-indigo-400 font-bold">75% Match</span>
</div>
</div>
</div>
<div class="absolute -right-20 -bottom-20 w-80 h-80 bg-indigo-400/20 rounded-full blur-3xl"></div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-32 bg-gray-50 flex flex-col items-center text-center px-6">
<div class="max-w-3xl reveal">
<h2 class="text-5xl font-black text-gray-900 mb-8 leading-tight">Zacznij planować prezenty z wyprzedzeniem i bez stresu.</h2>
<p class="text-xl text-gray-500 font-medium mb-12">Dołącz do Gift Planner dzisiaj. To nic nie kosztuje, a zmieni Twoje podejście do świąt i okazji.</p>
<a href="register.html" class="gradient-bg text-white px-12 py-6 rounded-[2.5rem] font-black text-xl shadow-2xl shadow-indigo-200 hover:scale-110 transition-all inline-block">
Załóż darmowe konto
</a>
<p class="text-gray-400 text-sm mt-8 font-bold">Brak ukrytych kosztów. Brak spamu.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-white py-20 border-t border-gray-100">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-12">
<div class="flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<span class="text-xl font-black bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</span>
</div>
<div class="flex gap-12">
<div class="flex flex-col gap-4">
<p class="text-xs font-black text-gray-400 uppercase tracking-widest">Platforma</p>
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Mobilne App</a>
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Wtyczka Chrome</a>
</div>
<div class="flex flex-col gap-4">
<p class="text-xs font-black text-gray-400 uppercase tracking-widest">Wsparcie</p>
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Centrum pomocy</a>
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">API</a>
</div>
</div>
<div class="flex gap-6">
<a href="#" class="w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all"><i data-lucide="instagram" class="w-5 h-5"></i></a>
<a href="#" class="w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all"><i data-lucide="twitter" class="w-5 h-5"></i></a>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-20 text-center border-t border-gray-50 pt-10">
<p class="text-xs font-bold text-gray-400">© 2025 Gift Planner. Wszelkie prawa zastrzeżone.</p>
</div>
</footer>
<script>
lucide.createIcons();
// Reveal animation on scroll
const reveal = () => {
const reveals = document.querySelectorAll('.reveal');
reveals.forEach(el => {
const windowHeight = window.innerHeight;
const elementTop = el.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
el.classList.add('active');
}
});
};
window.addEventListener('scroll', reveal);
window.addEventListener('load', reveal);
</script>
</body>
</html>

109
login.html Normal file
View File

@@ -0,0 +1,109 @@
<!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>

97
main.js Normal file
View File

@@ -0,0 +1,97 @@
// Global Application Interactions
document.addEventListener('DOMContentLoaded', () => {
// Initialize Lucide Icons
if (window.lucide) {
window.lucide.createIcons();
}
// Modal Handling
const modalOverlays = document.querySelectorAll('.modal-overlay');
// Function to open modal
window.openModal = (modalId) => {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
};
// Function to close modal
window.closeModal = (modalId) => {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.remove('active');
document.body.style.overflow = '';
}
};
// Close modal on overlay click
modalOverlays.forEach(overlay => {
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeModal(overlay.id);
}
});
});
// Close modal on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const activeModal = document.querySelector('.modal-overlay.active');
if (activeModal) {
closeModal(activeModal.id);
}
}
});
// Simple Form Submission Simulation
const forms = document.querySelectorAll('form');
forms.forEach(form => {
// Skip login/register forms which already have actions
if (form.action.includes('.html')) return;
form.addEventListener('submit', (e) => {
e.preventDefault();
const submitBtn = form.querySelector('button[type="submit"]');
const originalContent = submitBtn.innerHTML;
// Show loading state
submitBtn.disabled = true;
submitBtn.innerHTML = `
<div class="flex items-center gap-2">
<svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Przetwarzanie...
</div>
`;
setTimeout(() => {
// Success state
submitBtn.innerHTML = `
<div class="flex items-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i>
Gotowe!
</div>
`;
if (window.lucide) window.lucide.createIcons();
setTimeout(() => {
const activeModal = document.querySelector('.modal-overlay.active');
if (activeModal) closeModal(activeModal.id);
// Reset button
submitBtn.disabled = false;
submitBtn.innerHTML = originalContent;
form.reset();
if (window.lucide) window.lucide.createIcons();
// Custom notification could be added here
}, 1000);
}, 1000);
});
});
});

182
occasion-ai.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analiza AI - 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">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<button onclick="window.history.back()" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-6 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót
</button>
<!-- Header -->
<div class="mb-8">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Boże Narodzenie 2025</h2>
<div class="flex items-center gap-4 mt-2">
<span class="bg-indigo-600 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest flex items-center gap-2">
<i data-lucide="sparkles" class="w-3 h-3"></i> AI Analysis Active
</span>
</div>
</div>
<!-- Tabs -->
<div class="flex border-b border-gray-200 mb-8 space-x-8">
<a href="occasion.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-indigo-600 transition-colors">Lista Osób</a>
<a href="occasion-gifts.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-indigo-600 transition-colors">Wszystkie Prezenty</a>
<a href="occasion-ai.html" class="pb-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 flex items-center gap-2">
Analiza AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-1.5 py-0.5 rounded uppercase">Beta</span>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- AI Insights Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Global Recommendation -->
<div class="bg-gradient-to-br from-indigo-900 to-indigo-800 rounded-[2.5rem] p-8 text-white shadow-2xl relative overflow-hidden">
<div class="relative z-10">
<h3 class="text-2xl font-black mb-4">Podsumowanie Inteligenta</h3>
<p class="text-indigo-100 mb-8 max-w-lg leading-relaxed font-medium">W oparciu o Twój budżet i profile osób, zauważyłem, że masz jeszcze <span class="text-white font-black underline">4 osoby bez prezentów</span>. Największym wyzwaniem jest <span class="text-white font-black">Tata</span> (brak sprecyzowanych zainteresowań).</p>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
<p class="text-[10px] font-black text-indigo-300 uppercase tracking-widest mb-1">Przewidywane wydatki</p>
<p class="text-xl font-black">~4 800 PLN</p>
</div>
<div class="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
<p class="text-[10px] font-black text-indigo-300 uppercase tracking-widest mb-1">Pozostały budżet</p>
<p class="text-xl font-black text-green-400">1 200 PLN</p>
</div>
</div>
</div>
<i data-lucide="brain" class="absolute -right-10 -bottom-10 w-64 h-64 text-white/5 opacity-20"></i>
</div>
<!-- Specific Suggestions -->
<h4 class="text-xl font-black text-gray-900 mt-10 mb-6">Sugestie AI dla brakujących osób</h4>
<div class="space-y-4">
<!-- Person Suggestion 1 -->
<div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between group hover:shadow-md transition-all">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center shrink-0">
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-full h-full rounded-2xl">
</div>
<div>
<p class="text-sm font-black text-gray-900">Tata</p>
<p class="text-[10px] text-gray-400 font-bold uppercase">Relacja: Ojciec</p>
</div>
</div>
<div class="flex-1 px-8 hidden md:block">
<div class="flex gap-2">
<span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-3 py-1 rounded-full">Zestaw BBQ</span>
<span class="bg-gray-50 text-gray-400 text-[10px] font-bold px-3 py-1 rounded-full">+2 inne</span>
</div>
</div>
<button class="bg-indigo-600 text-white px-5 py-2 rounded-xl text-xs font-bold shadow-lg shadow-indigo-100 hover:scale-105 transition-all">Wygeneruj listę</button>
</div>
<!-- Person Suggestion 2 -->
<div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between group hover:shadow-md transition-all">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-2xl bg-purple-50 flex items-center justify-center shrink-0">
<img src="https://ui-avatars.com/api/?name=Antek&background=random" class="w-full h-full rounded-2xl">
</div>
<div>
<p class="text-sm font-black text-gray-900">Antek</p>
<p class="text-[10px] text-gray-400 font-bold uppercase">Relacja: Siostrzeniec</p>
</div>
</div>
<div class="flex-1 px-8 hidden md:block text-xs font-bold text-gray-400 italic">
Brak zainteresowań w profilu. Dodaj notatki dla lepszych sugestii.
</div>
<button class="bg-gray-100 text-gray-400 px-5 py-2 rounded-xl text-xs font-bold">Uzupełnij profil</button>
</div>
</div>
</div>
<!-- AI sidebar stats -->
<div class="space-y-6">
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm">
<h4 class="text-sm font-black mb-4 flex items-center gap-2">
<i data-lucide="zap" class="text-yellow-500 w-4 h-4"></i> Optymalizacja Budżetu
</h4>
<div class="p-4 bg-green-50 rounded-2xl border border-green-100 mb-4">
<p class="text-xs font-black text-green-700">Możesz zaoszczędzić 12%</p>
<p class="text-[10px] text-green-600 mt-1">Znaleźliśmy tańszy zamiennik dla "Smartwatch" o podobnej funkcjonalności.</p>
</div>
<div class="p-4 bg-indigo-50 rounded-2xl border border-indigo-100">
<p class="text-xs font-black text-indigo-700">Trend świąteczny</p>
<p class="text-[10px] text-indigo-600 mt-1">Ceny elektroniki wzrosną o ok. 5% w nadchodzącym tygodniu. Kup teraz!</p>
</div>
</div>
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm text-center">
<div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center text-indigo-600 mx-auto mb-4">
<i data-lucide="refresh-cw"></i>
</div>
<h4 class="text-sm font-black mb-2">Przeanalizuj ponownie</h4>
<p class="text-[10px] text-gray-400 mb-6 px-4">Odśwież sugestie na podstawie najnowszych zmian w budżecie i cen rynkowych.</p>
<button class="w-full py-3 bg-indigo-600 text-white font-bold rounded-2xl shadow-lg shadow-indigo-100 transition-all hover:opacity-90">Odśwież Analizę</button>
</div>
</div>
</div>
</main>
</div>
<!-- Mobile Nav -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="settings.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="settings" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Opcje</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>

136
occasion-gifts.html Normal file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wszystkie Prezenty - 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">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<button onclick="window.location.href='occasions.html'" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-6 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Wszystkie okazje
</button>
<!-- Header -->
<div class="mb-8">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Boże Narodzenie 2025</h2>
<div class="flex items-center gap-4 mt-2">
<span class="bg-indigo-100 text-indigo-700 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest">W planowaniu</span>
<p class="text-sm text-gray-400 font-bold">28 Zaplanowanych prezentów</p>
</div>
</div>
<!-- Tabs -->
<div class="flex border-b border-gray-200 mb-8 space-x-8">
<a href="occasion.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-indigo-600 transition-colors">Lista Osób</a>
<a href="occasion-gifts.html" class="pb-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600">Wszystkie Prezenty</a>
<a href="occasion-ai.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors flex items-center gap-2">
Analiza AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-1.5 py-0.5 rounded uppercase">Beta</span>
</a>
</div>
<!-- Filters -->
<div class="flex flex-wrap gap-4 mb-8">
<button class="bg-indigo-600 text-white px-6 py-2 rounded-xl text-xs font-bold">Wszystkie (28)</button>
<button class="bg-white border border-gray-100 text-gray-500 px-6 py-2 rounded-xl text-xs font-bold hover:bg-gray-50">Kupione (14)</button>
<button class="bg-white border border-gray-100 text-gray-500 px-6 py-2 rounded-xl text-xs font-bold hover:bg-gray-50">Zapakowane (10)</button>
<div class="flex-1"></div>
<div class="relative">
<i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Szukaj prezentu..." class="pl-12 pr-6 py-2 bg-white border border-gray-100 rounded-xl text-xs focus:ring-2 focus:ring-indigo-500 outline-none w-64">
</div>
</div>
<!-- Detailed Gift Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Gift Card 1 -->
<div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-50 group hover:shadow-xl transition-all">
<div class="flex items-center gap-4 mb-4">
<div class="w-16 h-16 bg-gray-50 rounded-2xl overflow-hidden shrink-0">
<img src="https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&q=80&w=200" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-sm font-black text-gray-900 line-clamp-1">Ekspres Sage Barista</h4>
<p class="text-[10px] font-bold text-indigo-600">Dla: Mama</p>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
<span class="text-xs font-black text-gray-900">2 499 PLN</span>
<span class="bg-green-50 text-green-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Kupiony</span>
</div>
</div>
<!-- Gift Card 2 -->
<div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-50 group hover:shadow-xl transition-all">
<div class="flex items-center gap-4 mb-4">
<div class="w-16 h-16 bg-gray-50 rounded-2xl overflow-hidden shrink-0">
<img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=200" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-sm font-black text-gray-900 line-clamp-1">Książka o Jodze</h4>
<p class="text-[10px] font-bold text-indigo-600">Dla: Mama</p>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
<span class="text-xs font-black text-gray-900">59 PLN</span>
<span class="bg-gray-50 text-gray-400 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Idea</span>
</div>
</div>
<!-- Gift Card 3 -->
<div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-50 group hover:shadow-xl transition-all">
<div class="flex items-center gap-4 mb-4">
<div class="w-16 h-16 bg-gray-50 rounded-2xl overflow-hidden shrink-0">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=200" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-sm font-black text-gray-900 line-clamp-1">Smartwatch Series 9</h4>
<p class="text-[10px] font-bold text-indigo-600">Dla: Ania</p>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
<span class="text-xs font-black text-gray-900">1 800 PLN</span>
<span class="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">Wybrany</span>
</div>
</div>
<!-- More items... -->
</div>
</main>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

271
occasion.html Normal file
View File

@@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Szczegóły Okazji - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar (Copy from index.html) -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
Gift Planner
</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<div class="flex items-center gap-3 p-4">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">NK</div>
<div class="flex-1 overflow-hidden">
<p class="text-sm font-semibold truncate">Norbert K.</p>
<p class="text-xs text-gray-500">Premium</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<!-- Navigation Back -->
<button onclick="window.location.href='dashboard.html'" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-6 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót do pulpitu
</button>
<!-- Header -->
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-8">
<div>
<div class="flex items-center gap-3 mb-2">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Boże Narodzenie 2025</h2>
<span class="bg-green-100 text-green-700 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-tighter">W planowaniu</span>
</div>
<p class="text-gray-500 max-w-xl">Rodzinne spotkanie u mamy. Pamiętaj o prezentach dla kuzynostwa, których dawno nie widzieliśmy!</p>
<div class="flex items-center gap-4 mt-4">
<div class="flex items-center gap-2 text-sm text-gray-600 font-semibold bg-white border border-gray-100 px-3 py-1.5 rounded-lg">
<i data-lucide="calendar" class="w-4 h-4 text-indigo-600"></i> 24 Grudnia 2025
</div>
<div class="flex items-center gap-2 text-sm text-gray-600 font-semibold bg-white border border-gray-100 px-3 py-1.5 rounded-lg">
<i data-lucide="users" class="w-4 h-4 text-purple-600"></i> 12 Osób
</div>
</div>
</div>
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 min-w-[300px]">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-bold text-gray-400">Budżet całkowity</span>
<span class="text-lg font-black text-gray-800">5 000 PLN</span>
</div>
<div class="w-full bg-gray-100 h-2 rounded-full mb-3 overflow-hidden">
<div class="h-full progress-bar-gradient" style="width: 80%"></div>
</div>
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-indigo-600">Wykorzystano 4 000 PLN</span>
<span class="text-xs font-bold text-gray-400">Pozostało 1 000 PLN</span>
</div>
</div>
</div>
<!-- Tabs -->
<div class="flex border-b border-gray-200 mb-8 space-x-8">
<a href="occasion.html" class="pb-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600">Lista Osób</a>
<a href="occasion-gifts.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors">Wszystkie Prezenty</a>
<a href="occasion-ai.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors flex items-center gap-2">
Analiza AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-1.5 py-0.5 rounded uppercase">Beta</span>
</a>
</div>
<!-- Dashboard Content (Persons List) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Person Card 1 -->
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
<div class="flex items-start justify-between mb-6">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-indigo-50 flex items-center justify-center">
<img src="https://ui-avatars.com/api/?name=Mama&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
</div>
<div>
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors cursor-pointer" onclick="window.location.href='person.html'">Mama</h4>
<p class="text-xs font-semibold text-gray-400">Relacja: Mama</p>
</div>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
</button>
</div>
<div class="space-y-3 mb-6">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
<i data-lucide="package" class="w-4 h-4 text-indigo-500"></i>
</div>
<span class="text-sm font-medium text-gray-700">Ekspres do kawy</span>
</div>
<span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded-lg">Kupiony</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl opacity-60">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
<i data-lucide="gift" class="w-4 h-4 text-purple-500"></i>
</div>
<span class="text-sm font-medium text-gray-700">Książka kucharska</span>
</div>
<span class="text-xs font-bold text-gray-400 bg-white px-2 py-1 rounded-lg border border-gray-100">Idea</span>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
<div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
<p class="font-bold text-indigo-600 text-lg">1 200 PLN</p>
</div>
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
<i data-lucide="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- Person Card 2 -->
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
<div class="flex items-start justify-between mb-6">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-purple-50 flex items-center justify-center">
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
</div>
<div>
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors">Tata</h4>
<p class="text-xs font-semibold text-gray-400">Relacja: Ojciec</p>
</div>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
</button>
</div>
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-6 flex flex-col items-center justify-center text-center space-y-3 mb-6">
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm">
<i data-lucide="sparkles" class="w-5 h-5 animate-pulse"></i>
</div>
<div>
<p class="text-sm font-bold text-indigo-700">Brak prezentów</p>
<p class="text-[10px] text-indigo-500 font-medium">Kliknij, aby AI wygenerowało propozycje</p>
</div>
<button class="bg-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-xl hover:bg-indigo-700 transition-colors">
Generuj pomysły
</button>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
<div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
<p class="font-bold text-indigo-600 text-lg">800 PLN</p>
</div>
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
<i data-lucide="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- Add Person Card -->
<div class="border-2 border-dashed border-gray-200 rounded-3xl p-6 flex flex-col items-center justify-center text-center hover:border-indigo-200 hover:bg-indigo-50/10 transition-all cursor-pointer group">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center text-gray-400 group-hover:text-indigo-600 shadow-sm border border-gray-100 mb-4 transition-colors">
<i data-lucide="person-standing" class="w-8 h-8"></i>
</div>
<h4 class="font-bold text-gray-400 group-hover:text-indigo-600 transition-colors">Dodaj kolejną osobę</h4>
<p class="text-xs text-gray-400 px-6 mt-2">Wybierz z listy kontaktów lub stwórz nową osobę.</p>
</div>
</div>
</main>
</div>
<!-- Modal: Dodaj Prezent -->
<div id="modal-add-gift" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Nowy Prezent</h3>
<button onclick="closeModal('modal-add-gift')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa Prezentu</label>
<input type="text" placeholder="np. Słuchawki Sony" class="form-input" required>
</div>
<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">Szacowana Cena (PLN)</label>
<input type="number" placeholder="0.00" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Status</label>
<select class="form-input">
<option>Idea</option>
<option>Wybrany</option>
<option>Kupiony</option>
<option>Zapakowany</option>
</select>
</div>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Link do produktu (np. Ceneo)</label>
<input type="url" placeholder="https://..." class="form-input">
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Notatki / Dlaczego ten?</label>
<textarea placeholder="Twoje przemyślenia..." class="form-input h-24 resize-none"></textarea>
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Dodaj prezent do listy
</button>
</form>
</div>
</div>
<!-- Mobile Navigation (Same as index) -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="settings.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="settings" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Opcje</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>

203
occasions.html Normal file
View File

@@ -0,0 +1,203 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wszystkie Okazje - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
<div>
<h2 class="text-3xl font-black text-gray-900 leading-tight">Twoje Okazje</h2>
<p class="text-gray-500">Zarządzaj wydarzeniami i planuj prezenty z wyprzedzeniem.</p>
</div>
<button onclick="openModal('modal-new-occasion')" class="gradient-bg text-white px-8 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-200 hover:opacity-90 transition-all flex items-center gap-2">
<i data-lucide="plus" class="w-5 h-5"></i> Zaplanuj nowe wydarzenie
</button>
</div>
<!-- Filters -->
<div class="flex flex-wrap items-center gap-4 mb-8">
<button class="px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-sm">Wszystkie (5)</button>
<button class="px-6 py-2 bg-white text-gray-500 rounded-xl text-sm font-bold border border-gray-100 hover:bg-gray-50 transition-colors">Aktywne (2)</button>
<button class="px-6 py-2 bg-white text-gray-500 rounded-xl text-sm font-bold border border-gray-100 hover:bg-gray-50 transition-colors">Zakończone (3)</button>
<div class="flex-1"></div>
<div class="relative">
<i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Szukaj okazji..." class="pl-12 pr-6 py-2 bg-white border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none w-64">
</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Occasion 1 (Active) -->
<div class="group bg-white rounded-3xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="h-48 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1543589077-47d81606c1bf?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-indigo-700">W planowaniu</div>
<div class="absolute bottom-4 left-6">
<p class="text-white text-xs font-bold opacity-80 mb-1">24 Grudnia 2025</p>
<h3 class="text-white text-xl font-black">Boże Narodzenie 2025</h3>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-semibold text-gray-400">Budżet: 5 000 PLN</span>
<span class="text-xs font-bold text-indigo-600">80% Gotowe</span>
</div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden mb-6">
<div class="h-full progress-bar-gradient" style="width: 80%"></div>
</div>
<button onclick="window.location.href='occasion.html'" class="w-full py-3 bg-gray-50 text-indigo-600 font-bold rounded-2xl border border-indigo-100 group-hover:bg-indigo-600 group-hover:text-white transition-all">
Szczegóły okazji
</button>
</div>
</div>
<!-- Occasion 2 (Active) -->
<div class="group bg-white rounded-3xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="h-48 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1464349172904-124bb97af094?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-purple-700">Oczekiwanie</div>
<div class="absolute bottom-4 left-6">
<p class="text-white text-xs font-bold opacity-80 mb-1">15 Stycznia 2026</p>
<h3 class="text-white text-xl font-black">Urodziny Mai 🎂</h3>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-semibold text-gray-400">Budżet: 300 PLN</span>
<span class="text-xs font-bold text-gray-400">0% Gotowe</span>
</div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden mb-6">
<div class="h-full bg-gray-200" style="width: 0%"></div>
</div>
<button class="w-full py-3 bg-gray-50 text-purple-600 font-bold rounded-2xl border border-purple-100 group-hover:bg-purple-600 group-hover:text-white transition-all">
Szczegóły okazji
</button>
</div>
</div>
<!-- Occasion 3 (Archived) -->
<div class="group bg-white rounded-3xl overflow-hidden border border-gray-100 shadow-sm opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300">
<div class="h-48 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1549416878-b9ca35c2d47b?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute top-4 right-4 bg-gray-200 text-gray-600 px-3 py-1 rounded-full text-[10px] font-black uppercase">Zakończone</div>
<div class="absolute bottom-4 left-6">
<p class="text-white text-xs font-bold opacity-80 mb-1">Grudzień 2024</p>
<h3 class="text-white text-xl font-black">Boże Narodzenie 2024</h3>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-semibold text-gray-400">Wydano: 4 200 PLN</span>
<span class="text-xs font-bold text-green-600">100% Sukces</span>
</div>
<div class="w-full bg-green-100 h-1.5 rounded-full overflow-hidden mb-6">
<div class="h-full bg-green-500" style="width: 100%"></div>
</div>
<button class="w-full py-3 bg-gray-50 text-gray-400 font-bold rounded-2xl border border-gray-100">
Zobacz archiwum
</button>
</div>
</div>
</div>
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="updates.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="bell" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Status</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
</nav>
<!-- Modal: Nowa Okazja -->
<div id="modal-new-occasion" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Nowa Okazja</h3>
<button onclick="closeModal('modal-new-occasion')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa Okazji</label>
<input type="text" placeholder="np. Urodziny Kamila" class="form-input" required>
</div>
<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">Data</label>
<input type="date" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Budżet (PLN)</label>
<input type="number" placeholder="0.00" class="form-input">
</div>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Opis (opcjonalnie)</label>
<textarea placeholder="Krótki opis wydarzenia..." class="form-input h-24 resize-none"></textarea>
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Stwórz okazję
</button>
</form>
</div>
</div>
<script>lucide.createIcons();</script>
</body>
</html>

386
person.html Normal file
View File

@@ -0,0 +1,386 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Szczegóły Osoby - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar (Copy from index.html) -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
Gift Planner
</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 lg:pb-8">
<div class="max-w-5xl mx-auto">
<button onclick="window.history.back()" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-8 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót do listy osób
</button>
<!-- Simplified Profile Header -->
<section class="flex flex-col md:flex-row items-center gap-8 mb-12">
<div class="relative">
<div class="w-32 h-32 rounded-[2.5rem] bg-indigo-50 border-4 border-white overflow-hidden shadow-2xl">
<img src="https://ui-avatars.com/api/?name=Mama&background=f0f9ff&color=6366f1&size=256" class="w-full h-full object-cover">
</div>
<button onclick="openModal('modal-edit-person')" class="absolute -bottom-2 -right-2 bg-white p-2 rounded-xl shadow-lg border border-gray-100 text-gray-400 hover:text-indigo-600 transition-all">
<i data-lucide="camera" class="w-4 h-4"></i>
</button>
</div>
<div class="flex-1 text-center md:text-left">
<div class="flex flex-col md:flex-row items-center gap-4 mb-3">
<h2 class="text-4xl font-black text-gray-900">Mama</h2>
<span class="px-4 py-1 bg-indigo-100 text-indigo-700 text-[10px] font-black uppercase tracking-widest rounded-full">Rodzina</span>
</div>
<p class="text-gray-500 font-medium mb-4">"Uwielbia gotować, zajmować się ogrodem i praktykować jogę."</p>
<div class="flex flex-wrap justify-center md:justify-start gap-2">
<span class="px-3 py-1 bg-white border border-gray-200 rounded-lg text-xs font-bold text-gray-400">#kuchnia</span>
<span class="px-3 py-1 bg-white border border-gray-200 rounded-lg text-xs font-bold text-gray-400">#ogród</span>
<span class="px-3 py-1 bg-white border border-gray-200 rounded-lg text-xs font-bold text-gray-400">#wellness</span>
</div>
</div>
<div class="flex gap-3">
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">
Baza Pomysłów
</button>
</div>
</section>
<!-- Personal Dates / Individual Occasions (Actionable) -->
<section class="mb-12">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-black text-gray-900 leading-tight">Mini-Okazje</h3>
<button class="text-xs font-bold text-indigo-600 hover:underline">+ Nowa data</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Birthday (Actionable) -->
<div class="bg-white p-6 rounded-[2.5rem] border border-gray-100 shadow-sm relative overflow-hidden group hover:border-indigo-300 transition-all flex flex-col justify-between h-48">
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-pink-50 rounded-2xl flex items-center justify-center text-pink-500">
<i data-lucide="cake" class="w-6 h-6"></i>
</div>
<span class="text-[10px] font-black text-pink-500 bg-pink-50 px-3 py-1 rounded-full uppercase">Za 76 dni</span>
</div>
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Urodziny</p>
<p class="text-lg font-black text-gray-900 leading-tight">12 Marca</p>
</div>
<button onclick="openModal('modal-add-gift')" class="relative z-10 w-full py-2 bg-gray-50 text-indigo-600 text-xs font-bold rounded-xl border border-indigo-100 hover:bg-indigo-600 hover:text-white transition-all">
Planuj prezent
</button>
<i data-lucide="cake" class="absolute -right-6 -bottom-6 w-32 h-32 text-pink-500 opacity-[0.03] group-hover:scale-110 transition-transform"></i>
</div>
<!-- Mother's Day (Actionable) -->
<div class="bg-white p-6 rounded-[2.5rem] border border-gray-100 shadow-sm relative overflow-hidden group hover:border-indigo-300 transition-all flex flex-col justify-between h-48">
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-red-50 rounded-2xl flex items-center justify-center text-red-500">
<i data-lucide="heart" class="w-6 h-6"></i>
</div>
<span class="text-[10px] font-black text-gray-400 bg-gray-50 px-3 py-1 rounded-full uppercase">Za 152 dni</span>
</div>
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Dzień Matki</p>
<p class="text-lg font-black text-gray-900 leading-tight">26 Maja</p>
</div>
<button onclick="openModal('modal-add-gift')" class="relative z-10 w-full py-2 bg-gray-50 text-indigo-600 text-xs font-bold rounded-xl border border-indigo-100 hover:bg-indigo-600 hover:text-white transition-all">
Planuj prezent
</button>
</div>
<!-- Name Day (Actionable) -->
<div class="bg-white p-6 rounded-[2.5rem] border border-gray-100 shadow-sm relative overflow-hidden group hover:border-indigo-300 transition-all flex flex-col justify-between h-48">
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-500">
<i data-lucide="star" class="w-6 h-6"></i>
</div>
<span class="text-[10px] font-black text-indigo-500 bg-indigo-50 px-3 py-1 rounded-full uppercase tracking-widest">Wkrótce</span>
</div>
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Imieniny</p>
<p class="text-lg font-black text-gray-900 leading-tight">24 Sierpnia</p>
</div>
<button onclick="openModal('modal-add-gift')" class="relative z-10 w-full py-2 bg-gray-50 text-indigo-600 text-xs font-bold rounded-xl border border-indigo-100 hover:bg-indigo-600 hover:text-white transition-all">
Planuj prezent
</button>
</div>
<!-- Add New Mini-Occasion -->
<div class="bg-gray-50 border-2 border-dashed border-gray-200 rounded-[2.5rem] flex flex-col items-center justify-center p-6 h-48 cursor-pointer hover:bg-white hover:border-indigo-300 hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center text-gray-300 group-hover:text-indigo-600 group-hover:scale-110 transition-all mb-4 shadow-sm">
<i data-lucide="plus"></i>
</div>
<p class="text-xs font-black text-gray-400 group-hover:text-indigo-600 uppercase tracking-widest transition-colors">Dodaj okazję</p>
</div>
</div>
</section>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<!-- Left: Gift Planning -->
<div class="lg:col-span-2 space-y-12">
<div>
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl font-black text-gray-900 flex items-center gap-3 leading-tight">
<i data-lucide="calendar-check" class="text-indigo-600"></i> Aktywne prezenty
</h3>
<div class="p-1 bg-white rounded-xl shadow-sm border border-gray-100 flex gap-1">
<button class="px-4 py-1.5 bg-indigo-600 text-white text-[10px] font-black rounded-lg uppercase shadow-lg shadow-indigo-100">Wszystkie</button>
<button class="px-4 py-1.5 text-gray-400 text-[10px] font-black rounded-lg uppercase hover:bg-gray-50">Planowane</button>
</div>
</div>
<!-- Occasion: Christmas 2025 (Global Event) -->
<div class="space-y-6 mb-10">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-indigo-600"></div>
<span class="text-xs font-black text-indigo-900 uppercase tracking-widest">Boże Narodzenie 2025</span>
<div class="flex-1 h-[1px] bg-indigo-100"></div>
</div>
<div class="grid gap-4">
<div onclick="window.location.href='gift.html'" class="bg-white p-5 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all cursor-pointer flex items-center gap-6 group">
<div class="w-20 h-20 rounded-2xl overflow-hidden shrink-0 shadow-inner">
<img src="https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&q=80&w=200" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="flex-1">
<h4 class="font-black text-gray-900 mb-1">Ekspres Sage Barista</h4>
<p class="text-[10px] font-bold text-gray-400 flex items-center gap-1.5 uppercase">
<i data-lucide="link" class="w-3 h-3"></i> Media Expert
</p>
</div>
<div class="text-right">
<p class="text-xl font-black text-gray-900 mb-1 leading-none">2 499 PLN</p>
<span class="text-[10px] font-black text-white bg-green-500 px-3 py-1 rounded-full uppercase tracking-tighter">Kupiony</span>
</div>
</div>
</div>
</div>
<!-- Occasion: Urodziny (Mini-Occasion Event) -->
<div class="space-y-6">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-pink-500"></div>
<span class="text-xs font-black text-pink-600 uppercase tracking-widest">Najbliższe Urodziny</span>
<div class="flex-1 h-[1px] bg-pink-100"></div>
</div>
<div class="bg-pink-50/30 p-8 rounded-[2rem] border border-dashed border-pink-200 flex flex-col items-center text-center">
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-pink-500 shadow-sm mb-4">
<i data-lucide="package-plus"></i>
</div>
<p class="text-sm font-bold text-pink-900 mb-1">Brak prezentu na Urodziny</p>
<p class="text-xs text-pink-600/70 mb-4 max-w-[200px]">Masz już datę, czas zaplanować coś wyjątkowego!</p>
<button onclick="openModal('modal-add-gift')" class="bg-pink-500 text-white px-6 py-2 rounded-xl text-xs font-bold shadow-lg shadow-pink-100 hover:bg-pink-600 transition-all">
Dodaj pierwszy pomysł
</button>
</div>
</div>
</div>
<!-- AI Recommendations Specifically for Her -->
<div class="bg-indigo-900 rounded-[2.5rem] p-8 text-white relative overflow-hidden">
<div class="relative z-10">
<h4 class="text-xl font-black mb-2 flex items-center gap-2">
<i data-lucide="sparkles" class="text-indigo-300"></i> Sugestie dla Mamy
</h4>
<p class="text-indigo-200 text-sm mb-6 max-w-sm">Na podstawie profilu "Wellness & Kuchnia" AI przygotowało 3 nowe propozycje.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10 hover:bg-white/20 transition-all cursor-pointer">
<p class="text-xs font-bold mb-1">Mata do akupresury</p>
<p class="text-[10px] text-indigo-300">Kategoria: Wellness</p>
</div>
<div class="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10 hover:bg-white/20 transition-all cursor-pointer">
<p class="text-xs font-bold mb-1">Zestaw herbat BIO</p>
<p class="text-[10px] text-indigo-300">Kategoria: Kuchnia</p>
</div>
<div class="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10 hover:bg-white/20 transition-all cursor-pointer">
<p class="text-xs font-bold mb-1">Kurs ceramiki</p>
<p class="text-[10px] text-indigo-300">Kategoria: Hobby</p>
</div>
</div>
</div>
<i data-lucide="brain" class="absolute -right-10 -bottom-10 w-48 h-48 opacity-10"></i>
</div>
</div>
<!-- Right: AI Profiler & Preferences -->
<div class="space-y-8">
<section class="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
<h4 class="text-sm font-black text-gray-900 mb-4 flex items-center gap-2">
<i data-lucide="user-plus" class="text-indigo-600"></i> Profilowanie AI
</h4>
<p class="text-xs text-gray-500 mb-4 leading-relaxed">Dodaj więcej informacji o Mamie, aby AI mogło lepiej dopasować prezenty do jej gustu.</p>
<div class="space-y-3 mb-6">
<div class="p-3 bg-gray-50 rounded-xl flex items-center justify-between">
<span class="text-xs font-bold text-gray-700">Styl życia</span>
<span class="text-[10px] font-black text-indigo-600 uppercase">Active</span>
</div>
<div class="p-3 bg-gray-50 rounded-xl flex items-center justify-between">
<span class="text-xs font-bold text-gray-700">Ulubione kolory</span>
<div class="flex gap-1">
<div class="w-3 h-3 rounded-full bg-blue-400"></div>
<div class="w-3 h-3 rounded-full bg-indigo-200"></div>
</div>
</div>
</div>
<textarea class="w-full bg-gray-50 border border-gray-100 rounded-2xl p-4 text-xs text-gray-600 placeholder-gray-300 h-32 focus:ring-2 focus:ring-indigo-500 outline-none mb-4" placeholder="Wpisz luźne spostrzeżenia, np. 'Mama nie lubi gadżetów, woli przeżycia...'"></textarea>
<button class="w-full py-3 bg-indigo-50 text-indigo-700 font-bold rounded-xl text-xs hover:bg-indigo-100 transition-all">Aktualizuj profil AI</button>
</section>
<section class="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
<h4 class="text-sm font-black text-gray-900 mb-4 flex items-center gap-2">
<i data-lucide="history" class="text-indigo-600"></i> Ostatnio kupione
</h4>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-100 rounded-lg shrink-0"></div>
<div class="flex-1">
<p class="text-xs font-bold text-gray-700">Wyciskarka do soków</p>
<p class="text-[10px] text-gray-400">Maj 2025</p>
</div>
<span class="text-xs font-black text-gray-900">899 PLN</span>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
</div>
<!-- Modal: Edytuj Osobę -->
<div id="modal-edit-person" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Edytuj Profil</h3>
<button onclick="closeModal('modal-edit-person')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imię / Nick</label>
<input type="text" value="Mama" class="form-input" required>
</div>
<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">Relacja</label>
<select class="form-input">
<option selected>Rodzina</option>
<option>Przyjaciel / Przyjaciółka</option>
<option>Praca</option>
</select>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Wiek</label>
<input type="number" value="58" class="form-input">
</div>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Zainteresowania</label>
<input type="text" value="Gotowanie, Ogród, Joga" class="form-input">
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Zapisz zmiany
</button>
</form>
</div>
</div>
<!-- Modal: Dodaj Prezent -->
<div id="modal-add-gift" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Nowy Prezent</h3>
<button onclick="closeModal('modal-add-gift')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa Prezentu</label>
<input type="text" placeholder="np. Słuchawki Sony" class="form-input" required>
</div>
<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">Szacowana Cena (PLN)</label>
<input type="number" placeholder="0.00" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Status</label>
<select class="form-input">
<option>Idea</option>
<option>Wybrany</option>
<option>Kupiony</option>
<option>Zapakowany</option>
</select>
</div>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Link do produktu</label>
<input type="url" placeholder="https://..." class="form-input">
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Dodaj prezent
</button>
</form>
</div>
</div>
<!-- Mobile Nav -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="updates.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="bell" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Status</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>
</body>
</html>

243
persons.html Normal file
View File

@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista Osób - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
Gift Planner
</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<div class="flex items-center gap-3 p-4">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">NK</div>
<div class="flex-1 overflow-hidden">
<p class="text-sm font-semibold truncate">Norbert K.</p>
<p class="text-xs text-gray-500">Premium</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<!-- Header -->
<header class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
<div>
<h2 class="text-3xl font-black text-gray-900 leading-tight">Twoi Bliscy</h2>
<p class="text-gray-500 font-medium">Zarządzaj listą osób i ich zainteresowaniami.</p>
</div>
<button onclick="openModal('modal-add-person')" class="gradient-bg text-white px-8 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-200 hover:opacity-90 transition-all flex items-center gap-2">
<i data-lucide="user-plus" class="w-5 h-5"></i> Dodaj nową osobę
</button>
</header>
<!-- Filters & Search -->
<div class="flex flex-wrap items-center gap-4 mb-8">
<div class="relative flex-1 min-w-[300px]">
<i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Szukaj osoby po imieniu lub relacji..." class="w-full pl-12 pr-4 py-3 bg-white border border-gray-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-sm">
</div>
<div class="flex gap-2">
<select class="bg-white border border-gray-200 px-4 py-3 rounded-2xl text-sm font-bold text-gray-600 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
<option>Wszystkie relacje</option>
<option>Rodzina</option>
<option>Przyjaciele</option>
<option>Praca</option>
</select>
<button class="bg-white border border-gray-200 p-3 rounded-2xl text-gray-400 hover:text-indigo-600 transition-colors">
<i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- Persons Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Person Card 1 -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-50 hover:shadow-xl hover:-translate-y-1 transition-all group">
<div class="flex flex-col items-center text-center">
<div class="w-24 h-24 rounded-3xl bg-indigo-50 border-4 border-white shadow-xl mb-4 overflow-hidden relative group-hover:scale-105 transition-transform">
<img src="https://ui-avatars.com/api/?name=Mama&background=f0f9ff&color=6366f1&size=128" alt="Mama" class="w-full h-full object-cover">
</div>
<h4 class="text-xl font-black text-gray-900 mb-1 group-hover:text-indigo-600 transition-colors cursor-pointer" onclick="window.location.href='person.html'">Mama</h4>
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Rodzina</span>
<div class="flex flex-wrap justify-center gap-1.5 mb-6">
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Gotowanie</span>
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Joga</span>
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">+2</span>
</div>
<div class="w-full pt-6 border-t border-gray-50 flex items-center justify-around">
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Prezenty</p>
<p class="text-lg font-black text-gray-700">12</p>
</div>
<div class="h-8 w-[1px] bg-gray-50"></div>
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Najbliższa</p>
<p class="text-sm font-black text-indigo-600 uppercase">Boże Narodzenie</p>
</div>
</div>
</div>
</div>
<!-- Person Card 2 -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-50 hover:shadow-xl hover:-translate-y-1 transition-all group">
<div class="flex flex-col items-center text-center">
<div class="w-24 h-24 rounded-3xl bg-purple-50 border-4 border-white shadow-xl mb-4 overflow-hidden group-hover:scale-105 transition-transform">
<img src="https://ui-avatars.com/api/?name=Tata&background=f5f3ff&color=8b5cf6&size=128" alt="Tata" class="w-full h-full object-cover">
</div>
<h4 class="text-xl font-black text-gray-900 mb-1 group-hover:text-purple-600 transition-colors">Tata</h4>
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Rodzina</span>
<div class="flex flex-wrap justify-center gap-1.5 mb-6">
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Książki</span>
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Wino</span>
</div>
<div class="w-full pt-6 border-t border-gray-50 flex items-center justify-around">
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Prezenty</p>
<p class="text-lg font-black text-gray-700">8</p>
</div>
<div class="h-8 w-[1px] bg-gray-50"></div>
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Najbliższa</p>
<p class="text-sm font-black text-purple-600 uppercase">Urodziny</p>
</div>
</div>
</div>
</div>
<!-- Person Card 3 -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-50 hover:shadow-xl hover:-translate-y-1 transition-all group">
<div class="flex flex-col items-center text-center">
<div class="w-24 h-24 rounded-3xl bg-pink-50 border-4 border-white shadow-xl mb-4 overflow-hidden group-hover:scale-105 transition-transform">
<img src="https://ui-avatars.com/api/?name=Anna&background=fdf2f8&color=ec4899&size=128" alt="Anna" class="w-full h-full object-cover">
</div>
<h4 class="text-xl font-black text-gray-900 mb-1 group-hover:text-pink-600 transition-colors">Anna</h4>
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Przyjaciele</span>
<div class="flex flex-wrap justify-center gap-1.5 mb-6">
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Moda</span>
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold px-2.5 py-1 rounded-full">Muzyka</span>
</div>
<div class="w-full pt-6 border-t border-gray-50 flex items-center justify-around">
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Prezenty</p>
<p class="text-lg font-black text-gray-700">5</p>
</div>
<div class="h-8 w-[1px] bg-gray-50"></div>
<div class="text-center">
<p class="text-[10px] font-black text-gray-300 uppercase leading-none mb-1">Najbliższa</p>
<p class="text-sm font-black text-pink-600 uppercase">Imieniny</p>
</div>
</div>
</div>
</div>
<!-- Add New -->
<div onclick="openModal('modal-add-person')" class="border-4 border-dashed border-gray-100 rounded-[2.5rem] p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:bg-gray-50 hover:border-indigo-100 transition-all group min-h-[300px]">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-gray-300 group-hover:text-indigo-600 shadow-sm border border-gray-50 mb-4 transition-all">
<i data-lucide="plus" class="w-8 h-8"></i>
</div>
<h4 class="text-lg font-black text-gray-400 group-hover:text-indigo-600 transition-colors">Dodaj osobę</h4>
</div>
</div>
</main>
</div>
<!-- Modal: Dodaj Osobę -->
<div id="modal-add-person" class="modal-overlay">
<div class="modal-content">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-black text-gray-900">Dodaj Osobę</h3>
<button onclick="closeModal('modal-add-person')" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imię / Nick</label>
<input type="text" placeholder="np. Kasia" class="form-input" required>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Relacja</label>
<select class="form-input">
<option>Rodzina</option>
<option>Przyjaciel / Przyjaciółka</option>
<option>Praca</option>
<option>Inna</option>
</select>
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Zainteresowania (oddziel przecinkiem)</label>
<input type="text" placeholder="kawa, joga, technologia" class="form-input">
</div>
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 mt-4">
Dodaj osobę do listy
</button>
</form>
</div>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="budget.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="wallet" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Budżet</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>

213
product.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produkt: Ekspres Sage Barista - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<button onclick="window.history.back()" class="flex items-center gap-2 text-gray-500 hover:text-indigo-600 transition-colors mb-6 font-medium">
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót
</button>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left: Product Master Info -->
<div class="lg:col-span-2 space-y-8">
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<div class="flex flex-col md:flex-row gap-8">
<div class="w-full md:w-72 h-72 bg-gray-50 rounded-[2rem] overflow-hidden shrink-0 shadow-inner">
<img src="https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<span class="bg-indigo-100 text-indigo-700 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest mb-4 inline-block">Karta Produktu</span>
<h2 class="text-4xl font-black text-gray-900 mb-2 leading-tight">Ekspres kolbowy Sage Barista Express BES875</h2>
<p class="text-gray-400 font-bold mb-6 italic">EAN: 9312432021678 | SKU: Sage-BES875</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-4 py-2 bg-gray-50 rounded-xl text-xs font-bold text-gray-600">Kuchnia</span>
<span class="px-4 py-2 bg-gray-50 rounded-xl text-xs font-bold text-gray-600">Kawa</span>
<span class="px-4 py-2 bg-gray-50 rounded-xl text-xs font-bold text-gray-600">Premium</span>
<span class="px-4 py-2 bg-gray-50 rounded-xl text-xs font-bold text-gray-600">AGD</span>
</div>
<div class="flex gap-4">
<button class="flex-1 gradient-bg text-white py-4 rounded-2xl font-bold shadow-xl shadow-indigo-100 flex items-center justify-center gap-2">
<i data-lucide="plus-circle"></i> Zaplanuj ten prezent
</button>
<button class="p-4 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
<i data-lucide="share-2"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Product Specs & Description -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<h3 class="text-xl font-black text-gray-900 mb-6">Opis produktu</h3>
<div class="prose prose-indigo max-w-none text-gray-600 text-sm leading-relaxed mb-8">
<p>Sage Barista Express to wysokiej jakości ekspres kolbowy z wbudowanym młynkiem stożkowym. Pozwala na przejście od ziarna do filiżanki espresso w mniej niż minutę. Idealny dla miłośników kawy, którzy chcą mieć pełną kontrolę nad procesem parzenia.</p>
<ul class="list-disc pl-5 mt-4 space-y-2">
<li>Wbudowany młynek z 16 stopniami mielenia</li>
<li>System ogrzewania Thermocoil</li>
<li>Dysza do spieniania mleka</li>
<li>Zbiornik na wodę o pojemności 2 litrów</li>
</ul>
</div>
<h3 class="text-xl font-black text-gray-900 mb-6">Występuje w Twoich planach (3)</h3>
<div class="space-y-3">
<a href="gift.html" class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl border border-gray-100 hover:border-indigo-200 transition-all group">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Mama&background=random" class="w-8 h-8 rounded-full">
<div>
<p class="text-sm font-bold text-gray-900">Prezent dla Mamy</p>
<p class="text-[10px] text-gray-400 font-bold">Okazja: Boże Narodzenie 2025</p>
</div>
</div>
<span class="bg-green-100 text-green-700 text-[10px] font-black px-2 py-0.5 rounded-full">KUPIONY</span>
</a>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl border border-gray-100">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-8 h-8 rounded-full opacity-50">
<div>
<p class="text-sm font-bold text-gray-400">Pomysł dla Taty (Odrzucony)</p>
<p class="text-[10px] text-gray-300 font-bold text-gray-300">Okazja: Urodziny</p>
</div>
</div>
<span class="bg-gray-200 text-gray-500 text-[10px] font-black px-2 py-0.5 rounded-full">IDEA</span>
</div>
</div>
</section>
</div>
<!-- Right: Global Price Analysis -->
<div class="space-y-8">
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<div class="flex items-start justify-between mb-2">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Najniższa cena Ceneo</p>
<span class="text-green-600 bg-green-50 px-2 py-0.5 rounded-md text-[10px] font-black underline cursor-pointer">OKAZJA!</span>
</div>
<h3 class="text-4xl font-black text-gray-900 mb-6">2 489 PLN</h3>
<div class="h-48 mb-6">
<canvas id="masterPriceChart"></canvas>
</div>
<div class="grid grid-cols-2 gap-3 mb-6">
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100">
<p class="text-[10px] text-gray-400 font-black uppercase mb-1">Max 1y</p>
<p class="text-sm font-black">2 799 PLN</p>
</div>
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100">
<p class="text-[10px] text-gray-400 font-black uppercase mb-1">Min 1y</p>
<p class="text-sm font-black text-green-600">2 399 PLN</p>
</div>
</div>
<a href="https://ceneo.pl" target="_blank" class="w-full flex items-center justify-center gap-2 py-4 bg-indigo-600 text-white font-bold rounded-2xl shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">
Pokaż oferty w sklepach <i data-lucide="external-link" class="w-4 h-4"></i>
</a>
</section>
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
<h4 class="text-sm font-black text-gray-900 mb-4">Gdzie kupić najtaniej?</h4>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-red-600 text-white flex items-center justify-center text-[10px] font-black">Media</div>
<span class="text-xs font-bold text-gray-700">Media Expert</span>
</div>
<span class="text-xs font-black text-gray-900">2 489 PLN</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-orange-500 text-white flex items-center justify-center text-[10px] font-black">Euro</div>
<span class="text-xs font-bold text-gray-700">RTV Euro AGD</span>
</div>
<span class="text-xs font-black text-gray-900">2 499 PLN</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-pink-600 text-white flex items-center justify-center text-[10px] font-black">Allegro</div>
<span class="text-xs font-bold text-gray-700">Allegro</span>
</div>
<span class="text-xs font-black text-gray-900">2 510 PLN</span>
</div>
</div>
</section>
</div>
</div>
</main>
</div>
<script>
lucide.createIcons();
const ctx = document.getElementById('masterPriceChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Sty', 'Mar', 'Maj', 'Lip', 'Wrze', 'List', 'Gru'],
datasets: [{
label: 'Cena średnia',
data: [2700, 2650, 2580, 2600, 2550, 2400, 2489],
borderColor: '#6366f1',
borderWidth: 4,
tension: 0.4,
pointRadius: 0,
fill: true,
backgroundColor: (context) => {
const gradient = context.chart.ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.1)');
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
return gradient;
}
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { grid: { display: false }, ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' } },
y: { grid: { color: '#f8fafc' }, ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' } }
}
}
});
</script>
</body>
</html>

114
register.html Normal file
View File

@@ -0,0 +1,114 @@
<!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>

172
settings.html Normal file
View File

@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ustawienia - 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">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="settings"></i> Ustawienia
</a>
<div class="flex items-center gap-3 p-4 mt-2">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">NK</div>
<div class="flex-1 overflow-hidden">
<p class="text-sm font-semibold truncate">Norbert K.</p>
<p class="text-xs text-gray-500">Premium</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<header class="mb-10">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Ustawienia</h2>
<p class="text-gray-500 font-medium">Zarządzaj swoim profilem i preferencjami aplikacji.</p>
</header>
<div class="max-w-4xl space-y-8">
<!-- Profile Settings -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600">
<i data-lucide="user"></i>
</div>
<h3 class="text-xl font-black text-gray-900">Profil Użytkownika</h3>
</div>
<div class="flex flex-col md:flex-row items-center gap-8 mb-8">
<div class="relative group">
<div class="w-32 h-32 rounded-[2rem] bg-indigo-100 flex items-center justify-center text-indigo-600 text-3xl font-black shadow-xl overflow-hidden">
NK
</div>
<button class="absolute inset-0 bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-[2rem]">
<i data-lucide="camera" class="w-8 h-8"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-1">
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imię i Nazwisko</label>
<input type="text" value="Norbert K." 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 font-bold text-gray-700">
</div>
<div>
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">E-mail</label>
<input type="email" value="norbert@example.com" 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 font-bold text-gray-700">
</div>
</div>
</div>
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">Zapisz zmiany</button>
</section>
<!-- Notifications -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600">
<i data-lucide="bell"></i>
</div>
<h3 class="text-xl font-black text-gray-900">Powiadomienia</h3>
</div>
<div class="space-y-6">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl">
<div>
<p class="text-sm font-bold text-gray-900">Alerty cenowe Ceneo</p>
<p class="text-[10px] text-gray-400 font-medium">Informuj mnie, gdy cena prezentu spadnie o więcej niż 10%.</p>
</div>
<div class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl">
<div>
<p class="text-sm font-bold text-gray-900">Przypomnienia o okazjach</p>
<p class="text-[10px] text-gray-400 font-medium">Powiadomienia na 2 tygodnie przed zaplanowanym wydarzeniem.</p>
</div>
<div class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
</div>
</div>
</div>
</section>
<!-- Security -->
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-pink-50 rounded-2xl flex items-center justify-center text-pink-600">
<i data-lucide="shield-lock"></i>
</div>
<h3 class="text-xl font-black text-gray-900">Bezpieczeństwo</h3>
</div>
<div class="flex gap-4">
<button class="bg-gray-100 text-gray-700 px-6 py-3 rounded-2xl font-bold hover:bg-gray-200 transition-all">Zmień hasło</button>
<button class="bg-gray-100 text-gray-700 px-6 py-3 rounded-2xl font-bold hover:bg-gray-200 transition-all">Włącz 2FA</button>
</div>
</section>
<!-- Logout -->
<button onclick="window.location.href='index.html'" class="w-full p-6 border-2 border-dashed border-red-100 rounded-[2rem] text-red-500 font-black flex items-center justify-center gap-3 hover:bg-red-50 transition-all">
<i data-lucide="log-out"></i> Wyloguj się z aplikacji
</button>
</div>
</main>
</div>
<!-- Mobile Nav -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
<a href="settings.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="settings" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Opcje</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>

114
styles.css Normal file
View File

@@ -0,0 +1,114 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--glass: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
color: #1e293b;
}
.glass-card {
background: var(--glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}
.progress-bar-gradient {
background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Modals */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(8px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-content {
background: white;
width: 100%;
max-width: 500px;
border-radius: 2.5rem;
padding: 2.5rem;
transform: scale(0.95) translateY(20px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.modal-overlay.active .modal-content {
transform: scale(1) translateY(0);
}
.form-input {
width: 100%;
padding: 1rem 1.25rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
outline: none;
transition: all 0.2s;
font-size: 0.875rem;
}
.form-input:focus {
border-color: #6366f1;
background: white;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

167
updates.html Normal file
View File

@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aktualizacje - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="bell"></i> Aktualizacje
<span class="ml-auto bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full">3</span>
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="settings"></i> Ustawienia
</a>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<header class="mb-10 flex items-center justify-between">
<div>
<h2 class="text-3xl font-black text-gray-900 leading-tight">Centrum Aktualizacji</h2>
<p class="text-gray-500 font-medium">Spersonalizowane powiadomienia i okazje właśnie dla Ciebie.</p>
</div>
<button class="text-sm font-bold text-indigo-600 hover:underline">Oznacz wszystkie jako przeczytane</button>
</header>
<div class="max-w-4xl space-y-4">
<!-- Update: Price Drop (Emergency/Hot) -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border-l-4 border-green-500 group hover:shadow-xl transition-all relative overflow-hidden">
<div class="flex items-start gap-6 relative z-10">
<div class="w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center text-green-600 shrink-0">
<i data-lucide="trending-down" class="w-8 h-8"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-[10px] font-black text-green-600 uppercase tracking-widest">Okazja cenowa!</span>
<span class="text-[10px] text-gray-400 font-bold">2 godz. temu</span>
</div>
<h4 class="text-lg font-black text-gray-900 mb-2">Cena "Sage Barista Express" spadła o 120 PLN!</h4>
<p class="text-sm text-gray-500 mb-4 leading-relaxed">Twój śledzony produkt jest teraz dostępny w najniższej cenie od 3 miesięcy w sklepie Media Expert. To idealny moment na zakup prezentu dla: <span class="font-bold text-gray-900">Mama</span>.</p>
<div class="flex gap-3">
<button onclick="window.location.href='gift.html'" class="bg-green-600 text-white px-6 py-2 rounded-xl text-xs font-bold shadow-lg shadow-green-100">Kup teraz</button>
<button onclick="window.location.href='product.html'" class="bg-gray-100 text-gray-600 px-6 py-2 rounded-xl text-xs font-bold">Szczegóły</button>
</div>
</div>
</div>
</div>
<!-- Update: Upcoming Occasion (Warning) -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border-l-4 border-indigo-500 group hover:shadow-xl transition-all">
<div class="flex items-start gap-6">
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 shrink-0">
<i data-lucide="calendar" class="w-8 h-8"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest">Nadchodząca okazja</span>
<span class="text-[10px] text-gray-400 font-bold">Wczoraj</span>
</div>
<h4 class="text-lg font-black text-gray-900 mb-2">Boże Narodzenie 2025 już za 12 dni!</h4>
<p class="text-sm text-gray-500 mb-4 font-medium">Masz jeszcze <span class="text-red-500 font-black">4 osoby</span> na liście bez przypisanego prezentu. Czy chcesz, aby AI wygenerowało dla nich sugestie?</p>
<div class="flex gap-3">
<button onclick="window.location.href='occasion-ai.html'" class="gradient-bg text-white px-6 py-2 rounded-xl text-xs font-bold shadow-lg shadow-indigo-100">Użyj wsparcia AI</button>
<button onclick="window.location.href='occasion.html'" class="bg-gray-100 text-gray-600 px-6 py-2 rounded-xl text-xs font-bold">Lista osób</button>
</div>
</div>
</div>
</div>
<!-- Update: AI Suggestion (Inspiration) -->
<div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-[2rem] p-6 shadow-xl text-white group hover:scale-[1.02] transition-all relative overflow-hidden">
<div class="flex items-start gap-6 relative z-10">
<div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center shrink-0">
<i data-lucide="sparkles" class="w-8 h-8"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-[10px] font-black text-purple-200 uppercase tracking-widest">Inspiracja AI</span>
<span class="text-[10px] text-purple-200 font-bold">2 dni temu</span>
</div>
<h4 class="text-lg font-black mb-2">Nowe sugestie dla: Tata</h4>
<p class="text-sm text-purple-100 mb-4 leading-relaxed">Na podstawie Twoich ostatnich notatek o miłości taty do grillowania, znaleźliśmy unikalny "Zestaw profesjonalnych akcesoriów do wędzenia".</p>
<button class="bg-white text-purple-700 px-6 py-2 rounded-xl text-xs font-bold shadow-lg">Zobacz propozycje</button>
</div>
</div>
<i data-lucide="brain" class="absolute -right-8 -bottom-8 w-40 h-40 opacity-10"></i>
</div>
<!-- Update: System/Budget (Info) -->
<div class="bg-white rounded-[2rem] p-6 shadow-sm border-l-4 border-gray-200 opacity-60 hover:opacity-100 transition-all">
<div class="flex items-start gap-6">
<div class="w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-gray-400 shrink-0">
<i data-lucide="wallet" class="w-8 h-8"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Raport budżetowy</span>
<span class="text-[10px] text-gray-400 font-bold">3 dni temu</span>
</div>
<h4 class="text-lg font-black text-gray-900 mb-2">Wykorzystałeś 76% budżetu grudniowego</h4>
<p class="text-sm text-gray-500">Pozostało Ci 1 200 PLN na ostatnie prezenty. Wszystko idzie zgodnie z planem!</p>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="updates.html" class="flex flex-col items-center p-2 text-indigo-600">
<div class="relative">
<i data-lucide="bell" class="w-6 h-6"></i>
<span class="absolute -top-1 -right-1 bg-red-500 w-2 h-2 rounded-full"></span>
</div>
<span class="text-[10px] font-bold mt-1">Status</span>
</a>
<a href="occasions.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Okazje</span>
</a>
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="users" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Osoby</span>
</a>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>