박주현 / 2017_02_OSS_project

Go to a project
Toggle navigation Toggle navigation pinning
박주현
ddf3bbfa 1 parent 30da79a1

1207

Inline Side-by-side
Showing 5 changed files with 259 additions and 123 deletions
...@@ -3,7 +3,7 @@ var cheerio = require('cheerio'); ...@@ -3,7 +3,7 @@ var cheerio = require('cheerio');
3 3
4 var request = require("request"); 4 var request = require("request");
5 var urlenconde = require('urlencode'); 5 var urlenconde = require('urlencode');
6 -var api_key = "RGAPI-39fcab88-55d3-4769-8328-82b26537b9b4"; 6 +var api_key = "RGAPI-8ba6778e-a2df-4512-b19a-127217dd514c";
7 7
8 8
9 // //js 전송 9 // //js 전송
...@@ -35,6 +35,15 @@ var color = new Array(); ...@@ -35,6 +35,15 @@ var color = new Array();
35 var print1 = new Array();; 35 var print1 = new Array();;
36 var print2 = new Array();; 36 var print2 = new Array();;
37 37
38 +var total = new Array();;
39 +var total2 = new Array();;
40 +var fisrtGame = "";
41 +var lastGame = "";
42 +
43 +var matchgamelist = new Array();
44 +var gameplaytime = new Array();
45 +
46 +
38 app.get('/', function(req, res) { 47 app.get('/', function(req, res) {
39 res.render('index', { title: '또 게임헤' }); 48 res.render('index', { title: '또 게임헤' });
40 }); 49 });
...@@ -43,6 +52,8 @@ var print2 = new Array();; ...@@ -43,6 +52,8 @@ var print2 = new Array();;
43 //롤 api url 52 //롤 api url
44 name = req.params.username; 53 name = req.params.username;
45 54
55 + //////////////////////////////////////////////////
56 + // 1. api를 통해 닉네일으로 고유 아이디 찾기
46 //입력받은 닉네임의 사용자 정보 요청 api 57 //입력받은 닉네임의 사용자 정보 요청 api
47 var url ="https://kr.api.riotgames.com/lol/summoner/v3/summoners/by-name/"+urlenconde(name)+"?api_key="+ api_key ; 58 var url ="https://kr.api.riotgames.com/lol/summoner/v3/summoners/by-name/"+urlenconde(name)+"?api_key="+ api_key ;
48 59
...@@ -57,28 +68,72 @@ var print2 = new Array();; ...@@ -57,28 +68,72 @@ var print2 = new Array();;
57 summonerLevel = obj["summonerLevel"]; 68 summonerLevel = obj["summonerLevel"];
58 revisionDate = obj["revisionDate"]; 69 revisionDate = obj["revisionDate"];
59 70
60 - // //최근 게임 정보 요청 api 71 + ///////////////////////////////////////////////////////////////
61 - // var currnetGame; 72 + //2.최근 게임 정보 요청 api
62 - // currnetGameUrl = "https://kr.api.riotgames.com/lol/match/v3/matchlists/by-account/" +accountId +"?api_key="+ api_key ; 73 + //위에서 받은 고유 아이디를 통해 최근 게임들 정보를 받음
63 - // //var date = new Date(1127919625*1000); //유닉스 시간으로 반환 반환 74 + var currnetGame;
64 - // var info_champ_json; 75 + currnetGameUrl = "https://kr.api.riotgames.com/lol/match/v3/matchlists/by-account/" +accountId +"?api_key="+ api_key ;
65 - // var champions; 76 + //var date = new Date(1127919625*1000); //유닉스 시간으로 반환 반환
77 + var info_champ_json;
78 + var champions;
79 +
80 + request(currnetGameUrl , function(error,response,body){
81 +
82 + info_champ_json = JSON.parse(body);
83 + champions = info_champ_json["matches"];
84 +
85 + var champions_length = Object.keys(champions).length;
86 + for(var i=0; i < champions_length; i++){
87 + total[i] = champions[i]["timestamp"]; // 게임 날짜 추출
88 + matchgamelist[i] = champions[i]["gameId"]; //게임 고유 아이디 추출
89 + //console.log(matchgamelist[i]);
90 + var t = new Date(total[i]);
91 + t = t.toLocaleString();
92 + // console.log(t );
93 + total[i] = t;
94 + if(i == 0){
95 + fisrtGame = total[0];
96 + }
97 + lastGame = total[i];
98 + }
99 + if(fisrtGame != "" ){
100 +
101 + var a = new Array();
102 + a = fisrtGame.split(" ");
103 + fisrtGame = a[0];
104 + a = lastGame.split(" ");
105 + lastGame = a[0];
106 + //console.log(fisrtGame );
107 + //console.log(lastGame );
108 + }
109 +
110 + });
111 + // for( var q = 0 ; q < matchgamelist.length ; q++){
112 + // console.log(matchgamelist[q]);
113 + // }
114 + //////////////////////////////////////////////////////
115 + //3. 게임 상세 정보 얻기
116 + //위에서 얻은 게임아이디를 통해 다시 게임 플레이시간 추출
117 + // var infoGame;
118 + // var info_game_json;
119 + // var gamess;
66 // 120 //
67 - // request(currnetGameUrl , function(error,response,body){ 121 + // for( var i = 0 ; i < 20 ; i++){
68 - // info_champ_json = JSON.parse(body); 122 + // //if(i == 20){for(var j = 0; j< 10000; j++) ;}
69 - // champions = info_champ_json["matches"]; 123 + // infoGame = "https://kr.api.riotgames.com/lol/match/v3/matches/" + matchgamelist[i] +"?api_key="+ api_key ;
124 + // request(infoGame , function(error,response,body){
70 // 125 //
71 - // var champions_length = Object.keys(champions).length; 126 + // info_game_json = JSON.parse(body);
72 - // for(var i=0; i < champions_length; i++){ 127 + // gameplaytime[i] = info_game_json["gameDuration"]; //게임 플레이시간 추출
73 - // formattedTime[i] = champions[i]["timestamp"]; 128 + // gameplaytime[i] = Number(gameplaytime[i])/60;
74 - // t = new Date(formattedTime[i]); 129 + // console.log( gameplaytime[i] );
75 - // var month = t.getMonth(); 130 + // // }
76 - // var day = t.getDay();
77 - // formattedTime[i] = month + '-' + day ;
78 - // // console.log(month );
79 - // }
80 // }); 131 // });
132 + // }
133 +
81 134
135 + //3벙능ㄹ 사용중위 api 요청횟수 제한으로 스크래핑을 사용
136 + //스크래핑 : 다전적 사이트를 통해 스크래핑
82 var i = 0; 137 var i = 0;
83 138
84 var opgg = "http://www.op.gg/summoner/userName=" + name; 139 var opgg = "http://www.op.gg/summoner/userName=" + name;
...@@ -112,7 +167,7 @@ var print2 = new Array();; ...@@ -112,7 +167,7 @@ var print2 = new Array();;
112 print1[0] = formattedTime[0]; 167 print1[0] = formattedTime[0];
113 print2[0] = formattedTime2[0]; 168 print2[0] = formattedTime2[0];
114 169
115 - for(var p = 0; p<19;p++){ 170 + for(var p = 0; p < formattedTime.length ;p++){
116 if(formattedTime[p] == formattedTime[p+1]){ 171 if(formattedTime[p] == formattedTime[p+1]){
117 k = 1; 172 k = 1;
118 print1[c] = formattedTime[p+1]; 173 print1[c] = formattedTime[p+1];
...@@ -154,7 +209,7 @@ var print2 = new Array();; ...@@ -154,7 +209,7 @@ var print2 = new Array();;
154 color[p] = "B"; } 209 color[p] = "B"; }
155 else if( Number(print2[p]) <= 150 && Number(print2[p]) > 100){ 210 else if( Number(print2[p]) <= 150 && Number(print2[p]) > 100){
156 color[p] = "C";} 211 color[p] = "C";}
157 - else if( Number(print2[p]) <= 200 && Number(print2[p]) > 150){ 212 + else if( Number(print2[p]) <= 250 && Number(print2[p]) > 150){
158 color[p] = "D";} 213 color[p] = "D";}
159 else if( Number(print2[p]) <= 250 && Number(print2[p]) > 1000){ 214 else if( Number(print2[p]) <= 250 && Number(print2[p]) > 1000){
160 color[p] = "E";} 215 color[p] = "E";}
...@@ -171,12 +226,13 @@ var print2 = new Array();; ...@@ -171,12 +226,13 @@ var print2 = new Array();;
171 _id :id, 226 _id :id,
172 _profileIconId : profileIconId, 227 _profileIconId : profileIconId,
173 _summonerLevel : summonerLevel,//레벨 228 _summonerLevel : summonerLevel,//레벨
174 -
175 _revisionDate : revisionDate, 229 _revisionDate : revisionDate,
176 - //_time : date// 최근 게임
177 _day :print1, 230 _day :print1,
178 _time :print2, 231 _time :print2,
179 - _color : color 232 + _color : color,
233 + _total : total,
234 + _fisrtGame : fisrtGame,
235 + _lastGame : lastGame
180 }); 236 });
181 237
182 }); 238 });
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title><%= title %></title> 5 <title><%= title %></title>
6 6
7 - 7 + <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
9 <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style> 9 <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
10 <script> 10 <script>
...@@ -15,20 +15,56 @@ ...@@ -15,20 +15,56 @@
15 }) 15 })
16 }); 16 });
17 </script> 17 </script>
18 + <style>
19 + body {
20 + body {
21 + width: 1400px;
22 + font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
23 + font-size: 14px;
24 + }
25 +
26 + #calendar {
27 + max-width: 850px;
28 + margin: 0 auto;
29 + }
30 + #container{width:100%;}
31 +
32 +
33 + .main_left_btn {
34 + width:70%;
35 + float:left;}
36 +
37 + .main_right_btn {
38 + width:30%;
39 + float:left;}
40 +
41 + </style>
18 </head> 42 </head>
19 <body> 43 <body>
20 - <div style="position: relative; left: 30%; top: 50px;" > 44 + <body class="w3-content" style="padding-top: 16px">
21 - <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="700" height="250"> 45 + <div class= "main_left_btn">
46 + <!-- 상단 이미지 -->
47 + <div>
48 + <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" class="w3-round w3-hover-opacity" width="100%" height="230">
49 + <!-- <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfNjIg/MDAxNTEyNTUzOTI4MDIw.pdijcp2zG9xdc3vQk3P1f2ThgtfAVyyVrrFMZfxbrwQg.yJ48Li-AfIQxSd7D6yz8y_QMuQ647pwOS9zMIcKbAVYg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" height="230"> -->
22 </div> 50 </div>
23 51
24 -<div style="position: relative; left: 30%; top: 100px;"> 52 + <!-- 입력부분 -->
25 - <input type="text" class="input_text" placeholder="소환사 이름"> 53 + <div>
54 + <font size="4.5em" >
55 + <input type="text" class="" style="width: 90% " placeholder="소환사 이름"/>
26 <span class="input-group-btn"> 56 <span class="input-group-btn">
27 - <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button> 57 + <button id="searchButton" style="width:9%" class="w3-button w3-teal w3-round-large" type="button" onclick="search(name)">검색</button>
28 </span> 58 </span>
29 -</div> 59 + </font>
60 + </div>
61 +
62 + </div>
63 +
64 + <div class="main_right_btn">
30 65
31 66
32 </div> 67 </div>
68 +
33 </body> 69 </body>
34 </html> 70 </html>
......
...@@ -4,17 +4,21 @@ ...@@ -4,17 +4,21 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title><%= title %></title> 5 <title><%= title %></title>
6 6
7 - <link href='../lib/fullcalendar.css' rel='stylesheet' />
8 - <link href='../lib/fullcalendar.print.css' rel='stylesheet' media='print' />
9 - <script src='../lib/moment.min.js'></script>
10 - <script src='../lib/jquery.min.js'></script>
11 - <script src='../lib/fullcalendar.min.js'></script>
12 7
13 8
14 - <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
15 - <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
16 9
17 10
11 + <!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 -->
12 + <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' />
13 + <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
14 + <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
15 + <script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/moment.min.js"></script>
16 + <script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/jquery.min.js"></script>
17 + <script src="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.min.js"></script>
18 +
19 +
20 + <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> -->
21 + <!-- <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style> -->
18 <script> 22 <script>
19 $(document).ready(function(){ 23 $(document).ready(function(){
20 $("button#searchButton").click(function(){ 24 $("button#searchButton").click(function(){
...@@ -33,71 +37,76 @@ ...@@ -33,71 +37,76 @@
33 center: 'title', 37 center: 'title',
34 right: 'month,agendaWeek,agendaDay' 38 right: 'month,agendaWeek,agendaDay'
35 }, 39 },
36 - defaultDate: '2015-02-12', 40 + defaultDate: '2017-12-06',
37 businessHours: true, // display business hours 41 businessHours: true, // display business hours
38 editable: true, 42 editable: true,
39 events: [ 43 events: [
40 { 44 {
41 title: 'Business Lasdfasunch', 45 title: 'Business Lasdfasunch',
42 - start: '2015-02-03T13:00:00', 46 + start: '2017-12-25',
43 constraint: 'businessHours' 47 constraint: 'businessHours'
44 }, 48 },
45 { 49 {
46 - title: 'Meeting',
47 - start: '2015-02-13T11:00:00',
48 - constraint: 'availableForMeeting', // defined below
49 - color: '#257e4a'
50 - },
51 - {
52 title: 'Conference', 50 title: 'Conference',
53 - start: '2015-02-18', 51 + start: '2017-12-01',
54 - end: '2015-02-20' 52 + end: '2017-12-01',
55 - }, 53 + color: '#257e4a'
56 - {
57 - title: 'Party',
58 - start: '2015-02-29T20:00:00'
59 }, 54 },
60 55
61 - // areas where "Meeting" must be dropped 56 + // //검정 250분 이상
62 - { 57 + // color: '#000000'E
63 - id: 'availableForMeeting', 58 + // //빨강 200분 미만D
64 - start: '2015-02-11T10:00:00', 59 + // color: '#990000'
65 - end: '2015-02-11T16:00:00', 60 + // //주황 150분미만C
66 - rendering: 'background' 61 + // color: '#ff6600'
67 - }, 62 + // //노랑 100분 미만B
63 + // color: '#ffff00'
64 + // //초록 40분 미만A
65 + // color: '#00ff99'
66 + //var asa = new Date(print1[0]);
67 + <% var p = 0 %>
68 + <% for (var p = 0; p < _day.length ;p++ ) { %>
68 { 69 {
69 - id: 'availableForMeeting',
70 - start: '2015-02-13T10:00:00',
71 - end: '2015-02-13T16:00:00',
72 - rendering: 'background'
73 - },
74 70
75 - // red areas where no events can be dropped 71 + start: <%- _day[p] %>,
76 - { 72 + end: <%- _day[p] %>,
77 - start: '2015-02-24',
78 - end: '2015-02-28',
79 overlap: false, 73 overlap: false,
80 rendering: 'background', 74 rendering: 'background',
81 - color: '#ff9f89' 75 + // color: '#ff6600'//투명
76 + <% if ( _color[p] == "A") { %>
77 + color: '#00ff99'//초록
78 + <% } else if ( _color[p] == "B") { %>
79 + color: '#ffff00'//노랑
80 + <% } else if ( _color[p] == "C") { %>
81 + color: '#ff6600'//주황
82 + <% } else if ( _color[p] == "D") { %>
83 + color: '#990000'//빨강
84 + <% } else if ( _color[p] == "E") { %>
85 + color: '#000000'//검정
86 + <% } else if ( _color[0] == "F") { %>
87 + color: '#ffffff'//투명
88 + <% } else { %>
89 + color: '#ffffff'//투명
90 + <% } %>
82 }, 91 },
92 + <% } %>
83 { 93 {
84 - start: '2015-02-06', 94 + //빨강 200분 미만
85 - end: '2015-02-08', 95 + start: '2017-12-09',
96 + //end: '2015-02-02',
86 overlap: false, 97 overlap: false,
87 rendering: 'background', 98 rendering: 'background',
88 - color: '#ff9f89' 99 + color: '#ffffff'//투명
89 } 100 }
90 ] 101 ]
91 }); 102 });
92 -
93 }); 103 });
94 104
95 </script> 105 </script>
96 106
97 <style> 107 <style>
98 body { 108 body {
99 - margin: 40px 10px; 109 + width: 980px;
100 - padding: 0;
101 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 110 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
102 font-size: 14px; 111 font-size: 14px;
103 } 112 }
...@@ -108,43 +117,39 @@ ...@@ -108,43 +117,39 @@
108 } 117 }
109 </style> 118 </style>
110 </head> 119 </head>
111 - <body> 120 + <body class="w3-content" style="padding-top: 16px">
112 - <div style="position: relative; left: 30%; top: 50px;" > 121 + <!-- 상단 이미지 -->
113 - <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="700" height="250"> 122 + <div>
123 + <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="100%" height="250">
114 </div> 124 </div>
115 125
116 - <div style="position: relative; left: 30%; top: 100px;"> 126 + <div>
117 - <input type="text" class="input_text" placeholder="소환사 이름"> 127 + <input type="text" class="input_text" style="width: 90%" placeholder="소환사 이름"/>
118 <span class="input-group-btn"> 128 <span class="input-group-btn">
119 - <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button> 129 + <button id="searchButton" style="width:9%" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
120 </span> 130 </span>
121 </div> 131 </div>
122 - <div style="position: relative; left: 30%; top: 120px;" > 132 + <div>
123 133
124 <a>닉네임 : <%= name %></a><br> 134 <a>닉네임 : <%= name %></a><br>
125 <a>고유ID : <%= _profileIconId %></a><br> 135 <a>고유ID : <%= _profileIconId %></a><br>
126 <a>레 벨 : <%= _summonerLevel %></a><br> 136 <a>레 벨 : <%= _summonerLevel %></a><br>
127 <% for (var i = 0; i < _day.length ; i++ ) { %> 137 <% for (var i = 0; i < _day.length ; i++ ) { %>
128 <a>시 간 : <%= _day[i] %></a> 138 <a>시 간 : <%= _day[i] %></a>
129 - <a> <%= _time[i] %></a><br> 139 + <a> <%= _time[i] %></a>
140 + <a> <%= _color[i] %></a><br>
130 <% } %> 141 <% } %>
131 </div> 142 </div>
132 - <div style="position: relative; left: 30%; top: 140px;"> 143 + <div>
133 144
145 + <div id='calendar'></div>
134 146
135 147
136 - <div id='calendar'></div>
137 148
138 </div> 149 </div>
139 150
140 151
141 152
142 - <script type="text/javascript">
143 153
144 - var dp = new DayPilot.Month("dp");
145 - dp.theme = "month_transparent";
146 - dp.init();
147 -
148 - </script>
149 </body> 154 </body>
150 </html> 155 </html>
......
...@@ -4,10 +4,6 @@ ...@@ -4,10 +4,6 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title><%= title %></title> 5 <title><%= title %></title>
6 6
7 -
8 -
9 -
10 -
11 <!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 --> 7 <!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 -->
12 <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' /> 8 <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' />
13 <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' /> 9 <link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
...@@ -41,17 +37,6 @@ ...@@ -41,17 +37,6 @@
41 businessHours: true, // display business hours 37 businessHours: true, // display business hours
42 editable: true, 38 editable: true,
43 events: [ 39 events: [
44 - {
45 - title: 'Business Lasdfasunch',
46 - start: '2017-12-25',
47 - constraint: 'businessHours'
48 - },
49 - {
50 - title: 'Conference',
51 - start: '2017-12-01',
52 - end: '2017-12-01',
53 - color: '#257e4a'
54 - },
55 40
56 // //검정 250분 이상 41 // //검정 250분 이상
57 // color: '#000000'E 42 // color: '#000000'E
...@@ -63,8 +48,7 @@ ...@@ -63,8 +48,7 @@
63 // color: '#ffff00' 48 // color: '#ffff00'
64 // //초록 40분 미만A 49 // //초록 40분 미만A
65 // color: '#00ff99' 50 // color: '#00ff99'
66 - //var asa = new Date(print1[0]); 51 +
67 - <% var p = 0 %>
68 <% for (var p = 0; p < _day.length ;p++ ) { %> 52 <% for (var p = 0; p < _day.length ;p++ ) { %>
69 { 53 {
70 54
...@@ -83,13 +67,14 @@ ...@@ -83,13 +67,14 @@
83 color: '#990000'//빨강 67 color: '#990000'//빨강
84 <% } else if ( _color[p] == "E") { %> 68 <% } else if ( _color[p] == "E") { %>
85 color: '#000000'//검정 69 color: '#000000'//검정
86 - <% } else if ( _color[0] == "F") { %> 70 + <% } else if ( _color[p] == "F") { %>
87 color: '#ffffff'//투명 71 color: '#ffffff'//투명
88 <% } else { %> 72 <% } else { %>
89 color: '#ffffff'//투명 73 color: '#ffffff'//투명
90 <% } %> 74 <% } %>
91 }, 75 },
92 <% } %> 76 <% } %>
77 +
93 { 78 {
94 //빨강 200분 미만 79 //빨강 200분 미만
95 start: '2017-12-09', 80 start: '2017-12-09',
...@@ -106,50 +91,104 @@ ...@@ -106,50 +91,104 @@
106 91
107 <style> 92 <style>
108 body { 93 body {
109 - width: 980px; 94 + width: 1400px;
110 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 95 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
111 font-size: 14px; 96 font-size: 14px;
112 } 97 }
113 98
114 #calendar { 99 #calendar {
115 - max-width: 900px; 100 + max-width: 850px;
116 margin: 0 auto; 101 margin: 0 auto;
117 } 102 }
103 + #container{width:100%;}
104 +
105 +
106 + .main_left_btn {
107 + width:70%;
108 + float:left;}
109 +
110 + .main_right_btn {
111 + width:30%;
112 + float:left;}
113 +
118 </style> 114 </style>
119 </head> 115 </head>
120 - <body class="w3-content" style="padding-top: 16px"> 116 + <body class="w3-content" style="max-width: 1400px; padding-top: 16px">
117 +
118 + <div class= "main_left_btn">
119 +
120 +
121 <!-- 상단 이미지 --> 121 <!-- 상단 이미지 -->
122 <div> 122 <div>
123 - <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="100%" height="250"> 123 + <img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" class="w3-round w3-hover-opacity" width="100%" height="230">
124 + <!-- <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfNjIg/MDAxNTEyNTUzOTI4MDIw.pdijcp2zG9xdc3vQk3P1f2ThgtfAVyyVrrFMZfxbrwQg.yJ48Li-AfIQxSd7D6yz8y_QMuQ647pwOS9zMIcKbAVYg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" height="230"> -->
124 </div> 125 </div>
125 126
127 +
128 + <!-- 입력부분 -->
126 <div> 129 <div>
127 - <input type="text" class="input_text" style="width: 90%" placeholder="소환사 이름"/> 130 + <font size="4.5em" >
131 + <input type="text" class="" style="width: 90% " placeholder="소환사 이름"/>
128 <span class="input-group-btn"> 132 <span class="input-group-btn">
129 - <button id="searchButton" style="width:9%" class="btn btn-primary" type="button" onclick="search(name)">검색!</button> 133 + <button id="searchButton" style="width:9%" class="w3-button w3-teal w3-round-large" type="button" onclick="search(name)">검색</button>
130 </span> 134 </span>
135 + </font>
131 </div> 136 </div>
137 +
138 + <!-- 정보부분 -->
139 + <div class = "w3-border" tyle="padding-left: 5px">
140 +
141 + <font size="4em" >
142 + <br><a>　닉네임 : <%= name %></a><br>
143 + <a>　고유ID : <%= _profileIconId %></a><br>
144 + <a>　레 벨 : <%= _summonerLevel %></a><br>
145 + <a>　20게임 클리어 하는데 <%= _day.length %>일 소요 </a><br>
146 + <a>　<%= _lastGame %> ~ <%= _fisrtGame %> 기간에 <%= _total.length %> 게임 플레이</a> <br><br>
147 + </font >
148 + </div>
149 +
150 + <!-- 달력 -->
132 <div> 151 <div>
152 + <div id='calendar'></div>
153 + </div>
133 154
134 - <a>닉네임 : <%= name %></a><br> 155 + <!-- 상세 정보 -->
135 - <a>고유ID : <%= _profileIconId %></a><br> 156 + <div class="w3-cell-row">
136 - <a>레 벨 : <%= _summonerLevel %></a><br> 157 + <div class="w3-container w3-cell w3-border" style="width:50%">
158 + <font size="4em" ><br> <br><a>날짜별 게임 시간</a> <br><br></font>
159 + <font size="3em" >
137 <% for (var i = 0; i < _day.length ; i++ ) { %> 160 <% for (var i = 0; i < _day.length ; i++ ) { %>
138 - <a>시 간 : <%= _day[i] %></a> 161 + <a><%= _day[i] %> : </a>
139 - <a> <%= _time[i] %></a> 162 + <a> <%= _time[i] %>분 PLAY - </a>
140 - <a> <%= _color[i] %></a><br> 163 + <a> 중독성 : <%= _color[i] %>등급</a> <br>
141 <% } %> 164 <% } %>
165 + </font>
166 + </div>
167 +
168 + <div class="w3-container w3-cell w3-border">
169 + <font size="4em" > <br> <br><a>최근 게임 시작 시간</a> <br><br></font>
170 + <font size="3em" >
171 + <% for (var i = 0; i < _total.length ; i++ ) { %>
172 + <a><%= _total[i] %></a> <br>
173 + <% } %>
174 + </font>
175 + </div>
142 </div> 176 </div>
143 - <div>
144 177
145 - <div id='calendar'></div>
146 178
147 179
180 + </div>
148 181
149 </div> 182 </div>
183 + </div>
150 184
151 185
186 + <div class="main_right_btn">
187 + <div >
188 + <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">
189 + </div>
152 190
191 + </div>
153 192
154 </body> 193 </body>
155 </html> 194 </html>
......

39.8 KB