keyemail/simple-login-template
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Initial Release

Browse source
This commit is contained in:
Keyemail 2023-11-05 17:34:50 -08:00
parent 0fbe41cf72
commit 8921e00dc5
7 changed files with 310 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
home/index.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class="backgroundImage" src="../images/background.jpg"/>
<h1 class="welcome">Welcome!</h1>
<script src="java.js"></script>
</body>
</html>

32
home/styles.css Normal file
View file

@ -0,0 +1,32 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-color: #121212;
height: 100vh;
}
.backgroundImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(10px);
pointer-events: none;
}
.welcome {
color: white;
position: relative;
left: 30px;
top: 30px;
font-size: 60px;
font-family: 'Poppins', sans-serif;
}

BIN
images/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

8
index.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Refresh" content="0; url='login'">
</head>
<body>
</body>
</html>

35
login/index.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class="backgroundImage" src="../images/background.jpg"/>
<div class="loginBackground">
<div class="loginComponents">
<h1 class="loginHeading">Login</h1>
<div class="usernameComponents">
<div class="usernameArea">
<p class="usernameTitle">Username</p>
<p class="usernameWarning" id="usernameWarning">Please put a username</p>
<p class="usernameError" id="usernameError">Invalid Username</p>
</div>
<input class="usernameInput" id="usernameInput" type="text" autocomplete="off">
</div>
<div class="passwordComponents">
<div class="passwordArea">
<p class="passwordTitle">Password</p>
<p class="passwordWarning" id="passwordWarning">Please put a password</p>
<p class="passwordError" id="passwordError">Invalid Password</p>
</div>
<input class="passwordInput" id="passwordInput" type="password" autocomplete="off" onkeyup="enterKey(event)">
</div>
<button class="signInButton" onclick="login()">Sign In</button>
</div>
</div>
<script src="java.js"></script>
</body>
</html>

52
login/java.js Normal file
View file

@ -0,0 +1,52 @@
const input = document.querySelectorAll("input");
input.forEach(InputElement => { InputElement.addEventListener('input', function() {
let username = document.getElementById("usernameInput").value;
let password = document.getElementById("passwordInput").value;
document.getElementById("usernameError").style.display = "none";
document.getElementById("passwordError").style.display = "none";
if(!(username == "") && !(password == "")) {
document.getElementById("usernameWarning").style.display = "none";
document.getElementById("passwordWarning").style.display = "none";
}
else if(!(username == "")){
document.getElementById("usernameWarning").style.display = "none";
} else if(!(password == "")) {
document.getElementById("passwordWarning").style.display = "none";
}
})});
function login() {
let username = document.getElementById("usernameInput").value;
let password = document.getElementById("passwordInput").value;
if(username == "" && password == "") {
document.getElementById("usernameWarning").style.display = "inline";
document.getElementById("passwordWarning").style.display = "inline";
return;
}
else if(username == ""){
return document.getElementById("usernameWarning").style.display = "inline";
} else if(password == "") {
return document.getElementById("passwordWarning").style.display = "inline";
}
if(username == "admin" && password == "admin") {
console.log("Logged in!");
window.location.href = "/home"
} else {
document.getElementById("usernameError").style.display = "inline";
document.getElementById("passwordError").style.display = "inline";
return;
}
}
function enterKey(event) {
if(event.keyCode === 13) {
login()
} else {
return;
}
}

169
login/styles.css Normal file
View file

@ -0,0 +1,169 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-color: #121212;
height: 100vh;
}
.backgroundImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(10px);
pointer-events: none;
}
.loginBackground {
position: relative;
width: 500px;
height: 600px;
background-color: #152238;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loginComponents {
position: relative;
width: 95%;
height: 95%;
left: calc(50% + 1px);
top: calc(50% + 1px);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
font-family: 'Poppins', sans-serif;
color: white;
}
.loginHeading {
font-size: 50px;
font-weight: 500;
width: 100%;
text-align: center;
}
.usernameComponents {
position: relative;
left: 50%;
transform: translate(-50%);
width: max-content;
}
.usernameArea {
gap: 10px;
display: flex;
align-items: center;
}
.usernameTitle {
color: rgb(209, 209, 209);
font-weight: 300;
font-size: 19px;
}
.usernameWarning {
color: orange;
font-weight: 300;
font-size: 15px;
display: none;
}
.usernameError {
color: red;
font-weight: 300;
font-size: 15px;
display: none;
}
.usernameInput {
all: unset;
background-color: #0e1829;
height: 40px;
width: 320px;
border-radius: 7px;
padding-left: 10px;
padding-right: 10px;
font-weight: 300;
}
.passwordComponents {
position: relative;
left: 50%;
top: 20px;
transform: translate(-50%);
width: max-content;
}
.passwordArea {
gap: 10px;
display: flex;
align-items: center;
}
.passwordTitle {
color: rgb(209, 209, 209);
font-weight: 300;
font-size: 19px;
}
.passwordWarning {
color: orange;
font-weight: 300;
font-size: 15px;
display: none;
}
.passwordError {
color: red;
font-weight: 300;
font-size: 15px;
display: none;
}
.passwordInput {
all: unset;
background-color: #0e1829;
height: 40px;
width: 320px;
border-radius: 7px;
padding-left: 10px;
padding-right: 10px;
font-weight: 300;
}
.signInButton {
all: unset;
position: relative;
left: 50%;
width: 120px;
height: 50px;
background-color: #0e1829;
text-align: center;
transform: translate(-50%);
cursor: pointer;
margin-top: 50px;
transition: 0.3s background-color;
border-radius: 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signInButton:hover{
background-color: #0a121f;
}