Initial Release
This commit is contained in:
Keyemail
parent
0fbe41cf72
commit
8921e00dc5
14
home/index.html
Normal file
14
home/index.html
Normal 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
32
home/styles.css
Normal 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
BIN
images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
8
index.html
Normal file
8
index.html
Normal 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
35
login/index.html
Normal 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
52
login/java.js
Normal 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
169
login/styles.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue