make more AI
This commit is contained in:
Norbert Maciaszek
236
occasion.html
236
occasion.html
@@ -35,6 +35,10 @@
|
||||
<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="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors group">
|
||||
<i data-lucide="search" class="group-hover:text-indigo-600 transition-colors"></i> Wyszukiwarka
|
||||
<span class="ml-auto bg-indigo-100 text-indigo-600 text-[8px] px-1.5 py-0.5 rounded font-black uppercase">AI</span>
|
||||
</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>
|
||||
@@ -83,17 +87,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 min-w-[300px]">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-bold text-gray-400">Budżet całkowity</span>
|
||||
<span class="text-lg font-black text-gray-800">5 000 PLN</span>
|
||||
<div class="bg-white rounded-[2rem] p-8 shadow-sm border border-gray-100 flex-1 lg:max-w-lg">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest block mb-1">Budżet całkowity</span>
|
||||
<span class="text-3xl font-black text-gray-900 leading-none">5 000 PLN</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest block mb-1">Postęp prezentów</span>
|
||||
<span class="text-xl font-black text-indigo-600 flex items-center gap-2 justify-end">
|
||||
<span class="bg-indigo-100 text-indigo-600 text-[10px] px-2 py-0.5 rounded-lg">4 / 12</span>
|
||||
<i data-lucide="package" class="w-4 h-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 h-2 rounded-full mb-3 overflow-hidden">
|
||||
|
||||
<div class="w-full bg-gray-100 h-3 rounded-full mb-6 overflow-hidden">
|
||||
<div class="h-full progress-bar-gradient" style="width: 80%"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-indigo-600">Wykorzystano 4 000 PLN</span>
|
||||
<span class="text-xs font-bold text-gray-400">Pozostało 1 000 PLN</span>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6 pt-2 border-t border-gray-50">
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-tighter mb-1">Wykorzystano</p>
|
||||
<p class="text-sm font-black text-gray-900">4 000 PLN</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-tighter mb-1">Pozostało</p>
|
||||
<p class="text-sm font-black text-emerald-600">1 000 PLN</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[9px] font-black text-red-400 uppercase tracking-tighter mb-1 whitespace-nowrap">Brak pomysłu</p>
|
||||
<p class="text-sm font-black text-red-500">3 osoby</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,112 +126,108 @@
|
||||
<!-- Tabs -->
|
||||
<div class="flex border-b border-gray-200 mb-8 space-x-8">
|
||||
<a href="occasion.html" class="pb-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600">Lista Osób</a>
|
||||
<a href="occasion-gifts.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors">Wszystkie Prezenty</a>
|
||||
<a href="occasion-gifts.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors">Prezenty</a>
|
||||
<a href="occasion-ai.html" class="pb-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors flex items-center gap-2">
|
||||
Analiza AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-1.5 py-0.5 rounded uppercase">Beta</span>
|
||||
AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-1.5 py-0.5 rounded uppercase">Beta</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Content (Persons List) -->
|
||||
<!-- Dashboard Content (Persons Grid) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Person Card 1 -->
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-indigo-50 flex items-center justify-center">
|
||||
<img src="https://ui-avatars.com/api/?name=Mama&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors cursor-pointer" onclick="window.location.href='person.html'">Mama</h4>
|
||||
<p class="text-xs font-semibold text-gray-400">Relacja: Mama</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
|
||||
<i data-lucide="package" class="w-4 h-4 text-indigo-500"></i>
|
||||
<!-- Person Card 1 -->
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-indigo-50 flex items-center justify-center">
|
||||
<img src="https://ui-avatars.com/api/?name=Mama&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">Ekspres do kawy</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded-lg">Kupiony</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl opacity-60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
|
||||
<i data-lucide="gift" class="w-4 h-4 text-purple-500"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors cursor-pointer" onclick="window.location.href='person.html'">Mama</h4>
|
||||
<p class="text-xs font-semibold text-gray-400">Relacja: Mama</p>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">Książka kucharska</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-gray-400 bg-white px-2 py-1 rounded-lg border border-gray-100">Idea</span>
|
||||
<button class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<div>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
|
||||
<p class="font-bold text-indigo-600 text-lg">1 200 PLN</p>
|
||||
</div>
|
||||
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Person Card 2 -->
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-purple-50 flex items-center justify-center">
|
||||
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
|
||||
|
||||
<div class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
|
||||
<i data-lucide="package" class="w-4 h-4 text-indigo-500"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">Ekspres do kawy</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded-lg">Kupiony</span>
|
||||
</div>
|
||||
|
||||
<!-- Individual AI Greetings -->
|
||||
<div class="flex items-center justify-between p-3 bg-indigo-50/50 rounded-2xl border border-indigo-100 hover:bg-indigo-100/50 transition-colors cursor-pointer group/ai">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white rounded-xl flex items-center justify-center shadow-sm">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-600 animate-pulse"></i>
|
||||
</div>
|
||||
<span class="text-xs font-black text-indigo-700 uppercase tracking-tighter">Życzenia dla Mamy</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[9px] font-bold text-indigo-400 uppercase">-1</span>
|
||||
<i data-lucide="zap" class="w-2.5 h-2.5 text-indigo-400 fill-indigo-400"></i>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-indigo-300 group-hover/ai:translate-x-1 transition-transform ml-1"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors">Tata</h4>
|
||||
<p class="text-xs font-semibold text-gray-400">Relacja: Ojciec</p>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
|
||||
<p class="font-bold text-indigo-600 text-lg">1 200 PLN</p>
|
||||
</div>
|
||||
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-6 flex flex-col items-center justify-center text-center space-y-3 mb-6">
|
||||
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 animate-pulse"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-indigo-700">Brak prezentów</p>
|
||||
<p class="text-[10px] text-indigo-500 font-medium">Kliknij, aby AI wygenerowało propozycje</p>
|
||||
</div>
|
||||
<button class="bg-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-xl hover:bg-indigo-700 transition-colors">
|
||||
Generuj pomysły
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<div>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
|
||||
<p class="font-bold text-indigo-600 text-lg">800 PLN</p>
|
||||
<!-- Person Card 2 -->
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-purple-50 flex items-center justify-center">
|
||||
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-full h-full rounded-2xl object-cover" alt="User">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors">Tata</h4>
|
||||
<p class="text-xs font-semibold text-gray-400">Relacja: Ojciec</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-6 flex flex-col items-center justify-center text-center space-y-3 mb-6">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-indigo-600 animate-pulse"></i>
|
||||
<p class="text-[10px] text-indigo-500 font-bold uppercase">Brak prezentów</p>
|
||||
<button class="bg-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-xl">Pomysły AI</button>
|
||||
</div>
|
||||
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Person Card -->
|
||||
<div class="border-2 border-dashed border-gray-200 rounded-3xl p-6 flex flex-col items-center justify-center text-center hover:border-indigo-200 hover:bg-indigo-50/10 transition-all cursor-pointer group">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center text-gray-400 group-hover:text-indigo-600 shadow-sm border border-gray-100 mb-4 transition-colors">
|
||||
<i data-lucide="person-standing" class="w-8 h-8"></i>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<div>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Budżet na osobę</p>
|
||||
<p class="font-bold text-indigo-600 text-lg">800 PLN</p>
|
||||
</div>
|
||||
<button onclick="openModal('modal-add-gift')" class="bg-indigo-50 text-indigo-600 p-3 rounded-2xl hover:bg-indigo-100 transition-colors">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Person Card -->
|
||||
<div class="border-2 border-dashed border-gray-200 rounded-3xl p-6 flex flex-col items-center justify-center text-center hover:border-indigo-200 hover:bg-indigo-50/10 transition-all cursor-pointer group">
|
||||
<i data-lucide="person-standing" class="w-8 h-8 text-gray-300 mb-4"></i>
|
||||
<h4 class="font-bold text-gray-400 text-sm">Dodaj osobę</h4>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-400 group-hover:text-indigo-600 transition-colors">Dodaj kolejną osobę</h4>
|
||||
<p class="text-xs text-gray-400 px-6 mt-2">Wybierz z listy kontaktów lub stwórz nową osobę.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
@@ -221,6 +242,29 @@
|
||||
<i data-lucide="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- AI Suggestion Prompt -->
|
||||
<div class="bg-indigo-50 border border-indigo-100 rounded-[2rem] p-5 mb-8 flex items-center justify-between group cursor-pointer hover:bg-indigo-100 transition-all border-dashed">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm transition-transform group-hover:rotate-12">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 animate-pulse"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-black text-indigo-900">Brak pomysłu?</p>
|
||||
<p class="text-[10px] text-indigo-600 font-bold uppercase tracking-tight">AI zaproponuje prezent dla tej osoby</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-indigo-600 text-white text-[10px] font-black px-4 py-2.5 rounded-xl flex items-center gap-1 shadow-lg shadow-indigo-100 group-hover:bg-indigo-700">
|
||||
GENERUJ <span class="bg-indigo-500 px-1.5 py-0.5 rounded ml-1 text-[8px]">-1 <i data-lucide="zap" class="w-2 h-2 inline fill-white border-none"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex py-4 items-center mb-4">
|
||||
<div class="flex-grow border-t border-gray-100"></div>
|
||||
<span class="flex-shrink mx-4 text-[10px] font-black text-gray-300 uppercase tracking-widest">Lub wprowadź ręcznie</span>
|
||||
<div class="flex-grow border-t border-gray-100"></div>
|
||||
</div>
|
||||
|
||||
<form class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Nazwa Prezentu</label>
|
||||
|
||||
Reference in New Issue
Block a user