Hugging Face's logo

Spaces:
hikkann
/
fp-test
Running

App Files Community
hikkann commited on
Commit
f989267
·
verified ·
1 Parent(s): b87168e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +645 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fp Test
3
- emoji: 🔥
4
- colorFrom: green
5
- colorTo: purple
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: fp-test
3
+ emoji: 🐳
4
+ colorFrom: gray
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,645 @@
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>Floating Particles</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
+ .particle {
11
+ position: absolute;
12
+ pointer-events: none;
13
+ opacity: 0;
14
+ animation: float-up linear forwards;
15
+ will-change: transform;
16
+ }
17
+
18
+ @keyframes float-up {
19
+ 0% {
20
+ transform: translateY(0) rotate(0deg);
21
+ opacity: 0;
22
+ }
23
+ 10% {
24
+ opacity: 1;
25
+ }
26
+ 90% {
27
+ opacity: 1;
28
+ }
29
+ 100% {
30
+ transform: translateY(-100vh) rotate(360deg);
31
+ opacity: 0;
32
+ }
33
+ }
34
+
35
+ .control-panel {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .control-panel.collapsed {
40
+ transform: translateX(calc(100% - 40px));
41
+ }
42
+
43
+ .toggle-btn {
44
+ transition: transform 0.3s ease;
45
+ }
46
+
47
+ .control-panel.collapsed .toggle-btn {
48
+ transform: rotate(180deg);
49
+ }
50
+
51
+ .clip-triangle {
52
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
53
+ }
54
+
55
+ body {
56
+ overflow: hidden;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-900 min-h-screen relative">
61
+ <div id="particles-container" class="absolute inset-0 overflow-hidden"></div>
62
+
63
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center z-10">
64
+ <h1 class="text-5xl font-bold text-white mb-4">Floating Particles</h1>
65
+ <p class="text-xl text-gray-300">Customizable particle animation</p>
66
+ </div>
67
+
68
+ <!-- Control Panel -->
69
+ <div id="control-panel" class="control-panel fixed right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 p-4 rounded-l-lg shadow-lg z-50 w-64">
70
+ <div class="flex justify-between items-center mb-4">
71
+ <h2 class="text-xl font-bold text-white">Particle Settings</h2>
72
+ <button id="toggle-panel" class="toggle-btn bg-gray-700 text-white p-2 rounded-full">
73
+ <i class="fas fa-chevron-right"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <div class="space-y-4">
78
+ <div>
79
+ <label class="block text-sm font-medium text-gray-300 mb-1">Particle Count</label>
80
+ <input id="particle-count" type="range" min="1" max="500" value="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
81
+ <div class="flex justify-between text-xs text-gray-400">
82
+ <span>1</span>
83
+ <span>500</span>
84
+ </div>
85
+ <div class="text-center text-sm text-gray-300 mt-1">
86
+ <span id="count-value">100</span> particles
87
+ </div>
88
+ </div>
89
+
90
+ <div>
91
+ <label class="block text-sm font-medium text-gray-300 mb-1">Particle Size</label>
92
+ <input id="particle-size" type="range" min="2" max="30" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
93
+ <div class="flex justify-between text-xs text-gray-400">
94
+ <span>2px</span>
95
+ <span>30px</span>
96
+ </div>
97
+ <div class="text-center text-sm text-gray-300 mt-1">
98
+ <span id="size-value">8</span>px
99
+ </div>
100
+ </div>
101
+
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-300 mb-1">Animation Duration (s)</label>
104
+ <input id="animation-duration" type="range" min="2" max="20" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
105
+ <div class="flex justify-between text-xs text-gray-400">
106
+ <span>2</span>
107
+ <span>20</span>
108
+ </div>
109
+ <div class="text-center text-sm text-gray-300 mt-1">
110
+ <span id="duration-value">8</span> seconds
111
+ </div>
112
+ </div>
113
+
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-300 mb-1">Spawn Rate</label>
116
+ <input id="spawn-rate" type="range" min="100" max="2000" value="500" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
117
+ <div class="flex justify-between text-xs text-gray-400">
118
+ <span>Fast</span>
119
+ <span>Slow</span>
120
+ </div>
121
+ <div class="text-center text-sm text-gray-300 mt-1">
122
+ <span id="rate-value">500</span>ms
123
+ </div>
124
+ </div>
125
+
126
+ <div>
127
+ <label class="block text-sm font-medium text-gray-300 mb-1">Particle Color</label>
128
+ <div class="flex flex-wrap gap-2 mt-2">
129
+ <button data-color="#3B82F6" class="color-btn w-6 h-6 rounded-full bg-blue-500 border-2 border-transparent hover:border-white"></button>
130
+ <button data-color="#EF4444" class="color-btn w-6 h-6 rounded-full bg-red-500 border-2 border-transparent hover:border-white"></button>
131
+ <button data-color="#10B981" class="color-btn w-6 h-6 rounded-full bg-green-500 border-2 border-transparent hover:border-white"></button>
132
+ <button data-color="#F59E0B" class="color-btn w-6 h-6 rounded-full bg-yellow-500 border-2 border-transparent hover:border-white"></button>
133
+ <button data-color="#8B5CF6" class="color-btn w-6 h-6 rounded-full bg-purple-500 border-2 border-transparent hover:border-white"></button>
134
+ <button data-color="#EC4899" class="color-btn w-6 h-6 rounded-full bg-pink-500 border-2 border-transparent hover:border-white"></button>
135
+ <button data-color="#FFFFFF" class="color-btn w-6 h-6 rounded-full bg-white border-2 border-transparent hover:border-white"></button>
136
+ <button data-color="random" class="color-btn w-6 h-6 rounded-full bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 border-2 border-transparent hover:border-white flex items-center justify-center">
137
+ <i class="fas fa-random text-xs text-white"></i>
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <div>
143
+ <label class="block text-sm font-medium text-gray-300 mb-1">Particle Shape</label>
144
+ <div class="flex flex-wrap gap-2 mt-2">
145
+ <button data-shape="circle" class="shape-btn w-8 h-8 rounded-full bg-gray-700 border-2 border-blue-500 flex items-center justify-center">
146
+ <div class="w-4 h-4 rounded-full bg-blue-500"></div>
147
+ </button>
148
+ <button data-shape="square" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center">
149
+ <div class="w-4 h-4 bg-blue-500"></div>
150
+ </button>
151
+ <button data-shape="triangle" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center">
152
+ <div class="w-4 h-4 bg-blue-500 clip-triangle"></div>
153
+ </button>
154
+ <button data-shape="star" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center">
155
+ <i class="fas fa-star text-blue-500 text-xs"></i>
156
+ </button>
157
+ <button data-shape="heart" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center">
158
+ <i class="fas fa-heart text-blue-500 text-xs"></i>
159
+ </button>
160
+ </div>
161
+ </div>
162
+
163
+ <div>
164
+ <label class="block text-sm font-medium text-gray-300 mb-1">Movement Style</label>
165
+ <select id="movement-style" class="w-full bg-gray-700 text-white rounded p-2 text-sm">
166
+ <option value="float">Float Up</option>
167
+ <option value="swirl">Swirling</option>
168
+ <option value="zigzag">Zigzag</option>
169
+ <option value="expand">Expanding</option>
170
+ </select>
171
+ </div>
172
+
173
+ <div class="pt-2 grid grid-cols-2 gap-2">
174
+ <button id="start-btn" class="bg-green-600 hover:bg-green-500 text-white py-2 px-4 rounded-lg transition">
175
+ <i class="fas fa-play mr-1"></i> Start
176
+ </button>
177
+ <button id="stop-btn" class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-lg transition">
178
+ <i class="fas fa-stop mr-1"></i> Stop
179
+ </button>
180
+ <button id="reset-btn" class="col-span-2 bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition">
181
+ <i class="fas fa-sync mr-1"></i> Reset
182
+ </button>
183
+ <button id="burst-btn" class="col-span-2 bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg transition">
184
+ <i class="fas fa-bolt mr-1"></i> Particle Burst
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <script>
191
+ document.addEventListener('DOMContentLoaded', function() {
192
+ // Settings
193
+ let settings = {
194
+ count: 100,
195
+ size: 8,
196
+ duration: 8,
197
+ spawnRate: 500,
198
+ color: '#3B82F6',
199
+ shape: 'circle',
200
+ movement: 'float',
201
+ randomColor: false,
202
+ isRunning: false
203
+ };
204
+
205
+ // DOM Elements
206
+ const container = document.getElementById('particles-container');
207
+ const countSlider = document.getElementById('particle-count');
208
+ const sizeSlider = document.getElementById('particle-size');
209
+ const durationSlider = document.getElementById('animation-duration');
210
+ const spawnRateSlider = document.getElementById('spawn-rate');
211
+ const movementStyle = document.getElementById('movement-style');
212
+ const colorButtons = document.querySelectorAll('.color-btn');
213
+ const shapeButtons = document.querySelectorAll('.shape-btn');
214
+ const startBtn = document.getElementById('start-btn');
215
+ const stopBtn = document.getElementById('stop-btn');
216
+ const resetBtn = document.getElementById('reset-btn');
217
+ const burstBtn = document.getElementById('burst-btn');
218
+ const togglePanelBtn = document.getElementById('toggle-panel');
219
+ const controlPanel = document.getElementById('control-panel');
220
+
221
+ // Value displays
222
+ const countValue = document.getElementById('count-value');
223
+ const sizeValue = document.getElementById('size-value');
224
+ const durationValue = document.getElementById('duration-value');
225
+ const rateValue = document.getElementById('rate-value');
226
+
227
+ // Animation variables
228
+ let spawnInterval;
229
+ let resizeTimeout;
230
+
231
+ // Initialize
232
+ updateSliderValues();
233
+ updateValueDisplays();
234
+ setActiveColorButton();
235
+ setActiveShapeButton();
236
+ startAnimation();
237
+
238
+ // Event Listeners
239
+ window.addEventListener('resize', function() {
240
+ clearTimeout(resizeTimeout);
241
+ resizeTimeout = setTimeout(handleResize, 200);
242
+ });
243
+
244
+ countSlider.addEventListener('input', function() {
245
+ settings.count = parseInt(this.value);
246
+ updateValueDisplays();
247
+ });
248
+
249
+ sizeSlider.addEventListener('input', function() {
250
+ settings.size = parseInt(this.value);
251
+ updateValueDisplays();
252
+ });
253
+
254
+ durationSlider.addEventListener('input', function() {
255
+ settings.duration = parseInt(this.value);
256
+ updateValueDisplays();
257
+ });
258
+
259
+ spawnRateSlider.addEventListener('input', function() {
260
+ settings.spawnRate = parseInt(this.value);
261
+ updateValueDisplays();
262
+ if (settings.isRunning) {
263
+ restartAnimation();
264
+ }
265
+ });
266
+
267
+ movementStyle.addEventListener('change', function() {
268
+ settings.movement = this.value;
269
+ });
270
+
271
+ colorButtons.forEach(btn => {
272
+ btn.addEventListener('click', function() {
273
+ const color = this.getAttribute('data-color');
274
+ if (color === 'random') {
275
+ settings.randomColor = true;
276
+ } else {
277
+ settings.color = color;
278
+ settings.randomColor = false;
279
+ }
280
+ setActiveColorButton();
281
+ });
282
+ });
283
+
284
+ shapeButtons.forEach(btn => {
285
+ btn.addEventListener('click', function() {
286
+ settings.shape = this.getAttribute('data-shape');
287
+ setActiveShapeButton();
288
+ });
289
+ });
290
+
291
+ startBtn.addEventListener('click', startAnimation);
292
+ stopBtn.addEventListener('click', stopAnimation);
293
+ resetBtn.addEventListener('click', resetSettings);
294
+ burstBtn.addEventListener('click', createParticleBurst);
295
+ togglePanelBtn.addEventListener('click', togglePanel);
296
+
297
+ // Functions
298
+ function createParticles() {
299
+ const width = window.innerWidth;
300
+ const height = window.innerHeight;
301
+
302
+ for (let i = 0; i < settings.count; i++) {
303
+ const particle = document.createElement('div');
304
+ particle.classList.add('particle');
305
+
306
+ // Random position
307
+ const x = Math.random() * width;
308
+ const y = Math.random() * height + height; // Start below the viewport
309
+ particle.style.left = `${x}px`;
310
+ particle.style.top = `${y}px`;
311
+
312
+ // Size
313
+ const sizeVariation = Math.random() * settings.size * 0.5;
314
+ const finalSize = settings.size + sizeVariation;
315
+ particle.style.width = `${finalSize}px`;
316
+ particle.style.height = `${finalSize}px`;
317
+
318
+ // Color
319
+ let color;
320
+ if (settings.randomColor) {
321
+ color = getRandomColor();
322
+ } else {
323
+ color = settings.color;
324
+ }
325
+ particle.style.backgroundColor = color;
326
+
327
+ // Shape
328
+ if (settings.shape === 'circle') {
329
+ particle.style.borderRadius = '50%';
330
+ } else if (settings.shape === 'square') {
331
+ particle.style.borderRadius = '0';
332
+ } else if (settings.shape === 'triangle') {
333
+ particle.style.borderRadius = '0';
334
+ particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
335
+ } else if (settings.shape === 'star') {
336
+ particle.style.backgroundColor = 'transparent';
337
+ particle.innerHTML = '<i class="fas fa-star"></i>';
338
+ adjustIconStyles(particle, color, finalSize);
339
+ } else if (settings.shape === 'heart') {
340
+ particle.style.backgroundColor = 'transparent';
341
+ particle.innerHTML = '<i class="fas fa-heart"></i>';
342
+ adjustIconStyles(particle, color, finalSize);
343
+ }
344
+
345
+ // Animation
346
+ const durationVariation = Math.random() * settings.duration * 0.5;
347
+ const finalDuration = settings.duration + durationVariation;
348
+ particle.style.animationDuration = `${finalDuration}s`;
349
+
350
+ // Movement style
351
+ let animationName = 'float-up';
352
+ let animationProperties = '';
353
+
354
+ switch(settings.movement) {
355
+ case 'swirl':
356
+ animationProperties = `cubic-bezier(0.4, 0, 0.2, 1) forwards`;
357
+ particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 200}px`);
358
+ particle.style.animation = `swirl-up ${finalDuration}s ${animationProperties}`;
359
+ break;
360
+ case 'zigzag':
361
+ animationProperties = `ease-in-out forwards`;
362
+ particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 300}px`);
363
+ particle.style.animation = `zigzag-up ${finalDuration}s ${animationProperties}`;
364
+ break;
365
+ case 'expand':
366
+ animationProperties = `ease-out forwards`;
367
+ particle.style.animation = `expand-up ${finalDuration}s ${animationProperties}`;
368
+ particle.style.setProperty('--scale-end', `${1 + Math.random() * 0.5}`);
369
+ break;
370
+ default: // float
371
+ animationProperties = `linear forwards`;
372
+ const xMovement = (Math.random() - 0.5) * 100;
373
+ particle.style.setProperty('--x-movement', `${xMovement}px`);
374
+ particle.style.animation = `float-up ${finalDuration}s ${animationProperties}`;
375
+ }
376
+
377
+ // Random delay
378
+ particle.style.animationDelay = `${Math.random() * 2}s`;
379
+
380
+ container.appendChild(particle);
381
+
382
+ // Remove particle after animation
383
+ setTimeout(() => {
384
+ if (particle.parentNode) {
385
+ particle.remove();
386
+ }
387
+ }, finalDuration * 1000 + 2000);
388
+ }
389
+ }
390
+
391
+ function adjustIconStyles(particle, color, size) {
392
+ particle.style.display = 'flex';
393
+ particle.style.alignItems = 'center';
394
+ particle.style.justifyContent = 'center';
395
+ const icon = particle.querySelector('i');
396
+ if (icon) {
397
+ icon.style.color = color;
398
+ icon.style.fontSize = `${size}px`;
399
+ }
400
+ }
401
+
402
+ function createParticleBurst() {
403
+ const burstCount = Math.floor(settings.count * 1.5);
404
+ const width = window.innerWidth;
405
+ const height = window.innerHeight;
406
+
407
+ for (let i = 0; i < burstCount; i++) {
408
+ const particle = document.createElement('div');
409
+ particle.classList.add('particle');
410
+
411
+ // Position at center
412
+ const centerX = width / 2;
413
+ const centerY = height / 2;
414
+ particle.style.left = `${centerX}px`;
415
+ particle.style.top = `${centerY}px`;
416
+
417
+ // Size
418
+ const sizeVariation = Math.random() * settings.size * 0.8;
419
+ const finalSize = settings.size + sizeVariation;
420
+ particle.style.width = `${finalSize}px`;
421
+ particle.style.height = `${finalSize}px`;
422
+
423
+ // Color
424
+ let color;
425
+ if (settings.randomColor) {
426
+ color = getRandomColor();
427
+ } else {
428
+ color = settings.color;
429
+ }
430
+ particle.style.backgroundColor = color;
431
+
432
+ // Shape
433
+ if (settings.shape === 'circle') {
434
+ particle.style.borderRadius = '50%';
435
+ } else if (settings.shape === 'square') {
436
+ particle.style.borderRadius = '0';
437
+ } else if (settings.shape === 'triangle') {
438
+ particle.style.borderRadius = '0';
439
+ particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
440
+ } else if (settings.shape === 'star') {
441
+ particle.style.backgroundColor = 'transparent';
442
+ particle.innerHTML = '<i class="fas fa-star"></i>';
443
+ adjustIconStyles(particle, color, finalSize);
444
+ } else if (settings.shape === 'heart') {
445
+ particle.style.backgroundColor = 'transparent';
446
+ particle.innerHTML = '<i class="fas fa-heart"></i>';
447
+ adjustIconStyles(particle, color, finalSize);
448
+ }
449
+
450
+ // Burst animation
451
+ const angle = Math.random() * Math.PI * 2;
452
+ const distance = 50 + Math.random() * 150;
453
+ const burstDuration = 1 + Math.random() * 2;
454
+
455
+ particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
456
+ particle.style.transition = `transform ${burstDuration}s ease-out, opacity ${burstDuration}s ease-out`;
457
+ particle.style.opacity = '0';
458
+
459
+ container.appendChild(particle);
460
+
461
+ // Remove particle after animation
462
+ setTimeout(() => {
463
+ if (particle.parentNode) {
464
+ particle.remove();
465
+ }
466
+ }, burstDuration * 1000 + 100);
467
+ }
468
+ }
469
+
470
+ function getRandomColor() {
471
+ const hue = Math.floor(Math.random() * 360);
472
+ return `hsl(${hue}, 80%, 60%)`;
473
+ }
474
+
475
+ function setActiveColorButton() {
476
+ colorButtons.forEach(btn => {
477
+ const btnColor = btn.getAttribute('data-color');
478
+ if (settings.randomColor && btnColor === 'random') {
479
+ btn.classList.add('border-white');
480
+ } else if (!settings.randomColor && btnColor === settings.color) {
481
+ btn.classList.add('border-white');
482
+ } else {
483
+ btn.classList.remove('border-white');
484
+ }
485
+ });
486
+ }
487
+
488
+ function setActiveShapeButton() {
489
+ shapeButtons.forEach(btn => {
490
+ const btnShape = btn.getAttribute('data-shape');
491
+ if (btnShape === settings.shape) {
492
+ btn.classList.add('border-blue-500');
493
+ } else {
494
+ btn.classList.remove('border-blue-500');
495
+ }
496
+ });
497
+ }
498
+
499
+ function startAnimation() {
500
+ if (!settings.isRunning) {
501
+ settings.isRunning = true;
502
+ startBtn.disabled = true;
503
+ stopBtn.disabled = false;
504
+ createParticles(); // Initial burst
505
+ spawnInterval = setInterval(createParticles, settings.spawnRate);
506
+ }
507
+ }
508
+
509
+ function stopAnimation() {
510
+ if (settings.isRunning) {
511
+ settings.isRunning = false;
512
+ startBtn.disabled = false;
513
+ stopBtn.disabled = true;
514
+ clearInterval(spawnInterval);
515
+ }
516
+ }
517
+
518
+ function restartAnimation() {
519
+ stopAnimation();
520
+ startAnimation();
521
+ }
522
+
523
+ function resetSettings() {
524
+ stopAnimation();
525
+
526
+ settings = {
527
+ count: 100,
528
+ size: 8,
529
+ duration: 8,
530
+ spawnRate: 500,
531
+ color: '#3B82F6',
532
+ shape: 'circle',
533
+ movement: 'float',
534
+ randomColor: false,
535
+ isRunning: false
536
+ };
537
+
538
+ countSlider.value = settings.count;
539
+ sizeSlider.value = settings.size;
540
+ durationSlider.value = settings.duration;
541
+ spawnRateSlider.value = settings.spawnRate;
542
+ movementStyle.value = settings.movement;
543
+
544
+ updateValueDisplays();
545
+ setActiveColorButton();
546
+ setActiveShapeButton();
547
+
548
+ // Clear all particles
549
+ container.innerHTML = '';
550
+ }
551
+
552
+ function togglePanel() {
553
+ controlPanel.classList.toggle('collapsed');
554
+ }
555
+
556
+ function updateSliderValues() {
557
+ countSlider.value = settings.count;
558
+ sizeSlider.value = settings.size;
559
+ durationSlider.value = settings.duration;
560
+ spawnRateSlider.value = settings.spawnRate;
561
+ movementStyle.value = settings.movement;
562
+ }
563
+
564
+ function updateValueDisplays() {
565
+ countValue.textContent = settings.count;
566
+ sizeValue.textContent = settings.size;
567
+ durationValue.textContent = settings.duration;
568
+ rateValue.textContent = settings.spawnRate;
569
+ }
570
+
571
+ function handleResize() {
572
+ // Adjust particle positions if needed
573
+ }
574
+
575
+ // Add dynamic styles for different movement types
576
+ const styleElement = document.createElement('style');
577
+ styleElement.textContent = `
578
+ @keyframes swirl-up {
579
+ 0% {
580
+ transform: translateY(0) rotate(0deg) translateX(0);
581
+ opacity: 0;
582
+ }
583
+ 10% {
584
+ opacity: 1;
585
+ }
586
+ 90% {
587
+ opacity: 1;
588
+ }
589
+ 100% {
590
+ transform: translateY(-100vh) rotate(720deg) translateX(var(--x-offset));
591
+ opacity: 0;
592
+ }
593
+ }
594
+
595
+ @keyframes zigzag-up {
596
+ 0%, 100% {
597
+ transform: translateY(0) translateX(0);
598
+ opacity: 0;
599
+ }
600
+ 10% {
601
+ opacity: 1;
602
+ }
603
+ 20% {
604
+ transform: translateY(-20vh) translateX(-50px);
605
+ }
606
+ 40% {
607
+ transform: translateY(-40vh) translateX(50px);
608
+ }
609
+ 60% {
610
+ transform: translateY(-60vh) translateX(-30px);
611
+ }
612
+ 80% {
613
+ transform: translateY(-80vh) translateX(30px);
614
+ }
615
+ 90% {
616
+ opacity: 1;
617
+ }
618
+ 100% {
619
+ transform: translateY(-100vh) translateX(var(--x-offset));
620
+ opacity: 0;
621
+ }
622
+ }
623
+
624
+ @keyframes expand-up {
625
+ 0% {
626
+ transform: translateY(0) scale(1);
627
+ opacity: 0;
628
+ }
629
+ 10% {
630
+ opacity: 1;
631
+ }
632
+ 90% {
633
+ opacity: 1;
634
+ }
635
+ 100% {
636
+ transform: translateY(-100vh) scale(var(--scale-end));
637
+ opacity: 0;
638
+ }
639
+ }
640
+ `;
641
+ document.head.appendChild(styleElement);
642
+ });
643
+ </script>
644
+ <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=hikkann/fp-test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
645
+ </html>