김윤지 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
김윤지
7e537c45 2 parents ea17df59 b8042ec6

Merge branch 'master' into 'master' 

데이터 전송 안되는것 수정, 그래프 추가

데이터 전송 안되는것 수정, 그래프 추가

See merge request !8
Inline Side-by-side
Showing 8 changed files with 355 additions and 295 deletions
...@@ -39,6 +39,7 @@ build/Release ...@@ -39,6 +39,7 @@ build/Release
39 # Dependency directories 39 # Dependency directories
40 node_modules/ 40 node_modules/
41 jspm_packages/ 41 jspm_packages/
42 +keys/
42 # TypeScript v1 declaration files 43 # TypeScript v1 declaration files
43 typings/ 44 typings/
44 45
......
1 -module.exports = {
2 - key: "aaaa"
3 -}
4 -//개인 Server Key 받아서 사용해야함, Browser key 안됨
...\ No newline at end of file ...\ No newline at end of file
1 -module.exports = {
2 - key: "aaaa"
3 -}
1 -module.exports = {
2 - host: 'localhost',
3 - user: 'root',
4 - password: 'Serrmica0!',
5 - database: 'db_option_total'
6 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,8 +4,8 @@ const secret_key_traffic = require('../keys/api_option_traffic').key; ...@@ -4,8 +4,8 @@ const secret_key_traffic = require('../keys/api_option_traffic').key;
4 4
5 const requesting = require('request'); 5 const requesting = require('request');
6 6
7 -const lat = "37.54922931758";//"37.239795"; //weather 위도 7 +const lat = "37.54922931758"; //weather 위도
8 -const lon = "126.913415969472";//"127.083240"; //weather 경도 8 +const lon = "126.913415969472"; //weather 경도
9 const sido_num = "11"; //traffic 법정동 시도 코드 9 const sido_num = "11"; //traffic 법정동 시도 코드
10 const gugun_num = "440"; //traffic 법정동 시군구 코드 - 합정동 일대 10 const gugun_num = "440"; //traffic 법정동 시군구 코드 - 합정동 일대
11 const search_year = "2018074"; //traffic 검색을 원하는 연도 11 const search_year = "2018074"; //traffic 검색을 원하는 연도
...@@ -42,17 +42,18 @@ module.exports = (server, app) => { ...@@ -42,17 +42,18 @@ module.exports = (server, app) => {
42 json: true 42 json: true
43 }, 43 },
44 //api에게 응답 받았을때 실행되는 callback function 44 //api에게 응답 받았을때 실행되는 callback function
45 - function (err, api_res, api_body) { 45 + function (err1, api_res1, api_body1) {
46 //err 존재시 promise reject 호출 46 //err 존재시 promise reject 호출
47 - if (err) reject(err); 47 + if (err1) reject(err1);
48 48
49 // api의 response이 있을경우 promise resolve 호출 49 // api의 response이 있을경우 promise resolve 호출
50 - if (api_res) { 50 + if (api_res1) {
51 console.log("calling weather api"); 51 console.log("calling weather api");
52 - resolve(api_body); 52 + resolve(api_body1);
53 } 53 }
54 }); 54 });
55 - }) 55 +
56 + }) //Promise
56 } 57 }
57 58
58 59
...@@ -63,12 +64,6 @@ module.exports = (server, app) => { ...@@ -63,12 +64,6 @@ module.exports = (server, app) => {
63 requesting.get({ 64 requesting.get({
64 // api를 요청할 주소 -- 시크릿키,위도,경도 입력 65 // api를 요청할 주소 -- 시크릿키,위도,경도 입력
65 url: `http://apis.data.go.kr/B552061/${cate1}/${cate2}?ServiceKey=${secret_key_traffic}&searchYearCd=${search_year}&siDo=${sido_num}&guGun=${gugun_num}&type=json&numOfRows=1&pageNo=1`, 66 url: `http://apis.data.go.kr/B552061/${cate1}/${cate2}?ServiceKey=${secret_key_traffic}&searchYearCd=${search_year}&siDo=${sido_num}&guGun=${gugun_num}&type=json&numOfRows=1&pageNo=1`,
66 - //나중에 삭제 http://apis.data.go.kr/B552061/frequentzoneLg/getRestFrequentzoneLg?ServiceKey=XOLqI9tY4gVCdk1i2BoOM3EYmSUYqt8WlXUfIDSfD4RnNBrFwwthbNAtGOxoskP540JbUAzcnuABsydoE2U2dA%3D%3D&searchYearCd=2017&siDo=11&guGun=200&type=json&numOfRows=10&pageNo=1
67 - //나중에 삭제 http://apis.data.go.kr/B552061/frequentzoneLg/getRestFrequentzoneLg?ServiceKey=XOLqI9tY4gVCdk1i2BoOM3EYmSUYqt8WlXUfIDSfD4RnNBrFwwthbNAtGOxoskP540JbUAzcnuABsydoE2U2dA%3D%3D&searchYearCd=2018074&siDo=11&guGun=440&type=json&numOfRows=10&pageNo=1
68 - //sido = 11 gugun = 440 (마포구 합정동, 도화동, 도화동)
69 - //cate1 = frequentzoneLg
70 - //cate2 = getRestFrequentzoneLg
71 - //xml: true
72 json: true 67 json: true
73 }, 68 },
74 //api에게 응답 받았을때 실행되는 callback function 69 //api에게 응답 받았을때 실행되는 callback function
...@@ -82,104 +77,117 @@ module.exports = (server, app) => { ...@@ -82,104 +77,117 @@ module.exports = (server, app) => {
82 resolve(api_body); 77 resolve(api_body);
83 } 78 }
84 }); 79 });
85 - }) 80 + }) //Promise
86 } 81 }
87 82
88 const API_bundle = async () => { 83 const API_bundle = async () => {
89 -
90 try { 84 try {
91 - Current_Weather = await req_API("current", "minutely"); //현재날씨 (분별) //when, what 85 + var order = 0;
92 - Sensible_T = await req_API("index", "wct"); //체감온도 86 + while (order < 2) {
93 - Heat_index = await req_API("index", "heat"); //열지수 87 + switch (order) {
94 - Discomport_index = await req_API("index", "th"); //불쾌지수 88 + case 0:
95 - Ultra_Violet_index = await req_API("index", "uv"); //자외선지수 89 + console.log("APIWait - WAITING FOR ALL API");
96 - 90 + Current_Weather = await req_API("current", "minutely"); //현재날씨 (분별) //when, what
97 - Current_TrafficAcc = await req_API_traffic("frequentzoneLg", "getRestFrequentzoneLg"); //cate1, cate2 91 + Sensible_T = await req_API("index", "wct"); //체감온도
98 - 92 + Heat_index = await req_API("index", "heat"); //열지수
99 - info = { 93 + Discomport_index = await req_API("index", "th"); //불쾌지수
100 - heat: Heat_index.weather.wIndex.heatIndex[0].current.index, //열지수 94 + Ultra_Violet_index = await req_API("index", "uv"); //자외선지수
101 - sensible_temperature: Sensible_T.weather.wIndex.wctIndex[0].current.index, //체감온도 95 + Current_TrafficAcc = await req_API_traffic("frequentzoneLg", "getRestFrequentzoneLg"); //cate1, cate2
102 - discomport: Discomport_index.weather.wIndex.thIndex[0].current.index, //불쾌지수 96 + order = 1;
103 - UV: Ultra_Violet_index.weather.wIndex.uvindex[0].day01.index, //자외선지수 97 + break;
104 - windspd: Current_Weather.weather.minutely[0].wind.wspd, //바람 속도 98 + case 1:
105 - sky: Current_Weather.weather.minutely[0].sky.code, //하늘 상태 99 + console.log("APIDataProcess - CALLING INFO");
106 - rain: Current_Weather.weather.minutely[0].rain.last24hour, //강수량 100 + info = {
107 - current_temperature: Current_Weather.weather.minutely[0].temperature.tc, //현재 온도 101 + heat: Heat_index.weather.wIndex.heatIndex[0].current.index, //열지수
108 - lightning: Current_Weather.weather.minutely[0].lightning, //현재 낙뢰 102 + sensible_temperature: Sensible_T.weather.wIndex.wctIndex[0].current.index, //체감온도
109 - warning: Current_Weather.common.alertYn, //현재 특보 유무 103 + discomport: Discomport_index.weather.wIndex.thIndex[0].current.index, //불쾌지수
110 - typhoon: Current_Weather.common.stormYn, //현재 태풍 104 + UV: Ultra_Violet_index.weather.wIndex.uvindex[0].day01.index, //자외선지수
111 - time: Current_Weather.weather.minutely[0].timeObservation, // 불러온 시각 105 + windspd: Current_Weather.weather.minutely[0].wind.wspd, //바람 속도
112 - death_prob: 0, //확률 106 + sky: Current_Weather.weather.minutely[0].sky.code, //하늘 상태
113 - death_number: Current_TrafficAcc.items.item[0].dth_dnv_cnt, //사망자 수 107 + rain: Current_Weather.weather.minutely[0].rain.last24hour, //강수량
114 - midhurt_number: Current_TrafficAcc.items.item[0].se_dnv_cnt, //중상자 수 108 + current_temperature: Current_Weather.weather.minutely[0].temperature.tc, //현재 온도
115 - lighthurt_number: Current_TrafficAcc.items.item[0].sl_dnv_cnt, //경상자 수 109 + lightning: Current_Weather.weather.minutely[0].lightning, //현재 낙뢰
116 - occur_number: Current_TrafficAcc.items.item[0].occrrnc_cnt //발생건수 110 + warning: Current_Weather.common.alertYn, //현재 특보 유무
117 - //"spot_cd": "11440001" 111 + typhoon: Current_Weather.common.stormYn, //현재 태풍
118 - } 112 + time: Current_Weather.weather.minutely[0].timeObservation, // 불러온 시각
119 - console.log("API INFO \n", info); 113 + death_prob: 0, //확률
120 - 114 + death_number: Current_TrafficAcc.items.item[0].dth_dnv_cnt, //사망자 수
121 - // ------------------------------ death_prob 정의 ------------------------------ 115 + midhurt_number: Current_TrafficAcc.items.item[0].se_dnv_cnt, //중상자 수
122 - 116 + lighthurt_number: Current_TrafficAcc.items.item[0].sl_dnv_cnt, //경상자 수
123 - info.death_prob += info.sky.substr(5) * 1 //하늘 상태에 따라 확률 증가 117 + occur_number: Current_TrafficAcc.items.item[0].occrrnc_cnt //발생건수
124 - 118 + //"spot_cd": "11440001"
125 - if (info.lightning === 1) //낙뢰시에 확률 증가 119 + }
126 - info.death_prob += 1.5; 120 + console.log("API INFO \n", info);
127 - if (info.typhoon === "Y") //태풍시에 확률 증가 121 +
128 - info.death_prob += 1.5; 122 + // ------------------------------ death_prob 정의 ------------------------------
129 - if (info.warning === "Y") // 특보 발령시 확률 증가 123 +
130 - info.death_prob += 1 124 + info.death_prob += info.sky.substr(5) * 1 //하늘 상태에 따라 확률 증가
131 - 125 +
132 - //죽을 확률 계산(내맘대로 커스텀) 126 + if (info.lightning === 1) //낙뢰시에 확률 증가
133 - info.death_prob = ( 127 + info.death_prob += 1.5;
134 - (info.heat / 50) + (Math.abs(info.sensible_temperature - 15) / 10) + (info.discomport / 10) + (info.UV / 10) 128 + if (info.typhoon === "Y") //태풍시에 확률 증가
135 - + info.windspd * 1 + (info.rain / 10) + (Math.abs(info.current_temperature - 15) / 10) 129 + info.death_prob += 1.5;
136 - + (info.death_number / 60) + (info.midhurt_number / 80) + (info.lighthurt_number / 90) + (info.occur_number / 90) 130 + if (info.warning === "Y") // 특보 발령시 확률 증가
137 - ); 131 + info.death_prob += 1
138 - 132 +
139 - //이벤트 기반으로 일정 시간 간격으로 클라이언트에게 보낼 정보, 홈페이지 그래프에 나타날 정보 133 + //죽을 확률 계산(내맘대로 커스텀)
140 - client_send = { 134 + info.death_prob = (
141 - time: info.time, 135 + (info.heat / 50) + (Math.abs(info.sensible_temperature - 15) / 10) + (info.discomport / 10) + (info.UV / 10)
142 - wind: info.windspd, 136 + + info.windspd * 1 + (info.rain / 10) + (Math.abs(info.current_temperature - 15) / 10)
143 - temperature: info.current_temperature, 137 + + (info.death_number / 60) + (info.midhurt_number / 80) + (info.lighthurt_number / 90) + (info.occur_number / 90)
144 - rain: info.rain, 138 + );
145 - death: info.death_prob, 139 +
146 - trafficdeath: info.death_number, 140 + //이벤트 기반으로 일정 시간 간격으로 클라이언트에게 보낼 정보, 홈페이지 그래프에 나타날 정보
147 - mhurt: info.midhurt_number, 141 + client_send = {
148 - lhurt: info.lighthurt_number, 142 + time: info.time,
149 - occurence: info.occur_number 143 + wind: info.windspd,
150 - }; 144 + temperature: info.current_temperature,
151 - function getRandom_add_prob(min, max) { 145 + rain: info.rain,
152 - return Math.random() * (max - min) + min; 146 + death: info.death_prob,
153 - } 147 + trafficdeath: info.death_number,
154 - 148 + mhurt: info.midhurt_number,
155 - 149 + lhurt: info.lighthurt_number,
156 - // 심장이 크게 뛰며 확률이 증가하거나 감소 할 수 있음 150 + occurence: info.occur_number
157 - Math.random() * 2 >= 1 ? client_send.death += getRandom_add_prob(0, 5) : client_send.death -= getRandom_add_prob(0, 5); 151 + };
158 - 152 + function getRandom_add_prob(min, max) {
159 - 153 + return Math.random() * (max - min) + min;
160 - //운명의 장난으로 죽을 확률이 증가하거나 감소함 154 + }
161 - const rand = Math.floor(Math.random() * 6) //생년월일 중 한자리 뽑음 155 +
162 - 156 +
163 - Destiny = client_birth.charAt(rand) / 3; //명시적 형 변환 157 + // 심장이 크게 뛰며 확률이 증가하거나 감소 할 수 있음
164 - if (Destiny == 0) Destiny = 1; //사용자 잘못 입력했을때 예외처리 158 + Math.random() * 2 >= 1 ? client_send.death += getRandom_add_prob(0, 5) : client_send.death -= getRandom_add_prob(0, 5);
165 - Math.random() * 2 >= 1 ? client_send.death += Destiny : client_send.death -= Destiny; 159 +
166 - 160 +
167 - 161 + //운명의 장난으로 죽을 확률이 증가하거나 감소함
168 - //만약 날이 너무 안좋아서 확률이 100을 넘긴다면 100으로 예외처리 162 + const rand = Math.floor(Math.random() * 6) //생년월일 중 한자리 뽑음
169 - if (client_send.death >= 100) { 163 +
170 - client_send.death = 100; 164 + Destiny = client_birth.charAt(rand) / 3; //명시적 형 변환
171 - } 165 + if (Destiny == 0) Destiny = 1; //사용자 잘못 입력했을때 예외처리
172 - 166 + Math.random() * 2 >= 1 ? client_send.death += Destiny : client_send.death -= Destiny;
173 - console.log("client send data \n", client_send) 167 +
174 - 168 +
175 - app.get("socket").emit("weather_and_traffic_Info_minutely_send_to_client", client_send); // 클라이언트에게 정보 담아서 이벤트 발산 169 + //만약 날이 너무 안좋아서 확률이 100을 넘긴다면 100으로 예외처리
176 - console.log("emit"); 170 + if (client_send.death >= 100) {
177 - 171 + client_send.death = 100;
178 - //db에 저장 172 + }
179 - sql = "INSERT INTO apisInfo (time,wind,temperature,rain,prob,tdeath,mhurt,lhurt,occurence) VALUES (?,?,?,?,?,?,?,?,?)"; 173 +
180 - db_total.query(sql, [client_send.time, client_send.wind, client_send.temperature, client_send.rain, client_send.death, client_send.trafficdeath, client_send.mhurt, client_send.lhurt, client_send.occurence], (err, result) => { 174 + console.log("client send data \n", client_send)
181 - if (err) console.log(err); 175 +
182 - }) 176 + app.get("socket").emit("weather_and_traffic_Info_minutely_send_to_client", client_send); // 클라이언트에게 정보 담아서 이벤트 발산
177 + console.log("emit");
178 +
179 + //db에 저장
180 + sql = "INSERT INTO apisInfo (time,wind,temperature,rain,prob,tdeath,mhurt,lhurt,occurence) VALUES (?,?,?,?,?,?,?,?,?)";
181 + db_total.query(sql, [client_send.time, client_send.wind, client_send.temperature, client_send.rain, client_send.death, client_send.trafficdeath, client_send.mhurt, client_send.lhurt, client_send.occurence], (err, result) => {
182 + if (err) console.log(err);
183 + })
184 + order = 2;
185 + break;
186 + default:
187 + order = 3;
188 + break;
189 + }//switch
190 + }; //while
183 191
184 } catch (err) { //promise err or try err catch 192 } catch (err) { //promise err or try err catch
185 console.log("================Error Occured !!================\n", err); 193 console.log("================Error Occured !!================\n", err);
......
...@@ -4,8 +4,8 @@ var db = require('../lib/db_total'); ...@@ -4,8 +4,8 @@ var db = require('../lib/db_total');
4 4
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(`/name/${req.body.name}/birth/${req.body.birth}`); 8 + res.redirect(`/name/${req.body.name}/birth/${req.body.birth}`);
9 }) 9 })
10 router.get('/name/:name/birth/:birth', (req, res) => { 10 router.get('/name/:name/birth/:birth', (req, res) => {
11 11
...@@ -23,10 +23,10 @@ router.get('/name/:name/birth/:birth', (req, res) => { ...@@ -23,10 +23,10 @@ router.get('/name/:name/birth/:birth', (req, res) => {
23 const birth = req.params.birth; 23 const birth = req.params.birth;
24 //const address = req.params.address; 24 //const address = req.params.address;
25 //////////////////////////////////////// 25 ////////////////////////////////////////
26 - var deathArr = new Array(); 26 + var tdeathArr = new Array(); //사망자수
27 - var mhurtArr = new Array(); 27 + var mhurtArr = new Array(); //중상자수
28 - var lhurtArr = new Array(); 28 + var lhurtArr = new Array(); //경상자수
29 - var occurArr = new Array(); 29 + var occurArr = new Array(); //총 발생수
30 //////////////////////////////////////// 30 ////////////////////////////////////////
31 31
32 32
...@@ -48,7 +48,7 @@ router.get('/name/:name/birth/:birth', (req, res) => { ...@@ -48,7 +48,7 @@ router.get('/name/:name/birth/:birth', (req, res) => {
48 wsArr.unshift(rows[i].wind); 48 wsArr.unshift(rows[i].wind);
49 rainArr.unshift(rows[i].rain); 49 rainArr.unshift(rows[i].rain);
50 //// 50 ////
51 - deathArr.unshift(rows[i].tdeath); 51 + tdeathArr.unshift(rows[i].tdeath);
52 mhurtArr.unshift(rows[i].mhurt); 52 mhurtArr.unshift(rows[i].mhurt);
53 lhurtArr.unshift(rows[i].lhurt); 53 lhurtArr.unshift(rows[i].lhurt);
54 occurArr.unshift(rows[i].occurence); 54 occurArr.unshift(rows[i].occurence);
...@@ -71,7 +71,7 @@ router.get('/name/:name/birth/:birth', (req, res) => { ...@@ -71,7 +71,7 @@ router.get('/name/:name/birth/:birth', (req, res) => {
71 dataLen, 71 dataLen,
72 name, 72 name,
73 birth, 73 birth,
74 - deathArr, 74 + tdeathArr,
75 mhurtArr, 75 mhurtArr,
76 lhurtArr, 76 lhurtArr,
77 occurArr 77 occurArr
......
...@@ -3,12 +3,10 @@ ...@@ -3,12 +3,10 @@
3 <head> 3 <head>
4 <!-- font --> 4 <!-- font -->
5 <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" /> 5 <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
6 - <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" /> 6 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
7 -
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1" />
10 <title>Highcharts Example</title> 9 <title>Highcharts Example</title>
11 -
12 <style type="text/css"> 10 <style type="text/css">
13 html { 11 html {
14 margin: 0; 12 margin: 0;
...@@ -17,10 +15,9 @@ ...@@ -17,10 +15,9 @@
17 body { 15 body {
18 margin: 0; 16 margin: 0;
19 padding: 0; 17 padding: 0;
20 -
21 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ 18 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
22 /* background-color:#65799B; */ 19 /* background-color:#65799B; */
23 - /* background-image: url("2.jpg"); 20 + /* background-image: url("2.jpg"); */
24 background-repeat: no-repeat; 21 background-repeat: no-repeat;
25 background-size: cover; */ 22 background-size: cover; */
26 } 23 }
...@@ -29,20 +26,15 @@ ...@@ -29,20 +26,15 @@
29 top: 0; 26 top: 0;
30 width: 100%; 27 width: 100%;
31 } 28 }
32 -
33 </style> 29 </style>
34 </head> 30 </head>
35 -
36 <body> 31 <body>
37 <script src="highcharts.js"></script> 32 <script src="highcharts.js"></script>
38 <script src="modules/exporting.js"></script> 33 <script src="modules/exporting.js"></script>
39 <script src="modules/export-data.js"></script> 34 <script src="modules/export-data.js"></script>
40 -
41 <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> 35 <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
42 -
43 <div id="banner"> 36 <div id="banner">
44 <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div> 37 <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
45 -
46 <div style="width:1275px; margin:0 auto;"> 38 <div style="width:1275px; margin:0 auto;">
47 <div style="display: inline-block;"> 39 <div style="display: inline-block;">
48 <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div> 40 <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
...@@ -50,12 +42,13 @@ ...@@ -50,12 +42,13 @@
50 <div style="display: inline-block;"> 42 <div style="display: inline-block;">
51 <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div> 43 <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
52 </div> 44 </div>
53 -
54 <div style="display: inline-block;"> 45 <div style="display: inline-block;">
55 <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div> 46 <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
56 </div> 47 </div>
48 + <div style="display: inline-block;">
49 + <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
50 + </div>
57 </div> 51 </div>
58 -
59 <script src="/socket.io/socket.io.js"></script> 52 <script src="/socket.io/socket.io.js"></script>
60 <script type="text/javascript"> 53 <script type="text/javascript">
61 let client_data = { 54 let client_data = {
...@@ -63,7 +56,6 @@ ...@@ -63,7 +56,6 @@
63 name: "<%=name%>" 56 name: "<%=name%>"
64 } 57 }
65 58
66 -
67 var chart1 = Highcharts.chart("container1", { 59 var chart1 = Highcharts.chart("container1", {
68 chart: { 60 chart: {
69 type: "spline", 61 type: "spline",
...@@ -75,25 +67,22 @@ ...@@ -75,25 +67,22 @@
75 // var series = this.series[0]; 67 // var series = this.series[0];
76 // setInterval(function () { 68 // setInterval(function () {
77 // var x = new Date().getTime(), // 현재 시간 69 // var x = new Date().getTime(), // 현재 시간
78 - // y = Math.random(); //여기에 새로 넣을 값 70 + // y = Math.random(); //여기에 새로 넣을 값(실시간 사망률)
79 // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true); 71 // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
80 // }, 1000); //1000=1초 -> 1분=60000 72 // }, 1000); //1000=1초 -> 1분=60000
81 // } 73 // }
82 // }, 74 // },
83 -
84 backgroundColor: "rgba(255, 255, 255, 0.0)" 75 backgroundColor: "rgba(255, 255, 255, 0.0)"
85 }, 76 },
86 -
87 time: { 77 time: {
88 useUTC: false 78 useUTC: false
89 }, 79 },
90 -
91 title: { 80 title: {
92 text: "<%=name%>님의 실시간 사망 확률", 81 text: "<%=name%>님의 실시간 사망 확률",
93 style: { 82 style: {
94 color: "#FFFFFF", 83 color: "#FFFFFF",
95 - fontWeight: "bold", 84 + //fontWeight: "bold",
96 - fontFamily: 'Yeon Sung', 85 + fontFamily: 'Do Hyeon',
97 fontSize:'32px' 86 fontSize:'32px'
98 } 87 }
99 }, 88 },
...@@ -113,7 +102,6 @@ ...@@ -113,7 +102,6 @@
113 color: "white" 102 color: "white"
114 } 103 }
115 }, 104 },
116 -
117 plotLines: [ 105 plotLines: [
118 { 106 {
119 value: 0, 107 value: 0,
...@@ -126,7 +114,6 @@ ...@@ -126,7 +114,6 @@
126 color: "white" 114 color: "white"
127 } 115 }
128 } 116 }
129 -
130 }, 117 },
131 tooltip: { 118 tooltip: {
132 headerFormat: "<b>{series.name}</b><br/>", 119 headerFormat: "<b>{series.name}</b><br/>",
...@@ -148,7 +135,6 @@ ...@@ -148,7 +135,6 @@
148 exporting: { 135 exporting: {
149 enabled: false 136 enabled: false
150 }, 137 },
151 -
152 plotOptions: { 138 plotOptions: {
153 series: { 139 series: {
154 marker: { 140 marker: {
...@@ -156,7 +142,6 @@ plotOptions: { ...@@ -156,7 +142,6 @@ plotOptions: {
156 } 142 }
157 } 143 }
158 }, 144 },
159 -
160 series: [ 145 series: [
161 { 146 {
162 name: "사망률", 147 name: "사망률",
...@@ -173,11 +158,9 @@ plotOptions: { ...@@ -173,11 +158,9 @@ plotOptions: {
173 }) 158 })
174 i++; 159 i++;
175 } 160 }
176 -
177 <% probArr.forEach((probArr) => {%> 161 <% probArr.forEach((probArr) => {%>
178 var temp; 162 var temp;
179 temp = <%=probArr %>; 163 temp = <%=probArr %>;
180 -
181 // for(;j<10;j++) 164 // for(;j<10;j++)
182 // { 165 // {
183 // deathArr.push({ 166 // deathArr.push({
...@@ -186,25 +169,18 @@ plotOptions: { ...@@ -186,25 +169,18 @@ plotOptions: {
186 // }) 169 // })
187 // i++; 170 // i++;
188 // } 171 // }
189 -
190 deathArr.push({ 172 deathArr.push({
191 x: time + i * 60000, 173 x: time + i * 60000,
192 y: temp 174 y: temp
193 }) 175 })
194 i++; 176 i++;
195 -
196 <%}) %> 177 <%}) %>
197 -
198 return deathArr; 178 return deathArr;
199 })(), 179 })(),
200 -
201 color: "#FFFFFF" 180 color: "#FFFFFF"
202 } 181 }
203 ] 182 ]
204 -
205 }); 183 });
206 -
207 -
208 var chart2 = Highcharts.chart("container2", { 184 var chart2 = Highcharts.chart("container2", {
209 chart: { 185 chart: {
210 type: "spline", 186 type: "spline",
...@@ -221,23 +197,19 @@ plotOptions: { ...@@ -221,23 +197,19 @@ plotOptions: {
221 // }, 3000); //1000=1초 197 // }, 3000); //1000=1초
222 // } 198 // }
223 // }, 199 // },
224 -
225 backgroundColor: "rgba(255, 255, 255, 0.0)" 200 backgroundColor: "rgba(255, 255, 255, 0.0)"
226 }, 201 },
227 -
228 time: { 202 time: {
229 useUTC: false 203 useUTC: false
230 }, 204 },
231 -
232 title: { 205 title: {
233 text: "기온", 206 text: "기온",
234 style: { 207 style: {
235 color: "#FFFFFF", 208 color: "#FFFFFF",
236 - fontWeight: "bold", 209 + //fontWeight: "bold",
237 - fontFamily: 'Yeon Sung', 210 + fontFamily: 'Do Hyeon',
238 fontSize:'25px' 211 fontSize:'25px'
239 } 212 }
240 -
241 }, 213 },
242 xAxis: { 214 xAxis: {
243 type: "datetime", 215 type: "datetime",
...@@ -267,7 +239,6 @@ plotOptions: { ...@@ -267,7 +239,6 @@ plotOptions: {
267 color: "white" 239 color: "white"
268 } 240 }
269 } 241 }
270 -
271 }, 242 },
272 tooltip: { 243 tooltip: {
273 headerFormat: "<b>{series.name}</b><br/>", 244 headerFormat: "<b>{series.name}</b><br/>",
...@@ -305,11 +276,9 @@ plotOptions: { ...@@ -305,11 +276,9 @@ plotOptions: {
305 }) 276 })
306 i++; 277 i++;
307 } 278 }
308 -
309 <% ptArr.forEach((ptArr) => {%> 279 <% ptArr.forEach((ptArr) => {%>
310 var temp; 280 var temp;
311 temp = <%=ptArr %>; 281 temp = <%=ptArr %>;
312 -
313 // for(j;j<10;j++) 282 // for(j;j<10;j++)
314 // { 283 // {
315 // tempArr.push({ 284 // tempArr.push({
...@@ -318,23 +287,18 @@ plotOptions: { ...@@ -318,23 +287,18 @@ plotOptions: {
318 // }) 287 // })
319 // i++; 288 // i++;
320 // } 289 // }
321 -
322 tempArr.push({ 290 tempArr.push({
323 x: time + i * 60000, 291 x: time + i * 60000,
324 y: temp 292 y: temp
325 }) 293 })
326 i++; 294 i++;
327 -
328 <%}) %> 295 <%}) %>
329 -
330 return tempArr; 296 return tempArr;
331 })(), 297 })(),
332 -
333 color: "#FFE08C" 298 color: "#FFE08C"
334 } 299 }
335 ] 300 ]
336 }); 301 });
337 -
338 var chart3 = Highcharts.chart("container3", { 302 var chart3 = Highcharts.chart("container3", {
339 chart: { 303 chart: {
340 type: "spline", 304 type: "spline",
...@@ -353,17 +317,15 @@ plotOptions: { ...@@ -353,17 +317,15 @@ plotOptions: {
353 // }, 317 // },
354 backgroundColor: "rgba(255, 255, 255, 0.0)" 318 backgroundColor: "rgba(255, 255, 255, 0.0)"
355 }, 319 },
356 -
357 time: { 320 time: {
358 useUTC: false 321 useUTC: false
359 }, 322 },
360 -
361 title: { 323 title: {
362 text: "풍속", 324 text: "풍속",
363 style: { 325 style: {
364 color: "#FFFFFF", 326 color: "#FFFFFF",
365 - fontWeight: "bold", 327 + //fontWeight: "bold",
366 - fontFamily: 'Yeon Sung', 328 + fontFamily: 'Do Hyeon',
367 fontSize:'25px' 329 fontSize:'25px'
368 } 330 }
369 }, 331 },
...@@ -395,7 +357,6 @@ plotOptions: { ...@@ -395,7 +357,6 @@ plotOptions: {
395 color: "white" 357 color: "white"
396 } 358 }
397 } 359 }
398 -
399 }, 360 },
400 tooltip: { 361 tooltip: {
401 headerFormat: "<b>{series.name}</b><br/>", 362 headerFormat: "<b>{series.name}</b><br/>",
...@@ -433,11 +394,9 @@ plotOptions: { ...@@ -433,11 +394,9 @@ plotOptions: {
433 }) 394 })
434 i++; 395 i++;
435 } 396 }
436 -
437 <% wsArr.forEach((wsArr) => {%> 397 <% wsArr.forEach((wsArr) => {%>
438 var temp; 398 var temp;
439 temp = <%=wsArr %>; 399 temp = <%=wsArr %>;
440 -
441 // for(j;j<10;j++) 400 // for(j;j<10;j++)
442 // { 401 // {
443 // windArr.push({ 402 // windArr.push({
...@@ -446,22 +405,17 @@ plotOptions: { ...@@ -446,22 +405,17 @@ plotOptions: {
446 // }) 405 // })
447 // i++; 406 // i++;
448 // } 407 // }
449 -
450 windArr.push({ 408 windArr.push({
451 x: time + i * 60000, 409 x: time + i * 60000,
452 y: temp 410 y: temp
453 }) 411 })
454 i++; 412 i++;
455 -
456 <%}) %> 413 <%}) %>
457 -
458 return windArr; 414 return windArr;
459 })(), 415 })(),
460 -
461 color: "#FFE08C" 416 color: "#FFE08C"
462 } 417 }
463 ] }); 418 ] });
464 -
465 var chart4 = Highcharts.chart("container4", { 419 var chart4 = Highcharts.chart("container4", {
466 chart: { 420 chart: {
467 type: "spline", 421 type: "spline",
...@@ -480,17 +434,15 @@ plotOptions: { ...@@ -480,17 +434,15 @@ plotOptions: {
480 // }, 434 // },
481 backgroundColor: "rgba(255, 255, 255, 0.0)" 435 backgroundColor: "rgba(255, 255, 255, 0.0)"
482 }, 436 },
483 -
484 time: { 437 time: {
485 useUTC: false 438 useUTC: false
486 }, 439 },
487 -
488 title: { 440 title: {
489 text: "강수량", 441 text: "강수량",
490 style: { 442 style: {
491 color: "#FFFFFF", 443 color: "#FFFFFF",
492 - fontWeight: "bold", 444 + //fontWeight: "bold",
493 - fontFamily: 'Yeon Sung', 445 + fontFamily: 'Do Hyeon',
494 fontSize:'25px' 446 fontSize:'25px'
495 } 447 }
496 }, 448 },
...@@ -522,7 +474,6 @@ plotOptions: { ...@@ -522,7 +474,6 @@ plotOptions: {
522 color: "white" 474 color: "white"
523 } 475 }
524 } 476 }
525 -
526 }, 477 },
527 tooltip: { 478 tooltip: {
528 headerFormat: "<b>{series.name}</b><br/>", 479 headerFormat: "<b>{series.name}</b><br/>",
...@@ -560,11 +511,9 @@ plotOptions: { ...@@ -560,11 +511,9 @@ plotOptions: {
560 }) 511 })
561 i++; 512 i++;
562 } 513 }
563 -
564 <% rainArr.forEach((rainArr) => {%> 514 <% rainArr.forEach((rainArr) => {%>
565 var temp; 515 var temp;
566 temp = <%=rainArr %>; 516 temp = <%=rainArr %>;
567 -
568 // for(j;j<10;j++) 517 // for(j;j<10;j++)
569 // { 518 // {
570 // rainArr.push({ 519 // rainArr.push({
...@@ -573,32 +522,141 @@ plotOptions: { ...@@ -573,32 +522,141 @@ plotOptions: {
573 // }) 522 // })
574 // i++; 523 // i++;
575 // } 524 // }
576 -
577 rainArr.push({ 525 rainArr.push({
578 x: time + i * 60000, 526 x: time + i * 60000,
579 y: temp 527 y: temp
580 528
581 }) 529 })
582 i++; 530 i++;
583 -
584 <%}) %> 531 <%}) %>
585 -
586 return rainArr; 532 return rainArr;
587 })(), 533 })(),
588 color: "#FFE08C" 534 color: "#FFE08C"
589 -
590 } 535 }
591 ] 536 ]
592 -
593 -
594 }); 537 });
538 + var chart5 = Highcharts.chart("container5", {
539 + chart: {
540 + type: "spline",
541 + animation: Highcharts.svg, // don't animate in old IE
542 + marginRight: 10,
543 + // events: {
544 + // load: function () {
545 + // // set up the updating of the chart each second
546 + // var series = this.series[0];
547 + // setInterval(function () {
548 + // var x = new Date().getTime(), // 현재 시간
549 + // y = Math.random(); //
550 + // series.addPoint([x, y], true, true);
551 + // }, 3000); //1000=1초
552 + // }
553 + // },
554 + backgroundColor: "rgba(255, 255, 255, 0.0)"
555 + },
556 + time: {
557 + useUTC: false
558 + },
559 + title: {
560 + text: "교통사고",
561 + style: {
562 + color: "#FFFFFF",
563 + //fontWeight: "bold",
564 + fontFamily: 'Do Hyeon',
565 + fontSize:'25px'
566 + }
567 + },
568 + xAxis: {
569 + type: "datetime",
570 + tickPixelInterval: 150,
571 + labels: {
572 + style: {
573 + color: "white"
574 + }
575 + }
576 + },
577 + yAxis: {
578 + title: {
579 + text: "교통사고발생횟수(번)",
580 + style: {
581 + color: "white"
582 + }
583 + },
584 + plotLines: [
585 + {
586 + value: 0,
587 + width: 1,
588 + color: "#808080"
589 + }
590 + ],
591 + labels: {
592 + style: {
593 + color: "white"
594 + }
595 + }
596 + },
597 + tooltip: {
598 + headerFormat: "<b>{series.name}</b><br/>",
599 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 교통사고 발생 수 : {point.y:.2f}m/s"
600 + },
601 + legend: {
602 + //enabled: false
603 + layout: "vertical",
604 + align: "left",
605 + verticalAlign: "top",
606 + x: 100,
607 + y: 50,
608 + floating: true,
609 + borderWidth: 1,
610 + backgroundColor:
611 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
612 + "#FFFFFF"
613 + },
614 + exporting: {
615 + enabled: false
616 + },
617 + series: [
618 + {
619 + name: "교통사고 발생수",
620 + data: (function () {
621 + var trafficArr = [], //windArr
622 + time = new Date().getTime();
623 + var length = <%=dataLen%>;
624 + var i = -9;
625 + var j = 0;
626 + for (j; j < 10 - length; j++) {
627 + trafficArr.push({
628 + x: time + i * 60000,
629 + y: 0
630 + })
631 + i++;
632 + }
633 + <% occurArr.forEach((occurArr) => {%>
634 + var temp;
635 + temp = <%=occurArr %>;
636 + // for(j;j<10;j++)
637 + // {
638 + // trafficArr.push({
639 + // x: time + i * 60000,
640 + // y: temp
641 + // })
642 + // i++;
643 + // }
644 + trafficArr.push({
645 + x: time + i * 60000,
646 + y: temp
647 + })
648 + i++;
649 + <%}) %>
650 + return trafficArr;
651 + })(),
652 + color: "#FFE08C"
653 + }
654 + ] });
595 var socket = io.connect('/', { transports: ['websocket'], upgrade: false }); 655 var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
596 socket.emit("connection", client_data); 656 socket.emit("connection", client_data);
597 - socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송 657 + socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
598 console.log(info); 658 console.log(info);
599 -
600 var date = new Date().getTime(); 659 var date = new Date().getTime();
601 -
602 chart1.series[0].addPoint({ 660 chart1.series[0].addPoint({
603 x: date, 661 x: date,
604 y: info.death, 662 y: info.death,
...@@ -609,24 +667,23 @@ plotOptions: { ...@@ -609,24 +667,23 @@ plotOptions: {
609 y: info.temperature*1, 667 y: info.temperature*1,
610 color:"#FFE08C" 668 color:"#FFE08C"
611 }); 669 });
612 -
613 chart3.series[0].addPoint({ 670 chart3.series[0].addPoint({
614 x: date, 671 x: date,
615 y: info.wind*1, 672 y: info.wind*1,
616 color:"#FFE08C" 673 color:"#FFE08C"
617 }); 674 });
618 -
619 chart4.series[0].addPoint({ 675 chart4.series[0].addPoint({
620 x: date, 676 x: date,
621 y: info.rain*1, 677 y: info.rain*1,
622 color:"#FFE08C" 678 color:"#FFE08C"
623 }); 679 });
624 - 680 + chart5.series[0].addPoint({
681 + x: date,
682 + y: info.occurence*1,
683 + color:"#FFE08C"
684 + });
625 }); 685 });
626 -
627 </script> 686 </script>
628 </div> 687 </div>
629 -
630 </body> 688 </body>
631 -
632 </html> 689 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -<!DOCTYPE <!DOCTYPE html> 1 +<!DOCTYPE
2 +
3 +<!DOCTYPE html>
2 <html> 4 <html>
3 5
4 -<head> 6 + <head>
5 <meta charset="utf-8" /> 7 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 - <title>Page Title</title> 9 + <title>Page Title</title>
8 - 10 +
9 - <!-- font --> 11 + <!-- font -->
10 - <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet"> 12 + <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"> 13 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
12 - 14 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
13 - <meta name="viewport" content="width=device-width, initial-scale=1"> 15 + <meta name="viewport" content="width=device-width, initial-scale=1">
14 - <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 16 + <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
15 - <script src="main.js"></script> 17 + <script src="main.js"></script>
16 - 18 +
17 - <!-- 합쳐지고 최소화된 최신 CSS --> 19 + <!-- 합쳐지고 최소화된 최신 CSS -->
18 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 20 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
19 - 21 +
20 - <!-- 부가적인 테마 --> 22 + <!-- 부가적인 테마 -->
21 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 23 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
22 - 24 +
23 - <!-- 합쳐지고 최소화된 최신 자바스크립트 --> 25 + <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
24 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 26 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
25 - 27 +
26 - <style type="text/css"> 28 + <style type="text/css">
27 - html, 29 + html,
28 - { 30 + {
29 - margin: 0; 31 + margin: 0;
30 - padding: 0; 32 + padding: 0;
31 - } 33 + }
32 - 34 +
33 - body { 35 + body {
34 - margin: 0; 36 + margin: 0;
35 - padding: 0; 37 + padding: 0;
36 - 38 +
37 - /* background-image: url('newbackground.png'); 39 + /* background-image: url('newbackground.png');
38 - background-repeat: no-repeat; 40 + background-repeat: no-repeat;
39 - background-size: cover; */ 41 + background-size: cover; */
40 - /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ 42 + /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
41 - } 43 + }
42 - 44 +
43 - h1 { 45 + h1 {
44 - color: white; 46 + color: white;
45 - font-family: 'Nanum Brush Script', cursive; 47 + font-family: 'Do Hyeon', sans-serif;
46 - } 48 + //font-family: 'Nanum Brush Script', cursive;
47 - 49 + }
48 - label { 50 +
49 - color: white; 51 + label {
50 - font-size: 20px; 52 + color: white;
51 - font-family: 'Yeon Sung', cursive; 53 + font-size: 20px;
52 - } 54 + font-family: 'Do Hyeon', sans-serif;
53 - 55 + }
54 - #banner { 56 +
55 - position: absolute; 57 + #banner {
56 - top: 0; 58 + position: absolute;
57 - width: 100%; 59 + top: 0;
58 - } 60 + width: 100%;
59 - 61 + }
60 - #footer { 62 +
61 - position: absolute; 63 + #footer {
62 - bottom: 0; 64 + position: absolute;
63 - width: 100%; 65 + bottom: 0;
64 - height: 50px; 66 + width: 100%;
65 - text-align: center; 67 + height: 50px;
66 - font-family: 'Yeon Sung', cursive; 68 + text-align: center;
67 - color: white; 69 + font-family: 'Do Hyeon', sans-serif;
68 - } 70 + color: white;
69 - </style> 71 + }
70 - 72 + </style>
71 -</head> 73 +
72 - 74 + </head>
73 -<body> 75 +
74 - <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> 76 + <body>
75 - <div id="banner"> 77 + <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
78 + <div id="banner">
76 <div style="width:100%; text-align: center; padding-top:170px;"> 79 <div style="width:100%; text-align: center; padding-top:170px;">
77 - <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> 80 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
78 </div> 81 </div>
79 - <br><br><br> 82 + <br>
80 - <div style="width:100%; text-align: center;"> 83 + <br>
81 - <form action="/starting" method="post"> 84 + <br>
82 - <div class="form-inline"> 85 + <div style="width:100%; text-align: center;">
86 + <form action="/starting" method="post">
87 + <div class="form-inline">
83 <label>이름</label> 88 <label>이름</label>
84 - <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;"> 89 + <input type="text" name="name" class="form-control" placeholder="조인화" style="width:200px;">
85 - &nbsp &nbsp&nbsp&nbsp 90 + &nbsp &nbsp&nbsp&nbsp
86 - <label>생년월일</label> 91 + <label>생년월일</label>
87 - <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;"> 92 + <input type="text" name="birth" class="form-control" placeholder="991025" style="width:200px;">
88 - <br><br><br> 93 + <br>
89 - <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;"> 94 + <br>
95 + <br>
96 + <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Do Hyeon', sans-serif; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
90 </div> 97 </div>
91 - </form> 98 + </form>
92 - </div> 99 + </div>
93 100
94 - </div> 101 + </div>
95 102
96 - <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> 103 + <div id="footer">오픈소스SW개발 김주희 김윤지 조인화</div>
97 -</body> 104 + </body>
98 105
99 </html> 106 </html>
...\ No newline at end of file ...\ No newline at end of file
......