index2.ejs 6.47 KB
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>

    <!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 -->
    <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' />
    <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/moment.min.js"></script>
    <script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/jquery.min.js"></script>
    <script src="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.min.js"></script>


    <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> -->
    <!-- <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style> -->
    <script>
    $(document).ready(function(){
      $("button#searchButton").click(function(){
        var name = $("input").val();
        location.href = "http://127.0.0.1:3000/search/" + name;
      })
    });
    </script>
    <script>

    	$(document).ready(function() {

    		$('#calendar').fullCalendar({
    			header: {
    				left: 'prev,next today',
    				center: 'title',
    				right: 'month,agendaWeek,agendaDay'
    			},
    			defaultDate: '2017-12-06',
    			businessHours: true, // display business hours
    			editable: true,
    			events: [

            //   //검정 250분 이상
            //   color: '#000000'E
            //   //빨강 200분 미만D
            //   color: '#990000'
            //   //주황 150분미만C
            //   color: '#ff6600'
            //   //노랑 100분 미만B
            //   color: '#ffff00'
            //   //초록 40분 미만A
            //   color: '#00ff99'

              <% for (var p = 0; p < _day.length ;p++ ) { %>
            {

                start: <%- _day[p] %>,
                end:    <%- _day[p] %>,
                overlap: false,
                rendering: 'background',
                // color: '#ff6600'//투명
                <% if ( _color[p] == "A") { %>
                color: '#00ff99'//초록
                <% } else if ( _color[p] == "B") { %>
                  color: '#ffff00'//노랑
                <% } else if ( _color[p] == "C") { %>
                  color: '#ff6600'//주황
                <% } else if ( _color[p] == "D") { %>
                  color: '#990000'//빨강
                <% } else if ( _color[p] == "E") { %>
                  color: '#000000'//검정
                <% } else if ( _color[p] == "F") { %>
                  color: '#ffffff'//투명
                <% } else  { %>
                  color: '#ffffff'//투명
                <% } %>
              },
              <% } %>

              {
                  //빨강 200분 미만
                  start: '2017-12-09',
                  //end: '2015-02-02',
                  overlap: false,
                  rendering: 'background',
                  color: '#ffffff'//투명
                }
    			]
    		});
    	});

    </script>

    <style>
    body {
      width: 1400px;
  		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  		font-size: 14px;
  	}

  	#calendar {
  		max-width: 850px;
  		margin: 0 auto;
  	}
    #container{width:100%;}


      .main_left_btn {
      width:70%;
      float:left;}

      .main_right_btn {
      width:30%;
      float:left;}

      </style>
  </head>
  <body class="w3-content" style="max-width: 1400px; padding-top: 16px">

    <div class= "main_left_btn">


        <!-- 상단 이미지 -->
        <div>
                <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" class="w3-round w3-hover-opacity" width="100%" height="230">
                <!-- <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfNjIg/MDAxNTEyNTUzOTI4MDIw.pdijcp2zG9xdc3vQk3P1f2ThgtfAVyyVrrFMZfxbrwQg.yJ48Li-AfIQxSd7D6yz8y_QMuQ647pwOS9zMIcKbAVYg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" height="230"> -->
        </div>


        <!-- 입력부분  -->
        <div>
          <font size="4.5em" >
       	  <input type="text" class="" style="width: 90% "  placeholder="소환사 이름"/>
            <span class="input-group-btn">
              <button id="searchButton"  style="width:9%"  class="w3-button w3-teal w3-round-large" type="button" onclick="search(name)">검색</button>
            </span>
          </font>
        </div>

        <!-- 정보부분 -->
        <div class = "w3-border" tyle="padding-left: 5px">

          <font size="4em" >
           <br><a> 닉네임 : <%=  name %></a><br>
          <a> 고유ID : <%= _profileIconId %></a><br>
          <a> 레  벨 : <%= _summonerLevel %></a><br>
          <a> 20게임 클리어 하는데 <%= _day.length %>일 소요 </a><br>
          <a> <%= _lastGame %> ~ <%= _fisrtGame %> 기간에 <%=  _total.length %> 게임 플레이</a> <br><br>
        </font >
        </div>

        <!-- 달력 -->
        <div>
  	       <div id='calendar'></div>
        </div>

        <!-- 상세 정보 -->
        <div class="w3-cell-row">
            <div class="w3-container w3-cell w3-border" style="width:50%">
                <font size="4em" ><br> <br><a>날짜별 게임 시간</a> <br><br></font>
                      <font size="3em" >
                           <% for (var i = 0; i < _day.length ; i++ ) { %>
                           <a><%= _day[i] %> : </a>
                           <a>  <%= _time[i] %>분 PLAY - </a>
                           <a> 중독성 : <%= _color[i] %>등급</a> <br>
                           <% } %>
                      </font>
            </div>

            <div class="w3-container w3-cell w3-border">
              <font size="4em" >  <br> <br><a>최근 게임 시작 시간</a> <br><br></font>
                      <font size="3em" >
                     <% for (var i = 0; i < _total.length ; i++ ) { %>
                     <a><%= _total[i] %></a> <br>
                     <% } %>
                    </font>
            </div>
          </div>



      </div>

      </div>
    </div>


    <div class="main_right_btn">
      <div >
          <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfMzkg/MDAxNTEyNTcwNzQ0NzM1.9hBoIQoPFnmqzRJ59g_lnFA45KPk1cTuBKIP6QxX614g.WZal-F4hcT-kJTQ8oTr2f8tn44uCjz6BRT6cD6dMqHUg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" style="padding-top: 600px">
      </div>

    </div>

    </body>
</html>