Pp commited on
Commit
da0e32d
·
verified ·
1 Parent(s): d14e45e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +450 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Primary And Secondary Colors K5
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: pink
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: primary-and-secondary-colors-k5
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,450 @@
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>Color Mixing Fun!</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
+ .color-droplet {
11
+ width: 80px;
12
+ height: 80px;
13
+ border-radius: 50% 50% 60% 40% / 70% 70% 30% 30%;
14
+ cursor: pointer;
15
+ transition: transform 0.3s, box-shadow 0.3s;
16
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
17
+ }
18
+ .color-droplet:hover {
19
+ transform: scale(1.1);
20
+ box-shadow: 0 6px 12px rgba(0,0,0,0.3);
21
+ }
22
+ .mixing-bowl {
23
+ width: 200px;
24
+ height: 200px;
25
+ border-radius: 50% 50% 60% 40% / 70% 70% 30% 30%;
26
+ background-color: #f0f0f0;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
31
+ position: relative;
32
+ overflow: hidden;
33
+ }
34
+ .mixing-bowl::after {
35
+ content: '';
36
+ position: absolute;
37
+ top: 10px;
38
+ left: 10px;
39
+ right: 10px;
40
+ bottom: 10px;
41
+ border-radius: 50% 50% 60% 40% / 70% 70% 30% 30%;
42
+ border: 2px dashed rgba(255,255,255,0.5);
43
+ pointer-events: none;
44
+ }
45
+ .result-color {
46
+ width: 150px;
47
+ height: 150px;
48
+ border-radius: 50%;
49
+ transition: background-color 0.5s;
50
+ display: flex;
51
+ justify-content: center;
52
+ align-items: center;
53
+ color: white;
54
+ font-weight: bold;
55
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
56
+ }
57
+ .color-splash {
58
+ position: absolute;
59
+ width: 100%;
60
+ height: 100%;
61
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 Q30,10 40,20 T60,20 T80,20" stroke="white" fill="none" stroke-width="2"/><path d="M30,30 Q40,20 50,30 T70,30 T90,30" stroke="white" fill="none" stroke-width="2"/></svg>');
62
+ background-size: 200px 200px;
63
+ opacity: 0.3;
64
+ animation: splash 2s infinite linear;
65
+ }
66
+ @keyframes splash {
67
+ 0% { background-position: 0 0; }
68
+ 100% { background-position: 200px 200px; }
69
+ }
70
+ .color-palette {
71
+ display: grid;
72
+ grid-template-columns: repeat(3, 1fr);
73
+ gap: 20px;
74
+ margin-top: 20px;
75
+ }
76
+ .color-card {
77
+ border-radius: 10px;
78
+ padding: 15px;
79
+ text-align: center;
80
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
81
+ transition: transform 0.3s;
82
+ }
83
+ .color-card:hover {
84
+ transform: translateY(-5px);
85
+ }
86
+ .shake {
87
+ animation: shake 0.5s;
88
+ }
89
+ @keyframes shake {
90
+ 0%, 100% { transform: translateX(0); }
91
+ 20%, 60% { transform: translateX(-5px); }
92
+ 40%, 80% { transform: translateX(5px); }
93
+ }
94
+ .bounce {
95
+ animation: bounce 0.5s;
96
+ }
97
+ @keyframes bounce {
98
+ 0%, 100% { transform: translateY(0); }
99
+ 50% { transform: translateY(-10px); }
100
+ }
101
+ .tab-button {
102
+ transition: all 0.3s;
103
+ }
104
+ .tab-button.active {
105
+ background-color: #6b46c1;
106
+ color: white;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen">
111
+ <div class="container mx-auto px-4 py-8">
112
+ <header class="text-center mb-8">
113
+ <h1 class="text-4xl font-bold text-purple-800 mb-2">Color Mixing Magic!</h1>
114
+ <p class="text-lg text-gray-600">Discover how primary and secondary colors mix together!</p>
115
+ </header>
116
+
117
+ <div class="flex justify-center mb-8">
118
+ <div class="inline-flex rounded-full bg-white shadow-md overflow-hidden">
119
+ <button id="primaryTab" class="tab-button px-6 py-2 font-medium active" onclick="showTab('primary')">
120
+ Primary Colors
121
+ </button>
122
+ <button id="secondaryTab" class="tab-button px-6 py-2 font-medium" onclick="showTab('secondary')">
123
+ Secondary Colors
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <div id="primaryContent" class="tab-content">
129
+ <div class="flex flex-col lg:flex-row items-center justify-center gap-8 mb-12">
130
+ <div class="text-center">
131
+ <h2 class="text-2xl font-semibold text-blue-700 mb-4">Primary Colors</h2>
132
+ <div class="flex gap-6 justify-center">
133
+ <div class="color-droplet bg-red-500" data-color="red" onclick="selectColor('red')"></div>
134
+ <div class="color-droplet bg-blue-500" data-color="blue" onclick="selectColor('blue')"></div>
135
+ <div class="color-droplet bg-yellow-500" data-color="yellow" onclick="selectColor('yellow')"></div>
136
+ </div>
137
+ <p class="mt-4 text-gray-600">Click on two primary colors to mix them!</p>
138
+ </div>
139
+
140
+ <div class="text-center">
141
+ <h2 class="text-2xl font-semibold text-purple-700 mb-4">Mixing Bowl</h2>
142
+ <div class="mixing-bowl mx-auto">
143
+ <div id="resultColor" class="result-color bg-gray-200 flex flex-col items-center justify-center">
144
+ <i class="fas fa-question text-gray-500 text-4xl mb-2"></i>
145
+ <span class="text-sm">Mix colors here!</span>
146
+ </div>
147
+ <div class="color-splash"></div>
148
+ </div>
149
+ <button id="resetBtn" class="mt-4 px-4 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition" onclick="resetColors()">
150
+ <i class="fas fa-undo mr-2"></i>Start Over
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div id="secondaryContent" class="tab-content hidden">
157
+ <div class="flex flex-col lg:flex-row items-center justify-center gap-8 mb-12">
158
+ <div class="text-center">
159
+ <h2 class="text-2xl font-semibold text-green-700 mb-4">Secondary Colors</h2>
160
+ <div class="flex gap-6 justify-center">
161
+ <div class="color-droplet bg-green-500" data-color="green" onclick="selectSecondaryColor('green')"></div>
162
+ <div class="color-droplet bg-orange-500" data-color="orange" onclick="selectSecondaryColor('orange')"></div>
163
+ <div class="color-droplet bg-purple-500" data-color="purple" onclick="selectSecondaryColor('purple')"></div>
164
+ </div>
165
+ <p class="mt-4 text-gray-600">Click on a secondary color to see how it's made!</p>
166
+ </div>
167
+
168
+ <div class="text-center">
169
+ <h2 class="text-2xl font-semibold text-purple-700 mb-4">Color Recipe</h2>
170
+ <div class="mixing-bowl mx-auto">
171
+ <div id="secondaryResult" class="result-color bg-gray-200 flex flex-col items-center justify-center">
172
+ <i class="fas fa-question text-gray-500 text-4xl mb-2"></i>
173
+ <span class="text-sm">Select a color to see its recipe</span>
174
+ </div>
175
+ <div class="color-splash"></div>
176
+ </div>
177
+ <div id="recipeDisplay" class="mt-4 hidden">
178
+ <div class="flex justify-center gap-4 mb-2">
179
+ <div id="ingredient1" class="color-droplet w-12 h-12"></div>
180
+ <div class="flex items-center">
181
+ <i class="fas fa-plus text-gray-600"></i>
182
+ </div>
183
+ <div id="ingredient2" class="color-droplet w-12 h-12"></div>
184
+ <div class="flex items-center">
185
+ <i class="fas fa-equals text-gray-600 ml-2"></i>
186
+ </div>
187
+ <div id="resultPreview" class="color-droplet w-12 h-12"></div>
188
+ </div>
189
+ <p id="recipeText" class="text-gray-700"></p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6">
196
+ <h2 class="text-2xl font-bold text-purple-800 mb-4">Color Theory</h2>
197
+ <div class="color-palette">
198
+ <div class="color-card bg-red-500 text-white">
199
+ <h3 class="font-bold">Red</h3>
200
+ <p>Primary Color</p>
201
+ </div>
202
+ <div class="color-card bg-blue-500 text-white">
203
+ <h3 class="font-bold">Blue</h3>
204
+ <p>Primary Color</p>
205
+ </div>
206
+ <div class="color-card bg-yellow-500 text-black">
207
+ <h3 class="font-bold">Yellow</h3>
208
+ <p>Primary Color</p>
209
+ </div>
210
+ <div class="color-card bg-green-500 text-white">
211
+ <h3 class="font-bold">Green</h3>
212
+ <p>Blue + Yellow</p>
213
+ </div>
214
+ <div class="color-card bg-orange-500 text-white">
215
+ <h3 class="font-bold">Orange</h3>
216
+ <p>Red + Yellow</p>
217
+ </div>
218
+ <div class="color-card bg-purple-500 text-white">
219
+ <h3 class="font-bold">Purple</h3>
220
+ <p>Red + Blue</p>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="mt-8">
225
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Understanding Colors</h3>
226
+ <div class="grid md:grid-cols-2 gap-6">
227
+ <div class="bg-blue-50 p-4 rounded-lg">
228
+ <h4 class="font-bold text-blue-700 mb-2"><i class="fas fa-paint-brush mr-2"></i>Primary Colors</h4>
229
+ <p class="text-gray-700">These are the foundation colors that can't be created by mixing other colors. All other colors are derived from these three: red, blue, and yellow.</p>
230
+ </div>
231
+ <div class="bg-purple-50 p-4 rounded-lg">
232
+ <h4 class="font-bold text-purple-700 mb-2"><i class="fas fa-blender mr-2"></i>Secondary Colors</h4>
233
+ <p class="text-gray-700">These are created by mixing equal parts of two primary colors. The three secondary colors are green, orange, and purple.</p>
234
+ </div>
235
+ </div>
236
+ <div class="mt-6 bg-green-50 p-4 rounded-lg">
237
+ <h4 class="font-bold text-green-700 mb-2"><i class="fas fa-palette mr-2"></i>Color Wheel</h4>
238
+ <p class="text-gray-700">When arranged in a circle, primary and secondary colors create a color wheel that shows how colors relate to each other. Colors opposite each other on the wheel are called complementary colors.</p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="mt-8 text-center">
244
+ <button id="hintBtn" class="px-6 py-3 bg-yellow-400 text-yellow-900 rounded-full font-bold hover:bg-yellow-500 transition" onclick="showHint()">
245
+ <i class="fas fa-lightbulb mr-2"></i>Need a Hint?
246
+ </button>
247
+ <div id="hintBox" class="hidden mt-4 bg-yellow-100 border-l-4 border-yellow-500 p-4 text-yellow-800 rounded">
248
+ <p>In the Primary Colors tab, try mixing red and blue to make purple. In the Secondary Colors tab, click on green to see it's made from blue and yellow!</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <script>
254
+ let selectedColors = [];
255
+ const colorMixes = {
256
+ 'red+blue': 'purple',
257
+ 'blue+red': 'purple',
258
+ 'red+yellow': 'orange',
259
+ 'yellow+red': 'orange',
260
+ 'blue+yellow': 'green',
261
+ 'yellow+blue': 'green'
262
+ };
263
+ const colorRecipes = {
264
+ 'green': { ingredients: ['blue', 'yellow'], text: "Green is made by mixing blue and yellow!" },
265
+ 'orange': { ingredients: ['red', 'yellow'], text: "Orange is made by mixing red and yellow!" },
266
+ 'purple': { ingredients: ['red', 'blue'], text: "Purple is made by mixing red and blue!" }
267
+ };
268
+ const colorNames = {
269
+ 'red': 'Red',
270
+ 'blue': 'Blue',
271
+ 'yellow': 'Yellow',
272
+ 'purple': 'Purple',
273
+ 'orange': 'Orange',
274
+ 'green': 'Green'
275
+ };
276
+ const colorCodes = {
277
+ 'red': 'bg-red-500',
278
+ 'blue': 'bg-blue-500',
279
+ 'yellow': 'bg-yellow-500',
280
+ 'purple': 'bg-purple-500',
281
+ 'orange': 'bg-orange-500',
282
+ 'green': 'bg-green-500'
283
+ };
284
+
285
+ function showTab(tabName) {
286
+ // Update tab buttons
287
+ document.getElementById('primaryTab').classList.toggle('active', tabName === 'primary');
288
+ document.getElementById('secondaryTab').classList.toggle('active', tabName === 'secondary');
289
+
290
+ // Show/hide content
291
+ document.getElementById('primaryContent').classList.toggle('hidden', tabName !== 'primary');
292
+ document.getElementById('secondaryContent').classList.toggle('hidden', tabName !== 'secondary');
293
+
294
+ // Reset selections when switching tabs
295
+ if (tabName === 'primary') {
296
+ resetColors();
297
+ } else {
298
+ document.getElementById('recipeDisplay').classList.add('hidden');
299
+ }
300
+ }
301
+
302
+ function selectColor(color) {
303
+ if (selectedColors.length >= 2) return;
304
+
305
+ const droplet = document.querySelector(`.color-droplet[data-color="${color}"]`);
306
+ droplet.classList.add('bounce');
307
+
308
+ setTimeout(() => {
309
+ droplet.classList.remove('bounce');
310
+ }, 500);
311
+
312
+ selectedColors.push(color);
313
+
314
+ if (selectedColors.length === 2) {
315
+ mixColors();
316
+ } else {
317
+ updateMixingBowl();
318
+ }
319
+ }
320
+
321
+ function selectSecondaryColor(color) {
322
+ const recipe = colorRecipes[color];
323
+ const resultDiv = document.getElementById('secondaryResult');
324
+ const recipeDisplay = document.getElementById('recipeDisplay');
325
+
326
+ // Update the main display
327
+ resultDiv.className = `result-color ${colorCodes[color]} flex items-center justify-center`;
328
+ resultDiv.innerHTML = `<span class="text-xl font-bold">${colorNames[color]}</span>`;
329
+
330
+ // Update the recipe display
331
+ document.getElementById('ingredient1').className = `color-droplet w-12 h-12 ${colorCodes[recipe.ingredients[0]]}`;
332
+ document.getElementById('ingredient2').className = `color-droplet w-12 h-12 ${colorCodes[recipe.ingredients[1]]}`;
333
+ document.getElementById('resultPreview').className = `color-droplet w-12 h-12 ${colorCodes[color]}`;
334
+ document.getElementById('recipeText').textContent = recipe.text;
335
+
336
+ recipeDisplay.classList.remove('hidden');
337
+
338
+ // Celebrate!
339
+ resultDiv.classList.add('bounce');
340
+ setTimeout(() => {
341
+ resultDiv.classList.remove('bounce');
342
+ }, 1000);
343
+
344
+ // Show confetti
345
+ showConfetti();
346
+ }
347
+
348
+ function updateMixingBowl() {
349
+ const resultDiv = document.getElementById('resultColor');
350
+
351
+ if (selectedColors.length === 0) {
352
+ resultDiv.className = 'result-color bg-gray-200 flex flex-col items-center justify-center';
353
+ resultDiv.innerHTML = '<i class="fas fa-question text-gray-500 text-4xl mb-2"></i><span class="text-sm">Mix colors here!</span>';
354
+ } else if (selectedColors.length === 1) {
355
+ const color = selectedColors[0];
356
+ resultDiv.className = `result-color ${colorCodes[color]} flex items-center justify-center`;
357
+ resultDiv.innerHTML = `<i class="fas fa-plus text-white text-4xl"></i>`;
358
+ }
359
+ }
360
+
361
+ function mixColors() {
362
+ const color1 = selectedColors[0];
363
+ const color2 = selectedColors[1];
364
+ const mixKey = `${color1}+${color2}`;
365
+
366
+ const resultDiv = document.getElementById('resultColor');
367
+
368
+ if (colorMixes[mixKey]) {
369
+ const resultColor = colorMixes[mixKey];
370
+ resultDiv.className = `result-color ${colorCodes[resultColor]} flex items-center justify-center`;
371
+ resultDiv.innerHTML = `
372
+ <span class="text-xl font-bold">${colorNames[resultColor]}</span>
373
+ <span class="text-sm">${colorNames[color1]} + ${colorNames[color2]}</span>
374
+ `;
375
+
376
+ // Celebrate!
377
+ resultDiv.classList.add('bounce');
378
+ setTimeout(() => {
379
+ resultDiv.classList.remove('bounce');
380
+ }, 1000);
381
+
382
+ // Show confetti
383
+ showConfetti();
384
+ } else {
385
+ // Same color selected twice
386
+ resultDiv.className = `result-color ${colorCodes[color1]} flex items-center justify-center`;
387
+ resultDiv.innerHTML = `
388
+ <span class="text-xl font-bold">More ${colorNames[color1]}</span>
389
+ <span class="text-sm">Try mixing different colors!</span>
390
+ `;
391
+ resultDiv.classList.add('shake');
392
+ setTimeout(() => {
393
+ resultDiv.classList.remove('shake');
394
+ }, 500);
395
+ }
396
+ }
397
+
398
+ function resetColors() {
399
+ selectedColors = [];
400
+ updateMixingBowl();
401
+
402
+ const btn = document.getElementById('resetBtn');
403
+ btn.classList.add('bg-gray-300');
404
+ setTimeout(() => {
405
+ btn.classList.remove('bg-gray-300');
406
+ }, 300);
407
+ }
408
+
409
+ function showHint() {
410
+ const hintBox = document.getElementById('hintBox');
411
+ hintBox.classList.toggle('hidden');
412
+
413
+ const btn = document.getElementById('hintBtn');
414
+ btn.classList.add('bg-yellow-500');
415
+ setTimeout(() => {
416
+ btn.classList.remove('bg-yellow-500');
417
+ }, 300);
418
+ }
419
+
420
+ function showConfetti() {
421
+ // Simple confetti effect
422
+ const colors = ['red', 'blue', 'yellow', 'green', 'orange', 'purple'];
423
+ const container = document.querySelector('.mixing-bowl');
424
+
425
+ for (let i = 0; i < 20; i++) {
426
+ const confetti = document.createElement('div');
427
+ confetti.className = 'absolute w-2 h-2 rounded-full';
428
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
429
+ confetti.style.left = Math.random() * 180 + 'px';
430
+ confetti.style.top = Math.random() * 180 + 'px';
431
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
432
+ confetti.style.opacity = '0.8';
433
+
434
+ container.appendChild(confetti);
435
+
436
+ // Animation
437
+ const animation = confetti.animate([
438
+ { transform: `translate(0, 0) rotate(0deg)`, opacity: 0.8 },
439
+ { transform: `translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
440
+ ], {
441
+ duration: 1000,
442
+ easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)'
443
+ });
444
+
445
+ animation.onfinish = () => confetti.remove();
446
+ }
447
+ }
448
+ </script>
449
+ <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=pp/primary-and-secondary-colors-k5" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
450
+ </html>