user

by johnny890118

HTML

<div class="modal" id="login-modal">
  <div class="modal-content">
    <div class="choose">
      <button class="btn1" onclick="btn1()">
        Sign In
      </button>
      <button class="btn2" onclick="btn2()">
        Sign Up
      </button>
    </div>
    <div class="changeView">
      <div class="signIn">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
          <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
        </svg>
        <input type="text">
      </div>
      <div class="signIn">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
          <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
        </svg>
        <input type="password">
      </div>
      <div class="passcenter">
        <div class="morepass">
          <div>
            <input type="checkbox" class="remember">
            <span>記住密碼</span>
          </div>
          <span><a href="#">忘記密碼</a></span>
        </div>
      </div>
      <div class="btn-in">
        <button class="btn-signin">
          Sign In
        </button>
      </div>
      <hr>
      <div class="btn-in">
        <button class="line">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-line" viewBox="0 0 16 16">
            <path d="M8 0c4.411 0 8 2.912 8 6.492 0 1.433-.555 2.723-1.715 3.994-1.678 1.932-5.431 4.285-6.285 4.645-.83.35-.734-.197-.696-.413l.003-.018.114-.685c.027-.204.055-.521-.026-.723-.09-.223-.444-.339-.704-.395C2.846 12.39 0 9.701 0 6.492 0 2.912 3.59 0 8 0ZM5.022 7.686H3.497V4.918a.156.156 0 0 0-.155-.156H2.78a.156.156 0 0 0-.156.156v3.486c0 .041.017.08.044.107v.001l.002.002.002.002a.154.154 0 0 0 .108.043h2.242c.086 0...

CSS

* {
  font-family: 微軟正黑體, Arial, sans-serif;
}

#login-modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  border-radius: 10px;
  background-color: white;
  margin: 50% auto;
  width: 70%;
  box-shadow: 0px 0px 15px #4F4F4F;
}

.signIn input {
  background-color: #F0F0F0;
  border: hidden;
  margin: 5px;
  height: 50px;
  width: 400px;
  padding: 0px;
}

.signIn svg {
  background-color: #F0F0F0;
  margin: 5px;
  color: #5b5b5b;
  padding: 10px;
}

#login-modal .signIn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-in {
  display: flex;
  justify-content: center;
}

.btn-signin,.btn-signup {
  height: 50px;
  width: 460px;
  border: hidden;
  background-color: #CA8EFF;
  color: white;
  font-size: 17px;
  margin: 25px 5px;
}

.line {
  background-color: rgb(0, 184, 79);
  height: 50px;
  width: 460px;
  border: hidden;
  color: white;
  font-size: 17px;
  margin: 25px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-in svg {
  background-color: rgb(0, 184, 79);
  margin-right: 10px;
}

h2 {
  color: white;
  background-color: #3C3C3C;
  text-align: center;
  padding: 20px 0px;
  border-radius: 10px 10px 0 0;
  margin-top: 0px;
}

.btn-end {
  display: flex;
  justify-content: end;
}

.btn-close {
  background-color: transparent;
  color: #8E8E8E;
  border: hidden;
  padding: 5px 10px;
  font-size: 17px;
}

.btn-close:hover {
  background-color: #3C3C3C;
  color: white;
}

.morepass {
  display: flex;
  justify-content: space-between;
  width: 460px;
  margin: 10px 5px;
}

.passcenter {
  display: flex;
  justify-content: center;
}

.choose {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
}

.choose button {
  width: 50%;
  height: 60px;
  border: none;
  font-size: 20px;
}

.choose button:hover {
  background-color: #4F4F4F;
  color: white;
}

.btn1 {
 ...

JavaScript

let signin = document.querySelector(".changeView");
let signup = document.querySelector(".changeView2");

function btn2() {
  signin.style.display = "none";
  signup.style.display = "block";
}

function btn1() {
  signin.style.display = "block";
  signup.style.display = "none";
}

function okbtn() {
  let userdata = document.querySelector(".user-data").value;
  let emaildata = document.querySelector(".email-data").value;
  let passdata = document.querySelector(".pass-data").value;
  let p1 = document.querySelector(".p1");
  let p2 = document.querySelector(".p2");
  let p3 = document.querySelector(".p3");
  let n = emaildata.includes("@");
  if (userdata == "" || userdata.length > 40) {
    p1.style.display = "block";
  } else {
    p1.style.display = "none";
  }
  if (emaildata == "" || n == false) {
    p2.style.display = "block";
  } else {
    p2.style.display = "none";
  }
  if (passdata == "" || passdata.length < 8 || passdata.length > 100) {
    p3.style.display = "block";
  } else {
    p3.style.display = "none";
  }
}