<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
/* Style untuk elemen input */
.inputtext {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: none;
border-radius: 20px;
background-color: #f2f2f2;
font-size: 16px;
color: #333;
box-sizing: border-box;
}
/* Style untuk tombol login */
.tombol {
width: 100%;
padding: 10px;
border: none;
border-radius: 20px;
background-color: #3498db;
color: #fff;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
}
/* Style untuk kotak login */
.login-box {
width: 350px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #fff;
box-sizing: border-box;
}
/* Style untuk logo */
.logo {
display: block;
margin: 0 auto 30px;
width: 150px;
height: auto;
}
#timer{
color: red;
}
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
</style>
</head>
<body>
<div class="login-box">
<img class="logo" src="https://i.postimg.cc/Z51SdRH3/Wear-red-and-white-and-show-off-your-Arcadia-Knights-pride-2.png" alt="Logo">
<form>
<input type="text" name="username" placeholder="Username" class="inputtext">
<input type="password" name="password" placeholder="Password" class="inputtext">
<div id="timer"></div>
<input type="button" value="Login" class="tombol" onclick="login()">
</form>
</div>
<script>
function login() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
var errorMessage = document.querySelector(".error-message");
// Pasangan username dan password yang disimpan dalam array
var usernames = ["user1", "user2"];
var passwords = ["pass1", "pass2"];
var isMatch = false;
// Perulangan untuk memeriksa apakah username dan password yang dimasukkan sesuai dengan salah satu dari pasangan username dan password yang disimpan dalam array
for (var i = 0; i < usernames.length; i++) {
if (username == usernames[i] && password == passwords[i]) {
isMatch = true;
break;
}
}
if (isMatch) {
window.open('https://sites.google.com/man4-jkt.sch.id/am2024/Beranda/beranda', '_blank');
} else
{
document.getElementById("timer").innerHTML = "Username atau Password yang dimasukan salah";
}
}
</script>
</body>
</html>
#pengembangan sendiri dari berbagai sumber
