Frontend
This commit is contained in:
Michelle Aquilera
parent
b426e8adae
commit
e594534416
@ -1,82 +1,14 @@
|
||||
// Particle system
|
||||
const particlesContainer = document.getElementById('particles');
|
||||
const particleCount = 150;
|
||||
const particles = [];
|
||||
// Form handling
|
||||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
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;
|
||||
alert(Login berhasil!\nUsername: ${username});
|
||||
});
|
||||
|
||||
// Register link handling
|
||||
document.getElementById('registerLink').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Halaman Register akan segera dibuat!');
|
||||
});
|
||||
205
Login.css
205
Login.css
@ -0,0 +1,205 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: linear-gradient(135deg, #1a0033 0%, #0d001a 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: rgba(30, 0, 50, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
padding: 50px 40px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 40px;
|
||||
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
background: rgba(50, 50, 70, 0.5);
|
||||
border: 2px solid rgba(100, 100, 120, 0.3);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #00d9ff;
|
||||
box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-top: 10px;
|
||||
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 35px rgba(0, 217, 255, 0.6);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-link a {
|
||||
color: #00d9ff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.register-link a:hover {
|
||||
color: #ff00ff;
|
||||
text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 40px 30px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 12px 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 1.5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.container {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user