main.html 3.8 KB
<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="main.js"> </script>
    <meta charset="UTF-8">
    <title>날씨에 따른 음악 추천 사이트</title>
    <style>
      #container {
        width:600px;
        margin:10px auto;
      }
      body {
        background: url('https://png.pngtree.com/thumb_back/fh260/back_our/20200630/ourmid/pngtree-purple-background-picture-image_340659.jpg') left top no-repeat fixed;
        background-size: cover;
      }
    </style>
    <link rel="stylesheet" href="http://localhost:3000/main.css">
  </head>
  <body> 
    <div id="container">
      <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
      
      <fieldset>
        <legend>현재 시각 정보</legend>   
        <div style="text-align: center;">
          <span id="clock" style="color:greenyellow; font-size: 100px;">clock</span>
          <span id="apm" style="color:greenyellow; font-size: 50px;"  >ampm</span>
        </div>
        <script>
          var Target = document.getElementById("clock");
          var Target_apm = document.getElementById("apm");
          function clock() {
              var time = new Date();
              var hours = time.getHours();
              var minutes = time.getMinutes();
              var seconds = time.getSeconds();
              var AmPm ="AM";
              if(hours > 12){   
                  var AmPm ="PM";
                  hours %= 12;
              }
              Target.innerText = 
              `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
              Target_apm.innerText = `${AmPm}`;
          }
          clock();
          setInterval(clock, 1000); // 1초마다 실행
        </script>
      </fieldset>

      <fieldset>
        <legend>현재 내 위치 정보</legend>
        <div><input type="button" value="현재 내 위치 검색"></div><br><!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
      </fieldset>

      <fieldset>
        <legend>추천 음악 정보</legend>
        <div><input type="button" value="음악 추천 받기"></div><br>
        <iframe id="video1" width="450" height="280" src="" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
        <a href="#" id="playvideo">Play button</a>
        <script>
          var userLat = 37;
          var userLng = 127;
          fetch("http://localhost:3000/music")
            .then(res => res.json())
            .then(function(data) {
              $("#playvideo").click(function(){
              $("#video1")[0].src += data.link;
           });
            })
       
        </script>

        <!-- <h4>추천 음악 1</h4>
        <iframe width="942" height="530" src="https://www.youtube.com/embed/vnS_jn2uibs" title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
        <h4>추천 음악 2</h4>
        <iframe width="942" height="530" src="https://www.youtube.com/embed/P6gV_t70KAk" title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br> -->
      </fieldset>
      

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <!-- 공간확보 -->

      <footer>
        <div>
          <p><b>developed by 강희주, 진재영, 김재욱</b></p>
          <address>Contact for more information. 010-2400-6771</address>
          <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
        </div>
      </footer>

    </div>           
  </body>
</html>