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

    <title>logined</title>

    <link rel="stylesheet" href="stylesheets/bootstrap.css" />
    <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;
      }
      .middle {
        display: inline-block;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="/"
        ><img src="images/home.png" width="40" height="40" alt="" />
      </a>
      <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="/"><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">(current)</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="javascripts/bootstrap.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</html>