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

111
search.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wyszukiwarka AI - Gift Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="main.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
<i data-lucide="gift"></i>
</div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</h1>
</div>
<nav class="flex-1 px-4 py-4 space-y-2">
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="layout-dashboard"></i> Dashboard
</a>
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="bell"></i> Aktualizacje
</a>
<a href="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 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
<i data-lucide="search"></i> Wyszukiwarka
</a>
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="book-open"></i> Poradniki
</a>
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="calendar"></i> Okazje
</a>
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="users"></i> Osoby
</a>
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
<i data-lucide="wallet"></i> Budżet
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
<header class="mb-12">
<h2 class="text-3xl font-black text-gray-900 leading-tight">Wyszukiwarka AI</h2>
<p class="text-gray-500 font-medium">Powiedz nam kogo chcesz obdarować, a my znajdziemy idealny prezent.</p>
</header>
<!-- Main Search Interface -->
<section class="mb-16">
<div class="bg-white rounded-[3rem] p-8 md:p-12 shadow-2xl shadow-indigo-100 border border-indigo-50 relative overflow-hidden">
<div class="relative z-10 max-w-4xl mx-auto text-center">
<div class="w-20 h-20 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-white mx-auto mb-8 shadow-xl shadow-indigo-200">
<i data-lucide="sparkles" class="w-10 h-10 animate-pulse"></i>
</div>
<h3 class="text-3xl md:text-4xl font-black text-gray-900 mb-6 leading-tight">Co dzisiaj znajdziemy?</h3>
<p class="text-lg text-gray-500 font-medium mb-10">Opisz osobę, okazję lub styl życia. Nasze AI przedstawi Ci listę dopasowanych prezentów.</p>
<div class="relative group">
<input type="text" placeholder="Np: Szukam czegoś eleganckiego dla mamy, która kocha jogę i pastelowe kolory..." class="w-full py-6 px-8 rounded-3xl border-2 border-indigo-50 bg-gray-50 font-medium text-lg focus:bg-white focus:border-indigo-600 transition-all outline-none shadow-inner pr-48">
<button class="absolute right-3 top-3 bottom-3 bg-indigo-600 text-white px-8 rounded-2xl font-black text-sm shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all flex items-center gap-2">
SZUKAJ Z AI <span class="bg-indigo-500 text-[10px] px-2 py-1 rounded">-1 <i data-lucide="zap" class="w-3 h-3 inline fill-white"></i></span>
</button>
</div>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<span class="text-xs font-black text-gray-400 uppercase tracking-widest mr-2 py-2">Popularne:</span>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full text-xs font-bold text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition-all">Słuchawki dla gracza</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full text-xs font-bold text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition-all">Zestaw do parzenia matchy</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full text-xs font-bold text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition-all">Książki o architekturze</button>
</div>
</div>
<!-- Decorative Elements -->
<div class="absolute -left-20 -bottom-20 w-64 h-64 bg-indigo-50 rounded-full opacity-50 blur-3xl"></div>
<div class="absolute -right-20 -top-20 w-64 h-64 bg-purple-50 rounded-full opacity-50 blur-3xl"></div>
</div>
</section>
</main>
</div>
<!-- Mobile Navigation -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Home</span>
</a>
<a href="search.html" class="flex flex-col items-center p-2 text-indigo-600">
<i data-lucide="search" class="w-6 h-6"></i>
<span class="text-[10px] font-bold mt-1">Szukaj</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>
</nav>
<script>
lucide.createIcons();
</script>
</body>
</html>