webscout 8.3.1__py3-none-any.whl → 8.3.2__py3-none-any.whl

webscout/auth/templates/static/particles.js

@@ -0,0 +1,201 @@
+/**
+ * Modern Particle Background System for WebScout
+ * Creates an interactive particle network background
+ */
+
+class ParticleSystem {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.particles = [];
+        this.mouse = { x: 0, y: 0 };
+        this.animationId = null;
+        
+        this.config = {
+            particleCount: 50,
+            particleSize: 2,
+            connectionDistance: 150,
+            mouseRadius: 200,
+            speed: 0.5,
+            colors: {
+                particle: 'rgba(99, 102, 241, 0.6)',
+                connection: 'rgba(99, 102, 241, 0.2)',
+                mouseConnection: 'rgba(139, 92, 246, 0.4)'
+            }
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.resize();
+        this.createParticles();
+        this.bindEvents();
+        this.animate();
+    }
+    
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+    
+    createParticles() {
+        this.particles = [];
+        for (let i = 0; i < this.config.particleCount; i++) {
+            this.particles.push({
+                x: Math.random() * this.canvas.width,
+                y: Math.random() * this.canvas.height,
+                vx: (Math.random() - 0.5) * this.config.speed,
+                vy: (Math.random() - 0.5) * this.config.speed,
+                size: Math.random() * this.config.particleSize + 1
+            });
+        }
+    }
+    
+    bindEvents() {
+        window.addEventListener('resize', () => this.resize());
+        
+        this.canvas.addEventListener('mousemove', (e) => {
+            this.mouse.x = e.clientX;
+            this.mouse.y = e.clientY;
+        });
+        
+        this.canvas.addEventListener('mouseleave', () => {
+            this.mouse.x = -1000;
+            this.mouse.y = -1000;
+        });
+    }
+    
+    updateParticles() {
+        this.particles.forEach(particle => {
+            // Update position
+            particle.x += particle.vx;
+            particle.y += particle.vy;
+            
+            // Bounce off edges
+            if (particle.x < 0 || particle.x > this.canvas.width) {
+                particle.vx *= -1;
+            }
+            if (particle.y < 0 || particle.y > this.canvas.height) {
+                particle.vy *= -1;
+            }
+            
+            // Keep particles in bounds
+            particle.x = Math.max(0, Math.min(this.canvas.width, particle.x));
+            particle.y = Math.max(0, Math.min(this.canvas.height, particle.y));
+            
+            // Mouse interaction
+            const dx = this.mouse.x - particle.x;
+            const dy = this.mouse.y - particle.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            
+            if (distance < this.config.mouseRadius) {
+                const force = (this.config.mouseRadius - distance) / this.config.mouseRadius;
+                particle.x -= dx * force * 0.01;
+                particle.y -= dy * force * 0.01;
+            }
+        });
+    }
+    
+    drawParticles() {
+        this.particles.forEach(particle => {
+            this.ctx.beginPath();
+            this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+            this.ctx.fillStyle = this.config.colors.particle;
+            this.ctx.fill();
+            
+            // Add glow effect
+            this.ctx.shadowBlur = 10;
+            this.ctx.shadowColor = this.config.colors.particle;
+            this.ctx.fill();
+            this.ctx.shadowBlur = 0;
+        });
+    }
+    
+    drawConnections() {
+        for (let i = 0; i < this.particles.length; i++) {
+            for (let j = i + 1; j < this.particles.length; j++) {
+                const dx = this.particles[i].x - this.particles[j].x;
+                const dy = this.particles[i].y - this.particles[j].y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                
+                if (distance < this.config.connectionDistance) {
+                    const opacity = 1 - (distance / this.config.connectionDistance);
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
+                    this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
+                    this.ctx.strokeStyle = this.config.colors.connection.replace('0.2', opacity * 0.2);
+                    this.ctx.lineWidth = 1;
+                    this.ctx.stroke();
+                }
+            }
+        }
+    }
+    
+    drawMouseConnections() {
+        this.particles.forEach(particle => {
+            const dx = this.mouse.x - particle.x;
+            const dy = this.mouse.y - particle.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            
+            if (distance < this.config.mouseRadius) {
+                const opacity = 1 - (distance / this.config.mouseRadius);
+                this.ctx.beginPath();
+                this.ctx.moveTo(particle.x, particle.y);
+                this.ctx.lineTo(this.mouse.x, this.mouse.y);
+                this.ctx.strokeStyle = this.config.colors.mouseConnection.replace('0.4', opacity * 0.4);
+                this.ctx.lineWidth = 2;
+                this.ctx.stroke();
+            }
+        });
+    }
+    
+    animate() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        this.updateParticles();
+        this.drawConnections();
+        this.drawParticles();
+        this.drawMouseConnections();
+        
+        this.animationId = requestAnimationFrame(() => this.animate());
+    }
+    
+    destroy() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+        }
+        window.removeEventListener('resize', this.resize);
+    }
+}
+
+// Initialize particle system when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Create canvas element
+    const canvas = document.createElement('canvas');
+    canvas.id = 'particle-canvas';
+    canvas.style.position = 'fixed';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = '1';
+    canvas.style.opacity = '0.7';
+    
+    // Insert canvas as first child of body
+    document.body.insertBefore(canvas, document.body.firstChild);
+    
+    // Initialize particle system
+    const particleSystem = new ParticleSystem(canvas);
+    
+    // Store reference for cleanup
+    window.particleSystem = particleSystem;
+});
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+    if (window.particleSystem) {
+        window.particleSystem.destroy();
+    }
+});