add for-me
This commit is contained in:
Norbert Maciaszek
@@ -27,6 +27,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -26,6 +26,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -27,6 +27,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
533
for-me-locked.html
Normal file
533
for-me-locked.html
Normal file
@@ -0,0 +1,533 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dla Mnie (Podstawowy) - 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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
||||
<i data-lucide="gift" class="text-white w-6 h-6"></i>
|
||||
</div>
|
||||
<span class="text-xl font-black tracking-tighter">GIFT<span class="text-indigo-600">PLANNER</span></span>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-4 py-4 space-y-1">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i> Okazje
|
||||
</a>
|
||||
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="users" class="w-5 h-5"></i> Osoby
|
||||
</a>
|
||||
<a href="notes.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="pen-tool" class="w-5 h-5"></i> Notatki
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">AI Assistant</span>
|
||||
</div>
|
||||
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="sparkles" class="w-5 h-5"></i> Wyszukiwarka
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="image" class="w-5 h-5"></i> Inspiracje
|
||||
</a>
|
||||
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i> Święta
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Wiedza & Finanse</span>
|
||||
</div>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="book-open" class="w-5 h-5"></i> Poradniki
|
||||
</a>
|
||||
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="wallet" class="w-5 h-5"></i> Budżet
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="mt-auto p-6">
|
||||
<a href="/settings.html">
|
||||
<div class="bg-gray-50 rounded-3xl p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">N</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold">Norbert</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="zap" class="w-2.5 h-2.5 text-yellow-500 fill-yellow-500"></i>
|
||||
<p class="text-[10px] font-bold text-gray-500 uppercase">120 Tokenów</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
|
||||
<header class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-900">Moja Strefa Marzeń (Limitowana) ✨</h2>
|
||||
<p class="text-gray-500">Planuj bez limitów z pakietem Oszczędzanie.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-white border border-gray-100 px-4 py-2 rounded-2xl shadow-sm flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 cursor-pointer">
|
||||
<div class="w-2 h-2 rounded-full bg-gray-300"></div>
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Radar Zablokowany</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-gray-100"></div>
|
||||
<a href="for-me.html" class="text-[10px] font-black text-indigo-600 uppercase hover:underline">Podgląd: Aktywny pakiet</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
<!-- Left Column: Profile & Inspiration -->
|
||||
<div class="lg:col-span-4 space-y-8">
|
||||
<!-- Profile Analysis Card (Synced with person.html spec) -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 border border-gray-100 shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute -top-10 -right-10 w-32 h-32 bg-indigo-50 rounded-full blur-3xl group-hover:bg-indigo-100 transition-colors"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-14 h-14 rounded-2xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-100">
|
||||
<i data-lucide="brain-circuit" class="w-7 h-7"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-black text-gray-900 leading-none">Mój Profil AI</h3>
|
||||
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mt-1">Twój portret psychologiczny</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Cechy Charakteru -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Cechy Charakteru</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Smart Shopper</span>
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Minimalista</span>
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Zorientowany na Tech</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pasje i Zainteresowania -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Moje Pasje</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Specialty Coffee</span>
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Smart Home</span>
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Design IT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styl życia -->
|
||||
<div class="p-4 bg-amber-50/50 rounded-2xl border border-amber-100/30">
|
||||
<p class="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-2 leading-none">Mój Styl Życia</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-[11px] font-bold text-gray-700">
|
||||
<i data-lucide="briefcase" class="w-3.5 h-3.5 text-amber-500"></i>
|
||||
<span>Praca zdalna / Freelance</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[11px] font-bold text-gray-700">
|
||||
<i data-lucide="coffee" class="w-3.5 h-3.5 text-amber-500"></i>
|
||||
<span>Home Office Enthusiast</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estetyka -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Ulubiona Estetyka</p>
|
||||
<p class="text-[11px] font-bold text-gray-700 leading-relaxed mb-3">#minimalizm #aluminium #darkmode</p>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-5 h-5 rounded-full bg-[#1a1a1a] border border-white shadow-sm" title="Black"></div>
|
||||
<div class="w-5 h-5 rounded-full bg-[#e5e5e5] border border-white shadow-sm" title="Silver"></div>
|
||||
<div class="w-5 h-5 rounded-full bg-[#6366f1] border border-white shadow-sm" title="Indigo"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Głęboki Kontekst AI -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-2 leading-none">Analiza Radaru AI</p>
|
||||
<p class="text-[11px] text-indigo-900/60 font-medium italic leading-relaxed pl-4 border-l-2 border-indigo-100">
|
||||
Cenisz funkcjonalność ponad formę. Polujesz na sprzęty, które realnie usprawniają Twoje workflow. AI szuka dla Ciebie okazji technicznych z wysokim współczynnikiem cena/jakość.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="openModal('modal-edit-my-spec')" class="w-full mt-8 py-4 bg-gray-50 border border-gray-100 text-gray-400 text-[10px] font-black rounded-2xl hover:bg-white hover:border-indigo-200 hover:text-indigo-600 transition-all uppercase tracking-widest flex items-center justify-center gap-2">
|
||||
Edytuj profilowanie AI <i data-lucide="sparkles" class="w-3 h-3 text-indigo-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Monthly Inspiration Card -->
|
||||
<section class="bg-gradient-to-br from-gray-900 to-indigo-950 rounded-[2.5rem] p-8 text-white relative overflow-hidden shadow-2xl">
|
||||
<div class="absolute top-0 right-0 p-6">
|
||||
<span class="px-3 py-1 bg-indigo-500/20 backdrop-blur-md rounded-full text-[9px] font-black text-indigo-300 border border-indigo-400/30 uppercase tracking-widest">Inspiracja Grudnia</span>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-black mb-2 italic">"To może Cię zainteresować"</h3>
|
||||
<p class="text-xs text-gray-400 font-medium leading-relaxed">Na podstawie Twojej pasji do <span class="text-indigo-300 font-bold underline decoration-indigo-500/50">Specialty Coffee</span> znaleźliśmy coś nietypowego:</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/5 rounded-3xl p-2 mb-6 border border-white/10 group cursor-pointer">
|
||||
<img id="inspiration-img" src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?q=80&w=800&auto=format&fit=crop" class="w-full h-48 object-cover rounded-[1.5rem] group-hover:scale-[1.02] transition-transform duration-500">
|
||||
<div class="p-4">
|
||||
<h4 class="font-black text-lg">Przenośny Ekspres Flair 58</h4>
|
||||
<p class="text-xs text-gray-400">Ręczny ekspres dźwigniowy dla purystów espresso.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-500/10 rounded-2xl p-4 border border-indigo-500/20 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-indigo-400 shrink-0 mt-0.5"></i>
|
||||
<p class="text-xs text-indigo-100/80 font-medium leading-relaxed">
|
||||
Dlaczego? Ten model to absolutny hit wśród entuzjastów manualnego parzenia, a Ty ostatnio sprawdzałeś młynki do espresso. To kolejny krok w Twojej kawowej podróży.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-4 rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-indigo-950">
|
||||
Sprawdź szczegóły
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Radar & Alerts -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
|
||||
<!-- Private Radar Input -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 border border-gray-100 shadow-sm relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 -m-4">
|
||||
<div class="w-24 h-24 bg-indigo-50 rounded-full flex items-center justify-center opacity-20">
|
||||
<i data-lucide="radar" class="w-12 h-12 text-indigo-600 animate-pulse"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-gray-900">Moja Lista Życzeń</h3>
|
||||
</div>
|
||||
<div class="bg-amber-50 text-amber-600 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest border border-amber-100 flex items-center gap-1.5">
|
||||
<i data-lucide="info" class="w-3 h-3"></i> Monitoring cen wymaga Pakietu
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 mb-8 font-medium">Dodaj produkty, które Cię interesują. Będą widoczne na liście poniżej, jednak bez aktywnego śledzenia zmian cen.</p>
|
||||
|
||||
<form class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input type="url" placeholder="Wklej link do produktu..." class="w-full bg-gray-50 border-2 border-gray-100 rounded-2xl px-6 py-4 text-sm font-medium focus:border-indigo-500 focus:outline-none transition-all pr-12">
|
||||
<i data-lucide="link-2" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-300 w-5 h-5"></i>
|
||||
</div>
|
||||
<button type="submit" class="bg-gray-900 text-white px-8 py-4 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-black transition-all shadow-lg shadow-gray-200 shrink-0 flex items-center gap-2">
|
||||
DODAJ DO LISTY <i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Active Alerts / Tracking Grid -->
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-6 px-2">
|
||||
<h3 class="text-xl font-black text-gray-900">Zapisane Produkty (3)</h3>
|
||||
<button class="p-2 bg-white rounded-xl border border-gray-100 text-gray-400 hover:text-indigo-600 transition-all font-black text-[10px] uppercase tracking-widest flex items-center gap-2">
|
||||
<i data-lucide="list" class="w-4 h-4"></i> Widok listy
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Simple Product Card 1 -->
|
||||
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all group relative">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-20 h-20 bg-gray-50 rounded-2xl overflow-hidden shrink-0 border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1621330396173-e41b1cafd17f?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover grayscale-[0.2]">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Elektronika</span>
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 line-clamp-2 text-sm leading-snug">Sony WH-1000XM5 Noise Canceling Headphones</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 border-dashed relative group/lock">
|
||||
<div class="flex flex-col items-center justify-center py-2 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-gray-300 mb-2 shadow-sm">
|
||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Historia cen zablokowana</p>
|
||||
</div>
|
||||
<!-- Hover invite -->
|
||||
<div class="absolute inset-0 bg-indigo-600/90 rounded-2xl opacity-0 group-hover/lock:opacity-100 transition-all flex items-center justify-center p-4 cursor-pointer">
|
||||
<span class="text-[9px] font-black text-white uppercase tracking-[0.2em]">Odblokuj monitoring</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple Product Card 2 -->
|
||||
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all group relative">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-20 h-20 bg-gray-50 rounded-2xl overflow-hidden shrink-0 border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1592155157642-990ff5839274?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Gaming</span>
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 line-clamp-2 text-sm leading-snug">Gra Elden Ring - Shadow of the Erdtree Edition</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 border-dashed relative group/lock">
|
||||
<div class="flex flex-col items-center justify-center py-2 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-gray-300 mb-2 shadow-sm">
|
||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Historia cen zablokowana</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-indigo-600/90 rounded-2xl opacity-0 group-hover/lock:opacity-100 transition-all flex items-center justify-center p-4 cursor-pointer">
|
||||
<span class="text-[9px] font-black text-white uppercase tracking-[0.2em]">Odblokuj monitoring</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upgrade CTA Card -->
|
||||
<div class="md:col-span-2 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-[2rem] p-8 border border-indigo-100 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-16 h-16 bg-white rounded-3xl shadow-xl shadow-indigo-100 flex items-center justify-center text-indigo-600">
|
||||
<i data-lucide="trending-down" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-black text-gray-900">Chcesz kupować taniej?</h4>
|
||||
<p class="text-sm text-gray-500 font-medium">Odblokuj historię cen i alerty o okazjach dla wszystkich swoich produktów.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="window.location.href='settings.html'" class="bg-indigo-600 text-white px-8 py-4 rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-xl shadow-indigo-100 hover:scale-105 transition-all whitespace-nowrap">
|
||||
SPRAWDŹ PAKIET OSZCZĘDZANIE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<nav class="lg:hidden fixed bottom-6 left-6 right-6 bg-gray-900/90 backdrop-blur-xl border border-white/10 p-4 rounded-[2rem] flex justify-around items-center z-50 shadow-2xl shadow-indigo-500/20">
|
||||
<a href="dashboard.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="for-me.html" class="flex flex-col items-center text-white">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="occasions.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="calendar" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="persons.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="users" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="search.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Modal: Moja Specyfikacja AI (Synced with person.html) -->
|
||||
<div id="modal-edit-my-spec" class="modal-overlay">
|
||||
<div class="modal-content !max-w-4xl !p-0 overflow-hidden text-left">
|
||||
<div class="p-8 md:p-10 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-gray-900 leading-none mb-2">Mój Profil AI</h3>
|
||||
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest">Zbuduj swój portret dla silnika rekomendacji</p>
|
||||
</div>
|
||||
<button onclick="closeModal('modal-edit-my-spec')" class="w-12 h-12 rounded-2xl bg-white border border-gray-100 flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="p-8 md:p-10 space-y-12 overflow-y-auto max-h-[75vh]">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 text-left">
|
||||
<!-- Left Column: Character & Interests -->
|
||||
<div class="space-y-10">
|
||||
<!-- Personality Traits -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="fingerprint" class="w-5 h-5 text-indigo-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Cechy Charakteru</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Minimalista</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Smart Shopper</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Praktyczny</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer">
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Nowoczesny</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interests -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="tent" class="w-5 h-5 text-emerald-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Moje Pasje</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 text-left">
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Specialty Coffee</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Smart Home</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Design IT</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer">
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Technologia</div>
|
||||
</label>
|
||||
<button type="button" class="px-4 py-2 rounded-full border-2 border-dashed border-gray-100 text-[9px] font-black uppercase tracking-widest text-gray-300 hover:border-emerald-200 hover:text-emerald-500 transition-all">+ Inne</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lifestyle -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="briefcase" class="w-5 h-5 text-amber-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Styl Życia</h4>
|
||||
</div>
|
||||
<div class="space-y-4 text-left">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Zajęcie / Etap</label>
|
||||
<select class="form-input !bg-white shadow-sm">
|
||||
<option selected>Praca zdalna / Freelance</option>
|
||||
<option>Rozwój kariery / Korporacja</option>
|
||||
<option>Własny biznes</option>
|
||||
<option>Student / Edukacja</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Środowisko</label>
|
||||
<select class="form-input !bg-white shadow-sm">
|
||||
<option selected>Home Office Enthusiast</option>
|
||||
<option>Częste podróże / Nomada</option>
|
||||
<option>Stabilne mieszkanie w mieście</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Aesthetic & Notes -->
|
||||
<div class="space-y-10">
|
||||
<!-- Aesthetic Preferences -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="palette" class="w-5 h-5 text-indigo-400"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Estetyka</h4>
|
||||
</div>
|
||||
<div class="space-y-4 text-left">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Ulubione Materiały</label>
|
||||
<input type="text" value="Aluminium, szkło, matowe tworzywa" class="form-input !bg-white shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Dominujące kolory</label>
|
||||
<input type="text" value="Black, Silver, Indigo" class="form-input !bg-white shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes for AI -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-indigo-600"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Notatki dla AI</h4>
|
||||
</div>
|
||||
<textarea class="form-input !bg-white h-[120px] py-4 leading-relaxed shadow-sm text-sm" placeholder="Opisz co cenisz w produktach, na co zwracasz uwagę..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Restrictions -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<i data-lucide="slash" class="w-4 h-4"></i>
|
||||
<h4 class="text-[10px] font-black uppercase tracking-widest">Czego unikać</h4>
|
||||
</div>
|
||||
<textarea class="form-input !bg-white border-red-50 focus:ring-red-500 h-[80px] py-3 text-xs" placeholder="Nielubiane marki, kolory, materiały..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-gray-100 sticky bottom-0 bg-white text-left">
|
||||
<button type="submit" class="w-full gradient-bg text-white py-5 rounded-[1.5rem] font-black shadow-2xl shadow-indigo-200 transition-all hover:scale-[1.01] active:scale-[0.98] uppercase tracking-[0.2em] text-xs">
|
||||
Zapisz mój profil AI
|
||||
</button>
|
||||
<p class="text-[9px] text-center text-gray-400 mt-4 font-black uppercase tracking-widest opacity-50">Zmiany wpłyną na inspiracje i alerty radaru</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
613
for-me.html
Normal file
613
for-me.html
Normal file
@@ -0,0 +1,613 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dla Mnie - 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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
||||
<i data-lucide="gift" class="text-white w-6 h-6"></i>
|
||||
</div>
|
||||
<span class="text-xl font-black tracking-tighter">GIFT<span class="text-indigo-600">PLANNER</span></span>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-4 py-4 space-y-1">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i> Okazje
|
||||
</a>
|
||||
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="users" class="w-5 h-5"></i> Osoby
|
||||
</a>
|
||||
<a href="notes.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="pen-tool" class="w-5 h-5"></i> Notatki
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">AI Assistant</span>
|
||||
</div>
|
||||
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="sparkles" class="w-5 h-5"></i> Wyszukiwarka
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="image" class="w-5 h-5"></i> Inspiracje
|
||||
</a>
|
||||
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i> Święta
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Wiedza & Finanse</span>
|
||||
</div>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="book-open" class="w-5 h-5"></i> Poradniki
|
||||
</a>
|
||||
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="wallet" class="w-5 h-5"></i> Budżet
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="mt-auto p-6">
|
||||
<a href="/settings.html">
|
||||
<div class="bg-gray-50 rounded-3xl p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">N</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold">Norbert</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="zap" class="w-2.5 h-2.5 text-yellow-500 fill-yellow-500"></i>
|
||||
<p class="text-[10px] font-bold text-gray-500 uppercase">120 Tokenów</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
|
||||
<header class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-900">Moja Strefa Marzeń ✨</h2>
|
||||
<p class="text-gray-500">Miejsce na Twoje osobiste linki, alerty cenowe i inspiracje AI.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-white border border-gray-100 px-4 py-2 rounded-2xl shadow-sm flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 cursor-pointer">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Radar Aktywny</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-gray-100"></div>
|
||||
<a href="for-me-locked.html" class="text-[10px] font-black text-indigo-600 uppercase hover:underline">Podgląd: Bez pakietu</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
<!-- Left Column: Profile & Inspiration -->
|
||||
<div class="lg:col-span-4 space-y-8">
|
||||
<!-- Profile Analysis Card (Synced with person.html spec) -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 border border-gray-100 shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute -top-10 -right-10 w-32 h-32 bg-indigo-50 rounded-full blur-3xl group-hover:bg-indigo-100 transition-colors"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-14 h-14 rounded-2xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-100">
|
||||
<i data-lucide="brain-circuit" class="w-7 h-7"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-black text-gray-900 leading-none">Mój Profil AI</h3>
|
||||
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mt-1">Twój portret psychologiczny</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Cechy Charakteru -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Cechy Charakteru</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Smart Shopper</span>
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Minimalista</span>
|
||||
<span class="px-2.5 py-1 bg-indigo-50 text-[10px] font-black text-indigo-600 rounded-lg border border-indigo-100 uppercase tracking-tighter">Zorientowany na Tech</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pasje i Zainteresowania -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Moje Pasje</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Specialty Coffee</span>
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Smart Home</span>
|
||||
<span class="px-2.5 py-1 bg-emerald-50 text-[10px] font-black text-emerald-600 rounded-lg border border-emerald-100 uppercase tracking-tighter">Design IT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styl życia -->
|
||||
<div class="p-4 bg-amber-50/50 rounded-2xl border border-amber-100/30">
|
||||
<p class="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-2 leading-none">Mój Styl Życia</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-[11px] font-bold text-gray-700">
|
||||
<i data-lucide="briefcase" class="w-3.5 h-3.5 text-amber-500"></i>
|
||||
<span>Praca zdalna / Freelance</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[11px] font-bold text-gray-700">
|
||||
<i data-lucide="coffee" class="w-3.5 h-3.5 text-amber-500"></i>
|
||||
<span>Home Office Enthusiast</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estetyka -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3 leading-none">Ulubiona Estetyka</p>
|
||||
<p class="text-[11px] font-bold text-gray-700 leading-relaxed mb-3">#minimalizm #aluminium #darkmode</p>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-5 h-5 rounded-full bg-[#1a1a1a] border border-white shadow-sm" title="Black"></div>
|
||||
<div class="w-5 h-5 rounded-full bg-[#e5e5e5] border border-white shadow-sm" title="Silver"></div>
|
||||
<div class="w-5 h-5 rounded-full bg-[#6366f1] border border-white shadow-sm" title="Indigo"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Głęboki Kontekst AI -->
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-2 leading-none">Analiza Radaru AI</p>
|
||||
<p class="text-[11px] text-indigo-900/60 font-medium italic leading-relaxed pl-4 border-l-2 border-indigo-100">
|
||||
Cenisz funkcjonalność ponad formę. Polujesz na sprzęty, które realnie usprawniają Twoje workflow. AI szuka dla Ciebie okazji technicznych z wysokim współczynnikiem cena/jakość.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="openModal('modal-edit-my-spec')" class="w-full mt-8 py-4 bg-gray-50 border border-gray-100 text-gray-400 text-[10px] font-black rounded-2xl hover:bg-white hover:border-indigo-200 hover:text-indigo-600 transition-all uppercase tracking-widest flex items-center justify-center gap-2">
|
||||
Edytuj profilowanie AI <i data-lucide="sparkles" class="w-3 h-3 text-indigo-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Monthly Inspiration Card -->
|
||||
<section class="bg-gradient-to-br from-gray-900 to-indigo-950 rounded-[2.5rem] p-8 text-white relative overflow-hidden shadow-2xl">
|
||||
<div class="absolute top-0 right-0 p-6">
|
||||
<span class="px-3 py-1 bg-indigo-500/20 backdrop-blur-md rounded-full text-[9px] font-black text-indigo-300 border border-indigo-400/30 uppercase tracking-widest">Inspiracja Grudnia</span>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-black mb-2 italic">"To może Cię zainteresować"</h3>
|
||||
<p class="text-xs text-gray-400 font-medium leading-relaxed">Na podstawie Twojej pasji do <span class="text-indigo-300 font-bold underline decoration-indigo-500/50">Specialty Coffee</span> znaleźliśmy coś nietypowego:</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/5 rounded-3xl p-2 mb-6 border border-white/10 group cursor-pointer">
|
||||
<img id="inspiration-img" src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?q=80&w=800&auto=format&fit=crop" class="w-full h-48 object-cover rounded-[1.5rem] group-hover:scale-[1.02] transition-transform duration-500">
|
||||
<div class="p-4">
|
||||
<h4 class="font-black text-lg">Przenośny Ekspres Flair 58</h4>
|
||||
<p class="text-xs text-gray-400">Ręczny ekspres dźwigniowy dla purystów espresso.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-500/10 rounded-2xl p-4 border border-indigo-500/20 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-indigo-400 shrink-0 mt-0.5"></i>
|
||||
<p class="text-xs text-indigo-100/80 font-medium leading-relaxed">
|
||||
Dlaczego? Ten model to absolutny hit wśród entuzjastów manualnego parzenia, a Ty ostatnio sprawdzałeś młynki do espresso. To kolejny krok w Twojej kawowej podróży.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-4 rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-indigo-950">
|
||||
Sprawdź szczegóły
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Radar & Alerts -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
|
||||
<!-- Private Radar Input -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 border border-gray-100 shadow-sm relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 -m-4">
|
||||
<div class="w-24 h-24 bg-indigo-50 rounded-full flex items-center justify-center opacity-20">
|
||||
<i data-lucide="radar" class="w-12 h-12 text-indigo-600 animate-pulse"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600">
|
||||
<i data-lucide="link" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-gray-900">Prywatny Radar</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-8 font-medium">Wklej link do produktu, na który polujesz (np. na Black Friday). AI zacznie monitorować cenę i powiadomi Cię, gdy spadnie poniżej Twojego prógu.</p>
|
||||
|
||||
<form class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input type="url" placeholder="Wklej link do oferty (Amazon, Allegro, MediaExpert...)" class="w-full bg-gray-50 border-2 border-gray-100 rounded-2xl px-6 py-4 text-sm font-medium focus:border-indigo-500 focus:outline-none transition-all pr-12">
|
||||
<i data-lucide="search" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-300 w-5 h-5"></i>
|
||||
</div>
|
||||
<button type="submit" class="bg-indigo-600 text-white px-8 py-4 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 shrink-0">
|
||||
Aktywuj monitoring
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Active Alerts / Tracking Grid -->
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-6 px-2">
|
||||
<h3 class="text-xl font-black text-gray-900">Aktywne Alerty (3)</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 bg-white rounded-xl border border-gray-100 text-gray-400 hover:text-indigo-600 transition-all">
|
||||
<i data-lucide="filter" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Alert Card 1 -->
|
||||
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm hover:shadow-xl transition-all group overflow-hidden relative">
|
||||
<div class="flex items-start gap-4 mb-6 relative z-10">
|
||||
<div class="w-20 h-20 bg-gray-50 rounded-2xl overflow-hidden shrink-0">
|
||||
<img src="https://images.unsplash.com/photo-1621330396173-e41b1cafd17f?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[9px] font-black text-indigo-500 uppercase tracking-widest">Elektronika</span>
|
||||
<div class="flex items-center gap-1 group/delete cursor-pointer">
|
||||
<i data-lucide="trash-2" class="w-3.5 h-3.5 text-gray-300 group-hover/delete:text-red-500 transition-colors"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 line-clamp-2 text-sm leading-snug">Sony WH-1000XM5 Noise Canceling Headphones</h4>
|
||||
<p class="text-[10px] text-gray-400 font-bold mt-1 uppercase flex items-center gap-1">
|
||||
<i data-lucide="map-pin" class="w-3 h-3"></i> Amazon.pl
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6 relative z-10">
|
||||
<div class="bg-gray-50 rounded-2xl p-4">
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-widest mb-1 leading-none">Aktualna Cena</p>
|
||||
<p class="text-xl font-black text-gray-900 leading-none">1 399 <span class="text-[10px] text-gray-400">PLN</span></p>
|
||||
</div>
|
||||
<div class="bg-indigo-50/50 rounded-2xl p-4 border border-indigo-100/50">
|
||||
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-1 leading-none">Oszczędność</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none">-100 <span class="text-[10px] text-indigo-400">PLN</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Chart Demo (Premium Feature) -->
|
||||
<div class="h-24 mb-6 opacity-80">
|
||||
<canvas id="priceChartSony"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between relative z-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
|
||||
<span class="text-[10px] font-bold text-gray-500 uppercase">Monitoring ON</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[9px] font-black text-gray-300 uppercase leading-none mb-1">Cena wyjściowa</p>
|
||||
<p class="text-xs font-bold text-gray-400 leading-none line-through">1 499 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Card 2: PRICE DROP! -->
|
||||
<div class="bg-emerald-50 rounded-[2rem] p-6 border border-emerald-100 shadow-md hover:shadow-xl transition-all group overflow-hidden relative ring-4 ring-emerald-200/50">
|
||||
<div class="absolute top-0 right-0 p-4">
|
||||
<span class="bg-emerald-500 text-white px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-tighter animate-bounce">OKAZJA!</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-4 mb-6 relative z-10">
|
||||
<div class="w-20 h-20 bg-white rounded-2xl overflow-hidden shrink-0 shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1592155157642-990ff5839274?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Gaming</span>
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 line-clamp-2 text-sm leading-snug">Gra Elden Ring - Shadow of the Erdtree Edition (PS5)</h4>
|
||||
<p class="text-[10px] text-gray-400 font-bold mt-1 uppercase flex items-center gap-1">
|
||||
<i data-lucide="map-pin" class="w-3 h-3"></i> Media Expert
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6 relative z-10">
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm border border-emerald-100">
|
||||
<p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest mb-1 leading-none">AKTUALNA CENA</p>
|
||||
<p class="text-xl font-black text-emerald-700 leading-none">239 <span class="text-[10px] text-emerald-600">PLN</span></p>
|
||||
</div>
|
||||
<div class="bg-emerald-500 rounded-2xl p-4 text-white shadow-lg shadow-emerald-200">
|
||||
<p class="text-[9px] font-black text-emerald-100 uppercase tracking-widest mb-1 leading-none">Twój Próg</p>
|
||||
<p class="text-xl font-black leading-none">250 <span class="text-[10px] text-emerald-100">PLN</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-xl font-black text-[10px] uppercase tracking-widest transition-all flex items-center justify-center gap-2">
|
||||
Kup za 239 PLN <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Alert Card 3 -->
|
||||
<div class="bg-white rounded-[2rem] p-6 border border-gray-100 shadow-sm hover:shadow-xl transition-all group overflow-hidden relative">
|
||||
<div class="flex items-start gap-4 mb-6 relative z-10">
|
||||
<div class="w-20 h-20 bg-gray-50 rounded-2xl overflow-hidden shrink-0">
|
||||
<img src="https://images.unsplash.com/photo-1595246140625-573b715d11dc?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[9px] font-black text-indigo-500 uppercase tracking-widest">Dom</span>
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 line-clamp-2 text-sm leading-snug">Zestaw Klocków LEGO Icons 10330 McLaren MP4/4</h4>
|
||||
<p class="text-[10px] text-gray-400 font-bold mt-1 uppercase flex items-center gap-1">
|
||||
<i data-lucide="map-pin" class="w-3 h-3"></i> Allegro
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6 relative z-10">
|
||||
<div class="bg-gray-50 rounded-2xl p-4">
|
||||
<p class="text-[9px] font-black text-gray-400 uppercase tracking-widest mb-1 leading-none">Aktualna Cena</p>
|
||||
<p class="text-xl font-black text-gray-900 leading-none">329 <span class="text-[10px] text-gray-400">PLN</span></p>
|
||||
</div>
|
||||
<div class="bg-indigo-50/50 rounded-2xl p-4 border border-indigo-100/50">
|
||||
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-1 leading-none">Twój Próg</p>
|
||||
<p class="text-xl font-black text-indigo-600 leading-none">290 <span class="text-[10px] text-indigo-400">PLN</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between relative z-10">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Czekam na spadek...</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[9px] font-black text-gray-300 uppercase leading-none mb-1">Oszczędność</p>
|
||||
<p class="text-xs font-bold text-amber-500 leading-none">Potrzeba -39 PLN</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<nav class="lg:hidden fixed bottom-6 left-6 right-6 bg-gray-900/90 backdrop-blur-xl border border-white/10 p-4 rounded-[2rem] flex justify-around items-center z-50 shadow-2xl shadow-indigo-500/20">
|
||||
<a href="dashboard.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="for-me.html" class="flex flex-col items-center text-white">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="occasions.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="calendar" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="persons.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="users" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="search.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Modal: Moja Specyfikacja AI (Synced with person.html) -->
|
||||
<div id="modal-edit-my-spec" class="modal-overlay">
|
||||
<div class="modal-content !max-w-4xl !p-0 overflow-hidden text-left">
|
||||
<div class="p-8 md:p-10 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-gray-900 leading-none mb-2">Mój Profil AI</h3>
|
||||
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest">Zbuduj swój portret dla silnika rekomendacji</p>
|
||||
</div>
|
||||
<button onclick="closeModal('modal-edit-my-spec')" class="w-12 h-12 rounded-2xl bg-white border border-gray-100 flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="p-8 md:p-10 space-y-12 overflow-y-auto max-h-[75vh]">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 text-left">
|
||||
<!-- Left Column: Character & Interests -->
|
||||
<div class="space-y-10">
|
||||
<!-- Personality Traits -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="fingerprint" class="w-5 h-5 text-indigo-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Cechy Charakteru</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Minimalista</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Smart Shopper</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Praktyczny</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer group">
|
||||
<input type="checkbox" class="hidden peer">
|
||||
<div class="p-3 rounded-xl border border-gray-100 bg-white text-gray-400 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 transition-all flex items-center gap-2 text-left">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-200 peer-checked:bg-indigo-600"></div>
|
||||
<span class="text-[10px] font-black uppercase tracking-wider">Nowoczesny</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interests -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="tent" class="w-5 h-5 text-emerald-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Moje Pasje</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 text-left">
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Specialty Coffee</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Smart Home</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer" checked>
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Design IT</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input type="checkbox" class="hidden peer">
|
||||
<div class="px-4 py-2 rounded-full border border-gray-100 bg-white text-[9px] font-black uppercase tracking-widest text-gray-400 peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 transition-all">Technologia</div>
|
||||
</label>
|
||||
<button type="button" class="px-4 py-2 rounded-full border-2 border-dashed border-gray-100 text-[9px] font-black uppercase tracking-widest text-gray-300 hover:border-emerald-200 hover:text-emerald-500 transition-all">+ Inne</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lifestyle -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="briefcase" class="w-5 h-5 text-amber-500"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Styl Życia</h4>
|
||||
</div>
|
||||
<div class="space-y-4 text-left">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Zajęcie / Etap</label>
|
||||
<select class="form-input !bg-white shadow-sm">
|
||||
<option selected>Praca zdalna / Freelance</option>
|
||||
<option>Rozwój kariery / Korporacja</option>
|
||||
<option>Własny biznes</option>
|
||||
<option>Student / Edukacja</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Środowisko</label>
|
||||
<select class="form-input !bg-white shadow-sm">
|
||||
<option selected>Home Office Enthusiast</option>
|
||||
<option>Częste podróże / Nomada</option>
|
||||
<option>Stabilne mieszkanie w mieście</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Aesthetic & Notes -->
|
||||
<div class="space-y-10">
|
||||
<!-- Aesthetic Preferences -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="palette" class="w-5 h-5 text-indigo-400"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Estetyka</h4>
|
||||
</div>
|
||||
<div class="space-y-4 text-left">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Ulubione Materiały</label>
|
||||
<input type="text" value="Aluminium, szkło, matowe tworzywa" class="form-input !bg-white shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Dominujące kolory</label>
|
||||
<input type="text" value="Black, Silver, Indigo" class="form-input !bg-white shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes for AI -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-indigo-600"></i>
|
||||
<h4 class="text-xs font-black text-gray-900 uppercase tracking-widest">Notatki dla AI</h4>
|
||||
</div>
|
||||
<textarea class="form-input !bg-white h-[120px] py-4 leading-relaxed shadow-sm text-sm" placeholder="Opisz co cenisz w produktach, na co zwracasz uwagę..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Restrictions -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<i data-lucide="slash" class="w-4 h-4"></i>
|
||||
<h4 class="text-[10px] font-black uppercase tracking-widest">Czego unikać</h4>
|
||||
</div>
|
||||
<textarea class="form-input !bg-white border-red-50 focus:ring-red-500 h-[80px] py-3 text-xs" placeholder="Nielubiane marki, kolory, materiały..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-gray-100 sticky bottom-0 bg-white text-left">
|
||||
<button type="submit" class="w-full gradient-bg text-white py-5 rounded-[1.5rem] font-black shadow-2xl shadow-indigo-200 transition-all hover:scale-[1.01] active:scale-[0.98] uppercase tracking-[0.2em] text-xs">
|
||||
Zapisz mój profil AI
|
||||
</button>
|
||||
<p class="text-[9px] text-center text-gray-400 mt-4 font-black uppercase tracking-widest opacity-50">Zmiany wpłyną na inspiracje i alerty radaru</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Price Chart for Sony Headphones (demonstrating the saving package)
|
||||
const ctxSony = document.getElementById('priceChartSony').getContext('2d');
|
||||
new Chart(ctxSony, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['1', '5', '10', '15', '20', '25', '30'],
|
||||
datasets: [{
|
||||
label: 'Cena',
|
||||
data: [1499, 1480, 1499, 1450, 1420, 1399, 1399],
|
||||
borderColor: '#6366f1',
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
fill: true,
|
||||
backgroundColor: (context) => {
|
||||
const gradient = context.chart.ctx.createLinearGradient(0, 0, 0, 80);
|
||||
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.1)');
|
||||
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
|
||||
return gradient;
|
||||
}
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
x: { display: false },
|
||||
y: { display: false }
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -26,6 +26,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -195,7 +198,7 @@
|
||||
|
||||
<!-- Gated content (blurred) -->
|
||||
<div class="opacity-10 pointer-events-none">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-4">Aktualna Cena (Ceneo)</p>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-4">Aktualna Cena Rynkowa</p>
|
||||
<h3 class="text-4xl font-black text-gray-900 leading-none mb-6">2 499 PLN</h3>
|
||||
<div class="h-32 bg-gray-100 rounded-2xl mb-8"></div>
|
||||
<div class="space-y-3">
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -26,6 +26,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -269,13 +272,13 @@
|
||||
<!-- Right Column -->
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- Premium Price Card (Ceneo) -->
|
||||
<!-- Premium Price Card (Market Analysis) -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-emerald-100 relative">
|
||||
<div class="absolute -top-3 left-8 bg-emerald-500 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest border-4 border-white shadow-sm">
|
||||
Monitorowanie Aktywne
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-6 pt-2">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Najlepsza Cena (Ceneo)</p>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Najlepsza Cena Rynkowa</p>
|
||||
<span class="text-green-600 text-[10px] font-black flex items-center">
|
||||
<i data-lucide="trending-down" class="w-3 h-3 mr-1"></i> -120 PLN Dziś!
|
||||
</span>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -109,8 +109,9 @@
|
||||
<!-- Brands/Social Proof -->
|
||||
<div class="py-12 border-y border-gray-50 bg-gray-50/30">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex flex-wrap items-center justify-around gap-8 grayscale opacity-40">
|
||||
<span class="text-2xl font-black tracking-tighter uppercase tracking-widest text-gray-300">Sklepy PL</span>
|
||||
<span class="text-2xl font-black tracking-tighter">APPLE</span>
|
||||
<span class="text-2xl font-black tracking-tighter">CENEO</span>
|
||||
<span class="text-2xl font-black tracking-tighter">AMAZON</span>
|
||||
<span class="text-2xl font-black tracking-tighter">OPENAI</span>
|
||||
<span class="text-2xl font-black tracking-tighter">STRIPE</span>
|
||||
<span class="text-2xl font-black tracking-tighter">ALLEGRO</span>
|
||||
@@ -141,7 +142,7 @@
|
||||
<i data-lucide="line-chart" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-4">Tracker Cen</h3>
|
||||
<p class="text-gray-500 leading-relaxed font-medium">Dodaj link z Ceneo, a my będziemy śledzić cenę dla Ciebie. Powiadomimy Cię, gdy nadarzy się okazja na zakup.</p>
|
||||
<p class="text-gray-500 leading-relaxed font-medium">Dodaj link do produktu, a my będziemy śledzić cenę dla Ciebie. Powiadomimy Cię, gdy nadarzy się okazja na zakup.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
|
||||
@@ -55,6 +55,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -301,7 +304,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Link do produktu (np. Ceneo)</label>
|
||||
<label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Link do produktu</label>
|
||||
<input type="url" placeholder="https://..." class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -26,6 +26,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -690,6 +693,9 @@
|
||||
<a href="dashboard.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="for-me.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="occasions.html" class="flex flex-col items-center text-gray-500">
|
||||
<i data-lucide="calendar" class="w-6 h-6"></i>
|
||||
</a>
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -26,6 +26,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -160,7 +163,7 @@
|
||||
<div class="space-y-8">
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Najniższa cena Ceneo</p>
|
||||
<p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Najniższa cena rynkowa</p>
|
||||
<span class="text-green-600 bg-green-50 px-2 py-0.5 rounded-md text-[10px] font-black underline cursor-pointer">OKAZJA!</span>
|
||||
</div>
|
||||
<h3 class="text-4xl font-black text-gray-900 mb-6">2 489 PLN</h3>
|
||||
@@ -180,8 +183,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="https://ceneo.pl" target="_blank" class="w-full flex items-center justify-center gap-2 py-4 bg-indigo-600 text-white font-bold rounded-2xl shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Pokaż oferty w sklepach <i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
<a href="#" class="w-full flex items-center justify-center gap-2 py-4 bg-indigo-600 text-white font-bold rounded-2xl shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">
|
||||
Pokaż oferty rynkowe <i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="w-10 h-10 bg-blue-400/20 rounded-full flex items-center justify-center text-blue-300">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<p class="text-sm font-medium">Alerty o spadkach cen Ceneo</p>
|
||||
<p class="text-sm font-medium">Inteligentne alerty o spadkach cen</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10">
|
||||
<div class="w-10 h-10 bg-purple-400/20 rounded-full flex items-center justify-center text-purple-300">
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
@@ -183,7 +186,7 @@
|
||||
<h4 class="text-lg font-black text-gray-900 mb-1">Pakiet "Oszczędzanie"</h4>
|
||||
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-widest mb-4">AKTYWNY • 14.99 PLN / msc</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Historia cen Ceneo (30 dni)</li>
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Historia cen dla Twoich produktów (od momentu dodania, do 30 dni wstecz)</li>
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Alerty o spadkach cen</li>
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Powiadomienia okazje cenowe</li>
|
||||
</ul>
|
||||
@@ -221,7 +224,7 @@
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-900">Alerty cenowe Ceneo</p>
|
||||
<p class="text-sm font-bold text-gray-900">Alerty o spadkach cen</p>
|
||||
<p class="text-[10px] text-gray-400 font-medium">Informuj mnie, gdy cena prezentu spadnie o więcej niż 10%.</p>
|
||||
</div>
|
||||
<div class="relative inline-flex items-center cursor-pointer">
|
||||
|
||||
24
spec.md
24
spec.md
@@ -21,7 +21,7 @@ Aplikacja wspomaga planowanie i śledzenie prezentów na dowolne okazje (święt
|
||||
- Budżet: TBD
|
||||
- Deadline MVP: TBD
|
||||
- Zespół: TBD
|
||||
- Geograficznie: Polska (Ceneo integration)
|
||||
- Geograficznie: Polska (Market integration)
|
||||
|
||||
---
|
||||
|
||||
@@ -107,7 +107,7 @@ Baza rzeczywistych przedmiotów, które mogą być prezentami.
|
||||
- `ean` / `sku`
|
||||
- `imageUrl`
|
||||
- `tags` (kategorie: kuchnia, gaming, itp.)
|
||||
- `ceneoUrl` (link do porównywarki)
|
||||
- `productUrl` (link do produktu / porównywarki)
|
||||
- `globalMinPrice`, `globalMaxPrice` (z historii śledzenia)
|
||||
|
||||
---
|
||||
@@ -165,12 +165,12 @@ Obliczone **automatycznie** na podstawie prezentów i okazji.
|
||||
|
||||
## 3. Secondary Features – Phase 2 (Post-MVP)
|
||||
|
||||
### Price Tracking via Ceneo
|
||||
### Price Tracking & Market Analysis
|
||||
|
||||
**Architecture:**
|
||||
- User dodaje `url` do prezentu (dowolny link, np. ceneo.pl/...)
|
||||
- User dodaje `url` do prezentu (dowolny link)
|
||||
- Backend: cron job (raz dziennie lub częściej) + manualne "refresh" przez UI
|
||||
- Pobieranie aktualnej ceny z API Ceneo / scrapingiem (Apify)
|
||||
- Pobieranie aktualnej ceny z API sklepów / scrapingiem (Apify)
|
||||
- Zapis snapshotu ceny do tabeli `PriceSnapshot(giftId, price, timestamp, source)`
|
||||
|
||||
**Pola Gift (extended):**
|
||||
@@ -235,7 +235,7 @@ AI generuje personalizowane życzenia na podstawie szerokiego kontekstu:
|
||||
- Wersjonowanie: migrations
|
||||
|
||||
- **External Services:**
|
||||
- Ceneo API / Apify scraper (Phase 2)
|
||||
- Market APIs / Apify scraper (Phase 2)
|
||||
- OpenAI API lub self-hosted LLM (Phase 2)
|
||||
- Email service (e.g., SendGrid, Resend) dla alertów (Phase 2)
|
||||
|
||||
@@ -292,7 +292,7 @@ Product
|
||||
├── imageUrl
|
||||
├── tags (JSON)
|
||||
├── ean
|
||||
├── ceneo_url
|
||||
├── product_url
|
||||
├── created_at
|
||||
|
||||
Gift (Planning Instance)
|
||||
@@ -379,7 +379,7 @@ IndividualOccasion (Zrezygnowano - używamy tabeli Occasion)
|
||||
|
||||
#### 4. Karta Produktu (Product Master)
|
||||
- Globalna historia ceny (wykres 30 dni)
|
||||
- Porównywarka Ceneo (oferty sklepów)
|
||||
- Porównywarka cenowa (oferty sklepów)
|
||||
- Lista planów, w których występuje ten produkt (re-use)
|
||||
|
||||
#### 5. Gift Planning (Instance View)
|
||||
@@ -418,7 +418,7 @@ Widok okazji podzielony na zakładki:
|
||||
|
||||
**Timeline:** ~4–8 weeks (team-dependent)
|
||||
|
||||
- Price tracking via Ceneo + PriceSnapshot table
|
||||
- Price tracking + PriceSnapshot table
|
||||
- Price alerts & notifications (email/push)
|
||||
- AI gift recommendations (LLM integration)
|
||||
- **Wyszukiwarka AI (AI Search)**: Globalna wyszukiwarka prezentów oparta na LLM z analizą dopasowania (match-making).
|
||||
@@ -437,11 +437,11 @@ Widok okazji podzielony na zakładki:
|
||||
- [ ] 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)
|
||||
- [ ] Market integration: API lub web scraping? (Apify fallback)
|
||||
- [ ] AI model: OpenAI API czy local/self-hosted? (cost/privacy trade-off)
|
||||
- [ ] Monetization:
|
||||
- **Tokens**: Monthly allowance + top-ups for AI actions.
|
||||
- **Pakiet "Oszczędzanie"**: 14.99 PLN / msc. Odblokowuje historię cen (Ceneo) i alerty cenowe.
|
||||
- **Pakiet "Oszczędzanie"**: 14.99 PLN / msc. Odblokowuje historię cen (od momentu dodania produktu, do 30 dni wstecz) i alerty cenowe.
|
||||
- **Pakiet "Kontrola budżetu"**: 6.99 PLN / msc. Odblokowuje zaawansowane analizy budżetowe, wykresy wydatków i prognozy.
|
||||
- [ ] Mobile-first design czy desktop-first? (assuming mobile-responsive on MVP)
|
||||
|
||||
@@ -467,7 +467,7 @@ Widok okazji podzielony na zakładki:
|
||||
|
||||
### Technical
|
||||
- Czy self-hosted czy cloud (Vercel, Railway)?
|
||||
- Rate limits dla Ceneo API czy backup plan?
|
||||
- Rate limits dla API sklepów czy backup plan?
|
||||
- Jak long-term archivizować stare okazje?
|
||||
|
||||
### Product
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="for-me.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="user" class="w-5 h-5"></i> Dla Mnie
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user