index.html 22.1 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>TongGilMut</title>
  <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
  <link rel="stylesheet" href="slick/slick.css">
  <link rel="stylesheet" href="slick/slick-theme.css">
  <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/templatemo-style.css" />
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">

  <script src="../../docs/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
  <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
  <script type="text/javascript"
    src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
  <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />

  <!--
	The Town
	https://templatemo.com/tm-525-the-town
	-->


<script type="text/css">
	window.onload = function(){
	document.getElementById('btn').onclick = function(){
		document.getElementById('frm').submit();
		return false;
	};
};
</script>

</head>

<body>
  <!-- Hero section -->
  <section id="hero" class="text-white tm-font-big tm-parallax">
    <video autoplay muted loop id="hero-video">
      <source src="img/main-video1.mp4" type="video/mp4">
    </video>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
      <div class="container">
        <div class="tm-next">
          <a href="#hero" class="navbar-brand">뚜벅이</a>
        </div>
      </div>
    </nav>

    <div class="text-center tm-hero-text-container">
      <div class="tm-hero-text-container-inner">
        <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
        <p class="tm-hero-subtitle">
          매일 학교에 통학하시나요?<br>
          뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
          <br>-뚜벅이-
        </p>
      </div>
    </div>

    <div class="tm-next tm-intro-next">
      <a href="#contact" class="button1 text-center tm-down-arrow-link">
        <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
      </a>
    </div>
  </section>


  <!-- Contact -->
  <section id="contact" class="tm-section-pad-top tm-parallax-2">
    <div class="container tm-container-contact">
      <div class="grid-container">
        <div class="question-field question-home">어디에 사나요?</div>
        <div class="input-field input-home">
          <input type="button" class="button-address" onclick="home_execDaumPostcode()" value="우편번호 찾기"><br>
          <input type="text" id="home-address" placeholder="도로명주소">
          <span id="guide" style="color:#999;display:none"></span>
        </div>
        <div class="question-field question-school">무슨 학교에 다니나요?</div>
        <div class="input-school">
          <input type="button" class="button-address" onclick="school_execDaumPostcode()" value="우편번호 찾기"><br>
          <input type="text" id="school-address" placeholder="도로명주소">
          <span id="guide" style="color:#999;display:none"></span>
        </div>
        <div class="question-field question-grade">몇학년인가요?</div>
        <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
          <select>
            <option value="0">1학년 1학기</option>
            <option value="sem-1-1">1학년 1학기</option>
            <option value="sem-1-2">1학년 2학기</option>
            <option value="sem-2-1">2학년 1학기</option>
            <option value="sem-2-2">2학년 2학기</option>
            <option value="sem-3-1">3학년 1학기</option>
            <option value="sem-3-2">3학년 2학기</option>
            <option value="sem-4-1">4학년 1학기</option>
            <option value="sem-4-2">4학년 2학기</option>
          </select>
        </div></div>
      </div>
        <a href="#result" class="button2 text-center tm-down-arrow-link">
          <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산해보기</button>
        </a>
      </div>
    </section>


    <section id="result">
      <div class="answer-grid-container">
        <div class="map" id="map" style="width:500px;height:300px;""></div>

        <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
          <span class="answer-highlight" id="hour">?</span> 시간
          <span class="answer-highlight" id="min">?</span> 분 <br>
          <span class="answer-highlight" id="dist">?</span> km <br>
          <img class="odsay" src="ODsay.png">
        </div>

        <div class="list-answer-field">
          지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
          졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
        </div>
        <div class="detail-answer-field">
          <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
            <div class="detail-answer-small-box">
              <span id = "salary">?</span>원<br></div></div>
          <div class="detail-answer-box dish-field">교통비로 국밥<br>
            <div class="detail-answer-small-box">
              <span id = "dish">?</span>그릇<br></div>
            </div>
          <div class="detail-answer-box everest-field">이 거리라면 에베레스트 등반을<br>
            <div class="detail-answer-small-box">
              <span id = "everest">?</span>번이나...<br></div>
            </div>
          <div class="detail-answer-box earth-field">지구를<br>
            <div class="detail-answer-small-box">
              <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="text-center small tm-footer">
      <p class="mb-0">
        Copyright &copy; 2020 TongGilMut

        - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
      </p>
    </footer>
  </section>


  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="slick/slick.min.js"></script>
  <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
  <script src="js/jquery.singlePageNav.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
  <script> //도로명주소
    function home_execDaumPostcode() {
      new daum.Postcode({
          oncomplete: function(data) {
              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

              // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
              var roadAddr = data.roadAddress; // 도로명 주소 변수


              // 우편번호와 주소 정보를 해당 필드에 넣는다.
              document.getElementById("home-address").value = roadAddr;
          }
      }).open();
    }
  </script>
  <script>
    function school_execDaumPostcode() {
      new daum.Postcode({
          oncomplete: function(data) {
              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

              // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
              var roadAddr = data.roadAddress; // 도로명 주소 변수


              // 우편번호와 주소 정보를 해당 필드에 넣는다.
              document.getElementById("school-address").value = roadAddr;
          }
      }).open();
  }
  </script>

  <script> //dropdown list
    var x, i, j, l, ll, selElmnt, a, b, c;
    /*look for any elements with the class "custom-select":*/
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
      /*for each element, create a new DIV that will act as the selected item:*/
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      /*for each element, create a new DIV that will contain the option list:*/
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        /*for each option in the original select element,
        create a new DIV that will act as an option item:*/
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function (e) {
          /*when an item is clicked, update the original select box,
          and the selected item:*/
          var y, i, k, s, h, sl, yl;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          sl = s.length;
          h = this.parentNode.previousSibling;
          for (i = 0; i < sl; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              yl = y.length;
              for (k = 0; k < yl; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function (e) {
        /*when the select box is clicked, close any other select boxes,
        and open/close the current select box:*/
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
    }
    function closeAllSelect(elmnt) {
      /*a function that will close all select boxes in the document,
      except the current select box:*/
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }
    /*if the user clicks anywhere outside the select box,
    then close all select boxes:*/
    document.addEventListener("click", closeAllSelect);
  </script>
  <script> //API
    var btn = document.querySelector('button');

    btn.addEventListener('click', updateBtn);

    function updateBtn() {
      var start = document.getElementById('home-address').value;
      var end = document.getElementById('school-address').value;
      naver.maps.Service.geocode({
        address: start

      }, function (status, response) {
        if (status !== naver.maps.Service.Status.OK) {
          return alert('Something wrong!');
        }
        var result = response.result, // 검색 결과의 컨테이너
          items = result.items;
        var sx = result.items[0].point.x;
        var sy = result.items[0].point.y;

        naver.maps.Service.geocode({
          address: end

        }, function (status, response) {
          if (status !== naver.maps.Service.Status.OK) {
            return alert('Something wrong!');
          }
          var result = response.result, // 검색 결과의 컨테이너
            items = result.items;
          var ex = result.items[0].point.x;
          var ey = result.items[0].point.y;


          /*var sx = 127.0739547;
          var sy = 37.2407701;
          var ex = 126.921666;
          var ey = 37.1308333;
          */


          var mapOptions = {
            center: new naver.maps.LatLng(start, end),
            zoom: 10
          };

          var map = new naver.maps.Map('map', mapOptions);


          function searchPubTransPathAJAX() {
            var xhr = new XMLHttpRequest();
            //ODsay apiKey 입력
            var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=nnsDQB1AWhpETO3HmMdDAw";
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(JSON.parse(xhr.responseText)); // <- xhr.responseText 로 결과를 가져올 수 있음
                //노선그래픽 데이터 호출
                callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
              }
            }
          }

          //길찾기 API 호출
          searchPubTransPathAJAX();

          function callMapObjApiAJAX(mabObj) {
            var xhr = new XMLHttpRequest();
            //ODsay apiKey 입력
            var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@" + mabObj + "&apiKey=nnsDQB1AWhpETO3HmMdDAw";
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200) {
                var resultJsonData = JSON.parse(xhr.responseText);
                drawNaverMarker(sx, sy);					// 출발지 마커 표시
                drawNaverMarker(ex, ey);					// 도착지 마커 표시
                drawNaverPolyLine(resultJsonData);		// 노선그래픽데이터 지도위 표시
                // boundary 데이터가 있을경우, 해당 boundary로 지도이동
                if (resultJsonData.result.boundary) {
                  var boundary = new naver.maps.LatLngBounds(
                    new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
                    new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
                  );
                  map.panToBounds(boundary);
                }
              }
            }
          }

          // 지도위 마커 표시해주는 함수
          function drawNaverMarker(x, y) {
            var marker = new naver.maps.Marker({
              position: new naver.maps.LatLng(y, x),
              map: map
            });
          }

          // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
          function drawNaverPolyLine(data) {
            var lineArray;

            for (var i = 0; i < data.result.lane.length; i++) {
              for (var j = 0; j < data.result.lane[i].section.length; j++) {
                lineArray = null;
                lineArray = new Array();
                for (var k = 0; k < data.result.lane[i].section[j].graphPos.length; k++) {
                  lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
                }

                //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
                if (data.result.lane[i].type == 1) {
                  var polyline = new naver.maps.Polyline({
                    map: map,
                    path: lineArray,
                    strokeWeight: 3,
                    strokeColor: '#003499'
                  });
                } else if (data.result.lane[i].type == 2) {
                  var polyline = new naver.maps.Polyline({
                    map: map,
                    path: lineArray,
                    strokeWeight: 3,
                    strokeColor: '#37b42d'
                  });
                } else {
                  var polyline = new naver.maps.Polyline({
                    map: map,
                    path: lineArray,
                    strokeWeight: 3
                  });
                }
              }
            }
          }
        });
      });
    }
  </script>
  <script> //값 계산
    function semester() {
      var target = document.getElementById("semester").value;
      var input = 0

      var since, until, salary, dish, everest, earth

      // 임시값 지정
      var time = 2
      var distance = 30000
      var pay = 100000

      function sum(sem) {
        since = sem * time * 150
        until = (8 - sem) * time * 150
        salary = since * 8590
        dish = Math.floor((sem * pay * 150) / 6000)
        everest = Math.floor((sem * distance * 2) / 8846)
        earth = ((sem * distance * 2) / 40075000).toFixed(3)
      }

      if (target == 'sem-1-1') {
        input = 1
        sum(input)
      }
      else if (target == 'sem-1-2') {
        input = 2
        sum(input)
      }
      else if (target == 'sem-2-1') {
        input = 3
        sum(input)
      }
      else if (target == 'sem-2-2') {
        input = 4
        sum(input)
      }
      else if (target == 'sem-3-1') {
        input = 5
        sum(input)
      }
      else if (target == 'sem-3-2') {
        input = 6
        sum(input)
      }
      else if (target == 'sem-4-1') {
        input = 7
        sum(input)
      }
      else if (target == 'sem-4-2') {
        input = 8
        sum(input)
      }

      document.getElementById("since").innerHTML = since
      document.getElementById("until").innerHTML = until
      document.getElementById("salary").innerHTML = salary
      document.getElementById("dish").innerHTML = dish
      document.getElementById("everest").innerHTML = everest
      document.getElementById("earth").innerHTML = earth
    }


    function getOffSet() {
      var _offset = 450;
      var windowHeight = window.innerHeight;

      if (windowHeight > 500) {
        _offset = 400;
      }
      if (windowHeight > 680) {
        _offset = 300
      }
      if (windowHeight > 830) {
        _offset = 210;
      }

      return _offset;
    }

    function setParallaxPosition($doc, multiplier, $object) {
      var offset = getOffSet();
      var from_top = $doc.scrollTop(),
        bg_css = 'center ' + (multiplier * from_top - offset) + 'px';
      $object.css({ "background-position": bg_css });
    }

    // Parallax function
    // Adapted based on https://codepen.io/roborich/pen/wpAsm
    var background_image_parallax = function ($object, multiplier, forceSet) {
      multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
      multiplier = 1 - multiplier;
      var $doc = $(document);
      // $object.css({"background-attatchment" : "fixed"});

      if (forceSet) {
        setParallaxPosition($doc, multiplier, $object);
      } else {
        $(window).scroll(function () {
          setParallaxPosition($doc, multiplier, $object);
        });
      }
    };

    var background_image_parallax_2 = function ($object, multiplier) {
      multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
      multiplier = 1 - multiplier;
      var $doc = $(document);
      $object.css({ "background-attachment": "fixed" });
      $(window).scroll(function () {
        var firstTop = $object.offset().top,
          pos = $(window).scrollTop(),
          yPos = Math.round((multiplier * (firstTop - pos)) - 186);

        var bg_css = 'center ' + yPos + 'px';

        $object.css({ "background-position": bg_css });
      });
    };

    $(function () {
      // Hero Section - Background Parallax
      background_image_parallax($(".tm-parallax"), 0.30, false);
      background_image_parallax_2($("#contact"), 0.80)

      // Handle window resize
      window.addEventListener('resize', function () {
        background_image_parallax($(".tm-parallax"), 0.30, true);
      }, true);

      // Detect window scroll and update navbar
      $(window).scroll(function (e) {
        if ($(document).scrollTop() > 120) {
          $('.tm-navbar').addClass("scroll");
        } else {
          $('.tm-navbar').removeClass("scroll");
        }
      });

      // Close mobile menu after click
      $('#tmNav a').on('click', function () {
        $('.navbar-collapse').removeClass('show');
      })

      // Scroll to corresponding section with animation
      $('#tmNav').singlePageNav();

      // Add smooth scrolling to all links
      // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
      $(".button1").on('click', function (event) {
        $('html, body').animate({
          scrollTop: $("#contact").offset().top
        }, 400);
      });

      $(".button2").on('click', function (event) {
        $('html, body').animate({
          scrollTop: $("#result").offset().top-10
        }, 400);
      });

      // Pop up
      $('.tm-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: { enabled: true }
      });

      // Gallery
      $('.tm-gallery').slick({
        dots: true,
        infinite: false,
        slidesToShow: 5,
        slidesToScroll: 2,
        responsive: [
          {
            breakpoint: 1199,
            settings: {
              slidesToShow: 4,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }]
      });
    });
  </script>

</body>

</html>