forked from TSJK-MBTI/CarbonMBTI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
355 lines (329 loc) · 14.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--모바일환경에서도 비율에 맞춰 볼 수 있도록 설정-->
<meta name="author" content="TSJK">
<meta name="keywords" content="탄소 소비 습관 테스트">
<meta name="description" content="탄소 소비 습관 테스트">
<!-- sns share -->
<meta property="og:url" content="https://carbonhabitmbti.netlify.app" />
<meta property="og:title" content="탄소 소비 습관 테스트" />
<meta property="og:type" content="website" />
<meta property="og:image" content="./img/carbon_footprint.png" />
<meta property="og:description" content="자신의 탄소 소비 습관을 테스트하고 해결방안을 제공하는 웹사이트" />
<title>탄소 소비 습관 테스트</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--Bootstrap을 이용한 css설정-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/default.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/qna.css">
<link rel="stylesheet" href="./css/animation.css">
<link rel="stylesheet" href="./css/result.css">
<link rel="icon" href="./img/TSJK_logo.png">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('9f1d0597a2652b59998bc37e7c378db5');
Kakao.isInitialized();
</script>
<!--css를 html파일에 연결-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- JQUERY 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- accordion 설정-->
</head>
<body>
<div class="container">
<section id="main" class="mx-auto">
<div class="title_1">
<h1></h1>
</div>
<div class="wrap">
<!--모바일환경에서 이미지파일이 해당 비율을 유지하도록 함-->
<img src ="img/earth.png" alt="mainImage" class ="img_earth">
<!-- <img src="img/carbo.png" alt="mainImage" class="img-fluid"> -->
</div>
<div class ="all">
<div class="title_2" >
<!-- <img src ="https://ecorelos.com/wp-content/uploads/2020/04/torn-border2upside.png" class="img_main" > -->
<br>탄소 소비습관 유형검사<br>
<div class="title_2_1">
내 안에 탄소소비를 찾아보자..☆
<!-- <img src ="https://ecorelos.com/wp-content/uploads/2020/04/torn-border2upside.png" class="img_main2"> -->
</div>
</div>
</div>
<!-- <div class="d-grid gap-2 col-10 mx-auto"> -->
<div>
<button type="button" class="btn_start" onclick="js:begin()">테스트 시작하기</button>
</div>
</section>
<section id="qna" >
<img id="introimg">
<div class="status mx-auto mt-5">
<div class="statusBar">
</div>
</div>
<div class="qBox my-5 py-3 mx-auto">
</div>
<div class="answerBox my-auto py-3 mx-auto">
</div>
</section>
<section id="result" class="mx-auto">
<div class="title_1">
나의 소비습관은?
<br>
<br>
<div class="result_img">
</div>
<span class="result_type"> </span>
</div>
<div class="total_result">
연간 총 CO2 배출량 : <span id="total_resultt"></span>kg <br>
필요 소나무 : <span id="total_needd"></span>그루<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="container-fluid" style="min-height: calc(100vh - 136px);">
<!-- 그룹 태그로 role과 aria-multiselectable를 설정한다. -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- 하나의 item입니다. data-parent 설청과 href 설정만 제대로 하면 문제없이 작동합니다. -->
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a class="aa" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1"
aria-expanded="false">
교통 검사 결과
</a>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body" id="traffic">
도보/자전거 이용으로 절감한 CO2 :<span id="i_ans1_co2"></span>kg
<br>
도보/자전거 이용으로 아낀 소나무 :<span id="i_ans1_tree"></span>그루
<br>
<br>
자동차 운행으로 발생하고 있는 CO2 :<span id="i_ans2_co2"></span>kg
<br>
자동차 운행으로 필요한 소나무 :<span id="i_ans2_tree"></span>그루
<br>
<br>
대중교통 이용으로 절감한 CO2 :<span id="i_ans3_co2"></span>kg
<br>
대중교통 이용으로 아낀 소나무 :<span id="i_ans3_tree"></span>그루
<br>
<br>
</div>
</div>
</div>
<!-- -->
<!-- 하나의 item입니다. -->
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a class="aa" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2"
aria-expanded="false">
냉/난방 검사 결과
</a>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body" id=totalAir>
에어컨 사용 :
<span id="i_ans3"></span>kg
<br>
단열재 사용으로 절약한 CO2:
<span id="i_ans4"></span>kg
<br>
<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a class="aa" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3"
aria-expanded="false">
전기 분야 검사 결과
</a>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
TV 시청으로 발생한 CO2 :
<span id="i_ansTv"></span>kg
<br>
컴퓨터 사용으로 발생한 CO2:
<span id="i_ansComputer"></span>kg
<br>
세탁기 사용으로 발생한 CO2:
<span id="i_ansWashing"></span>kg
<br>
사용하지 않는 플러그 뽑아 절약한 CO2:
<span id="i_ansPlug"></span>kg
<br>
<br>
<span id="i_totalElec_co2"></span>
<br>
<span id="i_totalElec_tree"></span>
<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a class="aa" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4"
aria-expanded="false">
자원 검사 결과
</a>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
종이청구서 :
<span id="i_ans10"></span>kg
<br>
샤워 :
<span id="i_ans11"></span>kg
<br>
음식물 쓰레기 배출 :
<span id="i_ans12"></span>kg
<br>
배달음식 주문 :
<span id="i_ans13"></span>kg
<br>
<br>
연간 CO2 배출량 :
<span id="i_resource_result"></span>kg
<br>
필요 소나무 :
<span id="i_need_tree"></span>그루
</div>
</div>
</div>
</div>
</div>
<br><br><br>
<hr>
<br>
<div class="helpful">
당신에게 추천하는<br>
지구를 지키는 방법
</div>
<br>
<br>
<div class="action_plan">
<div class="traffic_plan">
</div>
<br>
<div class="air_plan">
</div>
<br>
<div class="electric_plan">
</div>
<br>
<div class="resource_plan">
</div>
<br>
</div>
<br>
<br>
<button type="button" class="link_button"
onclick="window.open('https://www.gihoo.or.kr/netzero/main/index.do')">탄소중립 더보기</button>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<div class="cash_movement">
당신에게 추천하는<br>
돈이 되는 탄소 중립 실천방안
</div>
<br>
<br>
<br>
<br>
<img src="img/qna2_2.png" alt="My Image" width="400" height="400">
<br>
<br>
<button type="button" class="link_button"
onclick="window.open('https://ecomileage.seoul.go.kr/home/infomation/whatIsEco.do?menuNo=1')">에코
마일리지</button>
<br>
<br>
<button type="button" class="link_button" onclick="window.open('https://www.alcard.kr/')">알뜰 교통카드 마일리지</button>
<br>
<br>
<button class="link_button" onclick="showMsg()">브랜드별 혜택보기</button>
<div>
<!-- 아래 dialog 태그 영역이 메시지 창 -->
<dialog id="myMsgDialog">
<h3>카페 프랜차이즈</h3>
<h4>폴 바셋(Paul Bassett) : 텀블러 사용시, 500원 할인<br>
엔젤리너스(Angel-in-us) : 텀블러 사용시, 400원 할인<br>
크리스피 도넛(Krispy Kreme Dougnuts) : 텀블러 사용시, 400원 할인<br>
스타벅스(Star bugs) : 텀블러 사용시, 300원 할인<br>
커피빈(Coffee Beans) : 텀블러 사용시, 300원 할인<br>
파스쿠찌(Pascucci) : 텀블러 사용시, 300원 할인<br>
할리스 커피(Hollys coffee) : 텀블러 사용시, 300원 할인<br>
탐앤탐스(Tom N Toms) : 텀블러 사용시, 300원 할인<br>
투썸플레이스(A twosome place) : 텀블러 사용시, 300원 할인<br>
이디아(Ediya coffee) : 텀블러 사용시, 300원 할인<br>
빽다방 : 텀블러 사용시, 300원 할인<br>
디초콜릿(De chocolate coffee) : 텀블러 사용시, 300원 할인<br>
</h4>
<h3>제빵 프랜차이즈</h3>
<h4>파리바게트(Paris baguette) : 텀블러 사용시, 300원 할인<br></h4>
<h3>아이스크림 프랜차이즈</h3>
<h4>배스킨라빈스(Baskin robbins) : 텀블러 사용시, 300원 할인<br></h4>
<h3>패스트푸드 프랜차이즈</h3>
<h4>맥도날드(Macdonalds) : 텀블러 사용시, 300원 할인<br>
롯데리아(Lotteria) : 텀블러 사용시, 300원 할인<br>
</h4>
</h4>
<input type="button" id="mButton" onclick="closeMsg()" value=" 확 인 ">
</dialog>
</div>
<script>
function showMsg(){
var dialog = document.getElementById("myMsgDialog");
dialog.showModal();
}
function closeMsg(){
var dialog = document.getElementById("myMsgDialog");
dialog.close();
}
</script>
<br>
<br>
<hr>
<br>
<button type="button" class="link_button" onClick="location.href='index.html'">다시하기</button>
<br>
<br>
</section>
<script src="js/data.js" charset="utf-8"></script>
<script src="js/start.js" charset="utf-8"></script>
<script src="js/share.js" charset="utf-8"></script>
</div>
</body>
</html>