Hugging Face's logo

Spaces:
Lacoz
/
grocery
Running

App Files Community
Lacoz commited on
Commit
ef901e6
·
verified ·
1 Parent(s): ad4ab0e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +440 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Grocery
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: blue
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: grocery
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,440 @@
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>Healthy Grocery Discount Finder - Brezova pod Bradlom</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
+ .fade-in {
11
+ animation: fadeIn 0.5s ease-in-out;
12
+ }
13
+
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; transform: translateY(10px); }
16
+ to { opacity: 1; transform: translateY(0); }
17
+ }
18
+
19
+ .health-score {
20
+ position: relative;
21
+ width: 40px;
22
+ height: 40px;
23
+ border-radius: 50%;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ font-weight: bold;
28
+ color: white;
29
+ }
30
+
31
+ .progress-ring__circle {
32
+ transition: stroke-dashoffset 0.5s;
33
+ transform: rotate(-90deg);
34
+ transform-origin: 50% 50%;
35
+ }
36
+
37
+ .product-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
40
+ }
41
+
42
+ .nutrition-bar {
43
+ height: 6px;
44
+ border-radius: 3px;
45
+ margin-top: 2px;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <header class="bg-green-700 text-white shadow-lg">
51
+ <div class="container mx-auto px-4 py-6">
52
+ <div class="flex flex-col md:flex-row justify-between items-center">
53
+ <div class="flex items-center mb-4 md:mb-0">
54
+ <i class="fas fa-shopping-basket text-3xl mr-3"></i>
55
+ <h1 class="text-2xl md:text-3xl font-bold">Healthy Savings Brezová</h1>
56
+ </div>
57
+ <div class="flex items-center space-x-2">
58
+ <span class="text-sm md:text-base">Brezová pod Bradlom</span>
59
+ <i class="fas fa-map-marker-alt"></i>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <main class="container mx-auto px-4 py-8">
66
+ <section class="mb-12 bg-white rounded-xl shadow-md p-6">
67
+ <h2 class="text-2xl font-semibold mb-6 text-gray-800">Find Healthy Discounts</h2>
68
+
69
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
70
+ <div class="bg-green-50 rounded-lg p-4 border border-green-100">
71
+ <h3 class="font-medium text-green-800 mb-3 flex items-center">
72
+ <i class="fas fa-store mr-2"></i> Stores to Check
73
+ </h3>
74
+ <ul class="space-y-2">
75
+ <li class="flex items-center">
76
+ <input type="checkbox" id="store1" checked class="mr-2 h-4 w-4 text-green-600">
77
+ <label for="store1" class="text-gray-700">COOP Jednota</label>
78
+ </li>
79
+ <li class="flex items-center">
80
+ <input type="checkbox" id="store2" checked class="mr-2 h-4 w-4 text-green-600">
81
+ <label for="store2" class="text-gray-700">Terno</label>
82
+ </li>
83
+ <li class="flex items-center">
84
+ <input type="checkbox" id="store3" checked class="mr-2 h-4 w-4 text-green-600">
85
+ <label for="store3" class="text-gray-700">Potraviny Centrum</label>
86
+ </li>
87
+ </ul>
88
+ </div>
89
+
90
+ <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
91
+ <h3 class="font-medium text-blue-800 mb-3 flex items-center">
92
+ <i class="fas fa-user mr-2"></i> Your Preferences
93
+ </h3>
94
+ <div class="space-y-4">
95
+ <div>
96
+ <label class="block text-sm font-medium text-gray-700 mb-1">Diet Type</label>
97
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200">
98
+ <option>Balanced</option>
99
+ <option>Mediterranean</option>
100
+ <option>Low-carb</option>
101
+ <option>Vegetarian</option>
102
+ </select>
103
+ </div>
104
+ <div>
105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Days to plan</label>
106
+ <input type="number" value="3" min="1" max="7" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200">
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
112
+ <h3 class="font-medium text-purple-800 mb-3 flex items-center">
113
+ <i class="fas fa-heartbeat mr-2"></i> Health Filters
114
+ </h3>
115
+ <div class="space-y-3">
116
+ <div class="flex items-center">
117
+ <input type="checkbox" id="organic" checked class="mr-2 h-4 w-4 text-purple-600">
118
+ <label for="organic" class="text-gray-700">Prefer organic</label>
119
+ </div>
120
+ <div class="flex items-center">
121
+ <input type="checkbox" id="sugar" checked class="mr-2 h-4 w-4 text-purple-600">
122
+ <label for="sugar" class="text-gray-700">Low sugar</label>
123
+ </div>
124
+ <div class="flex items-center">
125
+ <input type="checkbox" id="processed" class="mr-2 h-4 w-4 text-purple-600">
126
+ <label for="processed" class="text-gray-700">No processed foods</label>
127
+ </div>
128
+ </div>
129
+ <button id="findDealsBtn" class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center">
130
+ <i class="fas fa-search mr-2"></i> Find Healthy Deals
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <section id="loadingSection" class="hidden text-center py-12">
137
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-600 mb-4"></div>
138
+ <h3 class="text-xl font-medium text-gray-700">Scanning local stores for healthy discounts...</h3>
139
+ <p class="text-gray-500 mt-2">Checking COOP Jednota, Terno, and Potraviny Centrum</p>
140
+ </section>
141
+
142
+ <section id="resultsSection" class="hidden fade-in">
143
+ <div class="flex justify-between items-center mb-6">
144
+ <h2 class="text-2xl font-semibold text-gray-800">Recommended Healthy Buys</h2>
145
+ <div class="flex items-center bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
146
+ <i class="fas fa-calendar-alt mr-2"></i>
147
+ <span>3-day meal plan</span>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="mb-8 bg-white rounded-xl shadow-md overflow-hidden">
152
+ <div class="grid grid-cols-5 bg-gray-100 p-3 font-medium text-gray-700">
153
+ <div class="col-span-2">Product</div>
154
+ <div>Store</div>
155
+ <div>Price</div>
156
+ <div>Health Score</div>
157
+ </div>
158
+
159
+ <div id="productList" class="divide-y divide-gray-200">
160
+ <!-- Products will be added here by JavaScript -->
161
+ </div>
162
+ </div>
163
+
164
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
165
+ <div class="bg-white rounded-xl shadow-md p-6">
166
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
167
+ <i class="fas fa-chart-pie mr-2 text-blue-500"></i> Nutrition Overview
168
+ </h3>
169
+ <div class="space-y-3">
170
+ <div>
171
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
172
+ <span>Proteins</span>
173
+ <span>35%</span>
174
+ </div>
175
+ <div class="nutrition-bar bg-blue-200 w-full">
176
+ <div class="nutrition-bar bg-blue-500" style="width: 35%; height: 6px;"></div>
177
+ </div>
178
+ </div>
179
+ <div>
180
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
181
+ <span>Carbs</span>
182
+ <span>40%</span>
183
+ </div>
184
+ <div class="nutrition-bar bg-green-200 w-full">
185
+ <div class="nutrition-bar bg-green-500" style="width: 40%; height: 6px;"></div>
186
+ </div>
187
+ </div>
188
+ <div>
189
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
190
+ <span>Fats</span>
191
+ <span>25%</span>
192
+ </div>
193
+ <div class="nutrition-bar bg-yellow-200 w-full">
194
+ <div class="nutrition-bar bg-yellow-500" style="width: 25%; height: 6px;"></div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="bg-white rounded-xl shadow-md p-6">
201
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
202
+ <i class="fas fa-coins mr-2 text-green-500"></i> Savings Summary
203
+ </h3>
204
+ <div class="space-y-2">
205
+ <div class="flex justify-between">
206
+ <span class="text-gray-600">Original total:</span>
207
+ <span class="font-medium">€42.75</span>
208
+ </div>
209
+ <div class="flex justify-between">
210
+ <span class="text-gray-600">Discount total:</span>
211
+ <span class="font-medium text-green-600">€31.20</span>
212
+ </div>
213
+ <div class="border-t border-gray-200 my-2"></div>
214
+ <div class="flex justify-between font-semibold">
215
+ <span>You save:</span>
216
+ <span class="text-green-600">€11.55 (27%)</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="bg-white rounded-xl shadow-md p-6">
223
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
224
+ <i class="fas fa-utensils mr-2 text-purple-500"></i> Suggested 3-Day Meal Plan
225
+ </h3>
226
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
227
+ <div class="border border-gray-200 rounded-lg p-4">
228
+ <h4 class="font-medium text-center text-blue-600 mb-3">Day 1</h4>
229
+ <ul class="space-y-2 text-sm">
230
+ <li class="flex items-start">
231
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">B</span>
232
+ <span>Greek yogurt with oats and berries</span>
233
+ </li>
234
+ <li class="flex items-start">
235
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">L</span>
236
+ <span>Grilled chicken with quinoa salad</span>
237
+ </li>
238
+ <li class="flex items-start">
239
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mr-2">D</span>
240
+ <span>Baked salmon with roasted vegetables</span>
241
+ </li>
242
+ </ul>
243
+ </div>
244
+ <div class="border border-gray-200 rounded-lg p-4">
245
+ <h4 class="font-medium text-center text-blue-600 mb-3">Day 2</h4>
246
+ <ul class="space-y-2 text-sm">
247
+ <li class="flex items-start">
248
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">B</span>
249
+ <span>Avocado toast with poached eggs</span>
250
+ </li>
251
+ <li class="flex items-start">
252
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">L</span>
253
+ <span>Lentil soup with whole grain bread</span>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mr-2">D</span>
257
+ <span>Turkey meatballs with zucchini noodles</span>
258
+ </li>
259
+ </ul>
260
+ </div>
261
+ <div class="border border-gray-200 rounded-lg p-4">
262
+ <h4 class="font-medium text-center text-blue-600 mb-3">Day 3</h4>
263
+ <ul class="space-y-2 text-sm">
264
+ <li class="flex items-start">
265
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">B</span>
266
+ <span>Smoothie bowl with banana and nuts</span>
267
+ </li>
268
+ <li class="flex items-start">
269
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">L</span>
270
+ <span>Tuna salad with mixed greens</span>
271
+ </li>
272
+ <li class="flex items-start">
273
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mr-2">D</span>
274
+ <span>Stir-fried tofu with brown rice</span>
275
+ </li>
276
+ </ul>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+ </main>
282
+
283
+ <footer class="bg-gray-800 text-white py-8">
284
+ <div class="container mx-auto px-4">
285
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
286
+ <div>
287
+ <h3 class="text-lg font-medium mb-4">Healthy Savings Brezová</h3>
288
+ <p class="text-gray-400">Helping you find the healthiest discounts in Brezová pod Bradlom since 2023.</p>
289
+ </div>
290
+ <div>
291
+ <h3 class="text-lg font-medium mb-4">Stores We Check</h3>
292
+ <ul class="space-y-2 text-gray-400">
293
+ <li><i class="fas fa-store mr-2 text-gray-500"></i> COOP Jednota</li>
294
+ <li><i class="fas fa-store mr-2 text-gray-500"></i> Terno</li>
295
+ <li><i class="fas fa-store mr-2 text-gray-500"></i> Potraviny Centrum</li>
296
+ </ul>
297
+ </div>
298
+ <div>
299
+ <h3 class="text-lg font-medium mb-4">Contact</h3>
300
+ <p class="text-gray-400 mb-2"><i class="fas fa-envelope mr-2 text-gray-500"></i> healthysavings@example.com</p>
301
+ <p class="text-gray-400"><i class="fas fa-phone mr-2 text-gray-500"></i> +421 123 456 789</p>
302
+ </div>
303
+ </div>
304
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
305
+ <p>&copy; 2023 Healthy Savings Brezová. All rights reserved.</p>
306
+ </div>
307
+ </div>
308
+ </footer>
309
+
310
+ <script>
311
+ document.getElementById('findDealsBtn').addEventListener('click', function() {
312
+ // Show loading section
313
+ document.getElementById('loadingSection').classList.remove('hidden');
314
+
315
+ // Hide other sections
316
+ document.querySelector('section:first-of-type').classList.add('hidden');
317
+
318
+ // Simulate API call with timeout
319
+ setTimeout(function() {
320
+ document.getElementById('loadingSection').classList.add('hidden');
321
+ showResults();
322
+ }, 2500);
323
+ });
324
+
325
+ function showResults() {
326
+ const products = [
327
+ {
328
+ name: "Organic Greek Yogurt",
329
+ store: "COOP Jednota",
330
+ originalPrice: "2.99€",
331
+ discountPrice: "2.49€",
332
+ healthScore: 92,
333
+ image: "yogurt",
334
+ nutrition: { protein: 18, carbs: 6, fat: 0.4 }
335
+ },
336
+ {
337
+ name: "Fresh Salmon Fillet",
338
+ store: "Terno",
339
+ originalPrice: "8.99€",
340
+ discountPrice: "6.99€",
341
+ healthScore: 88,
342
+ image: "salmon",
343
+ nutrition: { protein: 22, carbs: 0, fat: 13 }
344
+ },
345
+ {
346
+ name: "Quinoa 500g",
347
+ store: "Potraviny Centrum",
348
+ originalPrice: "3.50€",
349
+ discountPrice: "2.99€",
350
+ healthScore: 85,
351
+ image: "quinoa",
352
+ nutrition: { protein: 14, carbs: 64, fat: 6 }
353
+ },
354
+ {
355
+ name: "Organic Mixed Berries",
356
+ store: "COOP Jednota",
357
+ originalPrice: "4.20€",
358
+ discountPrice: "3.50€",
359
+ healthScore: 95,
360
+ image: "berries",
361
+ nutrition: { protein: 1, carbs: 15, fat: 0.5 }
362
+ },
363
+ {
364
+ name: "Avocados (pack of 3)",
365
+ store: "Terno",
366
+ originalPrice: "3.99€",
367
+ discountPrice: "2.99€",
368
+ healthScore: 90,
369
+ image: "avocado",
370
+ nutrition: { protein: 2, carbs: 9, fat: 15 }
371
+ },
372
+ {
373
+ name: "Free-range Eggs (10pcs)",
374
+ store: "Potraviny Centrum",
375
+ originalPrice: "3.20€",
376
+ discountPrice: "2.75€",
377
+ healthScore: 82,
378
+ image: "eggs",
379
+ nutrition: { protein: 13, carbs: 1, fat: 11 }
380
+ },
381
+ {
382
+ name: "Whole Grain Bread",
383
+ store: "COOP Jednota",
384
+ originalPrice: "1.99€",
385
+ discountPrice: "1.49€",
386
+ healthScore: 78,
387
+ image: "bread",
388
+ nutrition: { protein: 9, carbs: 41, fat: 1.5 }
389
+ },
390
+ {
391
+ name: "Fresh Spinach",
392
+ store: "Terno",
393
+ originalPrice: "1.50€",
394
+ discountPrice: "1.20€",
395
+ healthScore: 96,
396
+ image: "spinach",
397
+ nutrition: { protein: 3, carbs: 4, fat: 0.4 }
398
+ }
399
+ ];
400
+
401
+ const productList = document.getElementById('productList');
402
+ productList.innerHTML = '';
403
+
404
+ products.forEach(product => {
405
+ const healthColor = product.healthScore > 85 ? 'bg-green-500' :
406
+ product.healthScore > 75 ? 'bg-yellow-500' : 'bg-red-500';
407
+
408
+ const productElement = document.createElement('div');
409
+ productElement.className = 'grid grid-cols-5 p-3 items-center product-card transition duration-300 hover:bg-gray-50';
410
+ productElement.innerHTML = `
411
+ <div class="col-span-2 flex items-center">
412
+ <div class="bg-gray-200 rounded-lg w-12 h-12 flex items-center justify-center mr-3 text-gray-500">
413
+ <i class="fas fa-${product.image}"></i>
414
+ </div>
415
+ <div>
416
+ <div class="font-medium">${product.name}</div>
417
+ <div class="text-xs text-gray-500">${product.nutrition.protein}g protein • ${product.nutrition.carbs}g carbs • ${product.nutrition.fat}g fat</div>
418
+ </div>
419
+ </div>
420
+ <div class="text-gray-700">${product.store}</div>
421
+ <div>
422
+ <span class="text-gray-500 line-through mr-2">${product.originalPrice}</span>
423
+ <span class="font-medium text-green-600">${product.discountPrice}</span>
424
+ </div>
425
+ <div class="flex items-center">
426
+ <div class="health-score ${healthColor} mr-2">
427
+ ${product.healthScore}
428
+ </div>
429
+ <div class="text-xs text-gray-500">/100</div>
430
+ </div>
431
+ `;
432
+
433
+ productList.appendChild(productElement);
434
+ });
435
+
436
+ document.getElementById('resultsSection').classList.remove('hidden');
437
+ }
438
+ </script>
439
+ <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=Lacoz/grocery" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
440
+ </html>