241 lines
18 KiB
HTML
241 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Radar Prezentowy - Gift Planner</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="main.js" defer></script>
|
|
</head>
|
|
<body class="bg-[#0f111a] text-white min-h-screen">
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar (Dark Version) -->
|
|
<aside class="w-64 bg-[#161925] border-r border-white/5 hidden lg:flex flex-col">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-500/20">
|
|
<i data-lucide="gift"></i>
|
|
</div>
|
|
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">Gift Planner</h1>
|
|
</div>
|
|
<nav class="flex-1 px-4 py-4 space-y-2">
|
|
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="layout-dashboard"></i> Dashboard
|
|
</a>
|
|
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="bell"></i> Aktualizacje
|
|
</a>
|
|
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="sparkles"></i> Inspiracje
|
|
</a>
|
|
<a href="gift-radar.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 rounded-xl font-medium">
|
|
<i data-lucide="radar" class="animate-pulse"></i> Radar AI
|
|
</a>
|
|
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="book-open"></i> Poradniki
|
|
</a>
|
|
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="calendar"></i> Okazje
|
|
</a>
|
|
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="users"></i> Osoby
|
|
</a>
|
|
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-xl transition-all">
|
|
<i data-lucide="wallet"></i> Budżet
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-y-auto bg-[#0f111a] p-4 lg:p-8 custom-scrollbar">
|
|
<!-- Radar Header -->
|
|
<header class="mb-12 relative">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600/10 blur-[100px] rounded-full -mr-20 -mt-20"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="bg-indigo-600 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-white shadow-lg shadow-indigo-600/20">System Aktywny</span>
|
|
<span class="text-indigo-400 text-[10px] font-black uppercase tracking-widest">Skanowanie w toku...</span>
|
|
</div>
|
|
<h2 class="text-4xl font-black text-white mb-4 leading-tight">Radar Prezentowy AI</h2>
|
|
<p class="text-gray-400 max-w-2xl font-medium text-lg">System monitorujący w czasie rzeczywistym okazje, spadek cen i trendy, dopasowane do Twoich zapisanych osób i budżetów.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Radar Interface -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
|
|
<!-- Visual Radar / High Level Insight -->
|
|
<div class="lg:col-span-2 bg-[#161925] rounded-[3rem] p-10 border border-white/5 relative overflow-hidden group">
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="flex items-center justify-between mb-12">
|
|
<div>
|
|
<h3 class="text-xl font-black text-white mb-1">Mapa Okazji</h3>
|
|
<p class="text-xs text-gray-500 font-bold uppercase tracking-widest leading-none">Wszystkie powiązane osoby</p>
|
|
</div>
|
|
<div class="flex -space-x-3">
|
|
<img src="https://ui-avatars.com/api/?name=Mama&background=random" class="w-10 h-10 rounded-full border-4 border-[#161925]" alt="">
|
|
<img src="https://ui-avatars.com/api/?name=Tata&background=random" class="w-10 h-10 rounded-full border-4 border-[#161925]" alt="">
|
|
<img src="https://ui-avatars.com/api/?name=Siostra&background=random" class="w-10 h-10 rounded-full border-4 border-[#161925]" alt="">
|
|
<div class="w-10 h-10 rounded-full bg-[#0f111a] border-4 border-[#161925] flex items-center justify-center text-[10px] font-black text-gray-500">+9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mock Radar Visual -->
|
|
<div class="flex-1 flex flex-col items-center justify-center py-10 relative">
|
|
<div class="w-64 h-64 border border-indigo-500/20 rounded-full flex items-center justify-center relative">
|
|
<div class="w-48 h-48 border border-indigo-500/30 rounded-full flex items-center justify-center">
|
|
<div class="w-32 h-32 border border-indigo-500/40 rounded-full flex items-center justify-center">
|
|
<div class="w-4 h-4 bg-indigo-500 rounded-full shadow-[0_0_20px_rgba(99,102,241,0.5)]"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Blips -->
|
|
<div class="absolute top-10 right-20 w-3 h-3 bg-green-500 rounded-full animate-ping opacity-75"></div>
|
|
<div class="absolute bottom-20 left-10 w-2 h-2 bg-indigo-400 rounded-full animate-pulse"></div>
|
|
<div class="absolute top-1/2 left-1/4 w-3 h-3 bg-purple-500 rounded-full shadow-[0_0_10px_rgba(168,85,247,0.5)] cursor-pointer group/blip">
|
|
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-white text-black px-2 py-1 rounded-lg text-[10px] font-black whitespace-nowrap opacity-0 group-hover/blip:opacity-100 transition-opacity">Hit dla: Mamy!</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 text-center">
|
|
<p class="text-xs font-black text-indigo-400 uppercase tracking-[0.2em] mb-2">Skanowanie Sieci</p>
|
|
<p class="text-sm text-gray-500 font-medium max-w-sm mx-auto">AI przeanalizowało właśnie 240 produktów pod kątem Twoich wymagań budżetowych.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Signals Side Feed -->
|
|
<div class="space-y-6">
|
|
<div class="bg-gradient-to-br from-indigo-600 to-purple-600 rounded-[2.5rem] p-8 text-white relative overflow-hidden group cursor-pointer hover:scale-[1.02] transition-all">
|
|
<div class="relative z-10 text-center">
|
|
<div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-white/30 backdrop-blur-md">
|
|
<i data-lucide="target" class="w-7 h-7"></i>
|
|
</div>
|
|
<h4 class="text-xl font-black mb-2">Radar Lock</h4>
|
|
<p class="text-xs text-white/70 font-bold uppercase tracking-widest mb-6 leading-relaxed">System automatycznie zarezerwuje najlepszą cenę gdy nadejdzie czas.</p>
|
|
<button class="w-full bg-white text-indigo-900 py-4 rounded-2xl font-black text-xs shadow-xl flex items-center justify-center gap-2">
|
|
AKTYWUJ TRYB AUTO <span class="bg-indigo-100 px-2 py-1 rounded ml-1 text-indigo-600">PREMIUM</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#161925] border border-white/5 rounded-[2.5rem] p-8">
|
|
<h4 class="text-sm font-black text-white mb-6 uppercase tracking-widest flex items-center gap-2">
|
|
<i data-lucide="rss" class="text-indigo-400 w-4 h-4"></i> Sygnały Live
|
|
</h4>
|
|
<div class="space-y-6">
|
|
<div class="flex items-start gap-4 p-4 bg-white/5 rounded-2xl border border-white/5">
|
|
<div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-500 shrink-0">
|
|
<i data-lucide="trending-down" class="w-4 h-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-black text-white">Apple Watch S10</p>
|
|
<p class="text-[10px] text-gray-500 font-bold mb-1">-150 PLN w Media Expert</p>
|
|
<p class="text-[9px] text-green-400 font-black uppercase">Okazja dla: Mamy</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4 p-4 bg-white/5 rounded-2xl border border-white/5 opacity-50">
|
|
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-500 shrink-0">
|
|
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-black text-white">LEGO Icons Rivendell</p>
|
|
<p class="text-[10px] text-gray-500 font-bold mb-1">Pojawiło się w 2 sklepach</p>
|
|
<p class="text-[9px] text-purple-400 font-black uppercase">Okazja dla: Tomka</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Radar Results -->
|
|
<div class="mb-12 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-2xl font-black text-white">Najlepsze Trafienia</h3>
|
|
<p class="text-sm text-gray-500 font-medium">Produkty o najwyższym współczynniku "Idealny Prezent"</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="bg-white/5 text-gray-400 text-[10px] font-black px-4 py-2 rounded-xl transition-all hover:bg-white/10">KWOTA: 0-500</button>
|
|
<button class="bg-indigo-600/20 text-indigo-400 text-[10px] font-black px-4 py-2 rounded-xl border border-indigo-500/30">KWOTA: 500+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-20">
|
|
<!-- Radar Result Item -->
|
|
<div class="bg-[#161925] rounded-[2.5rem] border border-white/5 overflow-hidden group hover:border-indigo-500/50 transition-all">
|
|
<div class="h-64 relative">
|
|
<img src="https://images.unsplash.com/photo-1550517355-38f1fdb24227?q=80&w=640&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-105 transition-all duration-700">
|
|
<div class="absolute top-4 left-4 flex gap-2">
|
|
<div class="bg-black/60 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-white border border-white/10 uppercase">Dla: Żony</div>
|
|
<div class="bg-green-600/80 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-white uppercase tracking-tighter shadow-lg shadow-green-600/20">MATCH 98%</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-2">Zapachy / Premium</p>
|
|
<h4 class="text-xl font-black text-white mb-4">Jo Malone London Set</h4>
|
|
<div class="p-4 bg-white/5 rounded-2xl mb-6">
|
|
<p class="text-[10px] text-gray-500 font-black uppercase tracking-widest mb-2 leading-none">Analiza Radaru AI</p>
|
|
<p class="text-xs text-gray-300 font-medium leading-relaxed italic">"Monitorowaliśmy ten zestaw przez 2 tygodnie. Cena spadła o 12% poniżej średniej rynkowej. Pasuje do zainteresowania 'Wellness' zapisanego u Anny."</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-[10px] font-black text-gray-500 uppercase tracking-widest leading-none mb-1">Aktualna cena</p>
|
|
<p class="text-2xl font-black text-white leading-none">429 PLN</p>
|
|
</div>
|
|
<button class="bg-indigo-600 text-white px-6 py-3 rounded-2xl text-xs font-black shadow-lg shadow-indigo-600/20 hover:scale-105 transition-all">DODAJ DO PLANU</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Radar Result Item 2 -->
|
|
<div class="bg-[#161925] rounded-[2.5rem] border border-white/5 overflow-hidden group hover:border-indigo-500/50 transition-all">
|
|
<div class="h-64 relative">
|
|
<img src="https://images.unsplash.com/photo-1593305841991-05c297ba4575?q=80&w=640&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-105 transition-all duration-700">
|
|
<div class="absolute top-4 left-4 flex gap-2">
|
|
<div class="bg-black/60 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-white border border-white/10 uppercase">Dla: Syna</div>
|
|
<div class="bg-indigo-600/80 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-white uppercase tracking-tighter shadow-lg shadow-indigo-600/20">MATCH 94%</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-2">Gaming / Hardware</p>
|
|
<h4 class="text-xl font-black text-white mb-4">PlayStation 5 Slim</h4>
|
|
<div class="p-4 bg-white/5 rounded-2xl mb-6">
|
|
<p class="text-[10px] text-gray-500 font-black uppercase tracking-widest mb-2 leading-none">Analiza Radaru AI</p>
|
|
<p class="text-xs text-gray-300 font-medium leading-relaxed italic">"Wykryliśmy nowy zestaw z 2 padami w cenie podstawowej konsoli. To oszczędność rzędu 240 PLN względem osobnych zakupów."</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-[10px] font-black text-gray-500 uppercase tracking-widest leading-none mb-1">Aktualna cena</p>
|
|
<p class="text-2xl font-black text-white leading-none">2 249 PLN</p>
|
|
</div>
|
|
<button class="bg-indigo-600 text-white px-6 py-3 rounded-2xl text-xs font-black shadow-lg shadow-indigo-600/20 hover:scale-105 transition-all">DODAJ DO PLANU</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation (Dark) -->
|
|
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-[#161925] border-t border-white/5 p-2 flex justify-around items-center z-50">
|
|
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-500">
|
|
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
|
<span class="text-[10px] font-bold mt-1">Home</span>
|
|
</a>
|
|
<a href="gift-radar.html" class="flex flex-col items-center p-2 text-indigo-400">
|
|
<i data-lucide="radar" class="w-6 h-6 animate-pulse"></i>
|
|
<span class="text-[10px] font-bold mt-1">Radar</span>
|
|
</a>
|
|
<a href="persons.html" class="flex flex-col items-center p-2 text-gray-500">
|
|
<i data-lucide="users" class="w-6 h-6"></i>
|
|
<span class="text-[10px] font-bold mt-1">Osoby</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|