2526-web/Kelompok8-OCAGamingHub-Ody-Alex-Cliff
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

memperbarui login page

Browse Source
This commit is contained in:
alexander 2025-11-24 13:15:46 +07:00
parent 38f29f52f0
commit ea71ea03e0
1 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
login page.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -44,8 +45,15 @@
} }
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(20px); } 0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(20px);
}
} }
.container { .container {
@ -182,8 +190,15 @@
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); } 0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
} }
.success-message { .success-message {
@ -211,6 +226,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
@ -234,7 +250,8 @@
</div> </div>
<div class="button-group"> <div class="button-group">
<button type="button" class="btn btn-signin" onclick="goToSignUp()">Sign Up</button> <button type="button" class="btn btn-signin" onclick="handleLogin()">Login</button>
<button type="button" class="btn btn-signup" onclick="goToSignUp()">Sign Up</button>
</div> </div>
<div class="success-message" id="mainMessage"></div> <div class="success-message" id="mainMessage"></div>
@ -281,18 +298,50 @@
document.getElementById('signupForm').style.display = 'block'; document.getElementById('signupForm').style.display = 'block';
} }
// Login handler: validate input and show messages
function handleLogin() {
const username = document.getElementById('mainUsername').value.trim();
const password = document.getElementById('mainPassword').value.trim();
const successEl = document.getElementById('mainMessage');
const errorEl = document.getElementById('mainError');
// Reset messages
successEl.classList.remove('show');
errorEl.classList.remove('show');
if (!username || !password) {
errorEl.textContent = 'Please enter both username and password.';
errorEl.classList.add('show');
return;
}
// Simulate login (replace with real auth as needed)
if (username.toLowerCase() === 'admin' && password === 'admin') {
successEl.textContent = `Welcome back, ${username}! Redirecting...`;
successEl.classList.add('show');
setTimeout(() => {
alert('Logged in as ' + username + '. (Simulated)');
// Example: redirect to game/dashboard page
// window.location.href = 'dashboard.html';
}, 800);
} else {
errorEl.textContent = 'Invalid username or password.';
errorEl.classList.add('show');
}
}
// Signup Form Handler // Signup Form Handler
document.getElementById('signupForm').addEventListener('submit', function(e) { document.getElementById('signupForm').addEventListener('submit', function (e) {
e.preventDefault(); e.preventDefault();
const username = document.getElementById('signupUsername').value; const username = document.getElementById('signupUsername').value;
const email = document.getElementById('signupEmail').value; const email = document.getElementById('signupEmail').value;
const password = document.getElementById('signupPassword').value; const password = document.getElementById('signupPassword').value;
if (username && email && password) { if (username && email && password) {
const message = document.getElementById('signupMessage'); const message = document.getElementById('signupMessage');
message.textContent = `✓ Account created successfully for ${username}!`; message.textContent = `✓ Account created successfully for ${username}!`;
message.classList.add('show'); message.classList.add('show');
setTimeout(() => { setTimeout(() => {
alert(`Account created!\nUsername: ${username}\nEmail: ${email}`); alert(`Account created!\nUsername: ${username}\nEmail: ${email}`);
// Add your redirect here // Add your redirect here
@ -302,4 +351,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>