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

make more AI

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-12-28 21:24:48 +01:00
parent 7b95faef4a
commit 69069587c5
17 changed files with 1534 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
budget.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analiza Budżetu - Gift Planner</title>
<title>Analiza Budżetu (Premium) - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
@@ -33,6 +33,10 @@
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="sparkles"></i> Inspiracje
</a>
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors group">
<i data-lucide="search" class="group-hover:text-indigo-600 transition-colors"></i> Wyszukiwarka
<span class="ml-auto bg-indigo-100 text-indigo-600 text-[8px] px-1.5 py-0.5 rounded font-black uppercase">AI</span>
</a>
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="book-open"></i> Poradniki
</a>
@@ -50,9 +54,15 @@
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8 pb-24 md:pb-8">
<header class="mb-10">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Analiza Wydatków</h2>
<p class="text-gray-500 font-medium">Sprawdź ile wydajesz na prezenty i jak optymalizować swój budżet.</p>
<header class="mb-10 flex justify-between items-center">
<div>
<h2 class="text-3xl font-black text-gray-900 leading-tight">Analiza Wydatków</h2>
<p class="text-gray-500 font-medium">Zaawansowane statystyki Twojego budżetu.</p>
</div>
<div class="flex items-center gap-2 bg-indigo-50 px-4 py-2 rounded-2xl border border-indigo-100">
<i data-lucide="shield-check" class="text-indigo-600 w-5 h-5"></i>
<span class="text-xs font-black text-indigo-700 uppercase tracking-widest">Pakiet Kontrola Budżetu Aktywny</span>
</div>
</header>
<!-- Top Stats -->
@@ -150,6 +160,47 @@
</div>
</div>
<!-- Premium: AI Forecasting Section (Unlocked) -->
<section class="bg-indigo-900 rounded-[3rem] p-10 lg:p-12 mb-10 relative overflow-hidden text-white shadow-2xl border border-indigo-700">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-900 to-purple-900 opacity-50"></div>
<div class="relative z-10">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="flex-1">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center border border-white/20">
<i data-lucide="sparkles" class="text-indigo-300"></i>
</div>
<h3 class="text-3xl font-black tracking-tight">Prognoza Budżetu AI</h3>
</div>
<p class="text-indigo-100 text-lg mb-8 leading-relaxed font-medium">
Na podstawie Twoich dotychczasowych wydatków, AI przewiduje, że w grudniu wydasz o <span class="text-white font-black">15% mniej</span> niż w roku ubiegłym dzięki optymalizacji listy zakupów.
</p>
<div class="grid grid-cols-2 gap-6">
<div class="p-6 bg-white/5 rounded-3xl border border-white/10">
<p class="text-[10px] text-indigo-300 font-black uppercase mb-1">Przewidywane wydatki (Q1 2026)</p>
<p class="text-2xl font-black">4 200 PLN</p>
</div>
<div class="p-6 bg-white/5 rounded-3xl border border-white/10">
<p class="text-[10px] text-green-400 font-black uppercase mb-1">Potencjalne oszczędności</p>
<p class="text-2xl font-black text-green-400">850 PLN</p>
</div>
</div>
</div>
<div class="w-full md:w-96 h-64 bg-white/5 backdrop-blur-md rounded-3xl border border-white/10 p-6 flex flex-col justify-end">
<div class="flex items-end gap-1 h-full mb-4">
<div class="flex-1 bg-indigo-500/20 h-[30%] rounded-t-lg"></div>
<div class="flex-1 bg-indigo-500/40 h-[45%] rounded-t-lg"></div>
<div class="flex-1 bg-indigo-500/60 h-[60%] rounded-t-lg"></div>
<div class="flex-1 bg-white h-[85%] rounded-t-lg shadow-[0_0_20px_rgba(255,255,255,0.3)]"></div>
<div class="flex-1 bg-indigo-500/30 h-[25%] rounded-t-lg border border-dashed border-white/30"></div>
<div class="flex-1 bg-indigo-500/30 h-[35%] rounded-t-lg border border-dashed border-white/30"></div>
</div>
<p class="text-[10px] font-black uppercase tracking-widest text-center text-indigo-300">Prognoza AI na kolejne miesiące</p>
</div>
</div>
</div>
</section>
<!-- Detailed History -->
<div class="bg-white rounded-[2.5rem] p-8 border border-gray-50 shadow-sm overflow-hidden">
<div class="flex items-center justify-between mb-8">
@@ -196,30 +247,6 @@
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="updates.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="bell" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Status</span>
</a>
<a href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="sparkles" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Pomysły</span>
</a>
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="book-open" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Blog</span>
</a>
<a href="settings.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="settings" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Opcje</span>
</a>
</nav>
<script>
lucide.createIcons();