Hugging Face's logo

Spaces:
iamTheFoxCoder
/
ytlearn-2
Running

App Files Community
iamTheFoxCoder commited on
Commit
bd78731
·
verified ·
1 Parent(s): 54082dd

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +512 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ytlearn 2
3
- emoji: 📈
4
- colorFrom: pink
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: ytlearn-2
3
+ emoji: 🐳
4
+ colorFrom: green
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,512 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YTLearn - Transformez vos vidéos en jeux éducatifs</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --yt-red: #FF0000;
15
+ --yt-red-dark: #CC0000;
16
+ --deep-black: #0A0A0A;
17
+ --pure-white: #FFFFFF;
18
+ --glass-effect: rgba(255, 255, 255, 0.08);
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--deep-black);
24
+ color: var(--pure-white);
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ #particles-js {
29
+ position: absolute;
30
+ width: 100%;
31
+ height: 100%;
32
+ z-index: 0;
33
+ background: var(--deep-black);
34
+ }
35
+
36
+ .hero-gradient {
37
+ background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(20,20,30,0.95) 100%);
38
+ }
39
+
40
+ .input-glow:focus {
41
+ box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
42
+ }
43
+
44
+ .yt-button {
45
+ background: var(--yt-red);
46
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47
+ }
48
+
49
+ .yt-button:hover {
50
+ background: var(--yt-red-dark);
51
+ transform: translateY(-2px);
52
+ box-shadow: 0 10px 20px -5px rgba(255, 0, 0, 0.3);
53
+ }
54
+
55
+ .pulse-animation {
56
+ animation: pulse 2s infinite;
57
+ }
58
+
59
+ @keyframes pulse {
60
+ 0% { transform: scale(1); }
61
+ 50% { transform: scale(1.05); }
62
+ 100% { transform: scale(1); }
63
+ }
64
+
65
+ .slide-up {
66
+ animation: slideUp 0.8s ease-out forwards;
67
+ }
68
+
69
+ @keyframes slideUp {
70
+ from { transform: translateY(30px); opacity: 0; }
71
+ to { transform: translateY(0); opacity: 1; }
72
+ }
73
+
74
+ .glass-card {
75
+ background: var(--glass-effect);
76
+ backdrop-filter: blur(12px);
77
+ -webkit-backdrop-filter: blur(12px);
78
+ border: 1px solid rgba(255, 255, 255, 0.05);
79
+ }
80
+
81
+ .floating {
82
+ animation: floating 8s ease-in-out infinite;
83
+ }
84
+
85
+ @keyframes floating {
86
+ 0% { transform: translateY(0px); }
87
+ 50% { transform: translateY(-15px); }
88
+ 100% { transform: translateY(0px); }
89
+ }
90
+
91
+ .scroll-indicator {
92
+ animation: bounce 2s infinite;
93
+ }
94
+
95
+ @keyframes bounce {
96
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
97
+ 40% {transform: translateY(-10px);}
98
+ 60% {transform: translateY(-5px);}
99
+ }
100
+
101
+ @media (max-width: 768px) {
102
+ .mobile-sticky-cta {
103
+ position: fixed;
104
+ bottom: 20px;
105
+ left: 50%;
106
+ transform: translateX(-50%);
107
+ width: 90%;
108
+ z-index: 100;
109
+ }
110
+ }
111
+ </style>
112
+ </head>
113
+ <body class="antialiased">
114
+ <!-- Particles Background -->
115
+ <div id="particles-js"></div>
116
+
117
+ <!-- Hero Section -->
118
+ <div class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden hero-gradient">
119
+ <div class="absolute inset-0 z-10">
120
+ <div class="absolute top-0 left-0 w-full h-full opacity-20">
121
+ <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-red-500 filter blur-3xl opacity-20"></div>
122
+ <div class="absolute top-2/3 left-1/3 w-96 h-96 rounded-full bg-blue-500 filter blur-3xl opacity-10"></div>
123
+ <div class="absolute top-1/3 right-1/4 w-80 h-80 rounded-full bg-purple-500 filter blur-3xl opacity-15"></div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="relative z-20 w-full max-w-4xl mx-auto text-center">
128
+ <!-- Logo -->
129
+ <div class="flex justify-center mb-8 slide-up" style="animation-delay: 0.2s;">
130
+ <div class="flex items-center">
131
+ <i class="fab fa-youtube text-4xl text-red-500 mr-3"></i>
132
+ <span class="text-3xl font-bold tracking-tight">YTLearn</span>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Main Heading -->
137
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 slide-up" style="animation-delay: 0.4s;">
138
+ <span class="block">Transformez vos</span>
139
+ <span class="text-red-500">vidéos en jeux</span>
140
+ <span class="block">éducatifs</span>
141
+ </h1>
142
+
143
+ <!-- Subheading -->
144
+ <p class="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-12 slide-up" style="animation-delay: 0.6s;">
145
+ L'IA crée instantanément des quiz interactifs, flashcards et exercices à partir de vos liens YouTube ou PDF.
146
+ </p>
147
+
148
+ <!-- Main Input Card -->
149
+ <div class="glass-card rounded-2xl p-6 md:p-8 mb-8 slide-up" style="animation-delay: 0.8s;">
150
+ <div class="mb-6">
151
+ <div class="relative">
152
+ <input
153
+ type="text"
154
+ placeholder="Collez votre lien YouTube ou importez un PDF"
155
+ class="w-full px-5 py-4 bg-black bg-opacity-40 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-red-500 input-glow transition duration-200"
156
+ >
157
+ <div class="absolute right-2 top-1/2 transform -translate-y-1/2">
158
+ <button class="px-2 py-1 text-xs bg-gray-800 text-gray-300 rounded-md">
159
+ <i class="fas fa-paperclip mr-1"></i> Importer
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="mb-6">
166
+ <textarea
167
+ placeholder="Ajoutez un texte pour guider votre jeu (ex.: 'axe sur vocabulaire', 'focus formules mathématiques')"
168
+ rows="2"
169
+ class="w-full px-5 py-3 bg-black bg-opacity-40 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-red-500 input-glow transition duration-200"
170
+ ></textarea>
171
+ </div>
172
+
173
+ <button class="w-full yt-button text-white font-bold py-4 px-6 rounded-xl text-lg flex items-center justify-center pulse-animation">
174
+ <span>Générer mon quiz</span>
175
+ <i class="fas fa-bolt ml-2"></i>
176
+ </button>
177
+ </div>
178
+
179
+ <!-- Trust Indicators -->
180
+ <div class="flex flex-wrap justify-center items-center gap-6 text-gray-400 text-sm slide-up" style="animation-delay: 1s;">
181
+ <div class="flex items-center">
182
+ <i class="fas fa-shield-alt mr-2 text-green-400"></i>
183
+ <span>Sécurisé & privé</span>
184
+ </div>
185
+ <div class="flex items-center">
186
+ <i class="fas fa-bolt mr-2 text-yellow-400"></i>
187
+ <span>Instantané</span>
188
+ </div>
189
+ <div class="flex items-center">
190
+ <i class="fas fa-magic mr-2 text-purple-400"></i>
191
+ <span>IA puissante</span>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Scroll Indicator -->
196
+ <div class="mt-16 scroll-indicator">
197
+ <i class="fas fa-chevron-down text-gray-400 text-xl"></i>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Floating Elements -->
202
+ <div class="absolute bottom-20 left-10 w-16 h-16 rounded-full bg-red-500 filter blur-xl opacity-20 floating" style="animation-delay: 0.5s;"></div>
203
+ <div class="absolute top-1/3 right-20 w-24 h-24 rounded-full bg-blue-500 filter blur-xl opacity-15 floating" style="animation-delay: 1s;"></div>
204
+ </div>
205
+
206
+ <!-- Mobile Sticky CTA -->
207
+ <div class="md:hidden mobile-sticky-cta">
208
+ <button class="w-full yt-button text-white font-bold py-4 px-6 rounded-xl text-lg flex items-center justify-center shadow-xl">
209
+ <span>Générer mon quiz</span>
210
+ <i class="fas fa-bolt ml-2"></i>
211
+ </button>
212
+ </div>
213
+
214
+ <!-- Features Section -->
215
+ <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-90">
216
+ <div class="max-w-7xl mx-auto">
217
+ <div class="text-center mb-16">
218
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
219
+ <span class="text-white">Apprentissage</span>
220
+ <span class="text-red-500">réinventé</span>
221
+ </h2>
222
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
223
+ Découvrez comment YTLearn transforme votre façon d'étudier
224
+ </p>
225
+ </div>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
228
+ <!-- Feature 1 -->
229
+ <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20">
230
+ <div class="w-14 h-14 rounded-xl bg-red-500 bg-opacity-20 flex items-center justify-center mb-6">
231
+ <i class="fab fa-youtube text-2xl text-red-500"></i>
232
+ </div>
233
+ <h3 class="text-xl font-bold mb-3">Vidéos YouTube</h3>
234
+ <p class="text-gray-400">
235
+ Transformez n'importe quelle vidéo en expérience d'apprentissage interactive en quelques secondes.
236
+ </p>
237
+ </div>
238
+
239
+ <!-- Feature 2 -->
240
+ <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20">
241
+ <div class="w-14 h-14 rounded-xl bg-blue-500 bg-opacity-20 flex items-center justify-center mb-6">
242
+ <i class="fas fa-gamepad text-2xl text-blue-400"></i>
243
+ </div>
244
+ <h3 class="text-xl font-bold mb-3">Jeux interactifs</h3>
245
+ <p class="text-gray-400">
246
+ Quiz, puzzles et challenges adaptés à votre niveau pour une mémorisation optimale.
247
+ </p>
248
+ </div>
249
+
250
+ <!-- Feature 3 -->
251
+ <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20">
252
+ <div class="w-14 h-14 rounded-xl bg-purple-500 bg-opacity-20 flex items-center justify-center mb-6">
253
+ <i class="fas fa-brain text-2xl text-purple-400"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold mb-3">Flashcards intelligentes</h3>
256
+ <p class="text-gray-400">
257
+ Des cartes mémoire optimisées par l'IA qui s'adaptent à votre rythme d'apprentissage.
258
+ </p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Demo Preview -->
265
+ <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
266
+ <div class="max-w-7xl mx-auto">
267
+ <div class="flex flex-col md:flex-row items-center">
268
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
269
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
270
+ <span class="text-white">Une interface</span>
271
+ <span class="text-red-500">ultra-immersive</span>
272
+ </h2>
273
+ <p class="text-lg text-gray-400 mb-8">
274
+ Plongez dans des quiz interactifs avec des animations fluides et des feedbacks instantanés qui rendent l'apprentissage addictif.
275
+ </p>
276
+ <div class="space-y-4">
277
+ <div class="flex items-start">
278
+ <div class="flex-shrink-0 mt-1">
279
+ <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
280
+ <i class="fas fa-check text-white text-sm"></i>
281
+ </div>
282
+ </div>
283
+ <div class="ml-3">
284
+ <p class="text-white font-medium">Rétroaction immédiate</p>
285
+ <p class="text-gray-400 mt-1">Explications détaillées après chaque réponse</p>
286
+ </div>
287
+ </div>
288
+ <div class="flex items-start">
289
+ <div class="flex-shrink-0 mt-1">
290
+ <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
291
+ <i class="fas fa-check text-white text-sm"></i>
292
+ </div>
293
+ </div>
294
+ <div class="ml-3">
295
+ <p class="text-white font-medium">Adaptatif</p>
296
+ <p class="text-gray-400 mt-1">Difficulté qui s'ajuste automatiquement</p>
297
+ </div>
298
+ </div>
299
+ <div class="flex items-start">
300
+ <div class="flex-shrink-0 mt-1">
301
+ <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
302
+ <i class="fas fa-check text-white text-sm"></i>
303
+ </div>
304
+ </div>
305
+ <div class="ml-3">
306
+ <p class="text-white font-medium">Visuel impactant</p>
307
+ <p class="text-gray-400 mt-1">Illustrations et animations pour mieux retenir</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <div class="md:w-1/2 relative">
313
+ <div class="relative max-w-md mx-auto">
314
+ <div class="absolute -inset-4 bg-red-500 rounded-2xl opacity-20 blur-xl"></div>
315
+ <div class="relative bg-gray-900 rounded-2xl overflow-hidden shadow-2xl">
316
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
317
+ alt="App preview"
318
+ class="w-full h-auto">
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Final CTA -->
327
+ <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-black">
328
+ <div class="max-w-4xl mx-auto text-center">
329
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
330
+ <span class="text-white">Prêt à révolutionner</span>
331
+ <span class="text-red-500">votre apprentissage ?</span>
332
+ </h2>
333
+ <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
334
+ Essayez YTLearn gratuitement. Aucune carte de crédit requise.
335
+ </p>
336
+ <div class="max-w-md mx-auto">
337
+ <div class="relative">
338
+ <input
339
+ type="text"
340
+ placeholder="Votre email"
341
+ class="w-full px-5 py-4 bg-gray-900 border border-gray-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-red-500 transition duration-200"
342
+ >
343
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 yt-button text-white font-bold py-2 px-6 rounded-lg">
344
+ Essayer
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Footer -->
352
+ <footer class="relative bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
353
+ <div class="max-w-7xl mx-auto">
354
+ <div class="flex flex-col md:flex-row justify-between items-center">
355
+ <div class="flex items-center mb-6 md:mb-0">
356
+ <i class="fab fa-youtube text-3xl text-red-500 mr-3"></i>
357
+ <span class="text-2xl font-bold">YTLearn</span>
358
+ </div>
359
+ <div class="flex space-x-6 mb-6 md:mb-0">
360
+ <a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a>
361
+ <a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a>
362
+ <a href="#" class="text-gray-400 hover:text-white transition">À propos</a>
363
+ <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a>
364
+ </div>
365
+ <div class="flex space-x-4">
366
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition">
367
+ <i class="fab fa-twitter"></i>
368
+ </a>
369
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition">
370
+ <i class="fab fa-instagram"></i>
371
+ </a>
372
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition">
373
+ <i class="fab fa-youtube"></i>
374
+ </a>
375
+ </div>
376
+ </div>
377
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
378
+ &copy; 2023 YTLearn. Tous droits réservés.
379
+ </div>
380
+ </div>
381
+ </footer>
382
+
383
+ <script>
384
+ // Initialize particles.js
385
+ document.addEventListener('DOMContentLoaded', function() {
386
+ particlesJS('particles-js', {
387
+ "particles": {
388
+ "number": {
389
+ "value": 60,
390
+ "density": {
391
+ "enable": true,
392
+ "value_area": 800
393
+ }
394
+ },
395
+ "color": {
396
+ "value": "#ff0000"
397
+ },
398
+ "shape": {
399
+ "type": "circle",
400
+ "stroke": {
401
+ "width": 0,
402
+ "color": "#000000"
403
+ },
404
+ "polygon": {
405
+ "nb_sides": 5
406
+ }
407
+ },
408
+ "opacity": {
409
+ "value": 0.3,
410
+ "random": true,
411
+ "anim": {
412
+ "enable": true,
413
+ "speed": 1,
414
+ "opacity_min": 0.1,
415
+ "sync": false
416
+ }
417
+ },
418
+ "size": {
419
+ "value": 3,
420
+ "random": true,
421
+ "anim": {
422
+ "enable": false,
423
+ "speed": 40,
424
+ "size_min": 0.1,
425
+ "sync": false
426
+ }
427
+ },
428
+ "line_linked": {
429
+ "enable": true,
430
+ "distance": 150,
431
+ "color": "#ff0000",
432
+ "opacity": 0.2,
433
+ "width": 1
434
+ },
435
+ "move": {
436
+ "enable": true,
437
+ "speed": 1,
438
+ "direction": "none",
439
+ "random": true,
440
+ "straight": false,
441
+ "out_mode": "out",
442
+ "bounce": false,
443
+ "attract": {
444
+ "enable": false,
445
+ "rotateX": 600,
446
+ "rotateY": 1200
447
+ }
448
+ }
449
+ },
450
+ "interactivity": {
451
+ "detect_on": "canvas",
452
+ "events": {
453
+ "onhover": {
454
+ "enable": true,
455
+ "mode": "grab"
456
+ },
457
+ "onclick": {
458
+ "enable": true,
459
+ "mode": "push"
460
+ },
461
+ "resize": true
462
+ },
463
+ "modes": {
464
+ "grab": {
465
+ "distance": 140,
466
+ "line_linked": {
467
+ "opacity": 0.5
468
+ }
469
+ },
470
+ "bubble": {
471
+ "distance": 400,
472
+ "size": 40,
473
+ "duration": 2,
474
+ "opacity": 8,
475
+ "speed": 3
476
+ },
477
+ "repulse": {
478
+ "distance": 200,
479
+ "duration": 0.4
480
+ },
481
+ "push": {
482
+ "particles_nb": 4
483
+ },
484
+ "remove": {
485
+ "particles_nb": 2
486
+ }
487
+ }
488
+ },
489
+ "retina_detect": true
490
+ });
491
+
492
+ // Scroll animations
493
+ const animateOnScroll = () => {
494
+ const elements = document.querySelectorAll('.slide-up');
495
+
496
+ elements.forEach(element => {
497
+ const elementPosition = element.getBoundingClientRect().top;
498
+ const windowHeight = window.innerHeight;
499
+
500
+ if (elementPosition < windowHeight - 100) {
501
+ element.style.opacity = '1';
502
+ element.style.transform = 'translateY(0)';
503
+ }
504
+ });
505
+ };
506
+
507
+ window.addEventListener('scroll', animateOnScroll);
508
+ animateOnScroll(); // Trigger on load for elements already in view
509
+ });
510
+ </script>
511
+ <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=iamTheFoxCoder/ytlearn-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
512
+ </html>
prompts.txt ADDED
File without changes