Showing
10 changed files
with
138 additions
and
96 deletions
| ... | @@ -18,8 +18,8 @@ app.use(logger('dev')); | ... | @@ -18,8 +18,8 @@ app.use(logger('dev')); |
| 18 | app.use(express.json()); | 18 | app.use(express.json()); |
| 19 | app.use(express.urlencoded({ extended: false })); | 19 | 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, 'public'))); |
| 24 | app.use('/name/:name/birth',express.static(path.join(__dirname, 'code'))); | 24 | app.use('/name/:name/birth',express.static(path.join(__dirname, 'code'))); |
| 25 | 25 | ... | ... |
| ... | @@ -25,9 +25,9 @@ | ... | @@ -25,9 +25,9 @@ |
| 25 | 25 | ||
| 26 | <style type="text/css"> | 26 | <style type="text/css"> |
| 27 | body { | 27 | body { |
| 28 | - background-image: url('background.jpg'); | 28 | + /* background-image: url('background.jpg'); |
| 29 | background-repeat: no-repeat; | 29 | background-repeat: no-repeat; |
| 30 | - background-size: cover; | 30 | + background-size: cover; */ |
| 31 | /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ | 31 | /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ |
| 32 | } | 32 | } |
| 33 | 33 | ||
| ... | @@ -41,6 +41,11 @@ | ... | @@ -41,6 +41,11 @@ |
| 41 | font-size: 20px; | 41 | font-size: 20px; |
| 42 | font-family: 'Yeon Sung', cursive; | 42 | font-family: 'Yeon Sung', cursive; |
| 43 | } | 43 | } |
| 44 | + #banner { | ||
| 45 | + position: absolute; | ||
| 46 | + top: 0; | ||
| 47 | + width: 100%; | ||
| 48 | + } | ||
| 44 | #footer { | 49 | #footer { |
| 45 | position: absolute; | 50 | position: absolute; |
| 46 | bottom: 0; | 51 | bottom: 0; |
| ... | @@ -55,7 +60,9 @@ | ... | @@ -55,7 +60,9 @@ |
| 55 | </head> | 60 | </head> |
| 56 | 61 | ||
| 57 | <body> | 62 | <body> |
| 58 | - <div style="width:100%; text-align: center; margin-top:170px;"> | 63 | + <img src="./background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> |
| 64 | + <div id="banner"> | ||
| 65 | + <div style="width:100%; text-align: center; padding-top:170px;"> | ||
| 59 | <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> | 66 | <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> |
| 60 | </div> | 67 | </div> |
| 61 | <br><br><br> | 68 | <br><br><br> |
| ... | @@ -73,6 +80,8 @@ | ... | @@ -73,6 +80,8 @@ |
| 73 | </form> | 80 | </form> |
| 74 | </div> | 81 | </div> |
| 75 | 82 | ||
| 83 | + </div> | ||
| 84 | + | ||
| 76 | <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> | 85 | <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> |
| 77 | </body> | 86 | </body> |
| 78 | 87 | ... | ... |
views/2.jpg
0 → 100644
204 KB
views/index - 복사본.ejs
0 → 100644
This diff is collapsed. Click to expand it.
| 1 | -<!DOCTYPE html> | 1 | +<!-- <!DOCTYPE html> |
| 2 | <html> | 2 | <html> |
| 3 | 3 | ||
| 4 | <head> | 4 | <head> |
| ... | @@ -11,13 +11,26 @@ | ... | @@ -11,13 +11,26 @@ |
| 11 | <title>Highcharts Example</title> | 11 | <title>Highcharts Example</title> |
| 12 | 12 | ||
| 13 | <style type="text/css"> | 13 | <style type="text/css"> |
| 14 | + html { | ||
| 15 | + margin: 0; | ||
| 16 | + padding: 0; | ||
| 17 | +} | ||
| 14 | body { | 18 | body { |
| 19 | + margin: 0; | ||
| 20 | + padding: 0; | ||
| 21 | + | ||
| 15 | /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ | 22 | /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ |
| 16 | /* background-color:#65799B; */ | 23 | /* background-color:#65799B; */ |
| 17 | - background-image: url("2.jpg"); | 24 | + /* background-image: url("2.jpg"); |
| 18 | background-repeat: no-repeat; | 25 | background-repeat: no-repeat; |
| 19 | - background-size: cover; | 26 | + background-size: cover; */ |
| 27 | + } | ||
| 28 | + #banner { | ||
| 29 | + position: absolute; | ||
| 30 | + top: 0; | ||
| 31 | + width: 100%; | ||
| 20 | } | 32 | } |
| 33 | + | ||
| 21 | </style> | 34 | </style> |
| 22 | </head> | 35 | </head> |
| 23 | 36 | ||
| ... | @@ -26,7 +39,10 @@ | ... | @@ -26,7 +39,10 @@ |
| 26 | <script src="modules/exporting.js"></script> | 39 | <script src="modules/exporting.js"></script> |
| 27 | <script src="modules/export-data.js"></script> | 40 | <script src="modules/export-data.js"></script> |
| 28 | 41 | ||
| 29 | - <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div> | 42 | + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> |
| 43 | + | ||
| 44 | + <div id="banner"> | ||
| 45 | + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div> | ||
| 30 | 46 | ||
| 31 | <div style="width:1275px; margin:0 auto;"> | 47 | <div style="width:1275px; margin:0 auto;"> |
| 32 | <div style="display: inline-block;"> | 48 | <div style="display: inline-block;"> |
| ... | @@ -41,49 +57,14 @@ | ... | @@ -41,49 +57,14 @@ |
| 41 | </div> | 57 | </div> |
| 42 | </div> | 58 | </div> |
| 43 | 59 | ||
| 44 | - | ||
| 45 | <script src="/socket.io/socket.io.js"></script> | 60 | <script src="/socket.io/socket.io.js"></script> |
| 46 | - <script> | 61 | + <script type="text/javascript"> |
| 47 | - let client_data={ | 62 | + let client_data = { |
| 48 | - birth : "<%=birth%>", | 63 | + birth: "<%=birth%>", |
| 49 | - name : "<%=name%>" | 64 | + name: "<%=name%>" |
| 50 | } | 65 | } |
| 51 | - var socket = io.connect('/', { transports: ['websocket'], upgrade: false }); | ||
| 52 | - socket.emit("connection",client_data); | ||
| 53 | - socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송 | ||
| 54 | - console.log(info); | ||
| 55 | - | ||
| 56 | - var date = new Date().getTime(); | ||
| 57 | - | ||
| 58 | - chart1.series[0].addPoint({ | ||
| 59 | - x: date, | ||
| 60 | - y: info.death, | ||
| 61 | - color: "#FFE08C" | ||
| 62 | - }) | ||
| 63 | - | ||
| 64 | - chart2.series[0].addPoint({ | ||
| 65 | - x: date, | ||
| 66 | - y: info.temperature, | ||
| 67 | - color: "#FFE08C" | ||
| 68 | - }) | ||
| 69 | - | ||
| 70 | - chart3.series[0].addPoint({ | ||
| 71 | - x: date, | ||
| 72 | - y: info.wind, | ||
| 73 | - color: "#FFE08C" | ||
| 74 | - }) | ||
| 75 | - | ||
| 76 | - chart4.series[0].addPoint({ | ||
| 77 | - x: date, | ||
| 78 | - y: info.rain, | ||
| 79 | - color: "#FFE08C" | ||
| 80 | - }) | ||
| 81 | 66 | ||
| 82 | - }); | ||
| 83 | - </script> | ||
| 84 | 67 | ||
| 85 | - <script type="text/javascript"> | ||
| 86 | - //사망률 | ||
| 87 | var chart1 = Highcharts.chart("container1", { | 68 | var chart1 = Highcharts.chart("container1", { |
| 88 | chart: { | 69 | chart: { |
| 89 | type: "spline", | 70 | type: "spline", |
| ... | @@ -95,11 +76,13 @@ | ... | @@ -95,11 +76,13 @@ |
| 95 | // var series = this.series[0]; | 76 | // var series = this.series[0]; |
| 96 | // setInterval(function () { | 77 | // setInterval(function () { |
| 97 | // var x = new Date().getTime(), // 현재 시간 | 78 | // var x = new Date().getTime(), // 현재 시간 |
| 98 | - // y = 0; //여기에 새로 넣을 값 | 79 | + // y = Math.random(); //여기에 새로 넣을 값 |
| 99 | - // series.addPoint([x, y], true, true); | 80 | + // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true); |
| 100 | - // }, 60000); //1000=1초 -> 1분=60000 | 81 | + // }, 1000); //1000=1초 -> 1분=60000 |
| 101 | - // } | ||
| 102 | // } | 82 | // } |
| 83 | + // }, | ||
| 84 | + | ||
| 85 | + backgroundColor: "rgba(255, 255, 255, 0.0)" | ||
| 103 | }, | 86 | }, |
| 104 | 87 | ||
| 105 | time: { | 88 | time: { |
| ... | @@ -107,14 +90,13 @@ | ... | @@ -107,14 +90,13 @@ |
| 107 | }, | 90 | }, |
| 108 | 91 | ||
| 109 | title: { | 92 | title: { |
| 110 | - text: "<%=name%>님의 실시간 사망률", | 93 | + text: "<%=name%>님의 실시간 사망 확률", |
| 111 | style: { | 94 | style: { |
| 112 | color: "#FFFFFF", | 95 | color: "#FFFFFF", |
| 113 | fontWeight: "bold", | 96 | fontWeight: "bold", |
| 114 | fontFamily: 'Yeon Sung', | 97 | fontFamily: 'Yeon Sung', |
| 115 | - fontSize: '32px' | 98 | + fontSize:'32px' |
| 116 | } | 99 | } |
| 117 | - | ||
| 118 | }, | 100 | }, |
| 119 | xAxis: { | 101 | xAxis: { |
| 120 | type: "datetime", | 102 | type: "datetime", |
| ... | @@ -124,7 +106,6 @@ | ... | @@ -124,7 +106,6 @@ |
| 124 | color: "white" | 106 | color: "white" |
| 125 | } | 107 | } |
| 126 | } | 108 | } |
| 127 | - | ||
| 128 | }, | 109 | }, |
| 129 | yAxis: { | 110 | yAxis: { |
| 130 | title: { | 111 | title: { |
| ... | @@ -133,6 +114,7 @@ | ... | @@ -133,6 +114,7 @@ |
| 133 | color: "white" | 114 | color: "white" |
| 134 | } | 115 | } |
| 135 | }, | 116 | }, |
| 117 | + | ||
| 136 | plotLines: [ | 118 | plotLines: [ |
| 137 | { | 119 | { |
| 138 | value: 0, | 120 | value: 0, |
| ... | @@ -145,6 +127,7 @@ | ... | @@ -145,6 +127,7 @@ |
| 145 | color: "white" | 127 | color: "white" |
| 146 | } | 128 | } |
| 147 | } | 129 | } |
| 130 | + | ||
| 148 | }, | 131 | }, |
| 149 | tooltip: { | 132 | tooltip: { |
| 150 | headerFormat: "<b>{series.name}</b><br/>", | 133 | headerFormat: "<b>{series.name}</b><br/>", |
| ... | @@ -167,7 +150,7 @@ | ... | @@ -167,7 +150,7 @@ |
| 167 | enabled: false | 150 | enabled: false |
| 168 | }, | 151 | }, |
| 169 | 152 | ||
| 170 | - plotOptions: { | 153 | +plotOptions: { |
| 171 | series: { | 154 | series: { |
| 172 | marker: { | 155 | marker: { |
| 173 | radius: 6 | 156 | radius: 6 |
| ... | @@ -175,7 +158,6 @@ | ... | @@ -175,7 +158,6 @@ |
| 175 | } | 158 | } |
| 176 | }, | 159 | }, |
| 177 | 160 | ||
| 178 | - | ||
| 179 | series: [ | 161 | series: [ |
| 180 | { | 162 | { |
| 181 | name: "사망률", | 163 | name: "사망률", |
| ... | @@ -220,8 +202,10 @@ | ... | @@ -220,8 +202,10 @@ |
| 220 | color: "#FFFFFF" | 202 | color: "#FFFFFF" |
| 221 | } | 203 | } |
| 222 | ] | 204 | ] |
| 205 | + | ||
| 223 | }); | 206 | }); |
| 224 | - //기온 | 207 | + |
| 208 | + | ||
| 225 | var chart2 = Highcharts.chart("container2", { | 209 | var chart2 = Highcharts.chart("container2", { |
| 226 | chart: { | 210 | chart: { |
| 227 | type: "spline", | 211 | type: "spline", |
| ... | @@ -233,13 +217,13 @@ | ... | @@ -233,13 +217,13 @@ |
| 233 | // var series = this.series[0]; | 217 | // var series = this.series[0]; |
| 234 | // setInterval(function () { | 218 | // setInterval(function () { |
| 235 | // var x = new Date().getTime(), // 현재 시간 | 219 | // var x = new Date().getTime(), // 현재 시간 |
| 236 | - // y = 0; // | 220 | + // y = Math.random(); // |
| 237 | // series.addPoint([x, y], true, true); | 221 | // series.addPoint([x, y], true, true); |
| 238 | - // }, 60000); //1000=1초 | 222 | + // }, 3000); //1000=1초 |
| 239 | - // } | ||
| 240 | // } | 223 | // } |
| 241 | - backgroundColor: "rgba(255, 255, 255, 0.0)" | 224 | + // }, |
| 242 | 225 | ||
| 226 | + backgroundColor: "rgba(255, 255, 255, 0.0)" | ||
| 243 | }, | 227 | }, |
| 244 | 228 | ||
| 245 | time: { | 229 | time: { |
| ... | @@ -252,7 +236,7 @@ | ... | @@ -252,7 +236,7 @@ |
| 252 | color: "#FFFFFF", | 236 | color: "#FFFFFF", |
| 253 | fontWeight: "bold", | 237 | fontWeight: "bold", |
| 254 | fontFamily: 'Yeon Sung', | 238 | fontFamily: 'Yeon Sung', |
| 255 | - fontSize: '25px' | 239 | + fontSize:'25px' |
| 256 | } | 240 | } |
| 257 | 241 | ||
| 258 | }, | 242 | }, |
| ... | @@ -284,10 +268,11 @@ | ... | @@ -284,10 +268,11 @@ |
| 284 | color: "white" | 268 | color: "white" |
| 285 | } | 269 | } |
| 286 | } | 270 | } |
| 271 | + | ||
| 287 | }, | 272 | }, |
| 288 | tooltip: { | 273 | tooltip: { |
| 289 | headerFormat: "<b>{series.name}</b><br/>", | 274 | headerFormat: "<b>{series.name}</b><br/>", |
| 290 | - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" | 275 | + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도" |
| 291 | }, | 276 | }, |
| 292 | legend: { | 277 | legend: { |
| 293 | //enabled: false | 278 | //enabled: false |
| ... | @@ -350,7 +335,7 @@ | ... | @@ -350,7 +335,7 @@ |
| 350 | } | 335 | } |
| 351 | ] | 336 | ] |
| 352 | }); | 337 | }); |
| 353 | - //풍속 | 338 | + |
| 354 | var chart3 = Highcharts.chart("container3", { | 339 | var chart3 = Highcharts.chart("container3", { |
| 355 | chart: { | 340 | chart: { |
| 356 | type: "spline", | 341 | type: "spline", |
| ... | @@ -362,13 +347,12 @@ | ... | @@ -362,13 +347,12 @@ |
| 362 | // var series = this.series[0]; | 347 | // var series = this.series[0]; |
| 363 | // setInterval(function () { | 348 | // setInterval(function () { |
| 364 | // var x = new Date().getTime(), // 현재 시간 | 349 | // var x = new Date().getTime(), // 현재 시간 |
| 365 | - // y = 0; // | 350 | + // y = Math.random(); // |
| 366 | // series.addPoint([x, y], true, true); | 351 | // series.addPoint([x, y], true, true); |
| 367 | - // }, 60000); //1000=1초 | 352 | + // }, 3000); //1000=1초 |
| 368 | - // } | ||
| 369 | // } | 353 | // } |
| 354 | + // }, | ||
| 370 | backgroundColor: "rgba(255, 255, 255, 0.0)" | 355 | backgroundColor: "rgba(255, 255, 255, 0.0)" |
| 371 | - | ||
| 372 | }, | 356 | }, |
| 373 | 357 | ||
| 374 | time: { | 358 | time: { |
| ... | @@ -381,9 +365,8 @@ | ... | @@ -381,9 +365,8 @@ |
| 381 | color: "#FFFFFF", | 365 | color: "#FFFFFF", |
| 382 | fontWeight: "bold", | 366 | fontWeight: "bold", |
| 383 | fontFamily: 'Yeon Sung', | 367 | fontFamily: 'Yeon Sung', |
| 384 | - fontSize: '25px' | 368 | + fontSize:'25px' |
| 385 | } | 369 | } |
| 386 | - | ||
| 387 | }, | 370 | }, |
| 388 | xAxis: { | 371 | xAxis: { |
| 389 | type: "datetime", | 372 | type: "datetime", |
| ... | @@ -393,7 +376,6 @@ | ... | @@ -393,7 +376,6 @@ |
| 393 | color: "white" | 376 | color: "white" |
| 394 | } | 377 | } |
| 395 | } | 378 | } |
| 396 | - | ||
| 397 | }, | 379 | }, |
| 398 | yAxis: { | 380 | yAxis: { |
| 399 | title: { | 381 | title: { |
| ... | @@ -401,7 +383,6 @@ | ... | @@ -401,7 +383,6 @@ |
| 401 | style: { | 383 | style: { |
| 402 | color: "white" | 384 | color: "white" |
| 403 | } | 385 | } |
| 404 | - | ||
| 405 | }, | 386 | }, |
| 406 | plotLines: [ | 387 | plotLines: [ |
| 407 | { | 388 | { |
| ... | @@ -419,7 +400,7 @@ | ... | @@ -419,7 +400,7 @@ |
| 419 | }, | 400 | }, |
| 420 | tooltip: { | 401 | tooltip: { |
| 421 | headerFormat: "<b>{series.name}</b><br/>", | 402 | headerFormat: "<b>{series.name}</b><br/>", |
| 422 | - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" | 403 | + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s" |
| 423 | }, | 404 | }, |
| 424 | legend: { | 405 | legend: { |
| 425 | //enabled: false | 406 | //enabled: false |
| ... | @@ -480,9 +461,8 @@ | ... | @@ -480,9 +461,8 @@ |
| 480 | 461 | ||
| 481 | color: "#FFE08C" | 462 | color: "#FFE08C" |
| 482 | } | 463 | } |
| 483 | - ] | 464 | + ] }); |
| 484 | - }); | 465 | + |
| 485 | - //강수량 | ||
| 486 | var chart4 = Highcharts.chart("container4", { | 466 | var chart4 = Highcharts.chart("container4", { |
| 487 | chart: { | 467 | chart: { |
| 488 | type: "spline", | 468 | type: "spline", |
| ... | @@ -494,13 +474,12 @@ | ... | @@ -494,13 +474,12 @@ |
| 494 | // var series = this.series[0]; | 474 | // var series = this.series[0]; |
| 495 | // setInterval(function () { | 475 | // setInterval(function () { |
| 496 | // var x = new Date().getTime(), // 현재 시간 | 476 | // var x = new Date().getTime(), // 현재 시간 |
| 497 | - // y = 0; // | 477 | + // y = Math.random(); // |
| 498 | // series.addPoint([x, y], true, true); | 478 | // series.addPoint([x, y], true, true); |
| 499 | - // }, 60000); //1000=1초 | 479 | + // }, 3000); //1000=1초 |
| 500 | - // } | ||
| 501 | // } | 480 | // } |
| 481 | + // }, | ||
| 502 | backgroundColor: "rgba(255, 255, 255, 0.0)" | 482 | backgroundColor: "rgba(255, 255, 255, 0.0)" |
| 503 | - | ||
| 504 | }, | 483 | }, |
| 505 | 484 | ||
| 506 | time: { | 485 | time: { |
| ... | @@ -513,9 +492,8 @@ | ... | @@ -513,9 +492,8 @@ |
| 513 | color: "#FFFFFF", | 492 | color: "#FFFFFF", |
| 514 | fontWeight: "bold", | 493 | fontWeight: "bold", |
| 515 | fontFamily: 'Yeon Sung', | 494 | fontFamily: 'Yeon Sung', |
| 516 | - fontSize: '25px' | 495 | + fontSize:'25px' |
| 517 | } | 496 | } |
| 518 | - | ||
| 519 | }, | 497 | }, |
| 520 | xAxis: { | 498 | xAxis: { |
| 521 | type: "datetime", | 499 | type: "datetime", |
| ... | @@ -525,7 +503,6 @@ | ... | @@ -525,7 +503,6 @@ |
| 525 | color: "white" | 503 | color: "white" |
| 526 | } | 504 | } |
| 527 | } | 505 | } |
| 528 | - | ||
| 529 | }, | 506 | }, |
| 530 | yAxis: { | 507 | yAxis: { |
| 531 | title: { | 508 | title: { |
| ... | @@ -533,7 +510,6 @@ | ... | @@ -533,7 +510,6 @@ |
| 533 | style: { | 510 | style: { |
| 534 | color: "white" | 511 | color: "white" |
| 535 | } | 512 | } |
| 536 | - | ||
| 537 | }, | 513 | }, |
| 538 | plotLines: [ | 514 | plotLines: [ |
| 539 | { | 515 | { |
| ... | @@ -551,7 +527,7 @@ | ... | @@ -551,7 +527,7 @@ |
| 551 | }, | 527 | }, |
| 552 | tooltip: { | 528 | tooltip: { |
| 553 | headerFormat: "<b>{series.name}</b><br/>", | 529 | headerFormat: "<b>{series.name}</b><br/>", |
| 554 | - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" | 530 | + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm" |
| 555 | }, | 531 | }, |
| 556 | legend: { | 532 | legend: { |
| 557 | //enabled: false | 533 | //enabled: false |
| ... | @@ -602,6 +578,7 @@ | ... | @@ -602,6 +578,7 @@ |
| 602 | rainArr.push({ | 578 | rainArr.push({ |
| 603 | x: time + i * 60000, | 579 | x: time + i * 60000, |
| 604 | y: temp | 580 | y: temp |
| 581 | + | ||
| 605 | }) | 582 | }) |
| 606 | i++; | 583 | i++; |
| 607 | 584 | ||
| ... | @@ -613,8 +590,44 @@ | ... | @@ -613,8 +590,44 @@ |
| 613 | 590 | ||
| 614 | } | 591 | } |
| 615 | ] | 592 | ] |
| 593 | + | ||
| 594 | + | ||
| 616 | }); | 595 | }); |
| 596 | + var socket = io.connect('/', { transports: ['websocket'], upgrade: false }); | ||
| 597 | + socket.emit("connection", client_data); | ||
| 598 | + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송 | ||
| 599 | + console.log(info); | ||
| 600 | + | ||
| 601 | + var date = new Date().getTime(); | ||
| 602 | + | ||
| 603 | + chart1.series[0].addPoint({ | ||
| 604 | + x: date, | ||
| 605 | + y: info.death | ||
| 606 | + }); | ||
| 607 | +console.log(chart1.series[0]) | ||
| 608 | + chart2.series[0].addPoint({ | ||
| 609 | + x: date, | ||
| 610 | + y: info.temperature*1 | ||
| 611 | + }); | ||
| 612 | + | ||
| 613 | +console.log(chart2.series[0]) | ||
| 614 | + chart3.series[0].addPoint({ | ||
| 615 | + x: date, | ||
| 616 | + y: info.wind*1 | ||
| 617 | + }); | ||
| 618 | + | ||
| 619 | +console.log(chart3.series[0]) | ||
| 620 | + chart4.series[0].addPoint({ | ||
| 621 | + x: date, | ||
| 622 | + y: info.rain*1 | ||
| 623 | + }); | ||
| 624 | +console.log(chart4.series[0]) | ||
| 625 | + | ||
| 626 | + }); | ||
| 627 | + | ||
| 617 | </script> | 628 | </script> |
| 629 | + </div> | ||
| 630 | + | ||
| 618 | </body> | 631 | </body> |
| 619 | 632 | ||
| 620 | -</html> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 633 | +</html> --> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -6,9 +6,9 @@ | ... | @@ -6,9 +6,9 @@ |
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 7 | <title>Page Title</title> | 7 | <title>Page Title</title> |
| 8 | 8 | ||
| 9 | -<!-- font --> | 9 | + <!-- font --> |
| 10 | -<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean" rel="stylesheet"> | 10 | + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean" rel="stylesheet"> |
| 11 | -<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean" rel="stylesheet"> | 11 | + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean" rel="stylesheet"> |
| 12 | 12 | ||
| 13 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 13 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 14 | <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> | 14 | <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> |
| ... | @@ -24,10 +24,19 @@ | ... | @@ -24,10 +24,19 @@ |
| 24 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | 24 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
| 25 | 25 | ||
| 26 | <style type="text/css"> | 26 | <style type="text/css"> |
| 27 | + html, | ||
| 28 | + { | ||
| 29 | + margin: 0; | ||
| 30 | + padding: 0; | ||
| 31 | + } | ||
| 32 | + | ||
| 27 | body { | 33 | body { |
| 28 | - background-image: url('images/background.jpg'); | 34 | + margin: 0; |
| 35 | + padding: 0; | ||
| 36 | + | ||
| 37 | + /* background-image: url('background.jpg'); | ||
| 29 | background-repeat: no-repeat; | 38 | background-repeat: no-repeat; |
| 30 | - background-size: cover; | 39 | + background-size: cover; */ |
| 31 | /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ | 40 | /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ |
| 32 | } | 41 | } |
| 33 | 42 | ||
| ... | @@ -41,6 +50,13 @@ | ... | @@ -41,6 +50,13 @@ |
| 41 | font-size: 20px; | 50 | font-size: 20px; |
| 42 | font-family: 'Yeon Sung', cursive; | 51 | font-family: 'Yeon Sung', cursive; |
| 43 | } | 52 | } |
| 53 | + | ||
| 54 | + #banner { | ||
| 55 | + position: absolute; | ||
| 56 | + top: 0; | ||
| 57 | + width: 100%; | ||
| 58 | + } | ||
| 59 | + | ||
| 44 | #footer { | 60 | #footer { |
| 45 | position: absolute; | 61 | position: absolute; |
| 46 | bottom: 0; | 62 | bottom: 0; |
| ... | @@ -48,14 +64,16 @@ | ... | @@ -48,14 +64,16 @@ |
| 48 | height: 50px; | 64 | height: 50px; |
| 49 | text-align: center; | 65 | text-align: center; |
| 50 | font-family: 'Yeon Sung', cursive; | 66 | font-family: 'Yeon Sung', cursive; |
| 51 | - color:white; | 67 | + color: white; |
| 52 | } | 68 | } |
| 53 | </style> | 69 | </style> |
| 54 | 70 | ||
| 55 | </head> | 71 | </head> |
| 56 | 72 | ||
| 57 | <body> | 73 | <body> |
| 58 | - <div style="width:100%; text-align: center; margin-top:170px;"> | 74 | + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> |
| 75 | + <div id="banner"> | ||
| 76 | + <div style="width:100%; text-align: center; padding-top:170px;"> | ||
| 59 | <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> | 77 | <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> |
| 60 | </div> | 78 | </div> |
| 61 | <br><br><br> | 79 | <br><br><br> |
| ... | @@ -64,7 +82,7 @@ | ... | @@ -64,7 +82,7 @@ |
| 64 | <div class="form-inline"> | 82 | <div class="form-inline"> |
| 65 | <label>이름</label> | 83 | <label>이름</label> |
| 66 | <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;"> | 84 | <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;"> |
| 67 | -      | 85 | +       |
| 68 | <label>생년월일</label> | 86 | <label>생년월일</label> |
| 69 | <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;"> | 87 | <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;"> |
| 70 | <br><br><br> | 88 | <br><br><br> |
| ... | @@ -73,6 +91,8 @@ | ... | @@ -73,6 +91,8 @@ |
| 73 | </form> | 91 | </form> |
| 74 | </div> | 92 | </div> |
| 75 | 93 | ||
| 94 | + </div> | ||
| 95 | + | ||
| 76 | <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> | 96 | <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> |
| 77 | </body> | 97 | </body> |
| 78 | 98 | ... | ... |
views/re.ejs
0 → 100644
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment