login.ejs 12.8 KB
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Sign Up</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      integrity="undefined"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap"
      rel="stylesheet"
    />

    <style>
      img {
        max-width: 100%;
        height: 100% !important;
      }
      h1 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h4 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h2 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h3 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h5 {
        font-family: "Noto Sans KR", sans-serif;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a
              class="nav-link"
              style="color: #ffffff"
              href="/"
              onclick="signOut();"
              >Logout<span class="sr-only"></span></a
            >
          </li>
        </ul>
      </div>
    </nav>
    <div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
      <h3 class="display-6 font-weight-bold">Signup</h3>
    </div>

    <hr class="my-2" />
    <section id="carousel-1">
      <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
          <hr class="my-2" style="background-color: white" />
          <form method="post">
            <div class="form-group">
              <label for="id_input">닉네임을 입력하세요</label>
              <input
                type="text"
                class="form-control form-control-lg"
                name="nickname"
                aria-describedby="idHelp"
                placeholder="ID"
              />
              <small id="idHelp" class="form-text text-muted"
                >중복이 허용되지 않습니다.</small
              >
            </div>
            <hr class="my-3" style="background-color: white" />
            <div class="form-group">
              <label for="age_input">나이를 입력하세요</label>
              <input
                class="form-control form-control-lg"
                type="number"
                name="age"
                placeholder="Age"
              />
            </div>
            <hr class="my-3" style="background-color: white" />

            <label for="gender" class="form-label">성별을 입력하세요</label>
            <select
              class="form-select form-select-lg"
              id="gender"
              name="gender"
              required
            >
              <option selected disabled value="">Choose...</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
            <hr class="my-3" style="background-color: white" />
            <hr class="my-2" />
            <hr class="my-2" style="background-color: white" />
            <div
              class="
                pricing-header
                px-3
                py-1
                pt-md-3
                pb-md-1
                mx-auto
                text-center
              "
            >
              <h5 class="display-">PREFERENCE</h5>
              <hr class="my-1" style="background-color: white" />
              <p>
                카페를 선택할 떄 중요하게 여기는 요소들의 순위를 매겨주세요.
              </p>
              <p>[ 순위가 중복되면 안됩니다. ex) 가격 1순위, 친절 1순위(X) ]</p>
            </div>
            <div class="text-center">
              <label
                for="price_form"
                class="form-label font-weight-bold"
                style="margin-right: 15px"
                >가격</label
              >
              <div class="form-check form-check-inline" id="price_form">
                <input
                  class="form-check-input"
                  type="radio"
                  name="price"
                  id="price1"
                  value="1"
                  checked
                />
                <label class="form-check-label" for="price1">1순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="price"
                  id="price2"
                  value="2"
                />
                <label class="form-check-label" for="price2">2순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="price"
                  id="price3"
                  value="3"
                />
                <label class="form-check-label" for="price3">3순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="price"
                  id="price4"
                  value="4"
                />
                <label class="form-check-label" for="price4">4순위</label>
              </div>
              <hr class="my-1" style="background-color: white" />

              <label
                for="kindness_form"
                class="form-label font-weight-bold"
                style="margin-right: 5px"
                >친절도</label
              >
              <div class="form-check form-check-inline" id="kindness_form">
                <input
                  class="form-check-input"
                  type="radio"
                  name="kindness"
                  id="kindness1"
                  value="1"
                />
                <label class="form-check-label" for="kindness">1순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="kindness"
                  id="kindness2"
                  value="2"
                  checked
                />
                <label class="form-check-label" for="kindness2">2순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="kindness"
                  id="kindness3"
                  value="3"
                />
                <label class="form-check-label" for="kindness3">3순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="kindness"
                  id="kindness4"
                  value="4"
                />
                <label class="form-check-label" for="kindness4">4순위</label>
              </div>

              <hr class="my-1" style="background-color: white" />

              <label
                for="noise_form"
                class="form-label font-weight-bold"
                style="margin-right: 15px"
                >소음</label
              >
              <div class="form-check form-check-inline" id="noise_form">
                <input
                  class="form-check-input"
                  type="radio"
                  name="noise"
                  id="noise1"
                  value="1"
                />
                <label class="form-check-label" for="noise">1순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="noise"
                  id="noise2"
                  value="2"
                />
                <label class="form-check-label" for="kindness2">2순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="noise"
                  id="noise3"
                  value="3"
                  checked
                />
                <label class="form-check-label" for="noise3">3순위</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="noise"
                  id="noise4"
                  value="4"
                />
                <label class="form-check-label" for="noise4">4순위</label>
              </div>

              <hr class="my-1" style="background-color: white" />

              <label
                for="accessibility_form"
                class="form-label font-weight-bold"
                style="margin-right: 5px"
                >접근성</label
              >
              <div class="form-check form-check-inline" id="accessibility_form">
                <input
                  class="form-check-input"
                  type="radio"
                  name="accessibility"
                  id="accessibility1"
                  value="1"
                />
                <label class="form-check-label" for="accessibility"
                  >1순위</label
                >
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="accessibility"
                  id="accessibility2"
                  value="2"
                />
                <label class="form-check-label" for="accessibility2"
                  >2순위</label
                >
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="accessibility"
                  id="accessibility3"
                  value="3"
                />
                <label class="form-check-label" for="accessibility3"
                  >3순위</label
                >
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="accessibility"
                  id="accessibility4"
                  value="4"
                  checked
                />
                <label class="form-check-label" for="accessibility4"
                  >4순위</label
                >
              </div>
            </div>
            <hr class="my-3" style="background-color: white" />
            <button
              type="submit"
              style="float: right"
              class="btn btn-primary btn-lg"
              id="please"
            >
              Submit
            </button>
          </form>
        </div>
        <div class="col-2"></div>
      </div>
    </section>

    <%if (message=='same nickname'){%>
    <script type="text/javascript">
      alert(
        "입력하신 NICKNAME은 사용하지 못합니다." +
          "다른 NICKNAME을 입력하여 주세요"
      );
    </script>
    <%}%> <%if (message=='need data'){%>
    <script type="text/javascript">
      alert(
        "입력하시지 않은 정보가 있습니다." +
          "모든 정보를 입력해주시길 바라겠습니다."
      );
    </script>
    <%}%> <%if (message=='wrong preference'){%>
    <script type="text/javascript">
      alert(
        "중복된 선호도 순위가 있습니다." +
          "순위를 겹치지 않게해주세요(ex 1 3 2 4)"
      );
    </script>
    <%}%>
  </body>
  <script>
    function signOut() {
      var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function () {
        console.log("User signed out.");
      });
    }
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
    integrity="undefined"
    crossorigin="anonymous"
  ></script>
</html>