Hugging Face's logo

Spaces:
digpas
/
coffee-list
Running

App Files Community
digpas commited on
Commit
25fcba8
·
verified ·
1 Parent(s): cc46e25

нужно добавить Поиск кофе по базе + возможность добавлять фото в отзывах и расширить Тип кофе (есть еще Дрипы) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +508 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coffee List
3
- emoji: 😻
4
  colorFrom: purple
5
- colorTo: yellow
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
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: purple
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,508 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>КофеОтзывы - система отзывов о кофе</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
+ .coffee-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
13
+ }
14
+ .star-rating input {
15
+ display: none;
16
+ }
17
+ .star-rating label {
18
+ font-size: 24px;
19
+ color: #ccc;
20
+ cursor: pointer;
21
+ transition: color 0.2s;
22
+ }
23
+ .star-rating input:checked ~ label,
24
+ .star-rating label:hover,
25
+ .star-rating label:hover ~ label {
26
+ color: #f8d64e;
27
+ }
28
+ .star-rating input:checked + label {
29
+ color: #f8d64e;
30
+ }
31
+ .coffee-type-btn.active {
32
+ background-color: #6f4e37;
33
+ color: white;
34
+ }
35
+ .rating-filter-btn.active {
36
+ background-color: #4a5568;
37
+ color: white;
38
+ }
39
+ .animated-bg {
40
+ animation: pulse 2s infinite;
41
+ }
42
+ @keyframes pulse {
43
+ 0% { background-color: #f5f5f5; }
44
+ 50% { background-color: #e2e8f0; }
45
+ 100% { background-color: #f5f5f5; }
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <!-- Header -->
51
+ <header class="bg-amber-900 text-white shadow-lg">
52
+ <div class="container mx-auto px-4 py-6">
53
+ <div class="flex flex-col md:flex-row justify-between items-center">
54
+ <div class="flex items-center mb-4 md:mb-0">
55
+ <i class="fas fa-coffee text-3xl mr-3"></i>
56
+ <h1 class="text-2xl md:text-3xl font-bold">КофеОтзывы</h1>
57
+ </div>
58
+ <p class="text-amber-200 text-center md:text-right">Делитесь мнением о любимом кофе и находите новые вкусы</p>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Content -->
64
+ <main class="container mx-auto px-4 py-8">
65
+ <!-- Filters Section -->
66
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
67
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Фильтры отзывов</h2>
68
+
69
+ <div class="mb-6">
70
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Тип кофе</h3>
71
+ <div class="flex flex-wrap gap-2">
72
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="all">
73
+ Все типы
74
+ </button>
75
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="зерновой">
76
+ Зерновой <i class="fas fa-coffee-beans ml-1"></i>
77
+ </button>
78
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="молотый">
79
+ Молотый <i class="fas fa-mortar-pestle ml-1"></i>
80
+ </button>
81
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="растворимый">
82
+ Растворимый <i class="fas fa-glass-water ml-1"></i>
83
+ </button>
84
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="капсульный">
85
+ Капсульный <i class="fas fa-capsules ml-1"></i>
86
+ </button>
87
+ <button class="coffee-type-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-amber-100 transition" data-type="дрипы">
88
+ Дрипы <i class="fas fa-filter ml-1"></i>
89
+ </button>
90
+ </div>
91
+ </div>
92
+
93
+ <div>
94
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Рейтинг</h3>
95
+ <div class="flex flex-wrap gap-2">
96
+ <button class="rating-filter-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition" data-rating="all">
97
+ Все оценки
98
+ </button>
99
+ <button class="rating-filter-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition" data-rating="5">
100
+ <i class="fas fa-star text-yellow-400"></i> 5
101
+ </button>
102
+ <button class="rating-filter-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition" data-rating="4">
103
+ <i class="fas fa-star text-yellow-400"></i> 4+
104
+ </button>
105
+ <button class="rating-filter-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition" data-rating="3">
106
+ <i class="fas fa-star text-yellow-400"></i> 3+
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Search Section -->
113
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
114
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Поиск кофе</h2>
115
+ <div class="relative">
116
+ <input type="text" id="coffeeSearch" placeholder="Введите название или бренд кофе..."
117
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
118
+ <button id="searchButton" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-amber-700">
119
+ <i class="fas fa-search"></i>
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Add Review Form -->
125
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
126
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Добавить отзыв</h2>
127
+ <form id="reviewForm" class="space-y-4" enctype="multipart/form-data">
128
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
129
+ <div>
130
+ <label for="coffeeName" class="block text-sm font-medium text-gray-700 mb-1">Название кофе</label>
131
+ <input type="text" id="coffeeName" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
132
+ </div>
133
+ <div>
134
+ <label for="coffeeBrand" class="block text-sm font-medium text-gray-700 mb-1">Бренд</label>
135
+ <input type="text" id="coffeeBrand" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
136
+ </div>
137
+ </div>
138
+
139
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
140
+ <div>
141
+ <label for="coffeeType" class="block text-sm font-medium text-gray-700 mb-1">Тип кофе</label>
142
+ <select id="coffeeType" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
143
+ <option value="">Выберите тип</option>
144
+ <option value="зерновой">Зерновой</option>
145
+ <option value="молотый">Молотый</option>
146
+ <option value="растворимый">Растворимый</option>
147
+ <option value="капсульный">Капсульный</option>
148
+ <option value="дрипы">Дрипы</option>
149
+ </select>
150
+ </div>
151
+ <div>
152
+ <label class="block text-sm font-medium text-gray-700 mb-1">Ваша оценка</label>
153
+ <div class="star-rating flex justify-center md:justify-start">
154
+ <input type="radio" id="star5" name="rating" value="5" required>
155
+ <label for="star5"><i class="fas fa-star"></i></label>
156
+ <input type="radio" id="star4" name="rating" value="4">
157
+ <label for="star4"><i class="fas fa-star"></i></label>
158
+ <input type="radio" id="star3" name="rating" value="3">
159
+ <label for="star3"><i class="fas fa-star"></i></label>
160
+ <input type="radio" id="star2" name="rating" value="2">
161
+ <label for="star2"><i class="fas fa-star"></i></label>
162
+ <input type="radio" id="star1" name="rating" value="1">
163
+ <label for="star1"><i class="fas fa-star"></i></label>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div>
169
+ <label for="reviewText" class="block text-sm font-medium text-gray-700 mb-1">Отзыв</label>
170
+ <textarea id="reviewText" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"></textarea>
171
+ </div>
172
+
173
+ <div>
174
+ <label for="reviewPhoto" class="block text-sm font-medium text-gray-700 mb-1">Фото кофе (необязательно)</label>
175
+ <input type="file" id="reviewPhoto" accept="image/*" class="w-full text-sm text-gray-500
176
+ file:mr-4 file:py-2 file:px-4
177
+ file:rounded-md file:border-0
178
+ file:text-sm file:font-semibold
179
+ file:bg-amber-50 file:text-amber-700
180
+ hover:file:bg-amber-100">
181
+ </div>
182
+
183
+ <div class="flex justify-end">
184
+ <button type="submit" class="px-6 py-2 bg-amber-700 text-white rounded-md hover:bg-amber-800 transition flex items-center">
185
+ <i class="fas fa-paper-plane mr-2"></i> Опубликовать
186
+ </button>
187
+ </div>
188
+ </form>
189
+ </div>
190
+
191
+ <!-- Reviews Section -->
192
+ <div class="mb-8">
193
+ <div class="flex justify-between items-center mb-6">
194
+ <h2 class="text-2xl font-bold text-gray-800">Отзывы о кофе</h2>
195
+ <div class="text-gray-600">
196
+ <span id="reviewsCount">0</span> отзывов
197
+ </div>
198
+ </div>
199
+
200
+ <div id="reviewsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
201
+ <!-- Reviews will be loaded here -->
202
+ </div>
203
+
204
+ <div id="noReviewsMessage" class="hidden text-center py-12 bg-white rounded-lg shadow">
205
+ <i class="fas fa-coffee text-4xl text-gray-400 mb-4"></i>
206
+ <h3 class="text-xl font-medium text-gray-600">Отзывов не найдено</h3>
207
+ <p class="text-gray-500 mt-2">Попробуйте изменить параметры фильтрации</p>
208
+ </div>
209
+ </div>
210
+ </main>
211
+
212
+ <!-- Footer -->
213
+ <footer class="bg-gray-800 text-white py-8">
214
+ <div class="container mx-auto px-4">
215
+ <div class="flex flex-col md:flex-row justify-between items-center">
216
+ <div class="mb-4 md:mb-0">
217
+ <div class="flex items-center">
218
+ <i class="fas fa-coffee text-2xl mr-2 text-amber-400"></i>
219
+ <span class="text-xl font-bold">КофеОтзывы</span>
220
+ </div>
221
+ <p class="text-gray-400 mt-2">Лучшие отзывы о кофе с 2023 года</p>
222
+ </div>
223
+ <div class="flex space-x-4">
224
+ <a href="#" class="text-gray-400 hover:text-white transition">
225
+ <i class="fab fa-vk text-2xl"></i>
226
+ </a>
227
+ <a href="#" class="text-gray-400 hover:text-white transition">
228
+ <i class="fab fa-telegram text-2xl"></i>
229
+ </a>
230
+ <a href="#" class="text-gray-400 hover:text-white transition">
231
+ <i class="fab fa-instagram text-2xl"></i>
232
+ </a>
233
+ </div>
234
+ </div>
235
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
236
+ <p>© 2023 КофеОтзывы. Все права защищены.</p>
237
+ </div>
238
+ </div>
239
+ </footer>
240
+
241
+ <script>
242
+ // Sample data for reviews
243
+ const reviews = [
244
+ {
245
+ id: 1,
246
+ name: "Jacobs Monarch",
247
+ brand: "Jacobs",
248
+ type: "зерновой",
249
+ rating: 5,
250
+ review: "Отличный кофе с насыщенным вкусом и приятным ароматом. Идеально подходит для эспрессо.",
251
+ date: "2023-05-15",
252
+ author: "Алексей"
253
+ },
254
+ {
255
+ id: 2,
256
+ name: "Nescafe Gold",
257
+ brand: "Nescafe",
258
+ type: "растворимый",
259
+ rating: 4,
260
+ review: "Хороший растворимый кофе для быстрого приготовления. Вкус мягкий, без горечи.",
261
+ date: "2023-06-22",
262
+ author: "Мария"
263
+ },
264
+ {
265
+ id: 3,
266
+ name: "Lavazza Qualità Oro",
267
+ brand: "Lavazza",
268
+ type: "молотый",
269
+ rating: 5,
270
+ review: "Прекрасный итальянский кофе с бархатистым вкусом. Рекомендую всем ценителям.",
271
+ date: "2023-04-10",
272
+ author: "Дмитрий"
273
+ },
274
+ {
275
+ id: 4,
276
+ name: "Paulig Presidentti",
277
+ brand: "Paulig",
278
+ type: "зерновой",
279
+ rating: 4,
280
+ review: "Хороший финский кофе с легкой кислинкой. Подходит для разных способов заваривания.",
281
+ date: "2023-07-05",
282
+ author: "Елена"
283
+ },
284
+ {
285
+ id: 5,
286
+ name: "Dallmayr Prodomo",
287
+ brand: "Dallmayr",
288
+ type: "капсульный",
289
+ rating: 3,
290
+ review: "Неплохой кофе в капсулах, но ожидал более насыщенного вкуса за такую цену.",
291
+ date: "2023-08-12",
292
+ author: "Иван"
293
+ },
294
+ {
295
+ id: 6,
296
+ name: "Jardin Crema",
297
+ brand: "Jardin",
298
+ type: "молотый",
299
+ rating: 4,
300
+ review: "Приятный кофе с нотками шоколада. Хорошо сочетается с молоком.",
301
+ date: "2023-09-18",
302
+ author: "Ольга"
303
+ }
304
+ ];
305
+
306
+ // DOM Elements
307
+ const reviewsContainer = document.getElementById('reviewsContainer');
308
+ const noReviewsMessage = document.getElementById('noReviewsMessage');
309
+ const reviewsCount = document.getElementById('reviewsCount');
310
+ const reviewForm = document.getElementById('reviewForm');
311
+ const coffeeTypeBtns = document.querySelectorAll('.coffee-type-btn');
312
+ const ratingFilterBtns = document.querySelectorAll('.rating-filter-btn');
313
+
314
+ // Current filters
315
+ let currentCoffeeType = 'all';
316
+ let currentRatingFilter = 'all';
317
+
318
+ // Initialize the app
319
+ document.addEventListener('DOMContentLoaded', () => {
320
+ renderReviews(filterReviews());
321
+ setupEventListeners();
322
+ });
323
+
324
+ // Filter reviews based on current filters
325
+ function filterReviews() {
326
+ return reviews.filter(review => {
327
+ const typeMatch = currentCoffeeType === 'all' || review.type === currentCoffeeType;
328
+ const ratingMatch = currentRatingFilter === 'all' ||
329
+ (currentRatingFilter === '5' && review.rating === 5) ||
330
+ (currentRatingFilter === '4' && review.rating >= 4) ||
331
+ (currentRatingFilter === '3' && review.rating >= 3);
332
+ return typeMatch && ratingMatch;
333
+ });
334
+ }
335
+
336
+ // Render reviews to the DOM
337
+ function renderReviews(reviewsToRender) {
338
+ reviewsContainer.innerHTML = '';
339
+
340
+ if (reviewsToRender.length === 0) {
341
+ noReviewsMessage.classList.remove('hidden');
342
+ } else {
343
+ noReviewsMessage.classList.add('hidden');
344
+ reviewsToRender.forEach(review => {
345
+ const reviewElement = createReviewElement(review);
346
+ reviewsContainer.appendChild(reviewElement);
347
+ });
348
+ }
349
+
350
+ reviewsCount.textContent = reviewsToRender.length;
351
+ }
352
+
353
+ // Create a review card element
354
+ function createReviewElement(review) {
355
+ const reviewElement = document.createElement('div');
356
+ reviewElement.className = 'coffee-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300';
357
+
358
+ // Generate star rating HTML
359
+ const starsHtml = Array(5).fill('').map((_, i) =>
360
+ `<i class="fas fa-star ${i < review.rating ? 'text-yellow-400' : 'text-gray-300'}"></i>`
361
+ ).join('');
362
+
363
+ // Generate coffee type icon
364
+ const typeIcons = {
365
+ 'зерновой': 'fa-coffee-beans',
366
+ 'молотый': 'fa-mortar-pestle',
367
+ 'растворимый': 'fa-glass-water',
368
+ 'капсульный': 'fa-capsules',
369
+ 'дрипы': 'fa-filter'
370
+ };
371
+
372
+ reviewElement.innerHTML = `
373
+ <div class="p-6">
374
+ ${review.photo ? `
375
+ <div class="mb-4 rounded-lg overflow-hidden">
376
+ <img src="${review.photo}" alt="${review.name}" class="w-full h-48 object-cover">
377
+ </div>
378
+ ` : ''}
379
+ <div class="flex justify-between items-start mb-2">
380
+ <h3 class="text-xl font-bold text-gray-800">${review.name}</h3>
381
+ <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm font-medium">
382
+ ${review.brand}
383
+ </span>
384
+ </div>
385
+
386
+ <div class="flex items-center mb-3">
387
+ <div class="mr-2">
388
+ ${starsHtml}
389
+ </div>
390
+ <span class="text-gray-600 text-sm">${review.rating}.0</span>
391
+ </div>
392
+
393
+ <div class="flex items-center text-sm text-gray-500 mb-4">
394
+ <i class="fas ${typeIcons[review.type]} mr-1"></i>
395
+ <span class="mr-3 capitalize">${review.type}</span>
396
+ <i class="fas fa-calendar-alt mr-1"></i>
397
+ <span>${review.date}</span>
398
+ </div>
399
+
400
+ <p class="text-gray-700 mb-4">${review.review}</p>
401
+
402
+ <div class="flex justify-between items-center text-sm">
403
+ <span class="text-gray-500">Автор: ${review.author}</span>
404
+ <button class="text-amber-700 hover:text-amber-900 transition">
405
+ <i class="fas fa-share-alt mr-1"></i> Поделиться
406
+ </button>
407
+ </div>
408
+ </div>
409
+ `;
410
+
411
+ return reviewElement;
412
+ }
413
+
414
+ // Search functionality
415
+ function searchCoffee(query) {
416
+ return reviews.filter(review => {
417
+ const searchStr = query.toLowerCase();
418
+ return review.name.toLowerCase().includes(searchStr) ||
419
+ review.brand.toLowerCase().includes(searchStr);
420
+ });
421
+ }
422
+
423
+ // Set up event listeners
424
+ function setupEventListeners() {
425
+ // Search input
426
+ document.getElementById('searchButton').addEventListener('click', () => {
427
+ const query = document.getElementById('coffeeSearch').value;
428
+ if (query) {
429
+ renderReviews(searchCoffee(query));
430
+ }
431
+ });
432
+
433
+ document.getElementById('coffeeSearch').addEventListener('keypress', (e) => {
434
+ if (e.key === 'Enter') {
435
+ const query = document.getElementById('coffeeSearch').value;
436
+ if (query) {
437
+ renderReviews(searchCoffee(query));
438
+ }
439
+ }
440
+ });
441
+ // Coffee type filter buttons
442
+ coffeeTypeBtns.forEach(btn => {
443
+ btn.addEventListener('click', () => {
444
+ coffeeTypeBtns.forEach(b => b.classList.remove('active'));
445
+ btn.classList.add('active');
446
+ currentCoffeeType = btn.dataset.type;
447
+ renderReviews(filterReviews());
448
+ });
449
+ });
450
+
451
+ // Rating filter buttons
452
+ ratingFilterBtns.forEach(btn => {
453
+ btn.addEventListener('click', () => {
454
+ ratingFilterBtns.forEach(b => b.classList.remove('active'));
455
+ btn.classList.add('active');
456
+ currentRatingFilter = btn.dataset.rating;
457
+ renderReviews(filterReviews());
458
+ });
459
+ });
460
+
461
+ // Form submission
462
+ reviewForm.addEventListener('submit', (e) => {
463
+ e.preventDefault();
464
+
465
+ const newReview = {
466
+ id: reviews.length + 1,
467
+ name: document.getElementById('coffeeName').value,
468
+ brand: document.getElementById('coffeeBrand').value,
469
+ type: document.getElementById('coffeeType').value,
470
+ rating: parseInt(document.querySelector('input[name="rating"]:checked').value),
471
+ review: document.getElementById('reviewText').value,
472
+ date: new Date().toISOString().split('T')[0],
473
+ author: "Вы",
474
+ photo: null
475
+ };
476
+
477
+ // Handle photo upload
478
+ const photoInput = document.getElementById('reviewPhoto');
479
+ if (photoInput.files.length > 0) {
480
+ const file = photoInput.files[0];
481
+ const reader = new FileReader();
482
+ reader.onload = function(e) {
483
+ newReview.photo = e.target.result;
484
+ };
485
+ reader.readAsDataURL(file);
486
+ }
487
+
488
+ reviews.unshift(newReview);
489
+ renderReviews(filterReviews());
490
+ reviewForm.reset();
491
+
492
+ // Show success message
493
+ const successAlert = document.createElement('div');
494
+ successAlert.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center';
495
+ successAlert.innerHTML = `
496
+ <i class="fas fa-check-circle mr-2"></i>
497
+ <span>Ваш отзыв успешно добавлен!</span>
498
+ `;
499
+ document.body.appendChild(successAlert);
500
+
501
+ setTimeout(() => {
502
+ successAlert.remove();
503
+ }, 3000);
504
+ });
505
+ }
506
+ </script>
507
+ <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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
508
+ </html>