Talib

common.js

@@ -0,0 +1,95 @@
+import { login } from "./login.js";
+
+let logininfo = JSON.parse(localStorage.getItem("info")) || [];
+
+document.getElementById("login").innerHTML = login();
+
+import { signUpPage, infopage } from "./signUpPage.js";
+
+document.getElementById("signappend").innerHTML = signUpPage();
+let info = infopage();
+
+let navlogin = document.getElementById("navlogin");
+
+navlogin.addEventListener("click", () => {
+  let login = document.getElementById("signappend");
+  login.style.display = "block";
+  login.style.overflowY;
+});
+//===========Animation
+let close = document.getElementById("close");
+close.addEventListener("click", () => {
+  let login = document.getElementById("signappend");
+  login.style.transform = "translateX(800px)";
+  login.style.transition = "1s";
+  setTimeout(()=>{
+    login.style.display="none";
+    login.style.transform = "translateX(0px)"
+  },1000);
+
+});
+
+$(".enterotp").keyup(function () {
+  if (this.value.length == this.maxLength) {
+    $(this).next(".enterotp").focus();
+  }
+});
+$(".loginput1").keyup(function () {
+  if (this.value.length == this.maxLength) {
+    $(this).next(".loginput1").focus();
+  }
+});
+
+let reqotp = document.getElementById("requestptp");
+let otpc2;
+reqotp.addEventListener("click", () => {
+  let userotp = Math.floor(Math.random() * 1000 + 1000);
+  otpc2=userotp;
+  setTimeout(() => {
+    alert(`${userotp} is Your OTP to login.`);
+  }, 2000);
+});
+
+let varifyotp = document.getElementById("verify");
+
+varifyotp.addEventListener("click", () => {
+
+  let otp1 = document.querySelector(".enterotp1").value;
+  let otp2 = document.querySelector(".enterotp2").value;
+  let otp3 = document.querySelector(".enterotp3").value;
+  let otp4 = document.querySelector(".enterotp4").value;
+  let otp = otp1 + otp2 + otp3 + otp4;
+  console.log(otp);
+  let wrong = document.getElementById("incorrect");
+  if (otp == otpc2) {
+    document.getElementById("loginbox").innerHTML = info;
+    userName();
+  } else {
+    wrong.innerText = "Incorrect OTP! Please try again.";
+    wrong.style.color = "red";
+  }
+});
+var obj = JSON.parse(localStorage.getItem("userDetails")) || {};
+function userName() {
+  let savebtn = document.getElementById("savebtn");
+  savebtn.addEventListener("click", () => {
+    let username = document.getElementById("username").value;
+    let lastname = document.getElementById("userlastname").value;
+    obj = { username, lastname };
+    localStorage.setItem("userDetails", JSON.stringify(obj));
+    window.location.href = "login.html";
+  });
+}
+localStorage.setItem("userDetails", JSON.stringify(obj));
+
+let userInfo = JSON.parse(localStorage.getItem("userDetails"));
+
+if (Object.keys(userInfo).length > 0) {
+  let changename = document.getElementById("changename");
+  changename.innerText =
+    "Hi," + userInfo.username + " " + userInfo.lastname + " ";
+  let changebox = document.getElementById("navlogin");
+  changebox.style.backgroundColor = "lightgrey";
+  changebox.style.height = "30px";
+  changebox.style.padding = "5px";
+}

login.css

@@ -0,0 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap");
+* {
+  font-family: Quicksand;
+}
+
+#navlogin{
+cursor: pointer;
+
+}
+
+#signappend{
+  display: none;
+  position: absolute;
+  margin-right: -55%;
+  margin-top: -25px;
+  animation: right 2s;
+  z-index: 1;
+  right: 745px;
+}
+
+@keyframes right{
+  from{
+  transform: translateX(700px);
+  }
+  to{
+    transform: translateX(0px);
+  }
+  }
+
+  #navlogin{
+    display: flex;
+    align-items: center;
+  }
+
+

signUpPage.css

