diff --git a/WEB/View/src/CSS/LogSign.css b/WEB/View/src/CSS/LogSign.css index 4515984c..7d83603f 100644 --- a/WEB/View/src/CSS/LogSign.css +++ b/WEB/View/src/CSS/LogSign.css @@ -1,232 +1,194 @@ -@font-face { - font-family: Centra; - src: url('../../assets/fonts/CentraNo2-Bold.ttf'); - font-weight: 700; -} +/*Fonts CSS */ + @font-face { - font-family: Centra; - src: url('../../assets/fonts/CentraNo2-Regular.ttf'); - font-weight: 500; + font-family: Fauna; + src: url("../../assets/fonts/Fauna.ttf"); } @font-face { - font-family: Centra; - src: url('../../assets/fonts/CentraNo2-Light.ttf'); - font-weight: 400; + font-family: Equinox; + src: url("../../assets/fonts/Equinox.otf"); } +/* End Fonts CSS */ -p, a, li, button, ul { - margin: 0; - padding: 0; - line-height: normal; - text-decoration: none !important; +body { + min-height: 100vh; + font-family: "Equinox", sans-serif; + color: white; + scroll-behavior: smooth; + height: 100vh; + background-image: url("../../assets/img/ImgMain2.png"); + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-color: #000; } -a:hover { - text-decoration: none !important; +.login-box { + position: absolute; + top: 50%; + left: 50%; + width: 400px; + padding: 40px; + background: rgba(0, 0, 0, 0.6); + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); + border-radius: 10px; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); } -input:focus, textarea:focus, select:focus { +.login-box .user-box input { + width: 100%; + padding: 10px 0; + font-size: 16px; + color: #fff; + border: none; + border-bottom: 1px solid #fff; outline: none; + background: transparent; } -body { - margin:0; - padding:0; - font-family: 'Raleway', sans-serif !important; +.login-box .user-box label { + position: absolute; + top: 0; + left: 0; + font-size: 16px; + color: #fff; + pointer-events: none; + transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; } +.login-box .user-box input:focus ~ label, +.login-box .user-box input:valid ~ label { + top: -20px; + left: 0; + color: #6090d1; + font-size: 12px; +} -.main{ - background-image: url(../../assets/img/BackgroundLogIn.png); - scroll-behavior: smooth; - height: 100vh; - background-position: center center; - background-color: #464646; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; +.login-box form a, +.login-box form button { + position: relative; + display: inline-flex; + justify-content: center; + padding: 10px 0px; + color: #6090d1; + background: transparent; + border: none; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + letter-spacing: 3px; + transition: all 0.5s; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; } - -.login-box { - position: absolute; - top: 50%; - left: 50%; - width: 400px; - padding: 40px; - transform: translate(-50%, -50%); - background: rgba(0,0,0,0.6); - box-sizing: border-box; - box-shadow: 0 15px 25px rgba(0,0,0,.6); - border-radius: 10px; - } - - .login-box h2 { - margin: 0 0 30px; - padding: 0; - color: #fff; - text-transform: uppercase; - text-align: center; - } - - .login-box .user-box { - position: relative; - } - - .login-box .user-box input { - width: 100%; - padding: 10px 0; - font-size: 16px; - color: #fff; - margin-bottom: 30px; - border: none; - border-bottom: 1px solid #fff; - outline: none; - background: transparent; - } - - .login-box .user-box label { - position: absolute; - top:0; - left: 0; - padding: 10px 0; - font-size: 16px; - color: #fff; - pointer-events: none; - transition: .5s; - } - - .login-box .user-box input:focus ~ label, - .login-box .user-box input:valid ~ label { - top: -20px; - left: 0; - color: #6090d1 ; - font-size: 12px; - } - - .login-box form a, .login-box form button { - margin-left: 10px; - position: relative; - width: 120px; - display: inline-flex; - justify-content: center; - padding: 10px 0px; - color: #6090d1; - background: transparent; - border: none; - font-size: 16px; - text-decoration: none; - text-transform: uppercase; - overflow: hidden; - transition: .5s; - margin-top: 40px; - letter-spacing: 3px - } -.login-box form .right{ - float: right; - margin-right: 10px; +.login-box a:hover, +.login-box button:hover { + background: #6090d1; + color: #fff; + border-radius: 5px; + box-shadow: 0 0 5px #6090d1, 0 0 25px #6090d1, 0 0 50px #6090d1, + 0 0 100px #6090d1; } - - .login-box a:hover, .login-box button:hover { - background: #6090d1; - color: #fff; - border-radius: 5px; - box-shadow: 0 0 5px #6090d1, - 0 0 25px #6090d1, - 0 0 50px #6090d1, - 0 0 100px #6090d1; - } - - .login-box a span, .login-box button span { - position: absolute; - display: block; - } - - .login-box a span:nth-child(1), .login-box button span:nth-child(1) { - top: 0; +.login-box a span, +.login-box button span { + position: absolute; + display: block; +} + +.login-box a span:nth-child(1), +.login-box button span:nth-child(1) { + top: 0; + left: -100%; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, #6090d1); + animation: btn-anim1 1s linear infinite; +} + +@keyframes btn-anim1 { + 0% { left: -100%; - width: 100%; - height: 2px; - background: linear-gradient(90deg, transparent, #6090d1); - animation: btn-anim1 1s linear infinite; } - - @keyframes btn-anim1 { - 0% { - left: -100%; - } - 50%,100% { - left: 100%; - } + 50%, + 100% { + left: 100%; } - - .login-box a span:nth-child(2), .login-box button span:nth-child(2) { +} + +.login-box a span:nth-child(2), +.login-box button span:nth-child(2) { + top: -100%; + right: 0; + width: 2px; + height: 100%; + background: linear-gradient(180deg, transparent, #6090d1); + animation: btn-anim2 1s linear infinite; + animation-delay: 0.25s; +} + +@keyframes btn-anim2 { + 0% { top: -100%; - right: 0; - width: 2px; - height: 100%; - background: linear-gradient(180deg, transparent, #6090d1); - animation: btn-anim2 1s linear infinite; - animation-delay: .25s } - - @keyframes btn-anim2 { - 0% { - top: -100%; - } - 50%,100% { - top: 100%; - } + 50%, + 100% { + top: 100%; } - - .login-box a span:nth-child(3), .login-box button span:nth-child(3) { - bottom: 0; +} + +.login-box a span:nth-child(3), +.login-box button span:nth-child(3) { + bottom: 0; + right: -100%; + width: 100%; + height: 2px; + background: linear-gradient(270deg, transparent, #6090d1); + animation: btn-anim3 1s linear infinite; + animation-delay: 0.5s; +} + +@keyframes btn-anim3 { + 0% { right: -100%; - width: 100%; - height: 2px; - background: linear-gradient(270deg, transparent, #6090d1); - animation: btn-anim3 1s linear infinite; - animation-delay: .5s - } - - @keyframes btn-anim3 { - 0% { - right: -100%; - } - 50%,100% { - right: 100%; - } } - - .login-box a span:nth-child(4), .login-box button span:nth-child(4) { - bottom: -100%; - left: 0; - width: 2px; - height: 100%; - background: linear-gradient(360deg, transparent, #6090d1); - animation: btn-anim4 1s linear infinite; - animation-delay: .75s + 50%, + 100% { + right: 100%; } - - @keyframes btn-anim4 { - 0% { - bottom: -100%; - } - 50%,100% { - bottom: 100%; - } - } - -.top{ - display: flex; } -.material-icons{ - margin-bottom: 10%; +.login-box a span:nth-child(4), +.login-box button span:nth-child(4) { + bottom: -100%; + left: 0; + width: 2px; + height: 100%; + background: linear-gradient(360deg, transparent, #6090d1); + animation: btn-anim4 1s linear infinite; + animation-delay: 0.75s; } -.top h2{ - margin-left: 25%; - margin-top: 2% ; -} \ No newline at end of file +@keyframes btn-anim4 { + 0% { + bottom: -100%; + } + 50%, + 100% { + bottom: 100%; + } +} diff --git a/WEB/View/src/JS/LogIn.js b/WEB/View/src/JS/LogIn.js deleted file mode 100644 index 827bbc79..00000000 --- a/WEB/View/src/JS/LogIn.js +++ /dev/null @@ -1,61 +0,0 @@ -const form = document.getElementById('form'); -const username = document.getElementById('username'); -const password = document.getElementById('password'); - -form.addEventListener('submit', e => { - e.preventDefault(); - - checkInputs(); - printForm(); -}); - -const setErrorFor = (element, message) => { - const inputControl = element.parentElement; - - inputControl.classList.add('error'); - inputControl.classList.remove('success'); -} - -const setSuccessFor = (element) => { - const inputControl = element.parentElement; - - inputControl.classList.add('success'); - inputControl.classList.remove('error'); -}; - - - -function checkInputs() { - // trim to remove the whitespaces - const usernameValue = username.value.trim(); - const passwordValue = password.value.trim(); - - if (usernameValue === '') { - setErrorFor(username, 'Username cannot be blank'); - } - else { - setSuccessFor(username); - } - - if (passwordValue === '') { - setErrorFor(password, 'Password cannot be blank'); - } - else if(passwordValue.length < 8) { - setErrorFor(password, 'Password must be at least 8 characters'); - } - else { - setSuccessFor(password); - } - - if (usernameValue === 'admin' && passwordValue === 'admin') { - window.location.href = 'http://localhost:8080/WEB/Welcome.html'; - } -} - -//Open a new blank page and print the usename and password - -function printForm() { - var myWindow = window.open("", "MsgWindow", "width=200,height=100"); - myWindow.document.write("Username: " + username.value + "
Password: " + password.value); -} - diff --git a/WEB/View/src/pages/LogSign/Login.php b/WEB/View/src/pages/LogSign/Login.php index a969d3bf..210c9aa6 100644 --- a/WEB/View/src/pages/LogSign/Login.php +++ b/WEB/View/src/pages/LogSign/Login.php @@ -1,47 +1,73 @@  - - - - - - - + + + + + + + + + + + Login - - -
-
-
-

Sign up

+ + +
+
-
- - \ No newline at end of file + +