Frontend
This commit is contained in:
Michelle Aquilera
parent
b426e8adae
commit
e594534416
@ -1,82 +1,14 @@
|
|||||||
// Particle system
|
// Form handling
|
||||||
const particlesContainer = document.getElementById('particles');
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||||
const particleCount = 150;
|
e.preventDefault();
|
||||||
const particles = [];
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
|
||||||
class Particle {
|
alert(Login berhasil!\nUsername: ${username});
|
||||||
constructor() {
|
});
|
||||||
this.element = document.createElement('div');
|
|
||||||
this.element.className = 'particle';
|
// Register link handling
|
||||||
this.reset();
|
document.getElementById('registerLink').addEventListener('click', function(e) {
|
||||||
particlesContainer.appendChild(this.element);
|
e.preventDefault();
|
||||||
}
|
alert('Halaman Register akan segera dibuat!');
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
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