이승규

미래예측 구현완료

No preview for this file type
This diff is collapsed. Click to expand it.
...@@ -5,12 +5,12 @@ var db = require('../lib/db'); ...@@ -5,12 +5,12 @@ var db = require('../lib/db');
5 /* GET home page. */ 5 /* GET home page. */
6 6
7 router.post('/starting' , (req,res) => { 7 router.post('/starting' , (req,res) => {
8 - res.redirect(`/Cname/${req.body.name}/Cbirth/${req.body.birth}`); 8 + if (req.body.action == "운명보기")
9 -}) 9 + res.redirect(`/Cname/${req.body.name}/Cbirth/${req.body.birth}`);
10 -//예보 추가 10 + else if (req.body.action == "미래확인")
11 -router.post('/forecasting' , (req,res) =>{ 11 + res.redirect(`/Fname/${req.body.name}/Fbirth/${req.body.birth}`);
12 - res.redirect(`/Fname/${req.body.name}/Fbirth/${req.body.birth}`); 12 + console.log(req.body.action);
13 -}) 13 +});
14 14
15 router.get('/Fname/:name/Fbirth/:birth',(req,res)=>{ 15 router.get('/Fname/:name/Fbirth/:birth',(req,res)=>{
16 16
...@@ -131,7 +131,7 @@ router.get('/Cname/:name/Cbirth/:birth', (req,res) => { ...@@ -131,7 +131,7 @@ router.get('/Cname/:name/Cbirth/:birth', (req,res) => {
131 dataLen, 131 dataLen,
132 name, 132 name,
133 birth, 133 birth,
134 - factorArr, 134 + factorArr
135 }); 135 });
136 } 136 }
137 }); 137 });
......
...@@ -175,13 +175,11 @@ ...@@ -175,13 +175,11 @@
175 }) 175 })
176 i++; 176 i++;
177 } 177 }
178 - 178 +
179 - 179 + <% for(var n = 0; n < factorArr.length; n++) {%>
180 - <% for(var n; n < probArr.length; n++) {%>
181 var temp, temp2; 180 var temp, temp2;
182 temp = <%=probArr[n] %>; 181 temp = <%=probArr[n] %>;
183 - temp2 = '<%= factorArr[n] %>'; 182 + temp2 = '<%=factorArr[n] %>';
184 -
185 183
186 // for(;j<10;j++) 184 // for(;j<10;j++)
187 // { 185 // {
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 25 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
26 26
27 <style type="text/css"> 27 <style type="text/css">
28 - html, 28 + html
29 { 29 {
30 margin: 0; 30 margin: 0;
31 padding: 0; 31 padding: 0;
...@@ -88,15 +88,12 @@ ...@@ -88,15 +88,12 @@
88 <label>생년월일</label> 88 <label>생년월일</label>
89 <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;" minlength="6" maxlength="6"> 89 <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;" minlength="6" maxlength="6">
90 <br><br><br> 90 <br><br><br>
91 - <input type="submit" value="운명보기" class="btn btn-danger" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 91 + <input type="submit" name="action" value="운명보기" class="btn btn-danger" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
92 + <br><br>
93 + <input type="submit" name="action" value="미래확인" class="btn btn-danger" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
92 </div> 94 </div>
93 95
94 </form> 96 </form>
95 - <form action="/forecasting" method="post">
96 - <div class="/forecasting" method="post">
97 - <input type="submit" value="미래확인" class="btn btn-default" style="...">
98 - </div>
99 - </form>
100 </div> 97 </div>
101 98
102 </div> 99 </div>
......
1 +<!DOCTYPE html>
1 <head> 2 <head>
2 <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" /> 3 <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
3 <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" /> 4 <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
...@@ -13,6 +14,17 @@ ...@@ -13,6 +14,17 @@
13 body { 14 body {
14 margin: 0; 15 margin: 0;
15 padding: 0; 16 padding: 0;
17 + margin-left:0px;
18 + margin-top:0px;
19 + margin-right:0px;
20 + margin-bottom:0px;
21 + width : 100%;
22 + font-size: 3.0em;
23 + line-height: 3.0em;
24 + font-weight : bold;
25 + font-family: Yeon Sung;
26 + text-align:center;
27 + color: white;
16 28
17 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ 29 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
18 /* background-color:#65799B; */ 30 /* background-color:#65799B; */
...@@ -20,6 +32,15 @@ ...@@ -20,6 +32,15 @@
20 background-repeat: no-repeat; 32 background-repeat: no-repeat;
21 background-size: cover; */ 33 background-size: cover; */
22 } 34 }
35 +
36 +
37 +
38 + #center_top1 {position:absolute; top:100px; left:630px; height :25%; overflow:hidden; }
39 +
40 + #center_top2 {position:absolute; top:300px; left:600px; height :25%; overflow:hidden;}
41 +
42 + #center_top3 {position:absolute; top:500px; left:400px; height :25%; overflow:hidden;}
43 +
23 #banner { 44 #banner {
24 position: absolute; 45 position: absolute;
25 top: 0; 46 top: 0;
...@@ -29,21 +50,66 @@ ...@@ -29,21 +50,66 @@
29 </style> 50 </style>
30 </head> 51 </head>
31 <body> 52 <body>
32 - <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"width="50%" height="100%"> 53 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"width="50%" height="100%">
54 +
55 + <div id = "center_top1">
56 + (사용자정보) 님은
57 + </div>
58 + <div id = "center_top2">
59 + <div id = "timerTxt"></div>
60 + </div>
61 + <div id = "center_top3">
62 + (사고 요인)로 인해 사망
63 + </div>
64 +
65 + <script src="/socket.io/socket.io.js"></script>
66 + <script type = "text/javascript">
67 +
68 + var deathNote;
69 + var timerId;
70 + var timerSec;
71 +
72 + let client_data = {
73 + birth: "<%=birth%>",
74 + name: "<%=name%>"
75 + }
76 +
77 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
78 + socket.emit("connection", client_data);
79 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
80 +
81 + // 첫 메세지를 받았을 때 페이지에 정보를 띄워줌
82 + if (deathNote == undefined) {
83 + deathNote = info.deathnote;
84 +
85 + timerSec = deathNote.hours*3600 + deathNote.minutes*60 + deathNote.seconds;
86 + timerId = setInterval('timer()', 1000);
33 87
34 - <div class="menu"> 88 + document.getElementById('center_top1').innerHTML = client_data.name + " 님은";
89 + document.getElementById('center_top3').innerHTML = deathNote.factor + " 합니다.";
35 90
36 - <a id ="home">Home</a> 91 + }
37 - <a id ="paris">Paris</a> 92 + console.log(deathNote);
38 - <a id ="seoul">Seoul</a> 93 + });
39 - <a id ="tokyo">Tokyo</a>
40 - </div>
41 94
95 + // 타이머
96 +
97 + function timer(){
98 + var min = Math.floor(timerSec / 60) % 60;
99 + var sec = timerSec % 60;
100 + var hour = Math.floor(timerSec / 3600)
101 +
102 + var msg = (hour < 10 ? "0" + hour : hour) + ":" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec) + " 후에";
103 + timerSec--;
104 +
105 + if (timerSec < 0){ // time end
106 + clearInterval(timerId);
107 + }
108 +
109 + document.getElementById("timerTxt").innerHTML = msg ;
110 + }
111 +
112 + </script>
113 +
114 + </body>
42 115
43 - <img id ="photo" src="../image/home.png" width="50%" height="50%">
44 - <script
45 - src="https://code.jquery.com/jquery-3.4.1.js"
46 - integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
47 - crossorigin="anonymous"></script>
48 - <script src="../js/kts.js"type="text/javascript"></script>
49 -</body>
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <style type = "text/css">
5 + body {margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; width : 100%; font-size: 3.0em; line-height: 3.0em; font-weight : bold; font-family: Yeon Sung; text-align:center; color:white; background-image:url(../public/images/indexWallpaper.jpg); }
6 +
7 +
8 + #center_top1 {position:absolute; top:50px; left:550px; height :25%; overflow:hidden; }
9 +
10 + #center_top2 {position:absolute; top:200px; left:600px; height :25%; overflow:hidden;}
11 + #center_top3 {position:absolute; top:350px; left:500px; height :25%; overflow:hidden;}
12 +
13 + #center_top4 {position:absolute; top:500px; left:670px; height :25%; overflow:hidden; }
14 + </style>
15 + </head>
16 +
17 + <body>
18 +
19 + <div id = "center_top1">
20 + (사용자정보) 님은
21 + </div>
22 + <div id = "center_top2">
23 + <div id = "timerTxt"></div>
24 + </div>
25 + <div id = "center_top3">
26 + (사고 요인)로 인해 사망
27 + </div>
28 + <div id = "center_top4">
29 + 합니다.
30 + </div>
31 +
32 + <script type = "text/javascript">
33 + var timerId;
34 + var timerSec = 3;
35 +
36 + window.onload = function(){
37 + timerId = setInterval('timer()', 1000);
38 + }
39 +
40 + function timer(){
41 + var min = Math.floor(timerSec / 60)
42 + var sec = timerSec % 60;
43 + var hour = Math.floor(timerSec / 3600)
44 +
45 + var msg = (hour < 10 ? "0" + hour : hour) + ":" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
46 + timerSec--;
47 +
48 + if (timerSec < 0){ // time end
49 + clearInterval(timerId);
50 + }
51 +
52 + document.getElementById("timerTxt").innerHTML = msg ;
53 + }
54 +
55 + </script>
56 +
57 + </body>
58 +</html>
...\ No newline at end of file ...\ No newline at end of file