diff --git a/avatar.svg b/avatar.svg new file mode 100644 index 0000000..d91c964 --- /dev/null +++ b/avatar.svg @@ -0,0 +1 @@ +profile pic \ No newline at end of file diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..55a9596 Binary files /dev/null and b/bg.jpg differ diff --git a/eye-slash.webp b/eye-slash.webp new file mode 100644 index 0000000..1a46dac Binary files /dev/null and b/eye-slash.webp differ diff --git a/eye.png b/eye.png new file mode 100644 index 0000000..1064b6d Binary files /dev/null and b/eye.png differ diff --git a/icon.ico b/icon.ico new file mode 100644 index 0000000..8f5a1bd Binary files /dev/null and b/icon.ico differ diff --git a/index_js.js b/index_js.js new file mode 100644 index 0000000..926ac4e --- /dev/null +++ b/index_js.js @@ -0,0 +1,93 @@ +// Save password to cookie (Not Complete!) +function savePwd2Cookie() { + alert("Task is not completed!"); +} +//------------------------------------------------------------------------------------------------- +// Forgot password (Not Complete!) +function errorfunction() { + alert("Sorry! This function will not work because i don't know how to do it :)"); +} +//------------------------------------------------------------------------------------------------- +// Show the Password Function +function showPwd() { + var pwd = document.getElementById("Password"); + var pwdValue = pwd.value; + if (pwdValue == "") { + alert("Fill the Password!"); + } + else { + changePwdType(); + } +function changePwdType() { + var pwd = document.getElementById("Password"); + if (pwd.type == "password"){ + pwd.type = "text" + var eyeIcon = document.getElementById("eyeIcon"); + eyeIcon.src= "eye.png" + } + else { + pwd.type = "password" + var eyeIcon = document.getElementById("eyeIcon"); + eyeIcon.src = "eye-slash.webp" + } +} +} +//------------------------------------------------------------------------------------------------- +// Check Login Element - Post to server +function loginCheck() { + var username = document.getElementById("Username"); + var usernameValue = username.value; + var pwd = document.getElementById("Password"); + var pwdValue = pwd.value; + if (usernameValue == "" || pwdValue == "") { + showErrorMsg(); + } + else { + hideErrorMsg(); + request2Sver(); + } +} +// Show the Err: Fill Us.name and Pwd both +function showErrorMsg() { + var x = document.getElementById("h6"); // h6 is + if (x.style.display === "none") { + x.style.display = "block"; + } +} +// Hide Error Msg +function hideErrorMsg() { + var x = document.getElementById("h6"); // h6 is + if (x.style.display === "block") { + x.style.display = "none"; +} +// Request to Server +function request2Sver() { + var usernameElement = document.getElementById("Username"); + var user = usernameElement.value; + var pwdElement = document.getElementById("Password"); + var pwd = pwdElement.value; + + axios.post("http://localhost:5000/login", { + username: user, + password: pwd + }) + .then(function (response) { + console.log(response); + handleLoginResponse(response); + }); +} + +function handleLoginResponse(response) { + if (response && response.status == 200) { // successfully login + calcDiv(); + } else { + alert("Login failed!"); + } +} +// Show the Calculator Div +function calcDiv() { + div1 = document.getElementById("login") + div1.style.display = "none"; + calcDiv = document.getElementById("calculator"); + calcDiv.style.display = "block"; +} \ No newline at end of file diff --git a/myapp.svg b/myapp.svg new file mode 100644 index 0000000..848c47e --- /dev/null +++ b/myapp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylelogin.css b/stylelogin.css new file mode 100644 index 0000000..4ce2575 --- /dev/null +++ b/stylelogin.css @@ -0,0 +1,177 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: 'Fira Sans', sans-serif; +} + +.bg-image { + position: fixed; + height: 100%; + width: 100%; + left: 0; + bottom: 0; + z-index: -1; +} + +.container { + display: grid; + width: 100vw; + height: 100vh; + grid-template-columns: 1fr 1fr; + grid-gap: 7rem; + padding: 0 2rem; +} + +.img { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.img img { + width: 500px; +} + +.login-container { + display: flex; + align-items: center; + text-align: center; +} + +.avatar { + width: 100px; +} + +form { + width: 360px; +} + +form h2 { + font-size: 2.9rem; + text-transform: uppercase; + margin: 15px 0; +} + +.login-input { + display: grid; + grid-template-columns: 7% 93%; + margin: 25px 0; + padding: 5px 0; + border-bottom: 2px solid #d9d9d9; +} + +.icon { + display: flex; + justify-content: center; + align-items: center; +} + +.login-input > div { + position: relative; + height: 45px; +} + +.login-input > div h5 { + position: absolute; + height: 70%; + left: 10px; + top: 0; + transform: translateY(-50%); + font-size: 18px; + color: #999; +} + +.login-input input { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: none; + outline: none; + background: none; + padding: 0.5rem 0.7rem; + font-size: 1.2rem; + font-family: 'Fira Sans', sans-serif; +} + +a { + display: block; + text-align: right; + height: 30px; + text-decoration: none; + font-size: 0.9rem; +} + +button { + width: 85%; +} + +@media (min-width: 990px) { + .img img { + width: 40vw; + } +} + +@media (max-width: 989.999px) { + .img { + display: none; + } + .container { + grid-template-columns: 1fr; + } + .login-container { + justify-content: center; + } +} + +@media (max-width: 380px) { + .login-input { + width: 90%; + } + + a { + transform: translateX(-40px); + } +} +.hidden { + display: flex; +} +span { + cursor: pointer; + color: #007bff; +} +.text:hover { + color: #0069d9 ; +} + +/* ------------------------------------------------------ */ +.btn-show-pass { + font-size: 15px; + color: #999999; + + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + align-items: center; + position: absolute; + height: 100%; + top: 0; + right: 12px; + padding: 0 5px; + cursor: pointer; + -webkit-transition: background 0.4s; + -o-transition: background 0.4s; + -moz-transition: background 0.4s; + transition: background 0.4s; + } + +.btn-show-pass:hover { + color: #57b846; +} \ No newline at end of file diff --git a/webcalc.html b/webcalc.html index 01619a8..a97f160 100644 --- a/webcalc.html +++ b/webcalc.html @@ -8,12 +8,78 @@ + + + + + + + + + -
+
+ + +
+
+ +
+
+ +
+
+ +