diff --git a/Animation Login.js b/Animation Login.js index e69de29..748e2ba 100644 --- a/Animation Login.js +++ b/Animation Login.js @@ -0,0 +1,82 @@ +// Particle system + const particlesContainer = document.getElementById('particles'); + const particleCount = 150; + const particles = []; + + class Particle { + constructor() { + this.element = document.createElement('div'); + this.element.className = 'particle'; + this.reset(); + particlesContainer.appendChild(this.element); + } + + reset() { + this.x = Math.random() * window.innerWidth; + this.y = Math.random() * window.innerHeight; + this.vx = (Math.random() - 0.5) * 1.2; + this.vy = (Math.random() - 0.5) * 1.2; + this.size = Math.random() * 3 + 2; + + const colors = ['#00d9ff', '#ff00ff', '#00ffff', '#ff0080', '#9d00ff', '#00ff88']; + const color = colors[Math.floor(Math.random() * colors.length)]; + this.element.style.background = color; + this.element.style.boxShadow = 0 0 15px ${color}; + this.element.style.width = this.size + 'px'; + this.element.style.height = this.size + 'px'; + + this.updatePosition(); + } + + updatePosition() { + this.element.style.left = this.x + 'px'; + this.element.style.top = this.y + 'px'; + } + + move() { + this.x += this.vx; + this.y += this.vy; + + if (this.x < -10) this.x = window.innerWidth + 10; + if (this.x > window.innerWidth + 10) this.x = -10; + if (this.y < -10) this.y = window.innerHeight + 10; + if (this.y > window.innerHeight + 10) this.y = -10; + + this.updatePosition(); + } + } + + // Create particles with even distribution + const cols = 15; + const rows = 10; + let particleIndex = 0; + + for (let i = 0; i < rows; i++) { + for (let j = 0; j < cols; j++) { + if (particleIndex >= particleCount) break; + + const particle = new Particle(); + // Distribute evenly across screen with some randomness + particle.x = (j / cols) * window.innerWidth + (Math.random() - 0.5) * 100; + particle.y = (i / rows) * window.innerHeight + (Math.random() - 0.5) * 100; + particle.updatePosition(); + particles.push(particle); + particleIndex++; + } + if (particleIndex >= particleCount) break; + } + + // Animate particles + function animate() { + particles.forEach(particle => particle.move()); + requestAnimationFrame(animate); + } + animate(); + + // Handle window resize + window.addEventListener('resize', () => { + particles.forEach(particle => { + if (particle.x > window.innerWidth) particle.x = window.innerWidth; + if (particle.y > window.innerHeight) particle.y = window.innerHeight; + }); + }); \ No newline at end of file diff --git a/Login.css b/Login.css new file mode 100644 index 0000000..e69de29 diff --git a/Login.html b/Login.html index e473aea..55db36a 100644 --- a/Login.html +++ b/Login.html @@ -1,35 +1,30 @@ - - - - - Login Form in HTML - - + + + + Login Portal -
-
-

Login

-
- - -
-
- - -
- -
- - Forgot password? -
- - -
-

Don't have an account?Register

-
-
+
+ +
+

Login Portal

+ +
+
+ +
+ +
+ +
+ + +
+ +
+ Don't Have Account? Register
- - \ No newline at end of file +
+ + \ No newline at end of file