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