index.ejs 3.41 KB
<!DOCTYPE html>
<html>

<head>
  <title>🐶 Animal Info</title>
  <!-- 합쳐지고 최소화된 최신 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <!-- 부가적인 테마 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <style>
    html {
      min-height: 100%;
      position: relative;
    }

    body {
      height: 100%;
    }

    .content {
      display: flex;
      flex-direction: row;
      height: 500px;
    }

    .nav {
      flex: 1;
      background-color: black;
    }

    .jumbotron {
      flex: 3;
      text-align: center;
      background-color: white;
    }

    footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      background-color: black;
      color: white;
      font-weight: lighter;
    }

    .header {
      width: 100%;
      background-color: black;
    }

    .logo {
      display: inline;
    }

    .theme {
      display: inline;
      color: white;
      text-align: center;
      font-size: xx-large;
    }
  </style>
  <script>
    function sm() {
      document.getElementById("location").submit();
    }
  </script>
</head>

<body>
  <header id="header">
    <%- include("components/header") -%>
  </header>
  <div class="content">
    <div class="nav">
      <%- include("components/navigation") -%>
    </div>
    <div class="jumbotron">
      <h2>서울시 동물 병원 검색</h2>
      <p>
        지역 선택
      </p>
      <form action="/category" method="POST" name="location" id="location">
        <select onchange="sm()" name="user_gu" id="user_gu_select">
          <option value='' selected="true" disabled="true">--Please choose an option--</option>
          <option value='강남구'>강남구</option>
          <option value='강동구'>강동구</option>
          <option value='강북구'>강북구</option>
          <option value='강서구'>강서구</option>
          <option value='관악구'>관악구</option>
          <option value='광진구'>광진구</option>
          <option value='구로구'>구로구</option>
          <option value='금천구'>금천구</option>
          <option value='노원구'>노원구</option>
          <option value='도봉구'>도봉구</option>
          <option value='동대문구'>동대문구</option>
          <option value='동작구'>동작구</option>
          <option value='마포구'>마포구</option>
          <option value='서대문구'>서대문구</option>
          <option value='서초구'>서초구</option>
          <option value='성동구'>성동구</option>
          <option value='성북구'>성북구</option>
          <option value='송파구'>송파구</option>
          <option value='양천구'>양천구</option>
          <option value='영등포구'>영등포구</option>
          <option value='용산구'>용산구</option>
          <option value='은평구'>은평구</option>
          <option value='종로구'>종로구</option>
          <option value='중구'>중구</option>
          <option value='중랑구'>중랑구</option>
        </select>
      </form>
    </div>
  </div>
  <footer id="footer">
    <%- include("components/footer") -%>
  </footer>
</body>

</html>