김가영 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
7882825a 1 parent 0541b9be

first try

Inline Side-by-side
Showing 6 changed files with 249 additions and 48 deletions
...@@ -20,6 +20,7 @@ app.use(express.urlencoded({ extended: false })); ...@@ -20,6 +20,7 @@ app.use(express.urlencoded({ extended: false }));
20 app.use(cookieParser()); 20 app.use(cookieParser());
21 app.use(express.static(path.join(__dirname, 'public'))); 21 app.use(express.static(path.join(__dirname, 'public')));
22 app.use(express.static(path.join(__dirname, 'code'))); 22 app.use(express.static(path.join(__dirname, 'code')));
23 +app.use('/name/:name/birth',express.static(path.join(__dirname, 'public')));
23 app.use('/name/:name/birth',express.static(path.join(__dirname, 'code'))); 24 app.use('/name/:name/birth',express.static(path.join(__dirname, 'code')));
24 25
25 app.use('/', indexRouter); 26 app.use('/', indexRouter);
......
...@@ -2,11 +2,23 @@ ...@@ -2,11 +2,23 @@
2 <html> 2 <html>
3 3
4 <head> 4 <head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 10 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>Highcharts Example</title> 11 <title>Highcharts Example</title>
8 12
9 - <style type="text/css"></style> 13 + <style type="text/css">
14 + body {
15 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
16 + /* background-color:#65799B; */
17 + background-image: url("2.jpg");
18 + background-repeat: no-repeat;
19 + background-size: cover;
20 + }
21 + </style>
10 </head> 22 </head>
11 23
12 <body> 24 <body>
...@@ -32,8 +44,12 @@ ...@@ -32,8 +44,12 @@
32 44
33 <script src="/socket.io/socket.io.js"></script> 45 <script src="/socket.io/socket.io.js"></script>
34 <script> 46 <script>
47 + let client_data={
48 + birth : "<%=birth%>",
49 + name : "<%=name%>"
50 + }
35 var socket = io.connect('/', { transports: ['websocket'], upgrade: false }); 51 var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
36 - socket.emit("connection", "client in"); 52 + socket.emit("connection",client_data);
37 socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송 53 socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
38 console.log(info); 54 console.log(info);
39 55
...@@ -41,31 +57,36 @@ ...@@ -41,31 +57,36 @@
41 57
42 chart1.series[0].addPoint({ 58 chart1.series[0].addPoint({
43 x: date, 59 x: date,
44 - y: info.death 60 + y: info.death,
61 + color: "#FFE08C"
45 }) 62 })
46 63
47 chart2.series[0].addPoint({ 64 chart2.series[0].addPoint({
48 x: date, 65 x: date,
49 - y: info.temperature 66 + y: info.temperature,
67 + color: "#FFE08C"
50 }) 68 })
51 69
52 chart3.series[0].addPoint({ 70 chart3.series[0].addPoint({
53 x: date, 71 x: date,
54 - y: info.wind 72 + y: info.wind,
73 + color: "#FFE08C"
55 }) 74 })
56 75
57 chart4.series[0].addPoint({ 76 chart4.series[0].addPoint({
58 x: date, 77 x: date,
59 - y: info.rain 78 + y: info.rain,
79 + color: "#FFE08C"
60 }) 80 })
61 81
62 }); 82 });
63 </script> 83 </script>
84 +
64 <script type="text/javascript"> 85 <script type="text/javascript">
65 //사망률 86 //사망률
66 var chart1 = Highcharts.chart("container1", { 87 var chart1 = Highcharts.chart("container1", {
67 chart: { 88 chart: {
68 - type: "areaspline", 89 + type: "spline",
69 animation: Highcharts.svg, // don't animate in old IE 90 animation: Highcharts.svg, // don't animate in old IE
70 marginRight: 10, 91 marginRight: 10,
71 // events: { 92 // events: {
...@@ -86,19 +107,31 @@ ...@@ -86,19 +107,31 @@
86 }, 107 },
87 108
88 title: { 109 title: {
89 - text: "<%=name%>님의 실시간 사망률" 110 + text: "<%=name%>님의 실시간 사망률",
111 + style: {
112 + color: "#FFFFFF",
113 + fontWeight: "bold",
114 + fontFamily: 'Yeon Sung',
115 + fontSize: '32px'
116 + }
117 +
90 }, 118 },
91 xAxis: { 119 xAxis: {
92 type: "datetime", 120 type: "datetime",
93 - tickPixelInterval: 150 121 + tickPixelInterval: 150,
122 + labels: {
123 + style: {
124 + color: "white"
125 + }
126 + }
127 +
94 }, 128 },
95 yAxis: { 129 yAxis: {
96 title: { 130 title: {
97 - text: "사망률(%)" 131 + text: "Value",
98 - }, 132 + style: {
99 - xAxis: { 133 + color: "white"
100 - type: "datetime", 134 + }
101 - tickPixelInterval: 150
102 }, 135 },
103 plotLines: [ 136 plotLines: [
104 { 137 {
...@@ -106,19 +139,24 @@ ...@@ -106,19 +139,24 @@
106 width: 1, 139 width: 1,
107 color: "#808080" 140 color: "#808080"
108 } 141 }
109 - ] 142 + ],
143 + labels: {
144 + style: {
145 + color: "white"
146 + }
147 + }
110 }, 148 },
111 tooltip: { 149 tooltip: {
112 headerFormat: "<b>{series.name}</b><br/>", 150 headerFormat: "<b>{series.name}</b><br/>",
113 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 151 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
114 }, 152 },
115 legend: { 153 legend: {
116 //enabled: false 154 //enabled: false
117 layout: "vertical", 155 layout: "vertical",
118 align: "left", 156 align: "left",
119 verticalAlign: "top", 157 verticalAlign: "top",
120 - x: 120, 158 + x: 100,
121 - y: 70, 159 + y: 50,
122 floating: true, 160 floating: true,
123 borderWidth: 1, 161 borderWidth: 1,
124 backgroundColor: 162 backgroundColor:
...@@ -128,6 +166,16 @@ ...@@ -128,6 +166,16 @@
128 exporting: { 166 exporting: {
129 enabled: false 167 enabled: false
130 }, 168 },
169 +
170 + plotOptions: {
171 + series: {
172 + marker: {
173 + radius: 6
174 + }
175 + }
176 + },
177 +
178 +
131 series: [ 179 series: [
132 { 180 {
133 name: "사망률", 181 name: "사망률",
...@@ -167,7 +215,9 @@ ...@@ -167,7 +215,9 @@
167 <%}) %> 215 <%}) %>
168 216
169 return deathArr; 217 return deathArr;
170 - })() 218 + })(),
219 +
220 + color: "#FFFFFF"
171 } 221 }
172 ] 222 ]
173 }); 223 });
...@@ -188,6 +238,8 @@ ...@@ -188,6 +238,8 @@
188 // }, 60000); //1000=1초 238 // }, 60000); //1000=1초
189 // } 239 // }
190 // } 240 // }
241 + backgroundColor: "rgba(255, 255, 255, 0.0)"
242 +
191 }, 243 },
192 244
193 time: { 245 time: {
...@@ -195,15 +247,30 @@ ...@@ -195,15 +247,30 @@
195 }, 247 },
196 248
197 title: { 249 title: {
198 - text: "기온" 250 + text: "기온",
251 + style: {
252 + color: "#FFFFFF",
253 + fontWeight: "bold",
254 + fontFamily: 'Yeon Sung',
255 + fontSize: '25px'
256 + }
257 +
199 }, 258 },
200 xAxis: { 259 xAxis: {
201 type: "datetime", 260 type: "datetime",
202 - tickPixelInterval: 150 261 + tickPixelInterval: 150,
262 + labels: {
263 + style: {
264 + color: "white"
265 + }
266 + }
203 }, 267 },
204 yAxis: { 268 yAxis: {
205 title: { 269 title: {
206 - text: "Value" 270 + text: "Value",
271 + style: {
272 + color: "white"
273 + }
207 }, 274 },
208 plotLines: [ 275 plotLines: [
209 { 276 {
...@@ -211,19 +278,24 @@ ...@@ -211,19 +278,24 @@
211 width: 1, 278 width: 1,
212 color: "#808080" 279 color: "#808080"
213 } 280 }
214 - ] 281 + ],
282 + labels: {
283 + style: {
284 + color: "white"
285 + }
286 + }
215 }, 287 },
216 tooltip: { 288 tooltip: {
217 headerFormat: "<b>{series.name}</b><br/>", 289 headerFormat: "<b>{series.name}</b><br/>",
218 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 290 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
219 }, 291 },
220 legend: { 292 legend: {
221 //enabled: false 293 //enabled: false
222 layout: "vertical", 294 layout: "vertical",
223 align: "left", 295 align: "left",
224 verticalAlign: "top", 296 verticalAlign: "top",
225 - x: 120, 297 + x: 100,
226 - y: 70, 298 + y: 50,
227 floating: true, 299 floating: true,
228 borderWidth: 1, 300 borderWidth: 1,
229 backgroundColor: 301 backgroundColor:
...@@ -272,7 +344,9 @@ ...@@ -272,7 +344,9 @@
272 <%}) %> 344 <%}) %>
273 345
274 return tempArr; 346 return tempArr;
275 - })() 347 + })(),
348 +
349 + color: "#FFE08C"
276 } 350 }
277 ] 351 ]
278 }); 352 });
...@@ -293,6 +367,8 @@ ...@@ -293,6 +367,8 @@
293 // }, 60000); //1000=1초 367 // }, 60000); //1000=1초
294 // } 368 // }
295 // } 369 // }
370 + backgroundColor: "rgba(255, 255, 255, 0.0)"
371 +
296 }, 372 },
297 373
298 time: { 374 time: {
...@@ -300,15 +376,32 @@ ...@@ -300,15 +376,32 @@
300 }, 376 },
301 377
302 title: { 378 title: {
303 - text: "풍속" 379 + text: "풍속",
380 + style: {
381 + color: "#FFFFFF",
382 + fontWeight: "bold",
383 + fontFamily: 'Yeon Sung',
384 + fontSize: '25px'
385 + }
386 +
304 }, 387 },
305 xAxis: { 388 xAxis: {
306 type: "datetime", 389 type: "datetime",
307 - tickPixelInterval: 150 390 + tickPixelInterval: 150,
391 + labels: {
392 + style: {
393 + color: "white"
394 + }
395 + }
396 +
308 }, 397 },
309 yAxis: { 398 yAxis: {
310 title: { 399 title: {
311 - text: "Value" 400 + text: "Value",
401 + style: {
402 + color: "white"
403 + }
404 +
312 }, 405 },
313 plotLines: [ 406 plotLines: [
314 { 407 {
...@@ -316,19 +409,25 @@ ...@@ -316,19 +409,25 @@
316 width: 1, 409 width: 1,
317 color: "#808080" 410 color: "#808080"
318 } 411 }
319 - ] 412 + ],
413 + labels: {
414 + style: {
415 + color: "white"
416 + }
417 + }
418 +
320 }, 419 },
321 tooltip: { 420 tooltip: {
322 headerFormat: "<b>{series.name}</b><br/>", 421 headerFormat: "<b>{series.name}</b><br/>",
323 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 422 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
324 }, 423 },
325 legend: { 424 legend: {
326 //enabled: false 425 //enabled: false
327 layout: "vertical", 426 layout: "vertical",
328 align: "left", 427 align: "left",
329 verticalAlign: "top", 428 verticalAlign: "top",
330 - x: 120, 429 + x: 100,
331 - y: 70, 430 + y: 50,
332 floating: true, 431 floating: true,
333 borderWidth: 1, 432 borderWidth: 1,
334 backgroundColor: 433 backgroundColor:
...@@ -377,7 +476,9 @@ ...@@ -377,7 +476,9 @@
377 <%}) %> 476 <%}) %>
378 477
379 return windArr; 478 return windArr;
380 - })() 479 + })(),
480 +
481 + color: "#FFE08C"
381 } 482 }
382 ] 483 ]
383 }); 484 });
...@@ -398,6 +499,8 @@ ...@@ -398,6 +499,8 @@
398 // }, 60000); //1000=1초 499 // }, 60000); //1000=1초
399 // } 500 // }
400 // } 501 // }
502 + backgroundColor: "rgba(255, 255, 255, 0.0)"
503 +
401 }, 504 },
402 505
403 time: { 506 time: {
...@@ -405,15 +508,32 @@ ...@@ -405,15 +508,32 @@
405 }, 508 },
406 509
407 title: { 510 title: {
408 - text: "강수량" 511 + text: "강수량",
512 + style: {
513 + color: "#FFFFFF",
514 + fontWeight: "bold",
515 + fontFamily: 'Yeon Sung',
516 + fontSize: '25px'
517 + }
518 +
409 }, 519 },
410 xAxis: { 520 xAxis: {
411 type: "datetime", 521 type: "datetime",
412 - tickPixelInterval: 150 522 + tickPixelInterval: 150,
523 + labels: {
524 + style: {
525 + color: "white"
526 + }
527 + }
528 +
413 }, 529 },
414 yAxis: { 530 yAxis: {
415 title: { 531 title: {
416 - text: "Value" 532 + text: "Value",
533 + style: {
534 + color: "white"
535 + }
536 +
417 }, 537 },
418 plotLines: [ 538 plotLines: [
419 { 539 {
...@@ -421,19 +541,25 @@ ...@@ -421,19 +541,25 @@
421 width: 1, 541 width: 1,
422 color: "#808080" 542 color: "#808080"
423 } 543 }
424 - ] 544 + ],
545 + labels: {
546 + style: {
547 + color: "white"
548 + }
549 + }
550 +
425 }, 551 },
426 tooltip: { 552 tooltip: {
427 headerFormat: "<b>{series.name}</b><br/>", 553 headerFormat: "<b>{series.name}</b><br/>",
428 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 554 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
429 }, 555 },
430 legend: { 556 legend: {
431 //enabled: false 557 //enabled: false
432 layout: "vertical", 558 layout: "vertical",
433 align: "left", 559 align: "left",
434 verticalAlign: "top", 560 verticalAlign: "top",
435 - x: 120, 561 + x: 100,
436 - y: 70, 562 + y: 50,
437 floating: true, 563 floating: true,
438 borderWidth: 1, 564 borderWidth: 1,
439 backgroundColor: 565 backgroundColor:
...@@ -482,7 +608,9 @@ ...@@ -482,7 +608,9 @@
482 <%}) %> 608 <%}) %>
483 609
484 return rainArr; 610 return rainArr;
485 - })() 611 + })(),
612 + color: "#FFE08C"
613 +
486 } 614 }
487 ] 615 ]
488 }); 616 });
......
1 -<form action = "/starting" method = "post"> 1 +<!DOCTYPE <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8" />
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <title>Page Title</title>
8 +
9 +<!-- font -->
10 +<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
11 +<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
12 +
13 + <meta name="viewport" content="width=device-width, initial-scale=1">
14 + <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
15 + <script src="main.js"></script>
16 +
17 + <!-- 합쳐지고 최소화된 최신 CSS -->
18 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
19 +
20 + <!-- 부가적인 테마 -->
21 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
22 +
23 + <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
24 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
25 +
26 + <style type="text/css">
27 + body {
28 + background-image: url('images/background.jpg');
29 + background-repeat: no-repeat;
30 + background-size: cover;
31 + /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
32 + }
33 +
34 + h1 {
35 + color: white;
36 + font-family: 'Nanum Brush Script', cursive;
37 + }
38 +
39 + label {
40 + color: white;
41 + font-size: 20px;
42 + font-family: 'Yeon Sung', cursive;
43 + }
44 + #footer {
45 + position: absolute;
46 + bottom: 0;
47 + width: 100%;
48 + height: 50px;
49 + text-align: center;
50 + font-family: 'Yeon Sung', cursive;
51 + color:white;
52 + }
53 + </style>
54 +
55 +</head>
56 +
57 +<body>
58 + <div style="width:100%; text-align: center; margin-top:170px;">
59 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
60 + </div>
61 + <br><br><br>
62 + <div style="width:100%; text-align: center;">
63 + <form action="/starting" method="post">
64 + <div class="form-inline">
2 <label>이름</label> 65 <label>이름</label>
3 - <input type="text" name = "name"> 66 + <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
67 + &nbsp&nbsp&nbsp&nbsp
4 <label>생년월일</label> 68 <label>생년월일</label>
5 - <input type="text" name = "birth">
6 - <input type="submit" value = "시작">
7 -</form>
...\ No newline at end of file ...\ No newline at end of file
69 + <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
70 + <br><br><br>
71 + <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
72 + </div>
73 + </form>
74 + </div>
75 +
76 + <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
77 +</body>
78 +
79 +</html>
...\ No newline at end of file ...\ No newline at end of file
......