extend design
This commit is contained in:
Norbert Maciaszek
229
blog-post.html
Normal file
229
blog-post.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>5 Prezentów dla Kawosza - Gift Planner Blog</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="Poznaj 5 najlepszych prezentów dla miłośnika kawy. Od profesjonalnych ekspresów po dizajnerskie akcesoria.">
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen font-sans">
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col shrink-0">
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||||
<i data-lucide="book-open"></i> Poradniki
|
||||
</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-white p-0">
|
||||
<!-- Article Header -->
|
||||
<header class="relative min-h-[60vh] flex items-center justify-center p-8 lg:p-20 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1541167760496-162955ed8a9f?q=80&w=2000&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl text-center text-white">
|
||||
<button onclick="window.history.back()" class="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors mb-8 font-black uppercase text-[10px] tracking-[0.2em]">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4"></i> Powrót do Bloga
|
||||
</button>
|
||||
<div class="flex items-center justify-center gap-3 mb-6">
|
||||
<span class="px-4 py-1.5 bg-indigo-600 rounded-full text-[10px] font-black uppercase tracking-widest text-white">Inspiracje</span>
|
||||
<span class="text-white/60 text-[10px] font-black uppercase tracking-widest">24 Grudnia 2025</span>
|
||||
</div>
|
||||
<h2 class="text-4xl lg:text-7xl font-black mb-8 leading-[1.1]">5 Prezentów, które zachwycą każdego kawosza</h2>
|
||||
<p class="text-xl text-white/80 font-medium max-w-2xl mx-auto leading-relaxed">Prawdziwy fan kawy to nie tylko ktoś, kto pije małą czarną. To pasjonat, dla którego liczy się proces, narzędzia i ziarno.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Area -->
|
||||
<article class="max-w-4xl mx-auto px-8 py-20">
|
||||
<div class="prose prose-indigo prose-xl max-w-none text-gray-700 leading-relaxed font-medium">
|
||||
<p class="mb-12 first-letter:text-7xl first-letter:font-black first-letter:mr-3 first-letter:float-left first-letter:text-indigo-600">Świat kawy to nieskończona paleta smaków, aromatów i... technologii. Szukając prezentu dla kogoś, kto nie wyobraża sobie dnia bez filiżanki espresso czy przelewu, warto postawić na jakość, która przetrwa lata. W Gift Plannerze przeanalizowaliśmy tysiące opinii i trendów baristycznych, aby przygotować dla Ciebie zestawienie, które trafi w dziesiątkę.</p>
|
||||
|
||||
<h3 class="text-3xl font-black text-gray-900 mt-16 mb-8 uppercase tracking-tight">1. Ekspres, który zmienia wszystko</h3>
|
||||
<p class="mb-10 text-lg">Podstawą domowego kącika kawowego jest oczywiście maszyna. Ale nie byle jaka. Jeśli Twój budżet pozwala na odrobinę luksusu, Sage Barista Express to absolutny król domowych blatów kuchennych.</p>
|
||||
|
||||
<!-- Shoppable Insert -->
|
||||
<div class="bg-gray-50 rounded-[3rem] p-8 border border-gray-100 flex flex-col md:flex-row items-center gap-10 my-16 shadow-xl shadow-indigo-50/50">
|
||||
<div class="w-full md:w-1/3 aspect-square rounded-[2rem] overflow-hidden shadow-sm border border-white">
|
||||
<img src="https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&q=80&w=600" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-600"></i>
|
||||
<span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest">Wybór Redakcji AI</span>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900 mb-2">Sage Barista Express BES875</h4>
|
||||
<p class="text-sm text-gray-500 font-bold mb-6 italic leading-relaxed">Doskonałe espresso z wbudowanym młynkiem.</p>
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mb-1">Cena od</p>
|
||||
<p class="text-2xl font-black text-indigo-600 leading-none">2 489 PLN</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="product.html" class="px-6 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-black hover:bg-gray-50 transition-all uppercase">Szczegóły</a>
|
||||
<button onclick="openModal('modal-add-to-plans')" class="px-6 py-3 gradient-bg text-white rounded-2xl text-xs font-black shadow-lg shadow-indigo-100 uppercase flex items-center gap-2">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i> Dodaj do okazji
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-3xl font-black text-gray-900 mt-16 mb-8 uppercase tracking-tight">2. Design, który cieszy oko i podniebienie</h3>
|
||||
<p class="mb-10 text-lg">Kawa to także rytuał wizualny. Prawidłowo dobrane filiżanki nie tylko utrzymują temperaturę, ale sprawiają, że poranny napój smakuje po prostu... drożej.</p>
|
||||
|
||||
<!-- Native Ad style Link -->
|
||||
<div class="p-6 bg-indigo-50 rounded-3xl border border-indigo-100 mb-12 flex items-center justify-between gap-6 hover:bg-indigo-100 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm border border-indigo-100">
|
||||
<i data-lucide="shopping-bag" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-sm font-black text-indigo-900 uppercase tracking-tight">Polecane akcesoria premium</h5>
|
||||
<p class="text-xs text-indigo-600/70 font-medium">Odkryj kolekcję Loveramics w naszej wyszukiwarce inspiracji.</p>
|
||||
</div>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-6 h-6 text-indigo-400"></i>
|
||||
</div>
|
||||
|
||||
<p class="text-lg">Pamiętaj, że najlepszy prezent to taki, który jest dopasowany do stylu życia. Nasza sztuczna inteligencja przeanalizuje preferencje Twojej osoby (wystarczy uzupełnić profil w zakładce Osoby), aby upewnić się, że wybrany ekspres czy zestaw filiżanek będzie strzałem w dziesiątkę.</p>
|
||||
</div>
|
||||
|
||||
<!-- Author Bio -->
|
||||
<footer class="mt-24 pt-12 border-t border-gray-100 flex items-center gap-8">
|
||||
<img src="https://ui-avatars.com/api/?name=AI+Planner&background=6366f1&color=fff" class="w-20 h-20 rounded-[2rem]">
|
||||
<div>
|
||||
<p class="text-xs font-black text-indigo-600 uppercase tracking-widest mb-1">Autorzy</p>
|
||||
<h5 class="text-lg font-black text-gray-900">Zespół Redakcyjny Gift Planner</h5>
|
||||
<p class="text-sm text-gray-500 font-medium leading-relaxed">Analizujemy trendy i dane wektorowe, aby dostarczać Ci tylko najlepsze propozycje prezentowe na każdą okazję.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- More Posts -->
|
||||
<section class="bg-gray-50 py-24 px-8 border-t border-gray-100">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h3 class="text-3xl font-black text-gray-900 mb-12">Może Cię zainteresować:</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 text-left">
|
||||
<!-- Similar Post 1 -->
|
||||
<a href="#" class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group p-4">
|
||||
<div class="h-48 relative overflow-hidden rounded-3xl mb-6">
|
||||
<img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-gray-900 mb-2 leading-tight px-2">Jak planować budżet na prezenty?</h4>
|
||||
<p class="text-indigo-600 text-xs font-black uppercase tracking-widest px-2 mb-2">Poradnik</p>
|
||||
</a>
|
||||
<!-- Similar Post 2 -->
|
||||
<a href="#" class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group p-4">
|
||||
<div class="h-48 relative overflow-hidden rounded-3xl mb-6">
|
||||
<img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-gray-900 mb-2 leading-tight px-2">Najlepsze pomysły na Dzień Matki</h4>
|
||||
<p class="text-indigo-600 text-xs font-black uppercase tracking-widest px-2 mb-2">Okazje</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Dodaj do Planów (Same as inspirations.html) -->
|
||||
<div id="modal-add-to-plans" class="modal-overlay">
|
||||
<div class="modal-content text-left">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="text-2xl font-black text-gray-900 leading-tight text-left w-full">Dodaj do swoich planów</h3>
|
||||
<button onclick="closeModal('modal-add-to-plans')" class="p-2 hover:bg-gray-100 rounded-xl transition-colors shrink-0">
|
||||
<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 text-left">Kogo chcesz obdarować?</label>
|
||||
<select class="form-input" required>
|
||||
<option value="" disabled selected>Wybierz osobę...</option>
|
||||
<option>Mama (Anna)</option>
|
||||
<option>Tata (Piotr)</option>
|
||||
<option>Siostra (Kasia)</option>
|
||||
<option>+ Dodaj nową osobę</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1 text-left">Na jaką okazję?</label>
|
||||
<select class="form-input" required>
|
||||
<option value="" disabled selected>Wybierz okazję...</option>
|
||||
<option>Urodziny (12 Marca)</option>
|
||||
<option>Dzień Matki (24 Maja)</option>
|
||||
<option>Boże Narodzenie 2025</option>
|
||||
<option>+ Stwórz nową okazję</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-3xl font-black shadow-xl shadow-indigo-100 mt-4 flex items-center justify-center gap-2 uppercase text-xs tracking-widest">
|
||||
Rezerwuj w planach
|
||||
</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="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="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-indigo-600">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
199
blog.html
Normal file
199
blog.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog i Poradniki - 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>
|
||||
<meta name="description" content="Szukasz inspiracji? Nasz blog to kopalnia pomysłów na prezenty, poradników i zestawień topowych produktów na każdą okazję.">
|
||||
</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 shrink-0">
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||||
<i data-lucide="book-open"></i> Poradniki
|
||||
</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">
|
||||
<header class="mb-12">
|
||||
<h2 class="text-4xl font-black text-gray-900 leading-tight mb-4">Centrum Inspiracji</h2>
|
||||
<p class="text-lg text-gray-500 font-medium max-w-2xl leading-relaxed">Odkryj sekrety trafionych prezentów. Nasze poradniki pomogą Ci wybrać idealny upominek, niezależnie od budżetu czy okazji.</p>
|
||||
</header>
|
||||
|
||||
<!-- Featured Article -->
|
||||
<section class="mb-16">
|
||||
<a href="blog-post.html" class="group block relative rounded-[3rem] overflow-hidden bg-indigo-900 shadow-2xl shadow-indigo-200">
|
||||
<div class="flex flex-col lg:flex-row min-h-[400px]">
|
||||
<div class="lg:w-1/2 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1541167760496-162955ed8a9f?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-indigo-900/60 to-transparent lg:hidden"></div>
|
||||
</div>
|
||||
<div class="lg:w-1/2 p-10 lg:p-16 flex flex-col justify-center text-white relative z-10">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="px-4 py-1.5 bg-indigo-500 rounded-full text-[10px] font-black uppercase tracking-widest">Polecane</span>
|
||||
<span class="text-indigo-300 text-[10px] font-black uppercase tracking-widest">5 min czytania</span>
|
||||
</div>
|
||||
<h3 class="text-3xl lg:text-5xl font-black mb-6 leading-tight">5 Prezentów, które zachwycą każdego kawosza</h3>
|
||||
<p class="text-indigo-200 text-lg mb-10 font-medium leading-relaxed">Od dizajnerskich akcesoriów po zaawansowane ekspresy. Sprawdź nasze zestawienie TOP 5 przygotowane we współpracy z baristami.</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-sm font-black underline underline-offset-8 decoration-2 group-hover:decoration-4 transition-all">Czytaj artykuł</span>
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-2 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- Blog Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
<!-- Article 2 -->
|
||||
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-64 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=800&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-indigo-600">Poradnik</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Jak nie spłukać się na Święta? Planowanie budżetu krok po kroku</h4>
|
||||
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Dowiedz się, jak wykorzystać nasze narzędzia budżetowe, aby zaplanować wymarzone prezenty bez stresu finansowego.</p>
|
||||
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
||||
Czytaj więcej
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article 3 -->
|
||||
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-64 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?q=80&w=800&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-indigo-600">Okazje</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Dzień Matki 2026: Co kupić kobiecie, która ma wszystko?</h4>
|
||||
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Ranking najbardziej sentymentalnych i luksusowych prezentów dla mam, które doceniają jakość i emocje.</p>
|
||||
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
||||
Czytaj więcej
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article 4 -->
|
||||
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-64 relative overflow-hidden text-center flex items-center justify-center bg-indigo-50">
|
||||
<i data-lucide="brain-circuit" class="w-20 h-20 text-indigo-200"></i>
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-white">Technologia</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Jak działa nasz algorytm sugestii AI? Wgląd w przyszłość zakupów</h4>
|
||||
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Kulisy powstawania naszej sztucznej inteligencji. Jak wektory i dane profilowe zmieniają sposób, w jaki szukamy prezentów.</p>
|
||||
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
||||
Czytaj więcej
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- SEO Footer / Meta Info -->
|
||||
<section class="mt-16 bg-white rounded-[3rem] p-12 border border-gray-100 shadow-sm">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-6">Inspiracje na każdą okazję</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Okazje</h5>
|
||||
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Boże Narodzenie</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Urodziny</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dzień Kobiet</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Rocznice</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Dla kogo</h5>
|
||||
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Mamy</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Taty</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Dzieci</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Niego</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Popularne</h5>
|
||||
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Elektronika</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Wellness</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dom i Ogród</a></li>
|
||||
<li><a href="#" class="hover:text-indigo-600 transition-colors">Przeżycia</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex flex-col justify-end">
|
||||
<button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black text-xs shadow-xl shadow-indigo-100">
|
||||
ZASUBSKRYBUJ NEWSLETTER
|
||||
</button>
|
||||
</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-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="blog.html" class="flex flex-col items-center p-2 text-indigo-600">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</span>
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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>
|
||||
36
budget.html
36
budget.html
@@ -24,6 +24,18 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -184,23 +196,27 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Nav -->
|
||||
<!-- 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 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="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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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 href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
|
||||
@@ -31,6 +31,15 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -287,13 +296,17 @@
|
||||
<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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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 href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
|
||||
@@ -1,420 +0,0 @@
|
||||
# Gift Planning App – MVP Specification
|
||||
|
||||
**Project Name:** Gift Planner
|
||||
**Created:** December 26, 2025
|
||||
**Status:** Pre-development / Discovery Phase
|
||||
|
||||
---
|
||||
|
||||
## 1. Project Vision & Goals
|
||||
|
||||
### Business Goal
|
||||
Aplikacja wspomaga planowanie i śledzenie prezentów na dowolne okazje (święta, urodziny, rocznice), automatyzując zarządzanie budżetem, listami osób i śledzeniem cen.
|
||||
|
||||
### Success Metrics (do doprecyzowania)
|
||||
- Liczba zarejestrowanych userów
|
||||
- % userów, którzy ukończy workflow od okazji do budżetu
|
||||
- Engagement z AI recommendations
|
||||
- Średni czas planowania okazji
|
||||
|
||||
### Ograniczenia na start
|
||||
- Budżet: TBD
|
||||
- Deadline MVP: TBD
|
||||
- Zespół: TBD
|
||||
- Geograficznie: Polska (Ceneo integration)
|
||||
|
||||
---
|
||||
|
||||
## 2. Core Domain – MVP Scope
|
||||
|
||||
### User & Authentication
|
||||
- [ ] Rejestracja / logowanie (email + hasło)
|
||||
- [ ] Profil usera (opcjonalnie: foto, preferencje powiadomień)
|
||||
- [ ] **Bez social logins na MVP**
|
||||
- [ ] Brak współdzielenia list (single-user na MVP)
|
||||
|
||||
### Globalna Lista Osób (User Resource)
|
||||
Przypisana do usera, reużywalna między okazjami.
|
||||
|
||||
**Pola:**
|
||||
- `id`, `userId`
|
||||
- `name` (imię/pseudonim)
|
||||
- `relation` (np. matka, przyjaciel, partner – dla kontekstu AI)
|
||||
- `age` (opcjonalnie, dla AI recommendations)
|
||||
- `interests` (notatki/tagi: sport, gaming, moda itp.)
|
||||
- `notes` (dowolne notatki)
|
||||
- `createdAt`, `updatedAt`
|
||||
|
||||
**Operacje:**
|
||||
- CRUD na osobach
|
||||
- Lista osób dla danego usera
|
||||
- Search/filter po nazwie
|
||||
|
||||
---
|
||||
|
||||
### Okazja (Occasion)
|
||||
Kontener dla prezentów i budżetu w konkretnym kontekście czasowym.
|
||||
|
||||
**Pola:**
|
||||
- `id`, `userId`
|
||||
- `title` (np. "Święta 2025", "Urodziny Anny")
|
||||
- `description` (opcjonalnie)
|
||||
- `date` (przybliżona data okazji)
|
||||
- `totalBudget` (opcjonalnie, całkowity budżet na okazję)
|
||||
- `status` (draft, planning, shopping, done)
|
||||
- `createdAt`, `updatedAt`
|
||||
|
||||
**Operacje:**
|
||||
- CRUD na okazjach
|
||||
- Lista okazji dla danego usera
|
||||
- Filtry: aktywne, przeszłe, po dacie
|
||||
|
||||
---
|
||||
|
||||
### Powiązanie Osoba ↔ Okazja
|
||||
Tablica łączy osoby z okazjami (wiele-do-wielu).
|
||||
|
||||
**Pola:**
|
||||
- `id`, `occasionId`, `personId`
|
||||
- `budgetPerPerson` (opcjonalnie, Budget przydzielony dla tej osoby na tę okazję)
|
||||
- `notes` (opcjonalnie, specyficzne notatki dla tej osoby w ramach tej okazji)
|
||||
- `createdAt`
|
||||
|
||||
**Operacje:**
|
||||
- Dodaj osoby do okazji (można masowo)
|
||||
- Usuń osobę z okazji
|
||||
- Edytuj budżet per osoba
|
||||
|
||||
---
|
||||
|
||||
### Prezent (Gift)
|
||||
Konkretny prezent przypisany do osoby w ramach okazji.
|
||||
|
||||
**Pola:**
|
||||
- `id`, `occasionId`, `personId`
|
||||
- `title` (nazwa prezentu)
|
||||
- `status` (idea, selected, bought, wrapped, given – lub podobne state machine)
|
||||
- `price` (cena szacunkowa lub aktualna z Ceneo)
|
||||
- `budget` (z czego się liczy: czy wlicza się w budżet osoby?)
|
||||
- `description` (opcjonalnie, szczegóły)
|
||||
- `url` (opcjonalnie, link do produktu/sklepu)
|
||||
- `createdAt`, `updatedAt`
|
||||
|
||||
**Operacje:**
|
||||
- CRUD na prezentach
|
||||
- Change status prezentu
|
||||
- Lista prezentów per osoba
|
||||
- Lista prezentów per okazja (agregat)
|
||||
|
||||
---
|
||||
|
||||
### Budżet & Postęp (Occasion Analytics)
|
||||
Obliczone **automatycznie** na podstawie prezentów i okazji.
|
||||
|
||||
**Per Okazja:**
|
||||
- Całkowity budżet (suma `totalBudget` lub suma `budgetPerPerson` dla wszystkich osób)
|
||||
- Wydane dotychczas (suma `price` prezentów ze statusem ≥ "selected")
|
||||
- Pozostały budżet
|
||||
- % wykorzystania budżetu
|
||||
- Liczba osób
|
||||
- Liczba prezentów (total, ready/wrapped, pending)
|
||||
|
||||
**UI Representation:**
|
||||
- Progress bar: wydane / budżet
|
||||
- Liczniki: "3 z 5 osób gotowych", "12 z 15 prezentów"
|
||||
- Alert, jeśli przekraczamy budżet
|
||||
|
||||
---
|
||||
|
||||
## 3. Secondary Features – Phase 2 (Post-MVP)
|
||||
|
||||
### Price Tracking via Ceneo
|
||||
|
||||
**Architecture:**
|
||||
- User dodaje `url` do prezentu (dowolny link, np. ceneo.pl/...)
|
||||
- Backend: cron job (raz dziennie lub częściej) + manualne "refresh" przez UI
|
||||
- Pobieranie aktualnej ceny z API Ceneo / scrapingiem (Apify)
|
||||
- Zapis snapshotu ceny do tabeli `PriceSnapshot(giftId, price, timestamp, source)`
|
||||
|
||||
**Pola Gift (extended):**
|
||||
- `currentPrice` (najniższa cena z ostatniego snapshotu)
|
||||
- `priceHistory` (relacja do `PriceSnapshot`)
|
||||
- `priceAlert` (boolean: czy śledzić zmiany cen?)
|
||||
- `priceAlertThreshold` (opcjonalnie: powiadom, gdy spadnie poniżej X)
|
||||
|
||||
**UI Features:**
|
||||
- Mini-sparkline / mini-wykres ostatnich 30 dni cen
|
||||
- Badge: "Najtaniej w 2 tygodniach" lub "Drożej o X%" od średniej
|
||||
- Alert: "Cena spadła poniżej progu – dobry moment!"
|
||||
|
||||
**Powiadomienia (Phase 2):**
|
||||
- Email/push alert, gdy cena spadnie poniżej threshold
|
||||
- Reminder: "Zbliżają się święta – ceny mogą wzrosnąć"
|
||||
- Scheduled reminder: "Sprawdzaj ceny tego prezentu co 3 dni"
|
||||
|
||||
---
|
||||
|
||||
### AI Gift Recommendations (Phase 2)
|
||||
|
||||
**Use Case:**
|
||||
User przychodzi na okazję, widzi osobę w liście, kliknie "Suggest Gifts" → AI generuje 5–10 propozycji z uzasadnieniami.
|
||||
|
||||
**Input Context (AI):**
|
||||
- Profil osoby: wiek, zainteresowania, relacja
|
||||
- Okazja: typ, budżet per osoba, pozostały budżet na całą okazję
|
||||
- Historia: jakie prezenty już kupił/planuje dla tej osoby w historii (unikaj duplikatów)
|
||||
- Unikalność: weź pod uwagę, jakie prezenty planuje dla innych osób (różnorodność)
|
||||
|
||||
**Output:**
|
||||
- Lista propozycji: [{ title, category, priceRange, reason, matchScore }]
|
||||
- Reason: "Lubisz gaming, a wiek sugeruje..." itp.
|
||||
- Link do szukania: łatwe przejście do Ceneo/Google Shopping
|
||||
|
||||
**Implementacja:**
|
||||
- LLM (OpenAI API / local Ollama / inne)
|
||||
- Prompt engineering: struktura context + constraints (budżet, unikalne przedmioty)
|
||||
- User ręcznie decyduje, co dodać (zero auto-dodawania, pełna kontrola)
|
||||
|
||||
---
|
||||
|
||||
## 4. Architektura Techniczna (High Level)
|
||||
|
||||
### Tech Stack (Proposed)
|
||||
- **Frontend:** React 19 + Next.js (App Router)
|
||||
- Server Components dla list/agregacji
|
||||
- Client Components dla interaktywnych formularzy
|
||||
- TanStack Query do synchronizacji danych
|
||||
|
||||
- **Backend:** Node.js / Next.js API Routes lub oddzielny backend (Express/NestJS)
|
||||
- REST API lub GraphQL (tbd)
|
||||
- Autentykacja: JWT / session-based
|
||||
|
||||
- **Database:** PostgreSQL (+ Prisma ORM)
|
||||
- Wersjonowanie: migrations
|
||||
|
||||
- **External Services:**
|
||||
- Ceneo API / Apify scraper (Phase 2)
|
||||
- OpenAI API lub self-hosted LLM (Phase 2)
|
||||
- Email service (e.g., SendGrid, Resend) dla alertów (Phase 2)
|
||||
|
||||
- **Deployment:** TBD (Vercel, self-hosted, AWS, etc.)
|
||||
|
||||
---
|
||||
|
||||
### Database Schema (Sketch)
|
||||
|
||||
```
|
||||
User
|
||||
├── id (PK)
|
||||
├── email (UNIQUE)
|
||||
├── password_hash
|
||||
├── created_at
|
||||
└── updated_at
|
||||
|
||||
Person
|
||||
├── id (PK)
|
||||
├── user_id (FK)
|
||||
├── name
|
||||
├── relation
|
||||
├── age
|
||||
├── interests (TEXT / JSON)
|
||||
├── notes
|
||||
├── created_at
|
||||
├── updated_at
|
||||
|
||||
Occasion
|
||||
├── id (PK)
|
||||
├── user_id (FK)
|
||||
├── title
|
||||
├── description
|
||||
├── date
|
||||
├── total_budget
|
||||
├── status (draft | planning | shopping | done)
|
||||
├── created_at
|
||||
├── updated_at
|
||||
|
||||
OccasionPerson (M2M)
|
||||
├── id (PK)
|
||||
├── occasion_id (FK)
|
||||
├── person_id (FK)
|
||||
├── budget_per_person
|
||||
├── notes
|
||||
├── created_at
|
||||
|
||||
Gift
|
||||
├── id (PK)
|
||||
├── occasion_id (FK)
|
||||
├── person_id (FK)
|
||||
├── title
|
||||
├── status (idea | selected | bought | wrapped | given)
|
||||
├── price
|
||||
├── description
|
||||
├── url
|
||||
├── price_alert (BOOLEAN)
|
||||
├── price_alert_threshold (DECIMAL, optional)
|
||||
├── created_at
|
||||
├── updated_at
|
||||
|
||||
PriceSnapshot (Phase 2)
|
||||
├── id (PK)
|
||||
├── gift_id (FK)
|
||||
├── price (DECIMAL)
|
||||
├── source (e.g., "ceneo", "direct")
|
||||
├── timestamp
|
||||
├── created_at
|
||||
|
||||
AIRecommendation (Phase 2, optional logging)
|
||||
├── id (PK)
|
||||
├── occasion_id (FK)
|
||||
├── person_id (FK)
|
||||
├── prompt_context (JSON)
|
||||
├── result (JSON - lista propozycji)
|
||||
├── created_at
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### API Endpoints (MVP, Sketch)
|
||||
|
||||
#### Auth
|
||||
- `POST /api/auth/register` → register user
|
||||
- `POST /api/auth/login` → login user
|
||||
- `POST /api/auth/logout` → logout
|
||||
|
||||
#### Persons
|
||||
- `GET /api/persons` → list all persons for logged user
|
||||
- `POST /api/persons` → create person
|
||||
- `PUT /api/persons/:id` → update person
|
||||
- `DELETE /api/persons/:id` → delete person
|
||||
|
||||
#### Occasions
|
||||
- `GET /api/occasions` → list occasions for logged user
|
||||
- `POST /api/occasions` → create occasion
|
||||
- `PUT /api/occasions/:id` → update occasion
|
||||
- `DELETE /api/occasions/:id` → delete occasion
|
||||
- `GET /api/occasions/:id` → get occasion with full context
|
||||
|
||||
#### OccasionPerson (Managing persons in occasion)
|
||||
- `POST /api/occasions/:id/persons` → add person(s) to occasion
|
||||
- `DELETE /api/occasions/:id/persons/:personId` → remove person
|
||||
- `PUT /api/occasions/:id/persons/:personId` → update budget_per_person
|
||||
|
||||
#### Gifts
|
||||
- `GET /api/occasions/:id/gifts` → list gifts for occasion
|
||||
- `POST /api/occasions/:id/gifts` → create gift for person
|
||||
- `PUT /api/gifts/:id` → update gift (title, status, price, url, etc.)
|
||||
- `DELETE /api/gifts/:id` → delete gift
|
||||
|
||||
#### Occasion Analytics (computed read-only)
|
||||
- `GET /api/occasions/:id/analytics` → budget, postęp, countdowny
|
||||
|
||||
---
|
||||
|
||||
## 5. UI/UX Flow (MVP)
|
||||
|
||||
### Key Views
|
||||
|
||||
#### 1. Dashboard (Home)
|
||||
- Welcome message
|
||||
- List okazji (karty): aktywne vs archiwalne
|
||||
- Quick stats: ile osób/prezentów do kupienia, budżet całkowity
|
||||
- Shortcuts: "+ New Occasion", "+ Quick Add Gift"
|
||||
|
||||
#### 2. Okazja Detail (Single Occasion)
|
||||
- Nagłówek: nazwa, data, budżet, progress bar
|
||||
- 2 widoki (tabbed):
|
||||
- **Persons Tab:** lista osób z budżetami, możliwość dodania, usunięcia, edycji budżetu
|
||||
- **Gifts Tab (list view):** wszystkie prezenty dla okazji, szybka edycja statusu/ceny, agregat budżetu
|
||||
|
||||
#### 3. Osoba Detail (+ Gifts for this Person)
|
||||
- Info: imię, wiek, zainteresowania, notatki
|
||||
- Lista prezentów dla tej osoby (w kontekście aktualnej okazji)
|
||||
- Button: "AI Suggestions" (Phase 2)
|
||||
- Edycja danych osoby
|
||||
|
||||
#### 4. Gift Detail
|
||||
- Edycja: nazwa, status, cena, URL, opis
|
||||
- Link preview (opcjonalnie: og:image)
|
||||
- Price tracker (Phase 2): mini-chart, alerts
|
||||
- Delete/Archive
|
||||
|
||||
#### 5. Settings (Simple MVP)
|
||||
- Profil usera
|
||||
- Zmiana hasła
|
||||
- Preferencje powiadomień (Phase 2)
|
||||
- Logout
|
||||
|
||||
---
|
||||
|
||||
## 6. MVP Definition & Phasing
|
||||
|
||||
### MVP = Everything in Section 2 (Core Domain)
|
||||
- ✅ User auth
|
||||
- ✅ Persons management (global reusable list)
|
||||
- ✅ Occasions CRUD
|
||||
- ✅ Connect persons to occasions
|
||||
- ✅ Gifts CRUD + status tracking
|
||||
- ✅ Budget & postęp calculations
|
||||
- ✅ Aggregate gift list per occasion
|
||||
|
||||
**Timeline:** ~4–8 weeks (team-dependent)
|
||||
|
||||
### Phase 2 (Post-MVP, ~4 weeks after)
|
||||
- Price tracking via Ceneo + PriceSnapshot table
|
||||
- Price alerts & notifications (email/push)
|
||||
- AI gift recommendations (LLM integration)
|
||||
|
||||
### Phase 3+ (Nice-to-have, Later)
|
||||
- Collaborative lists (share occasion with family)
|
||||
- Analytics: roczne porównania, trendy wydatków
|
||||
- Export to PDF/calendar
|
||||
- Mobile app (native or responsive PWA)
|
||||
- Social: wishlist sharing, gift registry
|
||||
|
||||
---
|
||||
|
||||
## 7. Key Decisions & Assumptions (To Validate)
|
||||
|
||||
- [ ] Single-user MVP (no collaboration) – OK?
|
||||
- [ ] Auth method: email/password or OAuth? (assuming email/pwd for MVP)
|
||||
- [ ] Database: PostgreSQL assumption – confirm?
|
||||
- [ ] Ceneo integration: API lub web scraping? (Apify fallback)
|
||||
- [ ] AI model: OpenAI API czy local/self-hosted? (cost/privacy trade-off)
|
||||
- [ ] Monetization: subscription, freemium, ads? (affects feature gating)
|
||||
- [ ] Mobile-first design czy desktop-first? (assuming mobile-responsive on MVP)
|
||||
|
||||
---
|
||||
|
||||
## 8. Next Steps
|
||||
|
||||
1. **Validate domain model** – robi sens struktura User → Occasion → Person → Gift?
|
||||
2. **Detailed API spec** – co dokładnie zwraca endpoint?
|
||||
3. **UI wireframes** – sketche ekranów
|
||||
4. **Phase 1 backlog** – rozbić MVP na user stories + tasking
|
||||
5. **Tech setup** – inicjalizacja repo, struktura projektu, Prisma schema
|
||||
6. **First feature cycle** – login/register → Person CRUD → Occasion CRUD
|
||||
|
||||
---
|
||||
|
||||
## 9. Assumptions & Open Questions
|
||||
|
||||
### Business
|
||||
- Czy aplikacja ma być darmowa czy z opcjami premium?
|
||||
- Target audience: Polska czy szerzej?
|
||||
- Launch timeline?
|
||||
|
||||
### Technical
|
||||
- Czy self-hosted czy cloud (Vercel, Railway)?
|
||||
- Rate limits dla Ceneo API czy backup plan?
|
||||
- Jak long-term archivizować stare okazje?
|
||||
|
||||
### Product
|
||||
- Czy dark mode na MVP?
|
||||
- Czy offline support (PWA)?
|
||||
- Czy mobile app native czy Web + PWA?
|
||||
|
||||
---
|
||||
|
||||
**Document Version:** 1.0
|
||||
**Last Updated:** December 26, 2025
|
||||
**Status:** Awaiting validation & feedback
|
||||
105
gift.html
105
gift.html
@@ -25,6 +25,18 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -132,20 +144,6 @@
|
||||
|
||||
<!-- 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>
|
||||
@@ -155,6 +153,7 @@
|
||||
<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 -->
|
||||
@@ -189,6 +188,58 @@
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- AI Similar Products Section -->
|
||||
<section class="mt-12 bg-white rounded-[3.5rem] p-10 lg:p-12 shadow-sm border border-gray-100 mb-12">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 bg-indigo-900 rounded-2xl flex items-center justify-center text-white shadow-xl shadow-indigo-100">
|
||||
<i data-lucide="brain-circuit" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-black text-gray-900">Pasujące do tego prezentu</h3>
|
||||
<p class="text-gray-500 font-medium">Biorąc pod uwagę ten prezent, AI sugeruje dodatki, które dopełnią Twój plan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="inspirations.html" class="flex items-center gap-2 text-indigo-600 font-black text-sm uppercase tracking-widest hover:gap-3 transition-all">
|
||||
Szukaj więcej <i data-lucide="chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Similar Item 1 -->
|
||||
<div class="bg-gray-50 rounded-[2.5rem] p-6 border border-gray-100 hover:border-indigo-200 hover:bg-white transition-all group relative">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-black px-3 py-1 rounded-full z-10 shadow-lg">SUGESTIA AI</div>
|
||||
<div class="aspect-square bg-white rounded-3xl overflow-hidden mb-6 shadow-sm border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1559056191-4917a3bc9404?auto=format&fit=crop&q=80&w=400" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 mb-1 leading-tight">Kawa Specialty Ethiopia 250g</h4>
|
||||
<p class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-4">Zestaw idealny</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-black text-indigo-600">59 PLN</span>
|
||||
<button class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center hover:scale-110 transition-all">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Similar Item 2 -->
|
||||
<div class="bg-gray-50 rounded-[2.5rem] p-6 border border-gray-100 hover:border-indigo-200 hover:bg-white transition-all group relative">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-black px-3 py-1 rounded-full z-10 shadow-lg">UZUPEŁNIENIE</div>
|
||||
<div class="aspect-square bg-white rounded-3xl overflow-hidden mb-6 shadow-sm border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1579227114347-15d08fc37cae?auto=format&fit=crop&q=80&w=400" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 mb-1 leading-tight">Dzbanek do mleka Rhino</h4>
|
||||
<p class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-4">Akcesorium</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-black text-indigo-600">120 PLN</span>
|
||||
<button class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center hover:scale-110 transition-all">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -214,8 +265,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -285,5 +334,29 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- 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="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
241
global-holidays.html
Normal file
241
global-holidays.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Globalne Święta - 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="global-holidays.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||||
<i data-lucide="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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">
|
||||
<header class="mb-10">
|
||||
<h2 class="text-3xl font-black text-gray-900 leading-tight">Kalendarz Okazji</h2>
|
||||
<p class="text-gray-500 font-medium">Globalne święta i okazje, które warto zaplanować. Dodaj je do swoich planów jednym kliknięciem.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Holiday Card: Dzień Kobiet -->
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-40 bg-gradient-to-br from-pink-500 to-rose-400 relative p-8 flex flex-col justify-end">
|
||||
<div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-white">8 Marca</div>
|
||||
<h3 class="text-white text-2xl font-black">Dzień Kobiet</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-gray-500 mb-6 font-medium leading-relaxed">Międzynarodowe święto kobiet. Idealny czas na kwiaty, drobne upominki lub wspólne wyjście.</p>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="openModal('modal-new-occasion')" class="flex-1 bg-indigo-600 text-white py-3 rounded-2xl font-bold text-xs shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Użyj jako szablon
|
||||
</button>
|
||||
<button class="p-3 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
|
||||
<i data-lucide="info" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Holiday Card: Dzień Matki -->
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-40 bg-gradient-to-br from-indigo-500 to-purple-400 relative p-8 flex flex-col justify-end">
|
||||
<div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-white">26 Maja</div>
|
||||
<h3 class="text-white text-2xl font-black">Dzień Matki</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-gray-500 mb-6 font-medium leading-relaxed">Wyjątkowa okazja, by podziękować mamom. Najczęściej wybierane: biżuteria, kosmetyki, przeżycia.</p>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="openModal('modal-new-occasion')" class="flex-1 bg-indigo-600 text-white py-3 rounded-2xl font-bold text-xs shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Użyj jako szablon
|
||||
</button>
|
||||
<button class="p-3 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
|
||||
<i data-lucide="info" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Holiday Card: Dzień Dziecka -->
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-40 bg-gradient-to-br from-yellow-400 to-orange-400 relative p-8 flex flex-col justify-end">
|
||||
<div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-white">1 Czerwca</div>
|
||||
<h3 class="text-white text-2xl font-black">Dzień Dziecka</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-gray-500 mb-6 font-medium leading-relaxed">Radość dla najmłodszych. Warto zaplanować prezenty z wyprzedzeniem ze względu na duży popyt.</p>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="openModal('modal-new-occasion')" class="flex-1 bg-indigo-600 text-white py-3 rounded-2xl font-bold text-xs shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Użyj jako szablon
|
||||
</button>
|
||||
<button class="p-3 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
|
||||
<i data-lucide="info" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Holiday Card: Dzień Ojca -->
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-40 bg-gradient-to-br from-blue-600 to-indigo-500 relative p-8 flex flex-col justify-end">
|
||||
<div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-white">23 Czerwca</div>
|
||||
<h3 class="text-white text-2xl font-black">Dzień Ojca</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-gray-500 mb-6 font-medium leading-relaxed">Czas dla taty. Akcesoria do hobby, narzędzia lub dobra książka to zawsze trafiony wybór.</p>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="openModal('modal-new-occasion')" class="flex-1 bg-indigo-600 text-white py-3 rounded-2xl font-bold text-xs shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Użyj jako szablon
|
||||
</button>
|
||||
<button class="p-3 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
|
||||
<i data-lucide="info" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Holiday Card: Boże Narodzenie -->
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
||||
<div class="h-40 bg-gradient-to-br from-red-600 to-green-600 relative p-8 flex flex-col justify-end">
|
||||
<div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-white">24 Grudnia</div>
|
||||
<h3 class="text-white text-2xl font-black">Boże Narodzenie</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-gray-500 mb-6 font-medium leading-relaxed">Największa okazja prezentowa w roku. Wymaga wczesnego planowania i zarządzania dużym budżetem.</p>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="openModal('modal-new-occasion')" class="flex-1 bg-indigo-600 text-white py-3 rounded-2xl font-bold text-xs shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Użyj jako szablon
|
||||
</button>
|
||||
<button class="p-3 bg-gray-50 text-gray-400 rounded-2xl hover:text-indigo-600 transition-colors">
|
||||
<i data-lucide="info" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reminder Banner -->
|
||||
<section class="mt-12 bg-indigo-900 rounded-[3rem] p-10 text-white relative overflow-hidden shadow-2xl">
|
||||
<div class="relative z-10 flex flex-col md:flex-row items-center gap-8">
|
||||
<div class="w-16 h-16 bg-white/10 backdrop-blur-xl rounded-[1.5rem] flex items-center justify-center text-indigo-300 shrink-0">
|
||||
<i data-lucide="bell-ring" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-black mb-2">Pamiętaj o ważnych datach!</h4>
|
||||
<p class="text-indigo-200 text-sm max-w-lg leading-relaxed">Nasza sztuczna inteligencja śledzi nadchodzące okazje i powiadomi Cię z odpowiednim wyprzedzeniem, abyś zawsze miał czas na wybór idealnego prezentu.</p>
|
||||
</div>
|
||||
<div class="md:ml-auto">
|
||||
<button class="bg-white text-indigo-900 px-8 py-4 rounded-2xl font-black text-sm shadow-xl hover:bg-indigo-50 transition-all whitespace-nowrap">
|
||||
Zarządzaj Alertami
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -right-20 -bottom-20 w-80 h-80 bg-white/5 rounded-full blur-3xl text-white"></div>
|
||||
</section>
|
||||
</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="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
<!-- Modal: Nowa Okazja (from template) -->
|
||||
<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 leading-tight">Użyj Szablonu</h3>
|
||||
<button onclick="closeModal('modal-new-occasion')" class="p-2 hover:bg-gray-100 rounded-xl transition-colors">
|
||||
<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 Twojej Okazji</label>
|
||||
<input type="text" value="Dzień Matki 2026" 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" value="2026-05-26" class="form-input" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Twój Budżet (PLN)</label>
|
||||
<input type="number" placeholder="500.00" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-indigo-50 rounded-2xl border border-indigo-100">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-600"></i>
|
||||
<p class="text-[10px] font-black text-indigo-900 uppercase tracking-widest leading-none">Wsparcie AI</p>
|
||||
</div>
|
||||
<p class="text-xs text-indigo-600/80">Dodamy tę okazję do Twoich planów i automatycznie przygotujemy pierwsze propozycje prezentów.</p>
|
||||
</div>
|
||||
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-3xl font-black shadow-xl shadow-indigo-100 mt-4 flex items-center justify-center gap-2">
|
||||
Stwórz mój plan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
326
inspirations.html
Normal file
326
inspirations.html
Normal file
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Inspiracje - 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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||||
<i data-lucide="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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">
|
||||
<header class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div>
|
||||
<h2 class="text-3xl font-black text-gray-900 leading-tight">Inspiracje Prezentowe</h2>
|
||||
<p class="text-gray-500 font-medium">Kolekcje skomponowane przez AI na nadchodzące wydarzenia.</p>
|
||||
</div>
|
||||
<div class="flex gap-2 p-1 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-x-auto">
|
||||
<button class="px-5 py-2.5 bg-indigo-600 text-white text-xs font-black rounded-xl uppercase shadow-lg shadow-indigo-100 whitespace-nowrap">Dla Ciebie</button>
|
||||
<button class="px-5 py-2.5 text-gray-400 text-xs font-black rounded-xl uppercase hover:bg-gray-50 whitespace-nowrap">Boże Narodzenie</button>
|
||||
<button class="px-5 py-2.5 text-gray-400 text-xs font-black rounded-xl uppercase hover:bg-gray-50 whitespace-nowrap">Walentynki</button>
|
||||
<button class="px-5 py-2.5 text-gray-400 text-xs font-black rounded-xl uppercase hover:bg-gray-50 whitespace-nowrap">Dzień Kobiet</button>
|
||||
<button class="px-5 py-2.5 text-gray-400 text-xs font-black rounded-xl uppercase hover:bg-gray-50 whitespace-nowrap">Urodziny</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Collection: Boże Narodzenie -->
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-600">
|
||||
<i data-lucide="snowflake"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-gray-900">Bestsellery na Boże Narodzenie</h3>
|
||||
<p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Najczęściej rezerwowane w tym tygodniu</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
<!-- Product Card 1 -->
|
||||
<div class="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group flex flex-col relative">
|
||||
<button onclick="openModal('modal-add-to-plans')" class="absolute top-4 right-4 w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-200 z-10 hover:scale-110 transition-transform active:scale-95" title="Szybkie dodawanie">
|
||||
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<a href="product.html" class="flex flex-col flex-1">
|
||||
<div class="h-56 relative overflow-hidden shrink-0 rounded-t-[2.5rem]">
|
||||
<img src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-indigo-600 border border-indigo-100">Bestseller AI</div>
|
||||
</div>
|
||||
<div class="p-6 flex-1 flex flex-col">
|
||||
<div class="mb-4 flex-1">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Elektronika / Rozrywka</p>
|
||||
<h3 class="text-lg font-black text-gray-900 mb-2 leading-tight">iPad Air 11" z M2</h3>
|
||||
<p class="text-sm text-gray-500 font-medium">Idealny dla kreatywnych osób, studentów i pasjonatów designu.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mb-1">Cena od</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none tracking-tight">2 999 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full py-4 bg-gray-50 text-gray-900 rounded-2xl font-black text-xs hover:bg-gray-100 transition-all flex items-center justify-center gap-2">
|
||||
SZCZEGÓŁY PRODUKTU
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 2 -->
|
||||
<div class="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group flex flex-col relative">
|
||||
<button onclick="openModal('modal-add-to-plans')" class="absolute top-4 right-4 w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-200 z-10 hover:scale-110 transition-transform active:scale-95" title="Szybkie dodawanie">
|
||||
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<a href="product.html" class="flex flex-col flex-1">
|
||||
<div class="h-56 relative overflow-hidden shrink-0 rounded-t-[2.5rem]">
|
||||
<img src="https://images.unsplash.com/photo-1596460107916-430662021049?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-orange-600 border border-orange-100">Nowość AI</div>
|
||||
</div>
|
||||
<div class="p-6 flex-1 flex flex-col">
|
||||
<div class="mb-4 flex-1">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Dla Dzieci / Klocki</p>
|
||||
<h3 class="text-lg font-black text-gray-900 mb-2 leading-tight">LEGO Icons Ogród Botaniczny</h3>
|
||||
<p class="text-sm text-gray-500 font-medium">Zestaw kolekcjonerski dla dorosłych fanów botaniki i LEGO.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mb-1">Cena od</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none tracking-tight">349 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full py-4 bg-gray-50 text-gray-900 rounded-2xl font-black text-xs hover:bg-gray-100 transition-all flex items-center justify-center gap-2">
|
||||
SZCZEGÓŁY PRODUKTU
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collection: Dzień Kobiet -->
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 rounded-2xl bg-pink-50 flex items-center justify-center text-pink-600">
|
||||
<i data-lucide="flower-2"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-gray-900">Inspiracje na Dzień Kobiet</h3>
|
||||
<p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Elegancja, relaks i piękno</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
<!-- Product Card 3 -->
|
||||
<div class="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group flex flex-col relative">
|
||||
<button onclick="openModal('modal-add-to-plans')" class="absolute top-4 right-4 w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-200 z-10 hover:scale-110 transition-transform active:scale-95" title="Szybkie dodawanie">
|
||||
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<a href="product.html" class="flex flex-col flex-1">
|
||||
<div class="h-56 relative overflow-hidden shrink-0 rounded-t-[2.5rem]">
|
||||
<img src="https://images.unsplash.com/photo-1540555700478-4be289aef09a?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-pink-600 border border-pink-100">Relaks i Wellness</div>
|
||||
</div>
|
||||
<div class="p-6 flex-1 flex flex-col">
|
||||
<div class="mb-4 flex-1">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Wellness / Zdrowie</p>
|
||||
<h3 class="text-lg font-black text-gray-900 mb-2 leading-tight">Mata do akupresury Pranamat</h3>
|
||||
<p class="text-sm text-gray-500 font-medium">Ulga dla kręgosłupa i głęboki relaks po pracy. Hit social mediów.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mb-1">Cena od</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none tracking-tight">620 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full py-4 bg-gray-50 text-gray-900 rounded-2xl font-black text-xs hover:bg-gray-100 transition-all flex items-center justify-center gap-2">
|
||||
SZCZEGÓŁY PRODUKTU
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 4 -->
|
||||
<div class="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group flex flex-col relative">
|
||||
<button onclick="openModal('modal-add-to-plans')" class="absolute top-4 right-4 w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-200 z-10 hover:scale-110 transition-transform active:scale-95" title="Szybkie dodawanie">
|
||||
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<a href="product.html" class="flex flex-col flex-1">
|
||||
<div class="h-56 relative overflow-hidden shrink-0 rounded-t-[2.5rem]">
|
||||
<img src="https://images.unsplash.com/photo-1591337676887-a217a6970a8a?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
||||
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase text-emerald-600 border border-emerald-100">Smart Home</div>
|
||||
</div>
|
||||
<div class="p-6 flex-1 flex flex-col">
|
||||
<div class="mb-4 flex-1">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Dom / Lifestyle</p>
|
||||
<h3 class="text-lg font-black text-gray-900 mb-2 leading-tight">Zestaw Click & Grow</h3>
|
||||
<p class="text-sm text-gray-500 font-medium">Inteligentny ogród domowy, który sam dba o rośliny.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mb-1">Cena od</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none tracking-tight">459 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full py-4 bg-gray-50 text-gray-900 rounded-2xl font-black text-xs hover:bg-gray-100 transition-all flex items-center justify-center gap-2">
|
||||
SZCZEGÓŁY PRODUKTU
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Magic Help -->
|
||||
<section class="mt-16 bg-white rounded-[3rem] p-12 border border-indigo-100 shadow-xl shadow-indigo-50 relative overflow-hidden">
|
||||
<div class="relative z-10 flex flex-col lg:flex-row items-center gap-12">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-xl shadow-indigo-100">
|
||||
<i data-lucide="brain-circuit"></i>
|
||||
</div>
|
||||
<span class="text-sm font-black text-indigo-600 uppercase tracking-widest">Wyszukiwarka AI</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-black text-gray-900 mb-4 leading-tight">Nie znalazłeś tego, czego szukasz?</h3>
|
||||
<p class="text-lg text-gray-500 font-medium mb-8 leading-relaxed">Nasz asystent AI może przeszukać tysiące produktów online specjalnie pod kątem Twojej osoby. Powiedz nam tylko kogo chcesz uszczęśliwić.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" placeholder="Np: Szukam czegoś eleganckiego dla mamy, która kocha jogę..." class="form-input flex-1 py-4 px-6 rounded-2xl border-2 border-indigo-50 bg-gray-50 font-medium focus:bg-white focus:border-indigo-600 transition-all outline-none">
|
||||
<button class="bg-indigo-600 text-white px-10 py-4 rounded-2xl font-black text-sm shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
ZAPYTAJ AI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/3 aspect-square gradient-bg rounded-[4rem] flex flex-col items-center justify-center p-10 text-white relative group cursor-pointer hover:rotate-1 transition-all">
|
||||
<i data-lucide="sparkles" class="w-20 h-20 mb-6 group-hover:scale-110 transition-all duration-700"></i>
|
||||
<h4 class="text-2xl font-black text-center mb-2">Tryb "Radar Prezentowy"</h4>
|
||||
<p class="text-center text-white/70 text-sm font-medium">AI będzie monitorować nowości i promocje specjalnie pod Twój budżet.</p>
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</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-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="inspirations.html" class="flex flex-col items-center p-2 text-indigo-600">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
<!-- Modal: Dodaj do Planów -->
|
||||
<div id="modal-add-to-plans" 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 leading-tight">Dodaj do swoich planów</h3>
|
||||
<button onclick="closeModal('modal-add-to-plans')" class="p-2 hover:bg-gray-100 rounded-xl transition-colors">
|
||||
<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">Kogo chcesz obdarować?</label>
|
||||
<select class="form-input" required>
|
||||
<option value="" disabled selected>Wybierz osobę...</option>
|
||||
<option>Mama (Anna)</option>
|
||||
<option>Tata (Piotr)</option>
|
||||
<option>Siostra (Kasia)</option>
|
||||
<option>+ Dodaj nową osobę</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Na jaką okazję?</label>
|
||||
<select class="form-input" required>
|
||||
<option value="" disabled selected>Wybierz okazję...</option>
|
||||
<option>Urodziny (12 Marca)</option>
|
||||
<option>Dzień Matki (24 Maja)</option>
|
||||
<option>Boże Narodzenie 2025</option>
|
||||
<option>+ Stwórz nową okazję</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-5 bg-indigo-50 rounded-3xl border border-indigo-100 flex items-center gap-4">
|
||||
<div class="w-16 h-16 bg-white rounded-2xl overflow-hidden shrink-0 shadow-sm border border-indigo-100/50">
|
||||
<img id="modal-template-img" src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?q=80&w=200&auto=format&fit=crop" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-black text-indigo-900 mb-1 leading-tight">iPad Air 11" z M2</h4>
|
||||
<p class="text-lg font-black text-indigo-600 leading-none">2 999 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="w-full gradient-bg text-white py-4 rounded-3xl font-black shadow-xl shadow-indigo-100 mt-4 flex items-center justify-center gap-2">
|
||||
REZERWUJ W PLANACH
|
||||
</button>
|
||||
<p class="text-[10px] text-center text-gray-400 font-bold uppercase tracking-widest">Produkt zostanie dodany do sekcji "Idea" u danej osoby</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -26,6 +26,18 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -244,19 +256,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation (Same as index) -->
|
||||
<!-- 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-indigo-600">
|
||||
<i data-lucide="calendar" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Okazje</span>
|
||||
<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="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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
@@ -27,6 +27,15 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -153,13 +162,17 @@
|
||||
<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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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 href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
|
||||
409
person.html
409
person.html
@@ -30,6 +30,15 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -49,102 +58,71 @@
|
||||
<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">
|
||||
<!-- Enhanced Profile Header -->
|
||||
<section class="bg-white rounded-[3rem] p-8 md:p-12 shadow-sm border border-gray-100 mb-12 relative overflow-hidden">
|
||||
<div class="flex flex-col md:flex-row items-center gap-10 relative z-10">
|
||||
<div class="relative">
|
||||
<div class="w-32 h-32 rounded-[2.5rem] bg-indigo-50 border-4 border-white overflow-hidden shadow-2xl">
|
||||
<div class="w-40 h-40 rounded-[3rem] bg-indigo-50 border-8 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 onclick="openModal('modal-edit-person')" class="absolute -bottom-2 -right-2 bg-indigo-600 text-white p-3 rounded-2xl shadow-xl hover:scale-110 transition-all">
|
||||
<i data-lucide="edit-3" class="w-5 h-5"></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>
|
||||
<div class="flex flex-col md:flex-row items-center gap-4 mb-4">
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<h2 class="text-5xl font-black text-gray-900 tracking-tight">Mama</h2>
|
||||
<p class="text-xs font-black text-indigo-400 uppercase tracking-[0.2em] mt-1 ml-1">Imię: Anna</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<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>
|
||||
<span class="px-4 py-1 bg-pink-100 text-pink-700 text-[10px] font-black uppercase tracking-widest rounded-full">Kobieta</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>
|
||||
<p class="text-xl text-gray-500 font-medium mb-6 leading-relaxed">"Uwielbia gotować dla całej rodziny, pasjonuje się ogrodnictwem i nie wyobraża sobie dnia bez jogi."</p>
|
||||
|
||||
<!-- 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 class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400">
|
||||
<i data-lucide="calendar"></i>
|
||||
</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>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Urodziny</p>
|
||||
<p class="text-sm font-black text-gray-900">12 Marca (58 lat)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400">
|
||||
<i data-lucide="briefcase"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Zawód</p>
|
||||
<p class="text-sm font-black text-gray-900">Architekt krajobrazu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400">
|
||||
<i data-lucide="info"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Imieniny</p>
|
||||
<p class="text-sm font-black text-gray-900">24 Sierpnia</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400">
|
||||
<i data-lucide="shirt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Rozmiar</p>
|
||||
<p class="text-sm font-black text-gray-900">M / 39</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 top-0 w-64 h-64 bg-indigo-50 rounded-full -mr-32 -mt-32 opacity-50"></div>
|
||||
</section>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
@@ -153,23 +131,21 @@
|
||||
<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
|
||||
<i data-lucide="calendar-check" class="text-indigo-600"></i> Aktywne okazje i 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="space-y-6 mb-12">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<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>
|
||||
<a href="occasion.html" class="text-[10px] font-bold text-gray-400 hover:text-indigo-600 flex items-center gap-1 uppercase">Szczegóły <i data-lucide="chevron-right" class="w-3 h-3"></i></a>
|
||||
</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 onclick="window.location.href='gift.html'" class="bg-white p-5 rounded-[2.5rem] 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>
|
||||
@@ -187,21 +163,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Occasion: Urodziny (Mini-Occasion Event) -->
|
||||
<!-- Occasion: Urodziny (Treated as Normal Occasion) -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<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>
|
||||
<span class="text-xs font-black text-pink-600 uppercase tracking-widest">Urodziny (12 Marca)</span>
|
||||
</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>
|
||||
<span class="text-[10px] font-black text-pink-400 bg-pink-50 px-2 py-0.5 rounded-full uppercase">Za 76 dni</span>
|
||||
</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ł
|
||||
<div class="bg-white p-5 rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-20 h-20 bg-pink-50 rounded-2xl flex items-center justify-center text-pink-300">
|
||||
<i data-lucide="gift" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-gray-900 mb-1">Brak wybranych prezentów</h4>
|
||||
<p class="text-xs text-gray-400">Kliknij aby zaplanować urodziny</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-gray-50 text-pink-600 p-3 rounded-2xl hover:bg-pink-600 hover:text-white transition-all shadow-sm">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -233,37 +215,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: AI Profiler & Preferences -->
|
||||
<!-- Right Sidebar: Person Fact Sheet -->
|
||||
<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
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100 relative overflow-hidden">
|
||||
<h4 class="text-sm font-black text-gray-900 mb-6 flex items-center gap-2">
|
||||
<i data-lucide="scroll-text" class="text-indigo-600"></i> Specyfikacja Osoby
|
||||
</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 class="space-y-6">
|
||||
<!-- Etap życia -->
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Etap życia / Rola</p>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<i data-lucide="baby" class="w-3 h-3 text-indigo-400"></i>
|
||||
<span class="text-xs font-bold text-gray-700">Młoda babcia</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styl i Kolory -->
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Styl i Kolory</p>
|
||||
<p class="text-xs font-bold text-gray-700 mb-3">#boho #pastelowy-niebieski</p>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 border border-white shadow-sm" title="Pastel Blue"></div>
|
||||
<div class="w-6 h-6 rounded-full bg-orange-50 border border-white shadow-sm" title="Beige Boho"></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>
|
||||
</div>
|
||||
|
||||
<!-- Marki -->
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Ulubione Marki</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-gray-50 text-[10px] font-black text-gray-500 rounded-lg border border-gray-100 uppercase">Zara Home</span>
|
||||
<span class="px-2 py-1 bg-gray-50 text-[10px] font-black text-gray-500 rounded-lg border border-gray-100 uppercase">Duka</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UNIKAĆ -->
|
||||
<div class="p-4 bg-red-50 rounded-2xl border border-red-100">
|
||||
<p class="text-[10px] font-black text-red-400 uppercase tracking-widest mb-2 flex items-center gap-1">
|
||||
<i data-lucide="alert-triangle" class="w-3 h-3"></i> Unikać / Alergie
|
||||
</p>
|
||||
<p class="text-xs font-bold text-red-900">Brak alkoholu, alergia na orzechy, unika plastiku.</p>
|
||||
</div>
|
||||
|
||||
<!-- Dokumentacja AI (Notatki) -->
|
||||
<div class="p-4 bg-indigo-50/50 rounded-2xl border border-dashed border-indigo-100">
|
||||
<p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-2">Kontekst dla AI</p>
|
||||
<p class="text-xs text-indigo-900/70 italic leading-relaxed">"Mama ceni prezenty z duszą i ekologiczne materiały. Uwielbia czytać o architekturze ogrodów przy dobrej herbacie."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="openModal('modal-edit-person')" class="w-full mt-6 py-3 border-2 border-dashed border-gray-200 text-gray-400 text-xs font-black rounded-2xl hover:border-indigo-300 hover:text-indigo-600 transition-all uppercase tracking-widest">
|
||||
Edytuj specyfikację
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- Wishlista Link -->
|
||||
<a href="#" class="block p-6 bg-gradient-to-br from-gray-900 to-gray-800 rounded-[2rem] text-white hover:scale-[1.02] transition-all shadow-xl">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Zewnętrzna lista</span>
|
||||
<i data-lucide="external-link" class="w-4 h-4 text-gray-500"></i>
|
||||
</div>
|
||||
<h5 class="text-lg font-black mb-1">Wishlista na Amazon</h5>
|
||||
<p class="text-xs text-gray-500">Ostatnia aktualizacja: 2 dni temu</p>
|
||||
</a>
|
||||
|
||||
<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="w-10 h-10 bg-gray-100 rounded-lg shrink-0 flex items-center justify-center text-gray-300">
|
||||
<i data-lucide="package"></i>
|
||||
</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>
|
||||
@@ -287,32 +313,129 @@
|
||||
<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>
|
||||
<form class="p-2 space-y-10 overflow-y-auto max-h-[70vh]">
|
||||
<!-- Section 1: Tożsamość i Relacja -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<i data-lucide="user" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<h4 class="text-sm font-black text-gray-900 uppercase tracking-widest">Tożsamość</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa wyświetlana</label>
|
||||
<input type="text" value="Mama" class="form-input" placeholder="np. Mama, Skarbi">
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Faktyczne Imię</label>
|
||||
<input type="text" value="Anna" class="form-input" placeholder="Dla lepszego AI">
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Płeć</label>
|
||||
<select class="form-input">
|
||||
<option>Mężczyzna</option>
|
||||
<option selected>Kobieta</option>
|
||||
<option>Inna</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md: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>
|
||||
<option>Praca / Biznes</option>
|
||||
<option>Partner / Partnerka</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">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Etap życia / Rola</label>
|
||||
<input type="text" value="Młoda babcia" class="form-input" placeholder="np. Student, Młody rodzic, Emeryt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Kalendarz -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-pink-50 flex items-center justify-center text-pink-600">
|
||||
<i data-lucide="calendar" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-black text-gray-900 uppercase tracking-widest">Ważne Daty</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Data Urodzenia</label>
|
||||
<input type="date" value="1967-03-12" class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Imieniny (MM-DD)</label>
|
||||
<input type="text" value="08-24" class="form-input" placeholder="np. 05-24">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 3: Styl i Preferencje -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-600">
|
||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-black text-gray-900 uppercase tracking-widest">Upodobania i Rozmiary</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Zawód / Pasja</label>
|
||||
<input type="text" value="Architekt krajobrazu" class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Rozmiary (Góra/Dół/But)</label>
|
||||
<input type="text" value="M / 38 / 39" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Lubiane kolory / Styl</label>
|
||||
<input type="text" value="Pastelowy niebieski, styl boho" class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Ulubione marki</label>
|
||||
<input type="text" placeholder="np. Zara, Apple, Nike" 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">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1 text-red-400">Czego unikać / Alergie (Bardzo ważne!)</label>
|
||||
<input type="text" value="Brak alkoholu, alergia na orzechy" class="form-input border-red-100 focus:ring-red-500 bg-red-50/30 text-red-900" placeholder="np. Słodycze, mocne perfumy, srebro">
|
||||
</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
|
||||
</div>
|
||||
|
||||
<!-- Section 4: Linki i Notatki -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<i data-lucide="link-2" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-black text-gray-900 uppercase tracking-widest">Źródła Pomysłów</h4>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Link do Wishlisty / Profilu</label>
|
||||
<input type="url" placeholder="https://www.amazon.pl/wishlist/..." class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Dodatkowe notatki dla AI</label>
|
||||
<textarea class="form-input h-24 pt-4" placeholder="Opisz osobowość, marzenia, wspólne żarty..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 sticky bottom-0 bg-white pb-2">
|
||||
<button type="submit" class="w-full gradient-bg text-white py-5 rounded-3xl font-black shadow-2xl shadow-indigo-200 transition-all hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-3">
|
||||
<i data-lucide="save"></i>
|
||||
Zapisz rozszerzony profil
|
||||
</button>
|
||||
<p class="text-[9px] text-center text-gray-400 mt-4 font-bold uppercase tracking-widest">Wszystkie dane są szyfrowane i używane tylko do Twoich planów</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -357,24 +480,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Nav -->
|
||||
<!-- 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="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="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
@@ -382,5 +509,3 @@
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
persons.html
31
persons.html
@@ -30,6 +30,15 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -222,17 +231,21 @@
|
||||
<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 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="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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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 href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
|
||||
36
product.html
36
product.html
@@ -25,6 +25,18 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -174,6 +186,30 @@
|
||||
</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="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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();
|
||||
|
||||
|
||||
@@ -26,6 +26,15 @@
|
||||
<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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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>
|
||||
@@ -145,19 +154,23 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Nav -->
|
||||
<!-- 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 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="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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
29
updates.html
29
updates.html
@@ -26,7 +26,15 @@
|
||||
</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="global-holidays.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="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.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="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.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="book-open"></i> Poradniki
|
||||
</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
|
||||
@@ -144,19 +152,20 @@
|
||||
<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 href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</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 href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user