Html caode In Page of Blogger
*******************
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
background-color: #3a3a3a;
}
#main-holder {
width: 50%;
height: 70%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 5px 2px black;
}
#login-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#login-error-msg {
width: 23%;
text-align: center;
margin: 0;
padding: 5px;
font-size: 12px;
font-weight: bold;
color: #8a0000;
border: 1px solid #8a0000;
background-color: #e58f8f;
opacity: 0;
}
#error-msg-second-line {
display: block;
}
#login-form {
align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}
.login-form-field::placeholder {
color: #3a3a3a;
}
.login-form-field {
border: none;
border-bottom: 1px solid #3a3a3a;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
#login-form-submit {
width: 100%;
padding: 7px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #3a3a3a;
cursor: pointer;
outline: none;
}
</style>
<div class="center">
<main id="main-holder">
<h1 id="login-header" style="text-align: center;">Login</h1>
<div id="login-error-msg-holder">
<p id="login-error-msg" style="text-align: center;">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>
<form id="login-form">
<input class="login-form-field" id="username-field" name="username" type="text" />
<input class="login-form-field" id="password-field" name="password" type="password" />
<input id="login-form-submit" type="submit" value="Login" />
</form>
</main>
</div>
<script>
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");
loginButton.addEventListener("click", (e) => {
e.preventDefault();
const username = loginForm.username.value;
const password = loginForm.password.value;
if (username === "user" && password === "357951") {
alert("You have successfully logged in.");
location.href='https://goshencremation.blogspot.com/p/blog-page_4.html';
} else {
loginErrorMsg.style.opacity = 1;
}
})
</script>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น