@@ -0,0 +1,206 @@
+@import url("https://fonts.googleapis.com/css?family=Quicksand");
+* {
+  font-family: Quicksand;
+}
+#sublogin {
+  border: 1px solid royalblue;
+  background-image: url(https://in.sugarcosmetics.com/Login_bg.svg);
+  height: 900px;
+  width: 655px;
+  background-position: 100%;
+  background-size: cover;
+  padding: 25px;
+
+}
+body{
+  overflow: hidden;
+}
+
+
+#loginbox {
+  width: 640px;
+  height: 440px;
+  background-color: white;
+  margin-top: 25px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+}
+.boxtop {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-left: 30px;
+}
+.logmob {
+  margin-top: 26px;
+}
+.loginput {
+  margin-left: 30px;
+  width: 565px;
+  height: 45px;
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 20px;
+  align-items: center;
+}
+.loginput1 {
+  width: 28px;
+  text-align: center;
+  border-top: none;
+  border-right: none;
+  border-bottom: 1px solid rgb(160, 160, 163);
+  border-left: none;
+  border-image: initial;
+  margin: 3px;
+  font-weight: 600;
+  font-size: 24px;
+  outline: none;
+}
+#requestptp {
+  padding: 15px;
+  border: none;
+  cursor: pointer;
+}
+.loginsign {
+  font-size: 24px;
+}
+.contrycode {
+  font-size: calc(1.275rem + 0.3vw);
+  text-align: center;
+}
+.hrline {
+  border: 0.3px solid gray;
+  position: relative;
+  margin-top: 80px;
+  width: 95%;
+  margin-left: 10px;
+}
+.enterotp {
+  width: 25px;
+}
+#verify {
+  color: #fff;
+  width: 180px;
+  margin-left: 3px;
+  margin-top: 20px;
+  font-size: 14px;
+  border: none;
+  padding: 10px;
+  background-color: #fdaac9;
+  cursor: pointer;
+}
+#otpsection {
+  margin-left: 30px;
+}
+.enterotp {
+  width: 30px;
+  height: 30px;
+}
+.whats {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-top: 10px;
+}
+#logcontent {
+  margin-top: 25px;
+  width: 100%;
+  height: 300px;
+}
+.logp {
+  margin: auto;
+  width: 600px;
+  font-size: 15px;
+  padding: 25px;
+  font-weight: 600;
+}
+.logp p {
+  margin-bottom: 2px !important;
+}
+#smll {
+  display: flex;
+  justify-content: center;
+}
+#headlog {
+  font-size: 24px;
+  color: white;
+  font-weight: 800;
+  cursor: pointer;
+}
+#close {
+  color: white;
+  cursor: pointer;
+}
+
+
+#fbicon{
+  display: flex;
+  gap: 5px;
+  margin-left: 30px;
+}
+
+.infohrline{
+  border: 0.3px solid gray;
+  position: relative;
+  margin-top: 8px;
+  width: 95%;
+  margin-left: 10px;
+}
+#infoinput{
+  display: flex;
+  gap: 5px;
+}
+
+.infoname{
+  margin-left: 30px;
+  height: 35px;
+  width: 180px
+}
+
+.infoname input{
+  border: none;
+  background-color:#f5f5f5;
+  width: 100%;
+  height: 100%;
+}
+
+#infoemail{
+  margin-left: 30px;
+  height: 35px;
+  width: 366px;
+  margin-top: 10px;
+}
+
+#infoemail input{
+  border: none;
+  width: 100%;
+  height: 100%;
+  background-color:#f5f5f5;
+
+}
+
+#savebtn{
+  cursor: pointer;
+  margin-left: 30px;
+  height: 35px;
+  width: 366px;
+  background-color: #fdaac9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.detail{
+  margin-left: 30px;
+}
+
+#requestptp:hover{
+  background-color: gray;
+}
+#verify:hover{
+background-color: rgb(236, 30, 64);
+}
+#savebtn:hover{
+  background-color: rgb(250, 54, 120);
+}