Улучшение взаимодействия и добавление веб-приложения

web_app/static/js/background.js

@@ -0,0 +1,144 @@
+const container = document.getElementById('stars-container');
+
+// Create Canvas
+const canvas = document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+container.appendChild(canvas);
+
+let width, height;
+let stars = [];
+let comets = [];
+
+function resize() {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    canvas.width = width;
+    canvas.height = height;
+    initStars();
+}
+
+class Star {
+    constructor() {
+        this.reset();
+        this.y = Math.random() * height; // Initial random y
+    }
+
+    reset() {
+        this.x = Math.random() * width;
+        this.y = Math.random() * height;
+        this.z = Math.random() * 2 + 0.5; // Depth/Size/Speed
+        this.baseSize = Math.random() * 1.5;
+        this.alpha = Math.random() * 0.5 + 0.1;
+        this.twinkle = Math.random() * 0.05;
+    }
+
+    update() {
+        this.alpha += this.twinkle;
+        if (this.alpha > 0.8 || this.alpha < 0.1) this.twinkle = -this.twinkle;
+    }
+
+    draw() {
+        ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
+        ctx.beginPath();
+        const size = this.baseSize * (this.z / 2);
+        ctx.arc(this.x, this.y, size, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+class Comet {
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this.x = Math.random() * width;
+        this.y = Math.random() * height * 0.5;
+        this.len = Math.random() * 80 + 20;
+        this.speed = Math.random() * 5 + 2;
+        this.angle = Math.PI / 4 + (Math.random() - 0.5) * 0.2; // 45 degrees
+        this.active = false;
+        this.wait = Math.random() * 200 + 50;
+    }
+
+    update() {
+        if (!this.active) {
+            this.wait--;
+            if (this.wait <= 0) {
+                this.active = true;
+                this.x = Math.random() * width - 200; // Start off screen slightly
+                this.y = Math.random() * height * 0.5;
+            }
+            return;
+        }
+
+        this.x += Math.cos(this.angle) * this.speed;
+        this.y += Math.sin(this.angle) * this.speed;
+
+        if (this.x > width + 100 || this.y > height + 100) {
+            this.active = false;
+            this.reset();
+            this.wait = Math.random() * 500 + 100; // Wait longer before next
+        }
+    }
+
+    draw() {
+        if (!this.active) return;
+
+        // Gradient tail
+        const grad = ctx.createLinearGradient(
+            this.x, this.y,
+            this.x - Math.cos(this.angle) * this.len,
+            this.y - Math.sin(this.angle) * this.len
+        );
+        grad.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
+        grad.addColorStop(1, 'rgba(99, 102, 241, 0)'); // Fade to purple blue
+
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = 2;
+        ctx.lineCap = 'round';
+
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(
+            this.x - Math.cos(this.angle) * this.len,
+            this.y - Math.sin(this.angle) * this.len
+        );
+        ctx.stroke();
+
+        // Head
+        ctx.fillStyle = 'white';
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
+        ctx.fill();
+        // Glow
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = '#6366f1';
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }
+}
+
+function initStars() {
+    stars = [];
+    comets = [];
+    for (let i = 0; i < 150; i++) stars.push(new Star());
+    for (let i = 0; i < 3; i++) comets.push(new Comet());
+}
+
+function animate() {
+    ctx.clearRect(0, 0, width, height);
+
+    // Background gradient for depth
+    // ctx.fillStyle = 'rgba(5, 5, 16, 0.2)';
+    // ctx.fillRect(0,0,width,height);
+
+    stars.forEach(s => { s.update(); s.draw(); });
+    comets.forEach(c => { c.update(); c.draw(); });
+
+    requestAnimationFrame(animate);
+}
+
+window.addEventListener('resize', resize);
+resize();
+animate();