Hugging Face's logo

Spaces:
rockguard
/
karaoke
Running

App Files Community
rockguard commited on
Commit
a793445
·
verified ·
1 Parent(s): 3f59d79

creami un app windows usando visual studio 2022 per fare il karaoke - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +468 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Karaoke
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: green
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: karaoke
3
+ emoji: 🐳
4
+ colorFrom: red
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,468 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Karaoke App</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
15
+ color: white;
16
+ min-height: 100vh;
17
+ }
18
+
19
+ .lyrics-line {
20
+ transition: all 0.3s ease;
21
+ }
22
+
23
+ .lyrics-line.active {
24
+ color: #f72585;
25
+ font-weight: bold;
26
+ transform: scale(1.05);
27
+ text-shadow: 0 0 10px rgba(247, 37, 133, 0.7);
28
+ }
29
+
30
+ .progress-bar {
31
+ height: 6px;
32
+ background: rgba(255, 255, 255, 0.2);
33
+ border-radius: 3px;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .progress-fill {
38
+ height: 100%;
39
+ background: #f72585;
40
+ width: 0%;
41
+ transition: width 0.1s linear;
42
+ }
43
+
44
+ .volume-slider {
45
+ -webkit-appearance: none;
46
+ width: 100%;
47
+ height: 6px;
48
+ background: rgba(255, 255, 255, 0.2);
49
+ border-radius: 3px;
50
+ outline: none;
51
+ }
52
+
53
+ .volume-slider::-webkit-slider-thumb {
54
+ -webkit-appearance: none;
55
+ appearance: none;
56
+ width: 16px;
57
+ height: 16px;
58
+ border-radius: 50%;
59
+ background: #f72585;
60
+ cursor: pointer;
61
+ }
62
+
63
+ .song-card:hover {
64
+ transform: translateY(-5px);
65
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
66
+ }
67
+
68
+ .marquee {
69
+ white-space: nowrap;
70
+ overflow: hidden;
71
+ display: inline-block;
72
+ animation: marquee 10s linear infinite;
73
+ }
74
+
75
+ @keyframes marquee {
76
+ 0% { transform: translateX(100%); }
77
+ 100% { transform: translateX(-100%); }
78
+ }
79
+
80
+ /* Animazione microfono */
81
+ @keyframes pulse {
82
+ 0% { transform: scale(1); }
83
+ 50% { transform: scale(1.1); }
84
+ 100% { transform: scale(1); }
85
+ }
86
+
87
+ .mic-pulse {
88
+ animation: pulse 1.5s infinite;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="min-h-screen flex flex-col">
93
+ <!-- Header -->
94
+ <header class="bg-black bg-opacity-50 py-4 px-6 flex items-center justify-between border-b border-gray-700">
95
+ <div class="flex items-center space-x-4">
96
+ <i class="fas fa-music text-2xl text-pink-500"></i>
97
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">Karaoke Star</h1>
98
+ </div>
99
+ <div class="flex items-center space-x-4">
100
+ <button class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-full transition flex items-center">
101
+ <i class="fas fa-user-plus mr-2"></i> Login
102
+ </button>
103
+ <button class="text-gray-300 hover:text-white">
104
+ <i class="fas fa-cog text-xl"></i>
105
+ </button>
106
+ </div>
107
+ </header>
108
+
109
+ <!-- Main Content -->
110
+ <main class="flex-1 flex flex-col lg:flex-row p-4 md:p-6 gap-6">
111
+ <!-- Left Panel - Song List -->
112
+ <div class="w-full lg:w-1/3 bg-black bg-opacity-30 rounded-xl p-4 backdrop-blur-sm">
113
+ <div class="flex justify-between items-center mb-6">
114
+ <h2 class="text-xl font-bold">Canzoni disponibili</h2>
115
+ <div class="relative">
116
+ <input type="text" placeholder="Cerca canzone..."
117
+ class="bg-gray-800 bg-opacity-50 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-pink-500 w-48">
118
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="space-y-3 max-h-[calc(100vh-200px)] overflow-y-auto pr-2 scrollbar-thin">
123
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
124
+ <div class="flex items-center space-x-4">
125
+ <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center">
126
+ <i class="fas fa-music text-white"></i>
127
+ </div>
128
+ <div>
129
+ <h3 class="font-semibold">Bohemian Rhapsody</h3>
130
+ <p class="text-sm text-gray-400">Queen</p>
131
+ </div>
132
+ </div>
133
+ <button class="text-pink-500 hover:text-pink-400">
134
+ <i class="fas fa-plus"></i>
135
+ </button>
136
+ </div>
137
+
138
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
139
+ <div class="flex items-center space-x-4">
140
+ <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
141
+ <i class="fas fa-music text-white"></i>
142
+ </div>
143
+ <div>
144
+ <h3 class="font-semibold">Sweet Child O' Mine</h3>
145
+ <p class="text-sm text-gray-400">Guns N' Roses</p>
146
+ </div>
147
+ </div>
148
+ <button class="text-pink-500 hover:text-pink-400">
149
+ <i class="fas fa-plus"></i>
150
+ </button>
151
+ </div>
152
+
153
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
154
+ <div class="flex items-center space-x-4">
155
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
156
+ <i class="fas fa-music text-white"></i>
157
+ </div>
158
+ <div>
159
+ <h3 class="font-semibold">Billie Jean</h3>
160
+ <p class="text-sm text-gray-400">Michael Jackson</p>
161
+ </div>
162
+ </div>
163
+ <button class="text-pink-500 hover:text-pink-400">
164
+ <i class="fas fa-plus"></i>
165
+ </button>
166
+ </div>
167
+
168
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
169
+ <div class="flex items-center space-x-4">
170
+ <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center">
171
+ <i class="fas fa-music text-white"></i>
172
+ </div>
173
+ <div>
174
+ <h3 class="font-semibold">Livin' on a Prayer</h3>
175
+ <p class="text-sm text-gray-400">Bon Jovi</p>
176
+ </div>
177
+ </div>
178
+ <button class="text-pink-500 hover:text-pink-400">
179
+ <i class="fas fa-plus"></i>
180
+ </button>
181
+ </div>
182
+
183
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
184
+ <div class="flex items-center space-x-4">
185
+ <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
186
+ <i class="fas fa-music text-white"></i>
187
+ </div>
188
+ <div>
189
+ <h3 class="font-semibold">Don't Stop Believin'</h3>
190
+ <p class="text-sm text-gray-400">Journey</p>
191
+ </div>
192
+ </div>
193
+ <button class="text-pink-500 hover:text-pink-400">
194
+ <i class="fas fa-plus"></i>
195
+ </button>
196
+ </div>
197
+
198
+ <div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300">
199
+ <div class="flex items-center space-x-4">
200
+ <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center">
201
+ <i class="fas fa-music text-white"></i>
202
+ </div>
203
+ <div>
204
+ <h3 class="font-semibold">Like a Virgin</h3>
205
+ <p class="text-sm text-gray-400">Madonna</p>
206
+ </div>
207
+ </div>
208
+ <button class="text-pink-500 hover:text-pink-400">
209
+ <i class="fas fa-plus"></i>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Center Panel - Lyrics Display -->
216
+ <div class="flex-1 flex flex-col bg-black bg-opacity-30 rounded-xl p-6 backdrop-blur-sm">
217
+ <div class="flex items-center justify-between mb-6">
218
+ <div>
219
+ <h2 class="text-2xl font-bold">Bohemian Rhapsody</h2>
220
+ <p class="text-gray-300">Queen</p>
221
+ </div>
222
+ <div class="flex items-center space-x-4">
223
+ <div class="flex items-center space-x-2">
224
+ <i class="fas fa-star text-yellow-400"></i>
225
+ <span class="text-gray-300">Difficoltà: <span class="text-white">Media</span></span>
226
+ </div>
227
+ <div class="flex items-center space-x-2">
228
+ <i class="fas fa-clock text-blue-400"></i>
229
+ <span class="text-gray-300">Durata: <span class="text-white">5:55</span></span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="flex-1 flex flex-col items-center justify-center py-8">
235
+ <div class="w-full max-w-2xl text-center">
236
+ <div class="mb-8">
237
+ <div class="mic-pulse inline-block">
238
+ <i class="fas fa-microphone text-4xl text-pink-500"></i>
239
+ </div>
240
+ <div class="mt-4">
241
+ <span class="marquee text-xl font-semibold">🎤 Pronto a cantare? Seleziona una canzone e inizia il tuo karaoke! 🎤</span>
242
+ </div>
243
+ </div>
244
+
245
+ <div id="lyrics-container" class="space-y-6 text-xl text-gray-300">
246
+ <!-- Lyrics will be dynamically inserted here -->
247
+ <div class="lyrics-line">Seleziona una canzone per visualizzare il testo</div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="mt-auto">
253
+ <div class="progress-bar mb-2">
254
+ <div class="progress-fill"></div>
255
+ </div>
256
+ <div class="flex items-center justify-between">
257
+ <span class="text-sm text-gray-300">0:00</span>
258
+ <span class="text-sm text-gray-300">5:55</span>
259
+ </div>
260
+
261
+ <div class="flex items-center justify-center space-x-8 mt-6">
262
+ <button class="text-gray-300 hover:text-white text-2xl">
263
+ <i class="fas fa-step-backward"></i>
264
+ </button>
265
+ <button id="play-btn" class="bg-pink-600 hover:bg-pink-700 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl">
266
+ <i class="fas fa-play"></i>
267
+ </button>
268
+ <button class="text-gray-300 hover:text-white text-2xl">
269
+ <i class="fas fa-step-forward"></i>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Right Panel - Controls and Queue -->
276
+ <div class="w-full lg:w-1/4 bg-black bg-opacity-30 rounded-xl p-4 backdrop-blur-sm">
277
+ <div class="mb-6">
278
+ <h2 class="text-xl font-bold mb-4">Controlli</h2>
279
+ <div class="space-y-4">
280
+ <div>
281
+ <label class="block text-sm text-gray-300 mb-1">Volume</label>
282
+ <div class="flex items-center space-x-3">
283
+ <i class="fas fa-volume-down text-gray-300"></i>
284
+ <input type="range" min="0" max="100" value="70" class="volume-slider">
285
+ <i class="fas fa-volume-up text-gray-300"></i>
286
+ </div>
287
+ </div>
288
+
289
+ <div>
290
+ <label class="block text-sm text-gray-300 mb-1">Tono</label>
291
+ <div class="flex items-center space-x-3">
292
+ <i class="fas fa-arrow-down text-gray-300"></i>
293
+ <input type="range" min="-5" max="5" value="0" class="volume-slider">
294
+ <i class="fas fa-arrow-up text-gray-300"></i>
295
+ </div>
296
+ </div>
297
+
298
+ <div>
299
+ <label class="block text-sm text-gray-300 mb-1">Velocità</label>
300
+ <div class="flex items-center space-x-3">
301
+ <i class="fas fa-turtle text-gray-300"></i>
302
+ <input type="range" min="0.5" max="1.5" step="0.1" value="1" class="volume-slider">
303
+ <i class="fas fa-rabbit text-gray-300"></i>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="pt-4 border-t border-gray-700">
308
+ <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 rounded-lg flex items-center justify-center space-x-2">
309
+ <i class="fas fa-microphone"></i>
310
+ <span>Test Microfono</span>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div>
317
+ <h2 class="text-xl font-bold mb-4">Coda</h2>
318
+ <div class="space-y-3 max-h-64 overflow-y-auto scrollbar-thin">
319
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex items-center justify-between">
320
+ <div>
321
+ <h3 class="font-medium">Bohemian Rhapsody</h3>
322
+ <p class="text-xs text-gray-400">Queen</p>
323
+ </div>
324
+ <button class="text-red-400 hover:text-red-300">
325
+ <i class="fas fa-times"></i>
326
+ </button>
327
+ </div>
328
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex items-center justify-between">
329
+ <div>
330
+ <h3 class="font-medium">Sweet Child O' Mine</h3>
331
+ <p class="text-xs text-gray-400">Guns N' Roses</p>
332
+ </div>
333
+ <button class="text-red-400 hover:text-red-300">
334
+ <i class="fas fa-times"></i>
335
+ </button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </main>
341
+
342
+ <!-- Footer -->
343
+ <footer class="bg-black bg-opacity-50 py-3 px-6 text-center text-gray-400 text-sm border-t border-gray-700">
344
+ <p>Karaoke Star App © 2023 - Tutti i diritti riservati</p>
345
+ </footer>
346
+
347
+ <script>
348
+ document.addEventListener('DOMContentLoaded', function() {
349
+ const playBtn = document.getElementById('play-btn');
350
+ const progressFill = document.querySelector('.progress-fill');
351
+ const lyricsContainer = document.getElementById('lyrics-container');
352
+ let isPlaying = false;
353
+ let progress = 0;
354
+ let progressInterval;
355
+
356
+ // Sample lyrics for demonstration
357
+ const sampleLyrics = [
358
+ "Is this the real life?",
359
+ "Is this just fantasy?",
360
+ "Caught in a landslide,",
361
+ "No escape from reality.",
362
+ "",
363
+ "Open your eyes,",
364
+ "Look up to the skies and see,",
365
+ "I'm just a poor boy, I need no sympathy,",
366
+ "Because I'm easy come, easy go,",
367
+ "Little high, little low,",
368
+ "Any way the wind blows doesn't really matter to me, to me."
369
+ ];
370
+
371
+ // Populate lyrics container
372
+ lyricsContainer.innerHTML = '';
373
+ sampleLyrics.forEach(line => {
374
+ const div = document.createElement('div');
375
+ div.className = 'lyrics-line';
376
+ div.textContent = line || ' '; // Handle empty lines
377
+ lyricsContainer.appendChild(div);
378
+ });
379
+
380
+ // Highlight current lyric line
381
+ const lyricLines = document.querySelectorAll('.lyrics-line');
382
+ let currentLine = 0;
383
+
384
+ function highlightLyricLine(index) {
385
+ lyricLines.forEach((line, i) => {
386
+ if (i === index && line.textContent.trim() !== '') {
387
+ line.classList.add('active');
388
+ } else {
389
+ line.classList.remove('active');
390
+ }
391
+ });
392
+ }
393
+
394
+ // Play/pause functionality
395
+ playBtn.addEventListener('click', function() {
396
+ isPlaying = !isPlaying;
397
+
398
+ if (isPlaying) {
399
+ playBtn.innerHTML = '<i class="fas fa-pause"></i>';
400
+
401
+ // Simulate progress
402
+ progressInterval = setInterval(() => {
403
+ progress += 0.5;
404
+ progressFill.style.width = `${progress}%`;
405
+
406
+ // Update current lyric line based on progress
407
+ if (progress % 10 === 0 && currentLine < lyricLines.length - 1) {
408
+ currentLine++;
409
+ highlightLyricLine(currentLine);
410
+
411
+ // Scroll to keep current line visible
412
+ lyricLines[currentLine].scrollIntoView({
413
+ behavior: 'smooth',
414
+ block: 'center'
415
+ });
416
+ }
417
+
418
+ if (progress >= 100) {
419
+ clearInterval(progressInterval);
420
+ isPlaying = false;
421
+ playBtn.innerHTML = '<i class="fas fa-play"></i>';
422
+ progress = 0;
423
+ progressFill.style.width = '0%';
424
+ currentLine = 0;
425
+ highlightLyricLine(-1); // Reset all highlights
426
+ }
427
+ }, 500);
428
+ } else {
429
+ playBtn.innerHTML = '<i class="fas fa-play"></i>';
430
+ clearInterval(progressInterval);
431
+ }
432
+ });
433
+
434
+ // Volume control
435
+ const volumeSlider = document.querySelector('.volume-slider');
436
+ volumeSlider.addEventListener('input', function() {
437
+ // In a real app, this would control the audio volume
438
+ console.log('Volume set to:', this.value);
439
+ });
440
+
441
+ // Song selection
442
+ const songCards = document.querySelectorAll('.song-card');
443
+ songCards.forEach(card => {
444
+ card.addEventListener('click', function() {
445
+ // Reset player
446
+ clearInterval(progressInterval);
447
+ isPlaying = false;
448
+ playBtn.innerHTML = '<i class="fas fa-play"></i>';
449
+ progress = 0;
450
+ progressFill.style.width = '0%';
451
+ currentLine = 0;
452
+ highlightLyricLine(-1);
453
+
454
+ // Update current song info
455
+ const songTitle = this.querySelector('h3').textContent;
456
+ const artist = this.querySelector('p').textContent;
457
+
458
+ document.querySelector('.text-2xl.font-bold').textContent = songTitle;
459
+ document.querySelector('.text-gray-300').textContent = artist;
460
+
461
+ // Scroll lyrics to top
462
+ lyricsContainer.scrollTo(0, 0);
463
+ });
464
+ });
465
+ });
466
+ </script>
467
+ <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=rockguard/karaoke" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
468
+ </html>