Hugging Face's logo

Spaces:
digpas
/
coffee-list-ver2
Running

App Files Community
digpas commited on
Commit
b3da2d7
·
verified ·
1 Parent(s): 58f880f

напиши плашин для Wordpress: Создай современный и функциональный плагин, где пользователи смогут находить, изучать и оставлять отзывы на разные виды кофе: 🔹 Виды кофе: Зерновой Молотый Растворимый Капсульный Дрип-кофе Зелёный (необжаренный) Авторские смеси и купажи 🧠 Умная система поиска кофе: Добавь продвинутый фильтр + интеллектуальный поиск (по принципу “как в Spotify, Netflix, Vivino”): 🔍 Фильтры (с возможностью комбинирования): Тип кофе: зерновой, дрип, капсулы и т.д. Производитель / Бренд: Illy, Lavazza, Tasty Coffee и др. Страна происхождения: Бразилия, Колумбия, Эфиопия и др. Обжарка: светлая, средняя, тёмная Степень помола: под эспрессо, под френч-пресс, универсальный Вкус / Вкусовые ноты: шоколад, орех, цитрус, специи и т.п. Аромат: насыщенный, слабый, фруктовый, древесный и т.д. Метод заваривания: подходит ли под турку, капельную, дрип, воронку, автомат Цена: слайдер от до Рейтинг пользователей: по 5-бальной шкале Поиск по названию или ключевым словам 🤖 Дополнительно: “Подбор кофе по вкусу”: пользователь отвечает на 3–5 простых вопросов (любишь ли кислинку? молочные напитки? нужен кофе для утра или вечера?) — и получает подборку “Я пробовал вот этот – подберите похожий”: система ищет аналоги Поиск по штрихкоду или QR (в перспективе) 💬 Дополнение к разделам: Главная страница Секция “Подобрано для вас” (на основе вкусов, любимых брендов) “Новинки дрип-кофе” и “Лучшее за месяц” Карточка кофе Тип (например, Дрип) Для каких методов подходит Фото упаковки, вкус, аромат, цена, рейтинг Отзывы с фото/видео “Похожие варианты” Добавить кофе Если не найден в базе Модерация + подтверждение сообщества 🎨 Визуальный стиль: Современный, лёгкий, в кофейных тонах Удобство чтения отзывов Микроанимации для фильтров и поиска Карточки кофе с аккуратной иконографикой (вкус, обжарка, страна) 📱 Функции (технически): Быстрый AJAX-поиск и фильтрация Возможность сохранить фильтр (например: “дрип-кофе с фруктовыми нотами до 600₽”) Регистрация / Авторизация Рейтинги и лайки на отзывы Система «награды за активность» (значки, уровни) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +887 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coffee List Ver2
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: coffee-list-ver2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,887 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Coffee Connoisseur - WordPress Plugin</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more styling */
11
+ .coffee-card {
12
+ transition: all 0.3s ease;
13
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
14
+ }
15
+ .coffee-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
18
+ }
19
+ .taste-profile {
20
+ height: 6px;
21
+ border-radius: 3px;
22
+ }
23
+ .search-dropdown {
24
+ max-height: 300px;
25
+ overflow-y: auto;
26
+ }
27
+ .flavor-tag {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .flavor-tag:hover {
31
+ transform: scale(1.05);
32
+ }
33
+ .filter-section {
34
+ transition: max-height 0.3s ease;
35
+ overflow: hidden;
36
+ }
37
+ .rating-star {
38
+ color: #fbbf24;
39
+ }
40
+ .rating-star-empty {
41
+ color: #d1d5db;
42
+ }
43
+ .animate-pulse-slow {
44
+ animation: pulse 3s infinite;
45
+ }
46
+ @keyframes pulse {
47
+ 0%, 100% {
48
+ opacity: 1;
49
+ }
50
+ 50% {
51
+ opacity: 0.7;
52
+ }
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-amber-50">
57
+ <!-- Main Container -->
58
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
59
+ <!-- Header -->
60
+ <header class="mb-12 text-center">
61
+ <h1 class="text-4xl md:text-5xl font-bold text-amber-900 mb-4">Coffee Connoisseur</h1>
62
+ <p class="text-lg text-amber-800 max-w-3xl mx-auto">Discover, explore, and review the world's finest coffees. Find your perfect cup based on your taste preferences.</p>
63
+ </header>
64
+
65
+ <!-- Search Bar -->
66
+ <div class="mb-10 relative">
67
+ <div class="relative">
68
+ <input type="text" placeholder="Search coffees, brands, flavors..."
69
+ class="w-full p-4 pl-12 rounded-full border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent shadow-sm text-amber-900 bg-white">
70
+ <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-amber-500">
71
+ <i class="fas fa-search fa-lg"></i>
72
+ </div>
73
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-amber-600 text-white px-6 py-2 rounded-full hover:bg-amber-700 transition">
74
+ Search
75
+ </button>
76
+ </div>
77
+ <!-- Search Suggestions Dropdown -->
78
+ <div class="search-dropdown absolute z-10 w-full mt-2 bg-white rounded-lg shadow-lg hidden">
79
+ <div class="p-4 border-b border-amber-100">
80
+ <h3 class="font-medium text-amber-900">Popular Searches</h3>
81
+ </div>
82
+ <div class="p-2">
83
+ <a href="#" class="block px-4 py-2 text-amber-800 hover:bg-amber-50 rounded">Ethiopian Yirgacheffe</a>
84
+ <a href="#" class="block px-4 py-2 text-amber-800 hover:bg-amber-50 rounded">Dark Roast</a>
85
+ <a href="#" class="block px-4 py-2 text-amber-amber-800 hover:bg-amber-50 rounded">Chocolate Notes</a>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Filter Section -->
91
+ <div class="mb-10 bg-white rounded-xl shadow-md p-6">
92
+ <div class="flex justify-between items-center mb-4">
93
+ <h2 class="text-xl font-semibold text-amber-900">Filter Coffees</h2>
94
+ <button class="text-amber-600 hover:text-amber-800 text-sm font-medium">
95
+ <i class="fas fa-sliders-h mr-1"></i> Advanced Filters
96
+ </button>
97
+ </div>
98
+
99
+ <!-- Quick Filters -->
100
+ <div class="flex flex-wrap gap-3 mb-6">
101
+ <button class="px-4 py-2 bg-amber-100 text-amber-800 rounded-full hover:bg-amber-200 transition flex items-center">
102
+ <i class="fas fa-coffee mr-2"></i> All Types
103
+ </button>
104
+ <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center">
105
+ <i class="fas fa-wheat mr-2"></i> Whole Bean
106
+ </button>
107
+ <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center">
108
+ <i class="fas fa-filter mr-2"></i> Drip
109
+ </button>
110
+ <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center">
111
+ <i class="fas fa-capsules mr-2"></i> Capsules
112
+ </button>
113
+ <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center">
114
+ <i class="fas fa-leaf mr-2"></i> Green Coffee
115
+ </button>
116
+ </div>
117
+
118
+ <!-- Advanced Filters (Collapsible) -->
119
+ <div class="filter-section" style="max-height: 0;">
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
121
+ <!-- Coffee Type -->
122
+ <div>
123
+ <label class="block text-sm font-medium text-amber-900 mb-2">Coffee Type</label>
124
+ <div class="space-y-2">
125
+ <label class="flex items-center">
126
+ <input type="checkbox" class="rounded text-amber-600">
127
+ <span class="ml-2 text-amber-800">Whole Bean</span>
128
+ </label>
129
+ <label class="flex items-center">
130
+ <input type="checkbox" class="rounded text-amber-600">
131
+ <span class="ml-2 text-amber-800">Ground</span>
132
+ </label>
133
+ <label class="flex items-center">
134
+ <input type="checkbox" class="rounded text-amber-600">
135
+ <span class="ml-2 text-amber-800">Instant</span>
136
+ </label>
137
+ <label class="flex items-center">
138
+ <input type="checkbox" class="rounded text-amber-600">
139
+ <span class="ml-2 text-amber-800">Drip</span>
140
+ </label>
141
+ <label class="flex items-center">
142
+ <input type="checkbox" class="rounded text-amber-600">
143
+ <span class="ml-2 text-amber-800">Capsules</span>
144
+ </label>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Roast Level -->
149
+ <div>
150
+ <label class="block text-sm font-medium text-amber-900 mb-2">Roast Level</label>
151
+ <div class="space-y-2">
152
+ <label class="flex items-center">
153
+ <input type="checkbox" class="rounded text-amber-600">
154
+ <span class="ml-2 text-amber-800">Light</span>
155
+ </label>
156
+ <label class="flex items-center">
157
+ <input type="checkbox" class="rounded text-amber-600">
158
+ <span class="ml-2 text-amber-800">Medium</span>
159
+ </label>
160
+ <label class="flex items-center">
161
+ <input type="checkbox" class="rounded text-amber-600">
162
+ <span class="ml-2 text-amber-800">Dark</span>
163
+ </label>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Flavor Notes -->
168
+ <div>
169
+ <label class="block text-sm font-medium text-amber-900 mb-2">Flavor Notes</label>
170
+ <div class="flex flex-wrap gap-2">
171
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Chocolate</span>
172
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Nutty</span>
173
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Fruity</span>
174
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Floral</span>
175
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Spicy</span>
176
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Caramel</span>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Brew Methods -->
181
+ <div>
182
+ <label class="block text-sm font-medium text-amber-900 mb-2">Brew Methods</label>
183
+ <div class="flex flex-wrap gap-2">
184
+ <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center">
185
+ <i class="fas fa-coffee mr-1"></i> Espresso
186
+ </span>
187
+ <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center">
188
+ <i class="fas fa-filter mr-1"></i> Pour Over
189
+ </span>
190
+ <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center">
191
+ <i class="fas fa-mug-hot mr-1"></i> French Press
192
+ </span>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Price Range -->
197
+ <div>
198
+ <label class="block text-sm font-medium text-amber-900 mb-2">Price Range</label>
199
+ <div class="px-2">
200
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-amber-200 rounded-lg appearance-none cursor-pointer">
201
+ <div class="flex justify-between text-xs text-amber-800 mt-1">
202
+ <span>$0</span>
203
+ <span>$50</span>
204
+ <span>$100+</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Rating -->
210
+ <div>
211
+ <label class="block text-sm font-medium text-amber-900 mb-2">Minimum Rating</label>
212
+ <div class="flex items-center">
213
+ <div class="flex mr-2">
214
+ <i class="fas fa-star rating-star"></i>
215
+ <i class="fas fa-star rating-star"></i>
216
+ <i class="fas fa-star rating-star"></i>
217
+ <i class="fas fa-star rating-star"></i>
218
+ <i class="fas fa-star rating-star-empty"></i>
219
+ </div>
220
+ <span class="text-amber-800">4+</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="flex justify-end mt-6">
226
+ <button class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition">
227
+ Apply Filters
228
+ </button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Personalized Recommendations -->
234
+ <section class="mb-12">
235
+ <div class="flex justify-between items-center mb-6">
236
+ <h2 class="text-2xl font-semibold text-amber-900">Selected For You</h2>
237
+ <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">See all</a>
238
+ </div>
239
+
240
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
241
+ <!-- Coffee Card 1 -->
242
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
243
+ <div class="relative">
244
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
245
+ alt="Ethiopian Yirgacheffe" class="w-full h-48 object-cover">
246
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
247
+ <i class="fas fa-wheat mr-1"></i> Whole Bean
248
+ </div>
249
+ </div>
250
+ <div class="p-4">
251
+ <div class="flex justify-between items-start mb-2">
252
+ <h3 class="font-semibold text-lg text-amber-900">Ethiopian Yirgacheffe</h3>
253
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
254
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
255
+ <span class="text-xs font-medium text-amber-800">4.7</span>
256
+ </div>
257
+ </div>
258
+ <p class="text-sm text-amber-800 mb-3">Bright acidity with floral and citrus notes</p>
259
+
260
+ <div class="flex items-center text-sm text-amber-700 mb-3">
261
+ <i class="fas fa-globe-americas mr-2"></i>
262
+ <span>Ethiopia</span>
263
+ </div>
264
+
265
+ <div class="mb-3">
266
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
267
+ <span>Acidity</span>
268
+ <span>Body</span>
269
+ </div>
270
+ <div class="flex gap-1 mb-1">
271
+ <div class="taste-profile bg-amber-400 w-3/4"></div>
272
+ <div class="taste-profile bg-amber-600 w-1/2"></div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="flex justify-between items-center">
277
+ <span class="font-medium text-amber-900">$14.99</span>
278
+ <button class="text-amber-600 hover:text-amber-800">
279
+ <i class="fas fa-heart"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Coffee Card 2 -->
286
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
287
+ <div class="relative">
288
+ <img src="https://images.unsplash.com/photo-1551033401-64a1fdf73725?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
289
+ alt="Colombian Supremo" class="w-full h-48 object-cover">
290
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
291
+ <i class="fas fa-filter mr-1"></i> Drip
292
+ </div>
293
+ </div>
294
+ <div class="p-4">
295
+ <div class="flex justify-between items-start mb-2">
296
+ <h3 class="font-semibold text-lg text-amber-900">Colombian Supremo</h3>
297
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
298
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
299
+ <span class="text-xs font-medium text-amber-800">4.5</span>
300
+ </div>
301
+ </div>
302
+ <p class="text-sm text-amber-800 mb-3">Balanced with caramel and nutty notes</p>
303
+
304
+ <div class="flex items-center text-sm text-amber-700 mb-3">
305
+ <i class="fas fa-globe-americas mr-2"></i>
306
+ <span>Colombia</span>
307
+ </div>
308
+
309
+ <div class="mb-3">
310
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
311
+ <span>Acidity</span>
312
+ <span>Body</span>
313
+ </div>
314
+ <div class="flex gap-1 mb-1">
315
+ <div class="taste-profile bg-amber-400 w-1/2"></div>
316
+ <div class="taste-profile bg-amber-600 w-3/4"></div>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="flex justify-between items-center">
321
+ <span class="font-medium text-amber-900">$12.99</span>
322
+ <button class="text-amber-600 hover:text-amber-800">
323
+ <i class="fas fa-heart"></i>
324
+ </button>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Coffee Card 3 -->
330
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
331
+ <div class="relative">
332
+ <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
333
+ alt="Italian Dark Roast" class="w-full h-48 object-cover">
334
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
335
+ <i class="fas fa-capsules mr-1"></i> Capsules
336
+ </div>
337
+ </div>
338
+ <div class="p-4">
339
+ <div class="flex justify-between items-start mb-2">
340
+ <h3 class="font-semibold text-lg text-amber-900">Italian Dark Roast</h3>
341
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
342
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
343
+ <span class="text-xs font-medium text-amber-800">4.8</span>
344
+ </div>
345
+ </div>
346
+ <p class="text-sm text-amber-800 mb-3">Bold with dark chocolate and smoky notes</p>
347
+
348
+ <div class="flex items-center text-sm text-amber-700 mb-3">
349
+ <i class="fas fa-globe-americas mr-2"></i>
350
+ <span>Italy</span>
351
+ </div>
352
+
353
+ <div class="mb-3">
354
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
355
+ <span>Acidity</span>
356
+ <span>Body</span>
357
+ </div>
358
+ <div class="flex gap-1 mb-1">
359
+ <div class="taste-profile bg-amber-400 w-1/4"></div>
360
+ <div class="taste-profile bg-amber-600 w-full"></div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="flex justify-between items-center">
365
+ <span class="font-medium text-amber-900">$0.75/capsule</span>
366
+ <button class="text-amber-600 hover:text-amber-800">
367
+ <i class="fas fa-heart"></i>
368
+ </button>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Coffee Card 4 -->
374
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
375
+ <div class="relative">
376
+ <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
377
+ alt="Costa Rican Tarrazu" class="w-full h-48 object-cover">
378
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
379
+ <i class="fas fa-leaf mr-1"></i> Green Coffee
380
+ </div>
381
+ </div>
382
+ <div class="p-4">
383
+ <div class="flex justify-between items-start mb-2">
384
+ <h3 class="font-semibold text-lg text-amber-900">Costa Rican Tarrazu</h3>
385
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
386
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
387
+ <span class="text-xs font-medium text-amber-800">4.6</span>
388
+ </div>
389
+ </div>
390
+ <p class="text-sm text-amber-800 mb-3">Clean with honey and citrus notes</p>
391
+
392
+ <div class="flex items-center text-sm text-amber-700 mb-3">
393
+ <i class="fas fa-globe-americas mr-2"></i>
394
+ <span>Costa Rica</span>
395
+ </div>
396
+
397
+ <div class="mb-3">
398
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
399
+ <span>Acidity</span>
400
+ <span>Body</span>
401
+ </div>
402
+ <div class="flex gap-1 mb-1">
403
+ <div class="taste-profile bg-amber-400 w-2/3"></div>
404
+ <div class="taste-profile bg-amber-600 w-1/2"></div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex justify-between items-center">
409
+ <span class="font-medium text-amber-900">$16.99</span>
410
+ <button class="text-amber-600 hover:text-amber-800">
411
+ <i class="fas fa-heart"></i>
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </section>
418
+
419
+ <!-- Taste Quiz Section -->
420
+ <section class="mb-12 bg-amber-100 rounded-xl p-6">
421
+ <div class="text-center mb-6">
422
+ <h2 class="text-2xl font-semibold text-amber-900 mb-2">Find Your Perfect Coffee</h2>
423
+ <p class="text-amber-800 max-w-2xl mx-auto">Answer a few simple questions and we'll recommend coffees tailored to your taste preferences.</p>
424
+ </div>
425
+
426
+ <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
427
+ <div class="mb-6">
428
+ <div class="flex justify-between mb-1">
429
+ <span class="text-sm font-medium text-amber-800">Question 1 of 5</span>
430
+ <span class="text-sm text-amber-600">60% complete</span>
431
+ </div>
432
+ <div class="w-full bg-amber-200 rounded-full h-2">
433
+ <div class="bg-amber-600 h-2 rounded-full" style="width: 60%"></div>
434
+ </div>
435
+ </div>
436
+
437
+ <h3 class="text-lg font-medium text-amber-900 mb-4">How do you prefer your coffee's acidity?</h3>
438
+
439
+ <div class="space-y-3">
440
+ <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer">
441
+ <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500">
442
+ <span class="ml-3 text-amber-800">Bright and lively (like citrus fruits)</span>
443
+ </label>
444
+
445
+ <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer">
446
+ <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500">
447
+ <span class="ml-3 text-amber-800">Moderate and balanced</span>
448
+ </label>
449
+
450
+ <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer">
451
+ <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500">
452
+ <span class="ml-3 text-amber-800">Low and mellow</span>
453
+ </label>
454
+
455
+ <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer">
456
+ <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500">
457
+ <span class="ml-3 text-amber-800">I'm not sure</span>
458
+ </label>
459
+ </div>
460
+
461
+ <div class="flex justify-between mt-6">
462
+ <button class="px-4 py-2 border border-amber-300 text-amber-800 rounded-lg hover:bg-amber-50 transition">
463
+ Back
464
+ </button>
465
+ <button class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition">
466
+ Next
467
+ </button>
468
+ </div>
469
+ </div>
470
+ </section>
471
+
472
+ <!-- New Arrivals Section -->
473
+ <section class="mb-12">
474
+ <div class="flex justify-between items-center mb-6">
475
+ <h2 class="text-2xl font-semibold text-amber-900">New Drip Coffee Arrivals</h2>
476
+ <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">View all</a>
477
+ </div>
478
+
479
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
480
+ <!-- New Arrival 1 -->
481
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
482
+ <div class="relative">
483
+ <img src="https://images.unsplash.com/photo-1534778101976-7f9afc9a7e88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
484
+ alt="Kenyan AA" class="w-full h-40 object-cover">
485
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
486
+ New
487
+ </div>
488
+ </div>
489
+ <div class="p-4">
490
+ <h3 class="font-semibold text-amber-900 mb-1">Kenyan AA</h3>
491
+ <p class="text-xs text-amber-700 mb-2">Berry and wine-like notes</p>
492
+ <div class="flex items-center text-xs text-amber-700 mb-2">
493
+ <i class="fas fa-globe-americas mr-1"></i>
494
+ <span>Kenya</span>
495
+ </div>
496
+ <div class="flex justify-between items-center">
497
+ <span class="font-medium text-amber-900 text-sm">$15.99</span>
498
+ <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition">
499
+ View
500
+ </button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- New Arrival 2 -->
506
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
507
+ <div class="relative">
508
+ <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
509
+ alt="Brazilian Santos" class="w-full h-40 object-cover">
510
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
511
+ New
512
+ </div>
513
+ </div>
514
+ <div class="p-4">
515
+ <h3 class="font-semibold text-amber-900 mb-1">Brazilian Santos</h3>
516
+ <p class="text-xs text-amber-700 mb-2">Nutty and chocolatey</p>
517
+ <div class="flex items-center text-xs text-amber-700 mb-2">
518
+ <i class="fas fa-globe-americas mr-1"></i>
519
+ <span>Brazil</span>
520
+ </div>
521
+ <div class="flex justify-between items-center">
522
+ <span class="font-medium text-amber-900 text-sm">$12.99</span>
523
+ <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition">
524
+ View
525
+ </button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <!-- New Arrival 3 -->
531
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
532
+ <div class="relative">
533
+ <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
534
+ alt="Sumatra Mandheling" class="w-full h-40 object-cover">
535
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
536
+ New
537
+ </div>
538
+ </div>
539
+ <div class="p-4">
540
+ <h3 class="font-semibold text-amber-900 mb-1">Sumatra Mandheling</h3>
541
+ <p class="text-xs text-amber-700 mb-2">Earthy and herbal</p>
542
+ <div class="flex items-center text-xs text-amber-700 mb-2">
543
+ <i class="fas fa-globe-americas mr-1"></i>
544
+ <span>Indonesia</span>
545
+ </div>
546
+ <div class="flex justify-between items-center">
547
+ <span class="font-medium text-amber-900 text-sm">$13.99</span>
548
+ <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition">
549
+ View
550
+ </button>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- New Arrival 4 -->
556
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
557
+ <div class="relative">
558
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
559
+ alt="Guatemalan Antigua" class="w-full h-40 object-cover">
560
+ <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center">
561
+ New
562
+ </div>
563
+ </div>
564
+ <div class="p-4">
565
+ <h3 class="font-semibold text-amber-900 mb-1">Guatemalan Antigua</h3>
566
+ <p class="text-xs text-amber-700 mb-2">Spicy and complex</p>
567
+ <div class="flex items-center text-xs text-amber-700 mb-2">
568
+ <i class="fas fa-globe-americas mr-1"></i>
569
+ <span>Guatemala</span>
570
+ </div>
571
+ <div class="flex justify-between items-center">
572
+ <span class="font-medium text-amber-900 text-sm">$14.99</span>
573
+ <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition">
574
+ View
575
+ </button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </section>
581
+
582
+ <!-- Top Rated Section -->
583
+ <section class="mb-12">
584
+ <div class="flex justify-between items-center mb-6">
585
+ <h2 class="text-2xl font-semibold text-amber-900">Top Rated This Month</h2>
586
+ <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">View all</a>
587
+ </div>
588
+
589
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
590
+ <!-- Top Rated 1 -->
591
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
592
+ <div class="relative">
593
+ <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
594
+ alt="Blue Mountain" class="w-full h-48 object-cover">
595
+ <div class="absolute top-2 left-2 bg-amber-600 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center">
596
+ #1 Top Rated
597
+ </div>
598
+ </div>
599
+ <div class="p-4">
600
+ <div class="flex justify-between items-start mb-2">
601
+ <h3 class="font-semibold text-lg text-amber-900">Jamaican Blue Mountain</h3>
602
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
603
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
604
+ <span class="text-xs font-medium text-amber-800">4.9</span>
605
+ </div>
606
+ </div>
607
+ <p class="text-sm text-amber-800 mb-3">Smooth with mild acidity and sweet flavor</p>
608
+
609
+ <div class="flex items-center text-sm text-amber-700 mb-3">
610
+ <i class="fas fa-globe-americas mr-2"></i>
611
+ <span>Jamaica</span>
612
+ </div>
613
+
614
+ <div class="mb-3">
615
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
616
+ <span>Acidity</span>
617
+ <span>Body</span>
618
+ </div>
619
+ <div class="flex gap-1 mb-1">
620
+ <div class="taste-profile bg-amber-400 w-1/3"></div>
621
+ <div class="taste-profile bg-amber-600 w-2/3"></div>
622
+ </div>
623
+ </div>
624
+
625
+ <div class="flex justify-between items-center">
626
+ <span class="font-medium text-amber-900">$29.99</span>
627
+ <button class="text-amber-600 hover:text-amber-800">
628
+ <i class="fas fa-heart"></i>
629
+ </button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Top Rated 2 -->
635
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
636
+ <div class="relative">
637
+ <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
638
+ alt="Gesha Village" class="w-full h-48 object-cover">
639
+ <div class="absolute top-2 left-2 bg-amber-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center">
640
+ #2 Top Rated
641
+ </div>
642
+ </div>
643
+ <div class="p-4">
644
+ <div class="flex justify-between items-start mb-2">
645
+ <h3 class="font-semibold text-lg text-amber-900">Panama Gesha</h3>
646
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
647
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
648
+ <span class="text-xs font-medium text-amber-800">4.8</span>
649
+ </div>
650
+ </div>
651
+ <p class="text-sm text-amber-800 mb-3">Jasmine and bergamot with tea-like body</p>
652
+
653
+ <div class="flex items-center text-sm text-amber-700 mb-3">
654
+ <i class="fas fa-globe-americas mr-2"></i>
655
+ <span>Panama</span>
656
+ </div>
657
+
658
+ <div class="mb-3">
659
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
660
+ <span>Acidity</span>
661
+ <span>Body</span>
662
+ </div>
663
+ <div class="flex gap-1 mb-1">
664
+ <div class="taste-profile bg-amber-400 w-3/4"></div>
665
+ <div class="taste-profile bg-amber-600 w-1/3"></div>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="flex justify-between items-center">
670
+ <span class="font-medium text-amber-900">$34.99</span>
671
+ <button class="text-amber-600 hover:text-amber-800">
672
+ <i class="fas fa-heart"></i>
673
+ </button>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Top Rated 3 -->
679
+ <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md">
680
+ <div class="relative">
681
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
682
+ alt="Hawaiian Kona" class="w-full h-48 object-cover">
683
+ <div class="absolute top-2 left-2 bg-amber-400 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center">
684
+ #3 Top Rated
685
+ </div>
686
+ </div>
687
+ <div class="p-4">
688
+ <div class="flex justify-between items-start mb-2">
689
+ <h3 class="font-semibold text-lg text-amber-900">Hawaiian Kona</h3>
690
+ <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full">
691
+ <i class="fas fa-star text-amber-500 text-xs mr-1"></i>
692
+ <span class="text-xs font-medium text-amber-800">4.7</span>
693
+ </div>
694
+ </div>
695
+ <p class="text-sm text-amber-800 mb-3">Rich and flavorful with nutty undertones</p>
696
+
697
+ <div class="flex items-center text-sm text-amber-700 mb-3">
698
+ <i class="fas fa-globe-americas mr-2"></i>
699
+ <span>Hawaii, USA</span>
700
+ </div>
701
+
702
+ <div class="mb-3">
703
+ <div class="flex justify-between text-xs text-amber-700 mb-1">
704
+ <span>Acidity</span>
705
+ <span>Body</span>
706
+ </div>
707
+ <div class="flex gap-1 mb-1">
708
+ <div class="taste-profile bg-amber-400 w-1/2"></div>
709
+ <div class="taste-profile bg-amber-600 w-3/4"></div>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="flex justify-between items-center">
714
+ <span class="font-medium text-amber-900">$27.99</span>
715
+ <button class="text-amber-600 hover:text-amber-800">
716
+ <i class="fas fa-heart"></i>
717
+ </button>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </section>
723
+
724
+ <!-- Add Coffee Section -->
725
+ <section class="mb-12 bg-white rounded-xl shadow-md p-6">
726
+ <div class="text-center mb-6">
727
+ <h2 class="text-2xl font-semibold text-amber-900 mb-2">Don't See Your Favorite Coffee?</h2>
728
+ <p class="text-amber-800 max-w-2xl mx-auto">Help us grow our database by adding new coffees to our collection.</p>
729
+ </div>
730
+
731
+ <div class="max-w-lg mx-auto">
732
+ <div class="grid grid-cols-1 gap-6">
733
+ <div>
734
+ <label class="block text-sm font-medium text-amber-900 mb-1">Coffee Name</label>
735
+ <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent">
736
+ </div>
737
+
738
+ <div>
739
+ <label class="block text-sm font-medium text-amber-900 mb-1">Brand/Producer</label>
740
+ <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent">
741
+ </div>
742
+
743
+ <div class="grid grid-cols-2 gap-4">
744
+ <div>
745
+ <label class="block text-sm font-medium text-amber-900 mb-1">Type</label>
746
+ <select class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent">
747
+ <option>Whole Bean</option>
748
+ <option>Ground</option>
749
+ <option>Instant</option>
750
+ <option>Drip</option>
751
+ <option>Capsules</option>
752
+ <option>Green Coffee</option>
753
+ </select>
754
+ </div>
755
+ <div>
756
+ <label class="block text-sm font-medium text-amber-900 mb-1">Origin Country</label>
757
+ <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent">
758
+ </div>
759
+ </div>
760
+
761
+ <div>
762
+ <label class="block text-sm font-medium text-amber-900 mb-1">Flavor Notes</label>
763
+ <div class="flex flex-wrap gap-2 mb-2">
764
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Chocolate</span>
765
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Nutty</span>
766
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Fruity</span>
767
+ <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">+ Add</span>
768
+ </div>
769
+ <input type="text" placeholder="Add custom flavor notes..." class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent">
770
+ </div>
771
+
772
+ <div>
773
+ <label class="block text-sm font-medium text-amber-900 mb-1">Upload Photo</label>
774
+ <div class="border-2 border-dashed border-amber-300 rounded-lg p-6 text-center">
775
+ <i class="fas fa-camera text-amber-400 text-3xl mb-2"></i>
776
+ <p class="text-amber-700">Drag & drop coffee photo here or click to browse</p>
777
+ <input type="file" class="hidden">
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="mt-6 text-center">
783
+ <button class="px-8 py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition font-medium">
784
+ Submit Coffee
785
+ </button>
786
+ </div>
787
+ </div>
788
+ </section>
789
+ </div>
790
+
791
+ <!-- Footer -->
792
+ <footer class="bg-amber-900 text-amber-100 py-8">
793
+ <div class="container mx-auto px-4 max-w-7xl">
794
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
795
+ <div>
796
+ <h3 class="text-lg font-semibold mb-4">Coffee Connoisseur</h3>
797
+ <p class="text-sm">Discover, explore, and review the world's finest coffees.</p>
798
+ </div>
799
+ <div>
800
+ <h3 class="text-lg font-semibold mb-4">Explore</h3>
801
+ <ul class="space-y-2 text-sm">
802
+ <li><a href="#" class="hover:text-amber-300">Popular Coffees</a></li>
803
+ <li><a href="#" class="hover:text-amber-300">New Arrivals</a></li>
804
+ <li><a href="#" class="hover:text-amber-300">Top Rated</a></li>
805
+ <li><a href="#" class="hover:text-amber-300">Coffee Guides</a></li>
806
+ </ul>
807
+ </div>
808
+ <div>
809
+ <h3 class="text-lg font-semibold mb-4">Community</h3>
810
+ <ul class="space-y-2 text-sm">
811
+ <li><a href="#" class="hover:text-amber-300">Write a Review</a></li>
812
+ <li><a href="#" class="hover:text-amber-300">Forums</a></li>
813
+ <li><a href="#" class="hover:text-amber-300">Meetups</a></li>
814
+ <li><a href="#" class="hover:text-amber-300">Leaderboard</a></li>
815
+ </ul>
816
+ </div>
817
+ <div>
818
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
819
+ <div class="flex space-x-4 mb-4">
820
+ <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-facebook"></i></a>
821
+ <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-twitter"></i></a>
822
+ <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-instagram"></i></a>
823
+ <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-pinterest"></i></a>
824
+ </div>
825
+ <p class="text-sm">Subscribe to our newsletter for coffee tips and new discoveries.</p>
826
+ </div>
827
+ </div>
828
+ <div class="border-t border-amber-800 mt-8 pt-6 text-sm text-center">
829
+ <p>© 2023 Coffee Connoisseur. All rights reserved.</p>
830
+ </div>
831
+ </div>
832
+ </footer>
833
+
834
+ <script>
835
+ // Toggle advanced filters
836
+ document.addEventListener('DOMContentLoaded', function() {
837
+ const advancedFilterBtn = document.querySelector('.text-amber-600.hover\\:text-amber-800.text-sm.font-medium');
838
+ const filterSection = document.querySelector('.filter-section');
839
+
840
+ advancedFilterBtn.addEventListener('click', function(e) {
841
+ e.preventDefault();
842
+ if (filterSection.style.maxHeight) {
843
+ filterSection.style.maxHeight = null;
844
+ } else {
845
+ filterSection.style.maxHeight = filterSection.scrollHeight + 'px';
846
+ }
847
+ });
848
+
849
+ // Search input focus
850
+ const searchInput = document.querySelector('input[type="text"][placeholder="Search coffees, brands, flavors..."]');
851
+ const searchDropdown = document.querySelector('.search-dropdown');
852
+
853
+ searchInput.addEventListener('focus', function() {
854
+ searchDropdown.classList.remove('hidden');
855
+ });
856
+
857
+ searchInput.addEventListener('blur', function() {
858
+ setTimeout(() => {
859
+ searchDropdown.classList.add('hidden');
860
+ }, 200);
861
+ });
862
+
863
+ // Flavor tag selection
864
+ const flavorTags = document.querySelectorAll('.flavor-tag');
865
+ flavorTags.forEach(tag => {
866
+ tag.addEventListener('click', function() {
867
+ this.classList.toggle('bg-amber-100');
868
+ this.classList.toggle('bg-amber-600');
869
+ this.classList.toggle('text-amber-800');
870
+ this.classList.toggle('text-white');
871
+ });
872
+ });
873
+
874
+ // Coffee card hover effect
875
+ const coffeeCards = document.querySelectorAll('.coffee-card');
876
+ coffeeCards.forEach(card => {
877
+ card.addEventListener('mouseenter', function() {
878
+ this.querySelector('img').style.transform = 'scale(1.05)';
879
+ });
880
+ card.addEventListener('mouseleave', function() {
881
+ this.querySelector('img').style.transform = 'scale(1)';
882
+ });
883
+ });
884
+ });
885
+ </script>
886
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=digpas/coffee-list-ver2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
887
+ </html>