2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pesan

Browse Source
This commit is contained in:
Michelle Aquilera 2025-11-14 17:15:17 +07:00
parent 6bc55406e2
commit b426e8adae
3 changed files with 108 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
Animation Login.js
View File

@ -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;
});
});

0
Login.css Normal file
View File

57
Login.html
View File

@ -1,35 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width", initial-scale="1.0"> <title>Login Portal</title>
<title>Login Form in HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <body>
<div class="particles"> <div id="particles"></div>
<form action="">
<h1>Login</h1> <div class="container">
<div class="input-box"> <h1>Login Portal</h1>
<input type="text" placeholder="Username" required>
<i class="bx bxs-user"></i> <form id="loginForm">
</div> <div class="input-group">
<div class="input-box"> <input type="text" id="username" placeholder="Username" required>
<input type="password" placeholder="Password" required> </div>
<i class="bx bxs-lock-alt"></i>
</div> <div class="input-group">
<input type="password" id="password" placeholder="Password" required>
<div class="remember-forgot"> </div>
<label><input type="checkbox">Remember me</label>
<a href="#">Forgot password?</a> <button type="submit" class="btn">Enter</button>
</div> </form>
<button type="submit" class="btn">Login</button> <div class="register-link">
<div class="register-link"> Don't Have Account? <a href="#" id="registerLink">Register</a>
<p>Don't have an account?<a href="#">Register</a></p>
</div>
</form>
</div> </div>
</body> </div>
</html> </body>
</head>