Hugging Face's logo

Spaces:
14zy
/
test-space
Running

App Files Community
14zy commited on
Commit
7691de3
·
verified ·
1 Parent(s): 8858a1f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +689 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test Space
3
- emoji: ⚡
4
  colorFrom: purple
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: test-space
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,689 @@
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>CraftBeer - Магазин крафтового пива</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
+ .beer-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
13
+ }
14
+ .category-btn.active {
15
+ background-color: #f59e0b;
16
+ color: white;
17
+ }
18
+ .hero {
19
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ }
23
+ .cart-preview {
24
+ transition: all 0.3s ease;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-100 font-sans">
29
+ <!-- Header -->
30
+ <header class="bg-amber-900 text-white shadow-lg">
31
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
32
+ <div class="flex items-center space-x-2">
33
+ <i class="fas fa-beer text-2xl"></i>
34
+ <h1 class="text-2xl font-bold">CraftBeer</h1>
35
+ </div>
36
+
37
+ <nav class="hidden md:flex space-x-6">
38
+ <a href="#home" class="hover:text-amber-200 transition">Главная</a>
39
+ <a href="#craft" class="hover:text-amber-200 transition">Крафтовое</a>
40
+ <a href="#non-alc" class="hover:text-amber-200 transition">Безалкогольное</a>
41
+ <a href="#import" class="hover:text-amber-200 transition">Импортное</a>
42
+ <a href="#about" class="hover:text-amber-200 transition">О нас</a>
43
+ </nav>
44
+
45
+ <div class="flex items-center space-x-4">
46
+ <div class="relative">
47
+ <button id="cart-btn" class="hover:text-amber-200 transition">
48
+ <i class="fas fa-shopping-cart text-xl"></i>
49
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-amber-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
50
+ </button>
51
+ <div id="cart-preview" class="cart-preview hidden absolute right-0 mt-2 w-64 bg-white text-gray-800 rounded-lg shadow-xl p-4 z-10">
52
+ <h3 class="font-bold mb-2">Ваша корзина</h3>
53
+ <div id="cart-items" class="mb-2">
54
+ <!-- Cart items will be added here -->
55
+ <p class="text-sm text-gray-500">Корзина пуста</p>
56
+ </div>
57
+ <div class="flex justify-between items-center border-t pt-2">
58
+ <span class="font-bold">Итого:</span>
59
+ <span id="cart-total" class="font-bold">0 ₽</span>
60
+ </div>
61
+ <button class="mt-2 w-full bg-amber-600 hover:bg-amber-700 text-white py-1 rounded">Оформить</button>
62
+ </div>
63
+ </div>
64
+ <button class="md:hidden" id="mobile-menu-btn">
65
+ <i class="fas fa-bars text-xl"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Mobile menu -->
71
+ <div id="mobile-menu" class="hidden md:hidden bg-amber-800 px-4 py-2">
72
+ <a href="#home" class="block py-2 hover:text-amber-200 transition">Главная</a>
73
+ <a href="#craft" class="block py-2 hover:text-amber-200 transition">Крафтовое</a>
74
+ <a href="#non-alc" class="block py-2 hover:text-amber-200 transition">Безалкогольное</a>
75
+ <a href="#import" class="block py-2 hover:text-amber-200 transition">Импортное</a>
76
+ <a href="#about" class="block py-2 hover:text-amber-200 transition">О нас</a>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Hero Section -->
81
+ <section id="home" class="hero text-white py-20">
82
+ <div class="container mx-auto px-4 text-center">
83
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Лучшее крафтовое пиво с доставкой</h1>
84
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Откройте для себя уникальные вкусы от лучших пивоварен мира</p>
85
+ <div class="flex flex-wrap justify-center gap-4">
86
+ <a href="#craft" class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-lg font-medium transition">Выбрать пиво</a>
87
+ <a href="#about" class="bg-white hover:bg-gray-100 text-amber-900 px-6 py-3 rounded-lg font-medium transition">О пивоварне</a>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Categories -->
93
+ <section class="bg-white py-8">
94
+ <div class="container mx-auto px-4">
95
+ <div class="flex overflow-x-auto pb-2 space-x-2">
96
+ <button class="category-btn active px-4 py-2 rounded-full whitespace-nowrap" data-category="all">Все</button>
97
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="craft">Крафтовое</button>
98
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="non-alc">Безалкогольное</button>
99
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="import">Импортное</button>
100
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="wheat">Пшеничное</button>
101
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="ipa">IPA</button>
102
+ <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="stout">Стауты</button>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Craft Beer Section -->
108
+ <section id="craft" class="py-12 bg-gray-50">
109
+ <div class="container mx-auto px-4">
110
+ <div class="flex justify-between items-center mb-8">
111
+ <h2 class="text-3xl font-bold text-gray-800">Крафтовое пиво</h2>
112
+ <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a>
113
+ </div>
114
+
115
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
116
+ <!-- Beer Card 1 -->
117
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft ipa">
118
+ <div class="relative">
119
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IPA" class="w-full h-48 object-cover">
120
+ <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">IPA</span>
121
+ </div>
122
+ <div class="p-4">
123
+ <h3 class="font-bold text-lg mb-1">Hop Explosion IPA</h3>
124
+ <p class="text-gray-600 text-sm mb-2">7.2% ABV • 0.5L</p>
125
+ <p class="text-gray-700 mb-4">Индийский пейл-эль с ярким хмелевым вкусом и цитрусовыми нотами.</p>
126
+ <div class="flex justify-between items-center">
127
+ <span class="font-bold text-lg">450 ₽</span>
128
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Hop Explosion IPA" data-price="450">
129
+ В корзину
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Beer Card 2 -->
136
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft stout">
137
+ <div class="relative">
138
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Stout" class="w-full h-48 object-cover">
139
+ <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">Стаут</span>
140
+ </div>
141
+ <div class="p-4">
142
+ <h3 class="font-bold text-lg mb-1">Midnight Stout</h3>
143
+ <p class="text-gray-600 text-sm mb-2">8.0% ABV • 0.5L</p>
144
+ <p class="text-gray-700 mb-4">Имперский стаут с нотами жареного кофе, темного шоколада и карамели.</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="font-bold text-lg">520 ₽</span>
147
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Midnight Stout" data-price="520">
148
+ В корзину
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Beer Card 3 -->
155
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft wheat">
156
+ <div class="relative">
157
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wheat" class="w-full h-48 object-cover">
158
+ <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">Пшеничное</span>
159
+ </div>
160
+ <div class="p-4">
161
+ <h3 class="font-bold text-lg mb-1">Summer Wheat</h3>
162
+ <p class="text-gray-600 text-sm mb-2">5.2% ABV • 0.5L</p>
163
+ <p class="text-gray-700 mb-4">Освежающее пшеничное пиво с нотами банана и гвоздики.</p>
164
+ <div class="flex justify-between items-center">
165
+ <span class="font-bold text-lg">380 ₽</span>
166
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Summer Wheat" data-price="380">
167
+ В корзину
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Beer Card 4 -->
174
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft ipa">
175
+ <div class="relative">
176
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IPA" class="w-full h-48 object-cover">
177
+ <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">IPA</span>
178
+ </div>
179
+ <div class="p-4">
180
+ <h3 class="font-bold text-lg mb-1">Citrus Haze</h3>
181
+ <p class="text-gray-600 text-sm mb-2">6.5% ABV • 0.5L</p>
182
+ <p class="text-gray-700 mb-4">Хази IPA с насыщенными цитрусовыми ароматами и мягкой горечью.</p>
183
+ <div class="flex justify-between items-center">
184
+ <span class="font-bold text-lg">490 ₽</span>
185
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Citrus Haze" data-price="490">
186
+ В корзину
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Non-Alcoholic Section -->
196
+ <section id="non-alc" class="py-12 bg-white">
197
+ <div class="container mx-auto px-4">
198
+ <div class="flex justify-between items-center mb-8">
199
+ <h2 class="text-3xl font-bold text-gray-800">Безалкогольное пиво</h2>
200
+ <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a>
201
+ </div>
202
+
203
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
204
+ <!-- Beer Card 1 -->
205
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc">
206
+ <div class="relative">
207
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc" class="w-full h-48 object-cover">
208
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span>
209
+ </div>
210
+ <div class="p-4">
211
+ <h3 class="font-bold text-lg mb-1">Drive Safe</h3>
212
+ <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p>
213
+ <p class="text-gray-700 mb-4">Безалкогольный лагер с классическим вкусом и легкой горчинкой.</p>
214
+ <div class="flex justify-between items-center">
215
+ <span class="font-bold text-lg">280 ₽</span>
216
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Drive Safe" data-price="280">
217
+ В корзину
218
+ </button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Beer Card 2 -->
224
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc wheat">
225
+ <div class="relative">
226
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc Wheat" class="w-full h-48 object-cover">
227
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span>
228
+ </div>
229
+ <div class="p-4">
230
+ <h3 class="font-bold text-lg mb-1">Sunny Wheat</h3>
231
+ <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p>
232
+ <p class="text-gray-700 mb-4">Безалкогольное пшеничное пиво с освежающим вкусом.</p>
233
+ <div class="flex justify-between items-center">
234
+ <span class="font-bold text-lg">310 ₽</span>
235
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Sunny Wheat" data-price="310">
236
+ В корзину
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Beer Card 3 -->
243
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc">
244
+ <div class="relative">
245
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc IPA" class="w-full h-48 object-cover">
246
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span>
247
+ </div>
248
+ <div class="p-4">
249
+ <h3 class="font-bold text-lg mb-1">Hop Water</h3>
250
+ <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p>
251
+ <p class="text-gray-700 mb-4">Безалкогольный IPA с хмелевым вкусом без алкоголя.</p>
252
+ <div class="flex justify-between items-center">
253
+ <span class="font-bold text-lg">350 ₽</span>
254
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Hop Water" data-price="350">
255
+ В корзину
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Beer Card 4 -->
262
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc">
263
+ <div class="relative">
264
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc" class="w-full h-48 object-cover">
265
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span>
266
+ </div>
267
+ <div class="p-4">
268
+ <h3 class="font-bold text-lg mb-1">Clear Mind</h3>
269
+ <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p>
270
+ <p class="text-gray-700 mb-4">Легкое безалкогольное пиво с чистым вкусом.</p>
271
+ <div class="flex justify-between items-center">
272
+ <span class="font-bold text-lg">260 ₽</span>
273
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Clear Mind" data-price="260">
274
+ В корзину
275
+ </button>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Imported Beer Section -->
284
+ <section id="import" class="py-12 bg-gray-50">
285
+ <div class="container mx-auto px-4">
286
+ <div class="flex justify-between items-center mb-8">
287
+ <h2 class="text-3xl font-bold text-gray-800">Импортное пиво</h2>
288
+ <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a>
289
+ </div>
290
+
291
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
292
+ <!-- Beer Card 1 -->
293
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import">
294
+ <div class="relative">
295
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Belgian" class="w-full h-48 object-cover">
296
+ <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Бельгия</span>
297
+ </div>
298
+ <div class="p-4">
299
+ <h3 class="font-bold text-lg mb-1">Trappist Gold</h3>
300
+ <p class="text-gray-600 text-sm mb-2">8.5% ABV • 0.33L</p>
301
+ <p class="text-gray-700 mb-4">Настоящее траппистское пиво из Бельгии с богатым вкусом.</p>
302
+ <div class="flex justify-between items-center">
303
+ <span class="font-bold text-lg">890 ₽</span>
304
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Trappist Gold" data-price="890">
305
+ В корзину
306
+ </button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Beer Card 2 -->
312
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import">
313
+ <div class="relative">
314
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="German" class="w-full h-48 object-cover">
315
+ <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Германия</span>
316
+ </div>
317
+ <div class="p-4">
318
+ <h3 class="font-bold text-lg mb-1">Bavarian Lager</h3>
319
+ <p class="text-gray-600 text-sm mb-2">5.2% ABV • 0.5L</p>
320
+ <p class="text-gray-700 mb-4">Классический немецкий лагер по традиционному рецепту.</p>
321
+ <div class="flex justify-between items-center">
322
+ <span class="font-bold text-lg">650 ₽</span>
323
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Bavarian Lager" data-price="650">
324
+ В корзину
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Beer Card 3 -->
331
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import">
332
+ <div class="relative">
333
+ <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Czech" class="w-full h-48 object-cover">
334
+ <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Чехия</span>
335
+ </div>
336
+ <div class="p-4">
337
+ <h3 class="font-bold text-lg mb-1">Pilsner Original</h3>
338
+ <p class="text-gray-600 text-sm mb-2">4.8% ABV • 0.5L</p>
339
+ <p class="text-gray-700 mb-4">Оригинальный чешский пилснер с 1842 года.</p>
340
+ <div class="flex justify-between items-center">
341
+ <span class="font-bold text-lg">720 ₽</span>
342
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Pilsner Original" data-price="720">
343
+ В корзину
344
+ </button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Beer Card 4 -->
350
+ <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import">
351
+ <div class="relative">
352
+ <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="USA" class="w-full h-48 object-cover">
353
+ <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">США</span>
354
+ </div>
355
+ <div class="p-4">
356
+ <h3 class="font-bold text-lg mb-1">West Coast IPA</h3>
357
+ <p class="text-gray-600 text-sm mb-2">6.8% ABV • 0.5L</p>
358
+ <p class="text-gray-700 mb-4">Американский IPA с интенсивным хмелевым вкусом.</p>
359
+ <div class="flex justify-between items-center">
360
+ <span class="font-bold text-lg">780 ₽</span>
361
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="West Coast IPA" data-price="780">
362
+ В корзину
363
+ </button>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- About Section -->
372
+ <section id="about" class="py-16 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <div class="flex flex-col md:flex-row items-center">
375
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
376
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Пивоварня" class="rounded-lg shadow-lg w-full">
377
+ </div>
378
+ <div class="md:w-1/2">
379
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">О нашей пивоварне</h2>
380
+ <p class="text-gray-600 mb-4">CraftBeer - это семейная пивоварня, основанная в 2010 году. Мы специализируемся на создании уникальных сортов пива с использованием только натуральных ингредиентов.</p>
381
+ <p class="text-gray-600 mb-6">Наши пивовары - настоящие мастера своего дела, которые сочетают традиционные рецепты с современными технологиями. Каждая партия пива проходит строгий контроль качества.</p>
382
+
383
+ <div class="grid grid-cols-2 gap-4 mb-6">
384
+ <div class="flex items-center">
385
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
386
+ <i class="fas fa-award text-amber-600"></i>
387
+ </div>
388
+ <span class="font-medium">Лучшая пивоварня 2022</span>
389
+ </div>
390
+ <div class="flex items-center">
391
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
392
+ <i class="fas fa-leaf text-amber-600"></i>
393
+ </div>
394
+ <span class="font-medium">Натуральные ингредиенты</span>
395
+ </div>
396
+ <div class="flex items-center">
397
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
398
+ <i class="fas fa-truck text-amber-600"></i>
399
+ </div>
400
+ <span class="font-medium">Быстрая доставка</span>
401
+ </div>
402
+ <div class="flex items-center">
403
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
404
+ <i class="fas fa-medal text-amber-600"></i>
405
+ </div>
406
+ <span class="font-medium">15+ наград</span>
407
+ </div>
408
+ </div>
409
+
410
+ <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition">
411
+ Узнать больше
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- Testimonials -->
419
+ <section class="py-16 bg-gray-50">
420
+ <div class="container mx-auto px-4">
421
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Отзывы наших клиентов</h2>
422
+
423
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
424
+ <!-- Testimonial 1 -->
425
+ <div class="bg-white p-6 rounded-lg shadow-md">
426
+ <div class="flex items-center mb-4">
427
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Алексей" class="w-12 h-12 rounded-full mr-4">
428
+ <div>
429
+ <h4 class="font-bold">Алексей</h4>
430
+ <div class="flex text-amber-400">
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ <p class="text-gray-600">"Hop Explosion IPA - это просто бомба! Такого насыщенного хмелевого вкуса я еще не пробовал. Доставка быстрая, пиво пришло охлажденным."</p>
440
+ </div>
441
+
442
+ <!-- Testimonial 2 -->
443
+ <div class="bg-white p-6 rounded-lg shadow-md">
444
+ <div class="flex items-center mb-4">
445
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Елена" class="w-12 h-12 rounded-full mr-4">
446
+ <div>
447
+ <h4 class="font-bold">Елена</h4>
448
+ <div class="flex text-amber-400">
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star-half-alt"></i>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ <p class="text-gray-600">"Очень довольна безалкогольным ассортиментом. Drive Safe - отличный вариант для тех, кто за рулем. Вкус почти как у настоящего пива!"</p>
458
+ </div>
459
+
460
+ <!-- Testimonial 3 -->
461
+ <div class="bg-white p-6 rounded-lg shadow-md">
462
+ <div class="flex items-center mb-4">
463
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Дмитрий" class="w-12 h-12 rounded-full mr-4">
464
+ <div>
465
+ <h4 class="font-bold">Дмитрий</h4>
466
+ <div class="flex text-amber-400">
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ <p class="text-gray-600">"Заказал Trappist Gold из Бельгии - это нечто! Настоящее траппистское пиво с богатым вкусом. Цена соответствует качеству. Рекомендую!"</p>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </section>
480
+
481
+ <!-- Newsletter -->
482
+ <section class="py-16 bg-amber-800 text-white">
483
+ <div class="container mx-auto px-4 text-center">
484
+ <h2 class="text-3xl font-bold mb-4">Подпишитесь на нашу рассылку</h2>
485
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Узнавайте первыми о новых сортах пива, специальных предложениях и мероприятиях</p>
486
+
487
+ <div class="max-w-md mx-auto flex">
488
+ <input type="email" placeholder="Ваш email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
489
+ <button class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-lg font-medium transition">
490
+ Подписаться
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- Footer -->
497
+ <footer class="bg-gray-900 text-white py-12">
498
+ <div class="container mx-auto px-4">
499
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
500
+ <div>
501
+ <div class="flex items-center space-x-2 mb-4">
502
+ <i class="fas fa-beer text-2xl"></i>
503
+ <h3 class="text-xl font-bold">CraftBeer</h3>
504
+ </div>
505
+ <p class="text-gray-400 mb-4">Лучшее крафтовое пиво с доставкой по всей России.</p>
506
+ <div class="flex space-x-4">
507
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-vk"></i></a>
508
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a>
509
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
510
+ </div>
511
+ </div>
512
+
513
+ <div>
514
+ <h4 class="text-lg font-bold mb-4">Меню</h4>
515
+ <ul class="space-y-2">
516
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Главная</a></li>
517
+ <li><a href="#craft" class="text-gray-400 hover:text-white transition">Крафтовое пиво</a></li>
518
+ <li><a href="#non-alc" class="text-gray-400 hover:text-white transition">Безалкогольное</a></li>
519
+ <li><a href="#import" class="text-gray-400 hover:text-white transition">Импортное</a></li>
520
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">О нас</a></li>
521
+ </ul>
522
+ </div>
523
+
524
+ <div>
525
+ <h4 class="text-lg font-bold mb-4">Контакты</h4>
526
+ <ul class="space-y-2 text-gray-400">
527
+ <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Пивоваров, 15</li>
528
+ <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</li>
529
+ <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@craftbeer.ru</li>
530
+ <li class="flex items-center"><i class="fas fa-clock mr-2"></i> Ежедневно 10:00 - 22:00</li>
531
+ </ul>
532
+ </div>
533
+
534
+ <div>
535
+ <h4 class="text-lg font-bold mb-4">Оплата и доставка</h4>
536
+ <ul class="space-y-2 text-gray-400">
537
+ <li class="flex items-center"><i class="fas fa-credit-card mr-2"></i> Онлайн-оплата</li>
538
+ <li class="flex items-center"><i class="fas fa-money-bill-wave mr-2"></i> Наличными курьеру</li>
539
+ <li class="flex items-center"><i class="fas fa-truck mr-2"></i> Доставка 1-2 дня</li>
540
+ <li class="flex items-center"><i class="fas fa-beer mr-2"></i> Самовывоз</li>
541
+ </ul>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
546
+ <p>© 2023 CraftBeer. Все права защищены. Лицензия на розничную продажу алкоголя № XXXXXXX</p>
547
+ <p class="mt-2 text-sm">Чрезмерное употребление алкоголя вредит вашему здоровью</p>
548
+ </div>
549
+ </div>
550
+ </footer>
551
+
552
+ <script>
553
+ // Mobile menu toggle
554
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
555
+ const mobileMenu = document.getElementById('mobile-menu');
556
+
557
+ mobileMenuBtn.addEventListener('click', () => {
558
+ mobileMenu.classList.toggle('hidden');
559
+ });
560
+
561
+ // Cart functionality
562
+ const cartBtn = document.getElementById('cart-btn');
563
+ const cartPreview = document.getElementById('cart-preview');
564
+ const cartCount = document.getElementById('cart-count');
565
+ const cartItems = document.getElementById('cart-items');
566
+ const cartTotal = document.getElementById('cart-total');
567
+
568
+ let cart = [];
569
+
570
+ cartBtn.addEventListener('click', (e) => {
571
+ e.stopPropagation();
572
+ cartPreview.classList.toggle('hidden');
573
+ });
574
+
575
+ document.addEventListener('click', (e) => {
576
+ if (!cartPreview.contains(e.target) && e.target !== cartBtn) {
577
+ cartPreview.classList.add('hidden');
578
+ }
579
+ });
580
+
581
+ // Add to cart buttons
582
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
583
+
584
+ addToCartButtons.forEach(button => {
585
+ button.addEventListener('click', () => {
586
+ const name = button.getAttribute('data-name');
587
+ const price = parseInt(button.getAttribute('data-price'));
588
+
589
+ // Add to cart
590
+ cart.push({ name, price });
591
+
592
+ // Update cart UI
593
+ updateCart();
594
+
595
+ // Show cart preview
596
+ cartPreview.classList.remove('hidden');
597
+
598
+ // Button feedback
599
+ button.innerHTML = '<i class="fas fa-check"></i> Добавлено';
600
+ button.classList.add('bg-green-500', 'hover:bg-green-600');
601
+ button.classList.remove('bg-amber-600', 'hover:bg-amber-700');
602
+
603
+ setTimeout(() => {
604
+ button.innerHTML = 'В корзину';
605
+ button.classList.remove('bg-green-500', 'hover:bg-green-600');
606
+ button.classList.add('bg-amber-600', 'hover:bg-amber-700');
607
+ }, 2000);
608
+ });
609
+ });
610
+
611
+ function updateCart() {
612
+ // Update count
613
+ cartCount.textContent = cart.length;
614
+
615
+ // Update items list
616
+ if (cart.length === 0) {
617
+ cartItems.innerHTML = '<p class="text-sm text-gray-500">Корзина пуста</p>';
618
+ } else {
619
+ // Group items by name and count quantity
620
+ const itemsMap = {};
621
+ cart.forEach(item => {
622
+ if (!itemsMap[item.name]) {
623
+ itemsMap[item.name] = { ...item, quantity: 0 };
624
+ }
625
+ itemsMap[item.name].quantity++;
626
+ });
627
+
628
+ const itemsList = Object.values(itemsMap);
629
+
630
+ cartItems.innerHTML = itemsList.map(item => `
631
+ <div class="flex justify-between items-center py-1 border-b">
632
+ <span>${item.name}</span>
633
+ <span>${item.quantity} × ${item.price} ₽</span>
634
+ </div>
635
+ `).join('');
636
+ }
637
+
638
+ // Update total
639
+ const total = cart.reduce((sum, item) => sum + item.price, 0);
640
+ cartTotal.textContent = `${total} ₽`;
641
+ }
642
+
643
+ // Category filtering
644
+ const categoryButtons = document.querySelectorAll('.category-btn');
645
+
646
+ categoryButtons.forEach(button => {
647
+ button.addEventListener('click', () => {
648
+ // Update active button
649
+ categoryButtons.forEach(btn => btn.classList.remove('active'));
650
+ button.classList.add('active');
651
+
652
+ // Get category to filter
653
+ const category = button.getAttribute('data-category');
654
+
655
+ // Show/hide beer cards
656
+ const beerCards = document.querySelectorAll('.beer-card');
657
+
658
+ beerCards.forEach(card => {
659
+ if (category === 'all' || card.getAttribute('data-category').includes(category)) {
660
+ card.style.display = 'block';
661
+ } else {
662
+ card.style.display = 'none';
663
+ }
664
+ });
665
+ });
666
+ });
667
+
668
+ // Smooth scrolling for anchor links
669
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
670
+ anchor.addEventListener('click', function (e) {
671
+ e.preventDefault();
672
+
673
+ const targetId = this.getAttribute('href');
674
+ const targetElement = document.querySelector(targetId);
675
+
676
+ if (targetElement) {
677
+ window.scrollTo({
678
+ top: targetElement.offsetTop - 80,
679
+ behavior: 'smooth'
680
+ });
681
+
682
+ // Close mobile menu if open
683
+ mobileMenu.classList.add('hidden');
684
+ }
685
+ });
686
+ });
687
+ </script>
688
+ <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=14zy/test-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
689
+ </html>
prompts.txt ADDED
File without changes