79 lines
2.6 KiB
HTML
79 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="Login1.css">
|
|
<title>Space Odyssey</title>
|
|
</head>
|
|
<body>
|
|
<div class="stars"></div>
|
|
<div class="neon-grid"></div>
|
|
|
|
<div class="layout">
|
|
<div class="left-panel">
|
|
<div class="title-container">
|
|
<h1 class="main-title">SPACE<br>ODYSSEY</h1>
|
|
<div class="subtitle">Initializing Spaceship</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="form-box">
|
|
<div class="form-content">
|
|
<h2 class="form-title">Access Terminal</h2>
|
|
<!-- box login-->
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" placeholder="Enter callsign...">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" placeholder="Enter access code...">
|
|
|
|
<div class="button-group">
|
|
<button class="btn-send" onclick="registerUser()">Connect</button>
|
|
<div class="signup-text">
|
|
<!-- link belm selsai-->
|
|
Don't have a terminal? <a href="#">Sign up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-list" id="userList"></div>
|
|
|
|
<script>
|
|
let userCounter = 0;
|
|
|
|
function registerUser() {
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (!username || !password) {
|
|
alert('ya begitulah');
|
|
return;
|
|
}
|
|
|
|
const userId = 'user_' + userCounter++;
|
|
|
|
const userCard = document.createElement('div');
|
|
userCard.className = 'user-card';
|
|
userCard.id = userId;
|
|
userCard.innerHTML = `
|
|
<div class="user-name">✓ You have logged on as <strong>${username}</strong></div>
|
|
`;
|
|
|
|
document.getElementById('userList').appendChild(userCard);
|
|
|
|
setTimeout(() => {
|
|
userCard.classList.add('usercardfade-out');
|
|
|
|
setTimeout(() => {
|
|
userCard.remove();
|
|
}, 500);
|
|
|
|
}, 3000);
|
|
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |