Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,67 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: #0a0a0a;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#particleCanvas {
+    display: block;
+    cursor: crosshair;
+}
+
+.controls {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    color: #ffffff;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 20px;
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-width: 300px;
+    transition: opacity 0.3s ease;
+}
+
+.controls:hover {
+    opacity: 0.9;
+}
+
+.control-info h2 {
+    font-size: 1.2rem;
+    margin-bottom: 15px;
+    color: #64ffda;
+}
+
+.control-info p {
+    font-size: 0.9rem;
+    margin-bottom: 8px;
+    line-height: 1.4;
+}
+
+.control-info strong {
+    color: #64ffda;
+}
+
+@media (max-width: 768px) {
+    .controls {
+        top: 10px;
+        left: 10px;
+        padding: 15px;
+        max-width: 250px;
+    }
+    
+    .control-info h2 {
+        font-size: 1rem;
+    }
+    
+    .control-info p {
+        font-size: 0.8rem;
+    }
+}

assets/js/particles.js

@@ -0,0 +1,264 @@
+const canvas = document.getElementById('particleCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// Configuration
+let config = {
+    particleCount: 100,
+    particleSize: 2,
+    speed: 1,
+    connectionDistance: 100,
+    colorMode: 'rainbow',
+    mouseEffect: 'attract',
+    mouseRadius: 150
+};
+
+// Mouse position
+let mouse = {
+    x: canvas.width / 2,
+    y: canvas.height / 2
+};
+
+// Particles array
+let particles = [];
+
+// Color modes
+const colorModes = {
+    rainbow: (particle, time) => {
+        const hue = (time * 0.1 + particle.id * 10) % 360;
+        return `hsl(${hue}, 70%, 50%)`;
+    },
+    ocean: (particle, time) => {
+        const hue = 180 + Math.sin(time * 0.001 + particle.id * 0.1) * 60;
+        return `hsl(${hue}, 70%, 50%)`;
+    },
+    fire: (particle, time) => {
+        const hue = Math.sin(time * 0.001 + particle.id * 0.1) * 30;
+        return `hsl(${hue}, 80%, 50%)`;
+    },
+    monochrome: (particle, time) => {
+        const brightness = 30 + Math.sin(time * 0.001 + particle.id * 0.1) * 20;
+        return `hsl(0, 0%, ${brightness}%)`;
+    },
+    neon: (particle, time) => {
+        const colors = ['#ff00ff', '#00ffff', '#ffff00', '#ff00aa'];
+        return colors[Math.floor((time * 0.001 + particle.id * 0.1) % colors.length)];
+    }
+};
+
+// Particle class
+class Particle {
+    constructor(id) {
+        this.id = id;
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.vx = (Math.random() - 0.5) * config.speed;
+        this.vy = (Math.random() - 0.5) * config.speed;
+        this.size = config.particleSize;
+        this.baseSize = config.particleSize;
+    }
+
+    update() {
+        // Mouse interaction
+        const dx = mouse.x - this.x;
+        const dy = mouse.y - this.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < config.mouseRadius) {
+            const force = (1 - distance / config.mouseRadius) * 0.5;
+            if (config.mouseEffect === 'attract') {
+                this.vx += dx * force * 0.01;
+                this.vy += dy * force * 0.01;
+            } else {
+                this.vx -= dx * force * 0.01;
+                this.vy -= dy * force * 0.01;
+            }
+        }
+
+        // Update position
+        this.x += this.vx * config.speed;
+        this.y += this.vy * config.speed;
+
+        // Bounce off walls
+        if (this.x < 0 || this.x > canvas.width) {
+            this.vx *= -0.9;
+            this.x = Math.max(0, Math.min(canvas.width, this.x));
+        }
+        if (this.y < 0 || this.y > canvas.height) {
+            this.vy *= -0.9;
+            this.y = Math.max(0, Math.min(canvas.height, this.y));
+        }
+
+        // Apply friction
+        this.vx *= 0.99;
+        this.vy *= 0.99;
+
+        // Size animation
+        this.size = this.baseSize + Math.sin(Date.now() * 0.001 + this.id) * 0.5;
+    }
+
+    draw(time) {
+        ctx.fillStyle = colorModes[config.colorMode](this, time);
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Glow effect
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = colorModes[config.colorMode](this, time);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }
+}
+
+// Initialize particles
+function initParticles() {
+    particles = [];
+    for (let i = 0; i < config.particleCount; i++) {
+        particles.push(new Particle(i));
+    }
+}
+
+// Draw connections between particles
+function drawConnections() {
+    for (let i = 0; i < particles.length; i++) {
+        for (let j = i + 1; j < particles.length; j++) {
+            const dx = particles[i].x - particles[j].x;
+            const dy = particles[i].y - particles[j].y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance < config.connectionDistance) {
+                const opacity = 1 - distance / config.connectionDistance;
+                ctx.strokeStyle = `rgba(100, 255, 218, ${opacity * 0.2})`;
+                ctx.lineWidth = opacity * 0.5;
+                ctx.beginPath();
+                ctx.moveTo(particles[i].x, particles[i].y);
+                ctx.lineTo(particles[j].x, particles[j].y);
+                ctx.stroke();
+            }
+        }
+    }
+}
+
+// Animation loop
+function animate() {
+    ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const time = Date.now();
+
+    // Update and draw particles
+    particles.forEach(particle => {
+        particle.update();
+        particle.draw(time);
+    });
+
+    // Draw connections
+    drawConnections();
+
+    requestAnimationFrame(animate);
+}
+
+// Event listeners
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
+
+canvas.addEventListener('mousemove', (e) => {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
+});
+
+canvas.addEventListener('click', (e) => {
+    // Create explosion effect
+    for (let i = 0; i < 20; i++) {
+        const angle = (Math.PI * 2 * i) / 20;
+        const speed = 5 + Math.random() * 5;
+        const particle = new Particle(particles.length);
+        particle.x = e.clientX;
+        particle.y = e.clientY;
+        particle.vx = Math.cos(angle) * speed;
+        particle.vy = Math.sin(angle) * speed;
+        particle.baseSize = 3 + Math.random() * 2;
+        particles.push(particle);
+    }
+
+    // Remove excess particles
+    if (particles.length > config.particleCount * 2) {
+        particles.splice(0, particles.length - config.particleCount);
+    }
+});
+
+// Keyboard controls
+document.addEventListener('keydown', (e) => {
+    switch(e.key.toLowerCase()) {
+        case ' ':
+            e.preventDefault();
+            const modes = Object.keys(colorModes);
+            const currentIndex = modes.indexOf(config.colorMode);
+            config.colorMode = modes[(currentIndex + 1) % modes.length];
+            break;
+        case '1':
+            config.particleCount = 50;
+            initParticles();
+            break;
+        case '2':
+            config.particleCount = 100;
+            initParticles();
+            break;
+        case '3':
+            config.particleCount = 200;
+            initParticles();
+            break;
+        case '4':
+            config.particleCount = 300;
+            initParticles();
+            break;
+        case '5':
+            config.particleCount = 500;
+            initParticles();
+            break;
+        case 'q':
+            config.speed = Math.max(0.1, config.speed - 0.1);
+            break;
+        case 'w':
+            config.speed = Math.min(5, config.speed + 0.1);
+            break;
+        case 'a':
+            config.particleSize = Math.max(1, config.particleSize - 0.5);
+            particles.forEach(p => p.baseSize = config.particleSize);
+            break;
+        case 's':
+            config.particleSize = Math.min(10, config.particleSize + 0.5);
+            particles.forEach(p => p.baseSize = config.particleSize);
+            break;
+        case 'z':
+            config.connectionDistance = Math.max(50, config.connectionDistance - 10);
+            break;
+        case 'x':
+            config.connectionDistance = Math.min(300, config.connectionDistance + 10);
+            break;
+        case 'r':
+            config = {
+                particleCount: 100,
+                particleSize: 2,
+                speed: 1,
+                connectionDistance: 100,
+                colorMode: 'rainbow',
+                mouseEffect: 'attract',
+                mouseRadius: 150
+            };
+            initParticles();
+            break;
+        case 'm':
+            config.mouseEffect = config.mouseEffect === 'attract' ? 'repel' : 'attract';
+            break;
+    }
+});
+
+// Initialize and start
+initParticles();
+animate();

index.html

@@ -1,19 +1,27 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Particle Animation</title>
+    <meta name="description" content="Beautiful interactive particle animation with keyboard and mouse controls">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <canvas id="particleCanvas"></canvas>
+    <div class="controls">
+        <div class="control-info">
+            <h2>Controls</h2>
+            <p><strong>Mouse:</strong> Move to attract/repel particles</p>
+            <p><strong>Click:</strong> Create particle explosion</p>
+            <p><strong>Space:</strong> Toggle color mode</p>
+            <p><strong>1-5:</strong> Change particle count</p>
+            <p><strong>Q/W:</strong> Decrease/Increase speed</p>
+            <p><strong>A/S:</strong> Decrease/Increase size</p>
+            <p><strong>Z/X:</strong> Decrease/Increase connection distance</p>
+            <p><strong>R:</strong> Reset to defaults</p>
+        </div>
+    </div>
+    <script src="assets/js/particles.js"></script>
+</body>
+</html>