diff --git a/home/index.html b/home/index.html new file mode 100644 index 0000000..2217821 --- /dev/null +++ b/home/index.html @@ -0,0 +1,14 @@ + + + + + + Login + + + + +

Welcome!

+ + + \ No newline at end of file diff --git a/home/styles.css b/home/styles.css new file mode 100644 index 0000000..4d87407 --- /dev/null +++ b/home/styles.css @@ -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; +} \ No newline at end of file diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..22b4234 Binary files /dev/null and b/images/background.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef48c85 --- /dev/null +++ b/index.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/login/index.html b/login/index.html new file mode 100644 index 0000000..acd9953 --- /dev/null +++ b/login/index.html @@ -0,0 +1,35 @@ + + + + + + Login + + + + +
+
+

Login

+
+
+

Username

+

Please put a username

+

Invalid Username

+
+ +
+
+
+

Password

+

Please put a password

+

Invalid Password

+
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/login/java.js b/login/java.js new file mode 100644 index 0000000..22afa18 --- /dev/null +++ b/login/java.js @@ -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; + } +} \ No newline at end of file diff --git a/login/styles.css b/login/styles.css new file mode 100644 index 0000000..fa96784 --- /dev/null +++ b/login/styles.css @@ -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; +} \ No newline at end of file