Login

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";
+}

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;
+}

webcalc.html

@@ -8,12 +8,78 @@
     </title>
     <!-- put your css in file styles.css -->
     <link rel="stylesheet" type="text/css" href="styles.css" />
+    <!--  Kuerl  -->
+    <link rel="icon" href="icon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="stylelogin.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://kit.fontawesome.com/213fbc8967.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="index_js.js"></script>
 
 </head>
 
 <body>
 
-    <div id="login"></div>
+    <div id="login">
+    <!--  Kuerl from here!  -->
+        <img class="bg-image" src="bg.jpg"></img>
+        <div class="container">
+            <div class="img">
+                <img src="myapp.svg">
+            </div>
+            <div id="login" style="display: block; margin: auto;">
+                <div class="login-container">
+                    <form>
+                        <img class="avatar" src="avatar.svg">
+                        <h2>Welcome</h2>
+                        <h6 id="h6" style="color: red; display: none;">Filling your Username and Password both!</h6>
+                        <div class="login-input">
+                            <div class="icon">
+                                <i class="fas fa-user"></i>
+                            </div>
+                            <div>
+                                <h5>Username</h5>
+                                <input id="Username" type="text">
+                            </div>
+                        </div>
+                        <div class="login-input">
+                            <div class="icon">
+                                <i id="" class="fas fa-key"></i>
+                            </div>
+                            <div>
+                                <h5>Password</h5>
+                                <div>
+                                    <input id="Password" type="password" style="width: 80%;">
+                                    <div>
+                                        <button style="margin-left: 90%; margin-top: 3%; width: 15%; border: none; background-color: unset;"
+                                                type="button" onclick="showPwd()">
+                                                <img id="eyeIcon" src="eye-slash.webp" style="width: 20px;">
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck1">
+                            <label class="custom-control-label" for="customCheck1" onclick="savePwd2Cookie()">Remember
+                                Password</label>
+                        </div>
+                        <a href="#" onclick="errorfunction()">Forgot Password?</a>
+                        <input id="login" onclick="loginCheck()" type="button" class="btn btn-primary btn-lg" value="Login" />
+                        <div>
+                            <h6 class="pt-2">Not registed? <span class="sign-up text">Create an account</span> </h6>
+                        </div>
+                    </form>
+                    <div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <!--  Kuerl - End!  -->
+    </div>
 
     <div id="register"></div>