-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
463 lines (418 loc) · 37.6 KB
/
Copy pathindex.html
File metadata and controls
463 lines (418 loc) · 37.6 KB
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
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet">
<title>Find your Tour Destination!</title>
</head>
<body>
<div style="font-size:30px; font-weight:700">관광지(Tour Desination)</div>
<div style="margin-top:15px; margin-bottom:10px">
<button type="button" id="start" class="btn" onclick="init()">웹캠으로 검색하기(Webcam)</button>
<button type="button" id="img_upload" class="btn" onclick="init2()">이미지로 검색하기(Image)</button>
</div>
<div id="web" style="display:block">
<div style="display:flex;align-items:end; margin-bottom:10px">
<div id="webcam-container" style="height:200px"></div>
<div style="display:flex">
<button
type="button"
class="btn"
id="search_btn"
onclick="predict()"
style="display:none; margin-left:15px">검색(Search)</button>
<button
type="button"
class="btn"
id="new_btn"
onclick="new_pic()"
style="display:none;height:45px; margin-left:15px"
value="false">새로고침(Refresh)</button>
</div>
</div>
<div id="container1">
<br><strong><div id="label-container"></div></strong>
<div id="address-ko-container"></div>
<div id="explain-ko-container"></div>
<br>
<strong><div id="name-eng"></div></strong>
<div id="address-eng-container"></div>
<div id="explain-eng-container"></div>
</div>
</div>
<div id="img_file" style="display:none">
<script
class="jsbin"
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="container file-upload">
<div class="image-upload-wrap">
<input
class="file-upload-input"
type='file'
onchange="readURL(this);"
accept="image/*"/>
<div class="drag-text">
<h3 class="mb-5 pb-5 pt-4 upload-text">관광지 사진을 올려주세요!(Please upload a photo of your tourist destination!)</h3>
</div>
</div>
<div class="file-upload-content" style="width:500px">
<img
class="file-upload-image"
id="element-image"
src="#"
style="display:none; width:300px; height:350px"/>
<div
class="image-title-wrap"
id="remove_box"
style="display:none; margin-top:10px">
<div style="display:flex">
<button
type="button"
onclick="remove_rec(); removeUpload(); "
id="remove_btn"
class="remove-image btn"
value="false"
color="#ff0000">Remove
<span class="image-title">Uploaded Image</span>
</button>
<button
type="button"
id="search"
class="btn"
onclick="predict2()"
style="margin-left:15px">검색(Search)</button>
</div>
</div>
</div>
</div>
<div id="container2">
<br><strong><div id="label-container2"></div></strong>
<div id="address-ko-container2"></div>
<div id="explain-ko-container2"></div>
<br>
<strong><div id="name-eng2"></div></strong>
<div id="address-eng-container2"></div>
<div id="explain-eng-container2"></div>
</div>
</div>
<script
type="text/javascript"
src="https:/ajex.googleapis.com/ajex/libs/jquery/1.6.4/jquery.min.js"></script>
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
function new_pic() {
document
.getElementById("new_btn")
.value = "true";
document.getElementById("container1").style.display="none";
predict();
}
function remove_rec() {
console.log("?");
document
.getElementById("remove_btn")
.value = "true";
document
.getElementById("container2")
.style
.display = "none";
}
function readURL(input) {
document
.getElementById("element-image")
.style
.display = "block";
document
.getElementById("remove_box")
.style
.display = "block";
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.image-upload-wrap').hide();
$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show();
$('.image-title').html(input.files[0].name);
};
reader.readAsDataURL(input.files[0]);
} else {
removeUpload();
}
}
function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide();
$('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
$('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function () {
$('.image-upload-wrap').removeClass('image-dropping');
});
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = "./my_model/";
let model,
webcam,
labelContainer,
maxPredictions;
// Load the image model and setup the webcam
async function init() {
document
.getElementById("web")
.style
.display = "block";
document
.getElementById("img_file")
.style
.display = "none";
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
// append elements to the DOM
document
.getElementById("webcam-container")
.appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
document
.getElementById("new_btn")
.style
.display = "block";
document
.getElementById("search_btn")
.style
.display = "block";
}
async function loop() {
webcam.update(); // update the webcam frame
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className;
console.log(prediction[i].probability);
console.log(prediction[i].probability.toFixed(2));
if (prediction[i].probability.toFixed(2) > 0.75) {
labelContainer
.childNodes[i]
.innerHTML = classPrediction;
switch (classPrediction) {
case "경복궁":
$("#address-ko-container").html("서울특별시 종로구 사직로 161");
$("#explain-ko-container").html("조선 왕조 제일의 법궁으로, 북으로 북악산을 기대어 자리 잡았고<br>정문인 광화문 앞으로는 넓은 육조거리(지금의 세종로)가 펼쳐져 왕도인 한양(서울) 도시 계획의 중심이기도 합니다.<br>1395년 태조 이성계가 창건하였고, 1592년 임진 왜란으로 불타 없어졌다가, <br>고종 때인 1867년 중건 되었으며 흥선대원군이 주도한 중건된 경복궁은 500여 동의 건물들이 미로같이 빼곡히 들어선 웅장한 모습이었습니다.<br> 👉자세한 내용: <a href='http://www.royalpalace.go.kr/content/data/data_01.asp' target='blank'> 경복궁 웹 사이트 </a>");
$("#name-eng").html("Gyeongbokgung");
$("#address-eng-container").html("161, Sajik-ro, Jongno-gu, Seoul");
$("#explain-eng-container").html("As the first royal palace of the Joseon Dynasty, it was located with Bugaksan Mountain leaning to the north.<br>In front of Gwanghwamun, the main gate, a wide six-way street (now Sejong-ro) spreads out, making it the center of urban planning in Hanyang (Seoul), the royal capital.<br>1395 Founded by Lee Seong-gye, and destroyed by fire during the Imjin War in 1592, <br>Rebuilt in 1867 during the reign of King Gojong. Content: <a href='http://www.royalpalace.go.kr/content/data/data_01.asp' target='blank'> Gyeongbokgung Palace website </a>");
break;
case "숭례문":
$("#address-ko-container").html("서울특별시 중구 남대문로4가 세종대로 40");
$("#explain-ko-container").html("조선시대 한양도성의 정문으로 남쪽에 있다고 해서 남대문이라고도 불렀다. <br>현재 서울에 남아 있는 목조 건물 중 가장 오래된 것으로 태조 5년(1396)에 짓기 시작하여 태조 7년(1398)에 완성하였다. <br>이 건물은 세종 30년(1448)에 고쳐 지은 것인데 1961∼1963년 해체·수리 때 성종 10년(1479)에도 큰 공사가 있었다는 사실이 밝혀졌다.<br> 이 문은 돌을 높이 쌓아 만든 석축 가운데에 무지개 모양의 홍예문을 두고, 그 위에 앞면 5칸·옆면 2칸 크기로 지은 누각형 2층 건물이다. <br>지붕은 앞면에서 볼 때 사다리꼴 형태를 하고 있는데, 이러한 지붕을 우진각지붕이라 한다. <br>지붕 처마를 받치기 위해 기둥 위부분에 장식하여 짠 구조가 기둥 위뿐만 아니라 기둥 사이에도 있는 다포 양식으로, 그 형태가 곡이 심하지 않고 짜임도 건실해 조선 전기의 특징을 잘 보여주고 있다.<br> 👉자세한 내용: <a href='http://www.heritage.go.kr/heri/cul/culSelectDetail.do?VdkVgwKey=11,00010000,11&pageNo=1_1_1_0' target='blank'> 숭례문 웹 사이트 </a>");
$("#name-eng").html("Sungnyemun");
$("#address-eng-container").html(
"40, Sejong-daero, Namdaemun-ro 4-ga, Jung-gu, Seoul"
);
$("#explain-eng-container").html("It was also called Namdaemun because it was located in the south as the main gate of Hanyangdoseong in the Joseon Dynasty. <br><br>It is the oldest wooden building remaining in Seoul. Construction began in the 5th year of King Taejo (1396) and was completed in the 7th year of King Taejo (1398). <br>This building was rebuilt in the 30th year of King Sejong (1448), but when it was dismantled and repaired from 1961 to 1963, it was revealed that there had been major construction work in the 10th year of King Seongjong (1479). It is a two-story pavilion-shaped building with a rainbow-shaped Hongyemun in the center of the stone axis, and 5 kan in the front and 2 kan on the side. <br>The roof has a trapezoidal shape when viewed from the front. <br>The structure is decorated and woven on the upper part of the pillar to support the eaves of the roof. It is a dapo style in which the structure is not only on the pillars but also between the pillars. .<br>👉Details: <a href='http://www.heritage.go.kr/heri/cul/culSelectDetail.do?VdkVgwKey=11,00010000,11&pageNo=1_1_1_0' target='blank'> Sungnyemun website </a>");
break;
case "청계천":
$("#address-ko-container").html("서울특별시 종로구 청계천로 1");
$("#explain-ko-container").html("대한민국 서울특별시 내부에 있는 지방하천으로, 한강 수계에 속하며 중랑천의 지류이다. <br>최장 발원지는 종로구 청운동에 위치한 ‘백운동 계곡’이며, 남쪽으로 흐르다가 청계광장 부근의 지하에서 삼청동천을 합치며 몸집을 키운다. <br>이곳에서 방향을 동쪽으로 틀어 서울의 전통적인 도심지를 가로지르다가, 한양대학교 서울캠퍼스 옆에서 중랑천으로 흘러든다. <br>현재 시민들의 도심 속 휴식공간 및 여가공간으로 자리잡았다.");
$("#name-eng").html("Cheonggyecheon");
$("#address-eng-container").html("1, Cheonggyecheon-ro, Jongno-gu, Seoul");
$("#explain-eng-container").html("It is a local river in Seoul, South Korea. It belongs to the Han River system and is a tributary of the Jungnangcheon Stream. <br>The longest source is ‘Baekundong Valley’ located in Cheongun-dong, Jongno-gu, and it flows south and grows in size by joining the Samcheongdongcheon Stream in the basement near Cheonggye Plaza. <br>From here, turn east and cross the traditional downtown of Seoul, and it flows into Jungnangcheon next to Hanyang University's Seoul campus. <br>Currently, it has established itself as a resting and leisure space in the city center.");
break;
case "63빌딩":
$("#address-ko-container").html("서울특별시 영등포구 63로 50");
$("#explain-ko-container").html("63빌딩 혹은 63 스퀘어는 대한민국 서울특별시 영등포구 여의도동에 있는 마천루이다. <br>이전 명칭은 한화 63 시티이고 지상높이는 249m(해발 264m), 안테나 높이를 포함할 경우 지상높이는 274m(해발 289m)다. <br>리첸시아 타워 바로 옆에 위치하고 있다.");
$("#name-eng").html("63 Building / 63 Square");
$("#address-eng-container").html("50, 63-ro, Yeongdeungpo-gu, Seoul");
$("#explain-eng-container").html("63 Building or 63 Square is a skyscraper in Yeouido-dong, Yeongdeungpo-gu, Seoul, South Korea. <br>The previous name was Hanwha 63 City, and it is 249m above sea level (264m above sea level) and 274m above the ground (289m above sea level) when including the antenna height. <br>Located right next to the Richencia Tower.");
break;
case "롯데월드":
$("#address-ko-container").html("서울특별시 송파구 올림픽로 240");
$("#explain-ko-container").html("롯데월드 놀이시설은 실내의 롯데월드 어드벤처와 야외의 매직아일랜드가 운영되고 있으며, 민속박물관, 아이스링크, 백화점, 마트, 호텔 등이 포함된다.");
$("#name-eng").html("Lotte World");
$("#address-eng-container").html("240 Olympic-ro, Songpa-gu, Seoul");
$("#explain-eng-container").html("Lotte World amusement facilities operate indoor Lotte World Adventure and outdoor Magic Island, and include a folk museum, ice rink, department store, mart, hotel, etc.");
break;
case "여의도 한강공원":
$("#address-ko-container").html("서울특별시 영등포구 여의동로 330");
$("#explain-ko-container").html("정치, 금융, 언론의 중심지인 여의도에 자리하고 지하철, 버스 등 대중교통으로 접근성이 좋아 직장인과 일반시민들이 즐겨찾는 명소이자<br>봄꽃축제, 세계불꽃축제, 각종 공연 및 마라톤행사 등 다양한 행사가 이어져 볼거리와 즐길거리가 풍부한 휴식공간입니다.<br>또한 밤섬, 여의도 샛강 등이 비교적 자연그대로 보존되어 있어 생태학습장 및 자연친화형 공원으로 조성되어 있습니다.");
$("#name-eng").html("Yeouido Hangang Park(Yeouido Han River Park)");
$("#address-eng-container").html("330, Yeouidong-ro, Yeongdeungpo-gu, Seoul");
$("#explain-eng-container").html("It is located in Yeouido, the center of politics, finance, and media, and is easily accessible by public transportation such as subway and bus. It is a resting space with abundant things to see and enjoy.<br>In addition, Bamseom Island and Yeouido Saetgang are relatively preserved in their natural state, making it an eco-learning center and nature-friendly park.");
break;
case "명동성당":
$("#address-ko-container").html("서울특별시 중구 명동길 74");
$("#explain-ko-container").html("한국 천주교 서울대교구 주교좌 명동대성당, 통칭 명동성당은 한반도에서 처음으로 지어진 대규모의 고딕 양식 천주교 성당이자, 한국 최초의 본당이다.");
$("#name-eng").html("Myeongdong Cathedral");
$("#address-eng-container").html("74, Myeongdong-gil, Jung-gu, Seoul");
$("#explain-eng-container").html("Myeongdong Cathedral, commonly known as Myeongdong Cathedral, is the first large-scale Gothic Catholic cathedral built on the Korean Peninsula and the first parish church in Korea.");
break;
case "남산타워":
$("#address-container").html("서울특별시 용산구 남산공원길 105");
$("#explain-ko-container").html("서울의 상징이자 서울의 가장 아름다운 모습을 한 눈에 내려다 볼 수 있는 가장 높은 곳으로, <br>최신 LED 조명으로 시시각각 색과패턴이 변하는 '빛의 예술'과의 어우러짐 속에서 다양한 미디어 아트와 함게 색다른 문화예술을 경험하실 수 있습니다.<br> 👉자세한 내용: <a href='https://www.nseoultower.co.kr:8501/' target='blank'> 남산타워 웹 사이트 </a>");
$("#name-eng").html("Namsan N-Tower");
$("#address-eng-container").html("105, Namsan Gongong-gil, Yongsan-gu, Seoul");
$("#explain-eng-container").html("It is a symbol of Seoul and the highest place where you can overlook the most beautiful aspects of Seoul at a glance. <br>In harmony with the 'art of light' that changes colors and patterns with the latest LED lighting, various media art You can experience different culture and art together.<br> 👉Details: <a href='https://www.nseoultower.co.kr:8501/' target='blank'> Namsan Tower website </a>");
break;
}
document.getElementById("container1").style.display="block";
} else if (document.getElementById("new_btn").value == "true") {
labelContainer
.childNodes[i]
.innerHTML = "";
}
}
document
.getElementById("new_btn")
.value = "false";
}
async function init2() {
document
.getElementById("web")
.style
.display = "none";
document
.getElementById("img_file")
.style
.display = "block";
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
console.log(model);
labelContainer2 = document.getElementById("label-container2");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer2.appendChild(document.createElement("div"));
}
}
async function predict2() {
// predict can take in an image, video or canvas html element
var image = document.getElementById("element-image");
const prediction = await model.predict(image, false);
for (let i = 0; i < maxPredictions; i++) {
console.log(document.getElementById("remove_btn").value);
const classPrediction = prediction[i].className;
if (prediction[i].probability.toFixed(2) > 0.75) {
labelContainer2
.childNodes[i]
.innerHTML = classPrediction;
switch (classPrediction) {
case "경복궁":
$("#address-ko-container2").html("서울특별시 종로구 사직로 161");
$("#explain-ko-container2").html("조선 왕조 제일의 법궁으로, 북으로 북악산을 기대어 자리 잡았고<br>정문인 광화문 앞으로는 넓은 육조거리(지금의 세종로)가 펼쳐져 왕도인 한양(서울) 도시 계획의 중심이기도 합니다.<br>1395년 태조 이성계가 창건하였고, 1592년 임진 왜란으로 불타 없어졌다가, <br>고종 때인 1867년 중건 되었으며 흥선대원군이 주도한 중건된 경복궁은 500여 동의 건물들이 미로같이 빼곡히 들어선 웅장한 모습이었습니다.<br> 👉자세한 내용: <a href='http://www.royalpalace.go.kr/content/data/data_01.asp' target='blank'> 경복궁 웹 사이트 </a>");
$("#name-eng2").html("Gyeongbokgung");
$("#address-eng-container2").html("161, Sajik-ro, Jongno-gu, Seoul");
$("#explain-eng-container2").html("As the first royal palace of the Joseon Dynasty, it was located with Bugaksan Mountain leaning to the north.<br>In front of Gwanghwamun, the main gate, a wide six-way street (now Sejong-ro) spreads out, making it the center of urban planning in Hanyang (Seoul), the royal capital.<br>1395 Founded by Lee Seong-gye, and destroyed by fire during the Imjin War in 1592, <br>Rebuilt in 1867 during the reign of King Gojong. Content: <a href='http://www.royalpalace.go.kr/content/data/data_01.asp' target='blank'> Gyeongbokgung Palace website </a>");
break;
case "숭례문":
$("#address-ko-container2").html("서울특별시 중구 남대문로4가 세종대로 40");
$("#explain-ko-container2").html("조선시대 한양도성의 정문으로 남쪽에 있다고 해서 남대문이라고도 불렀다. <br>현재 서울에 남아 있는 목조 건물 중 가장 오래된 것으로 태조 5년(1396)에 짓기 시작하여 태조 7년(1398)에 완성하였다. <br>이 건물은 세종 30년(1448)에 고쳐 지은 것인데 1961∼1963년 해체·수리 때 성종 10년(1479)에도 큰 공사가 있었다는 사실이 밝혀졌다.<br> 이 문은 돌을 높이 쌓아 만든 석축 가운데에 무지개 모양의 홍예문을 두고, 그 위에 앞면 5칸·옆면 2칸 크기로 지은 누각형 2층 건물이다. <br>지붕은 앞면에서 볼 때 사다리꼴 형태를 하고 있는데, 이러한 지붕을 우진각지붕이라 한다. <br>지붕 처마를 받치기 위해 기둥 위부분에 장식하여 짠 구조가 기둥 위뿐만 아니라 기둥 사이에도 있는 다포 양식으로, 그 형태가 곡이 심하지 않고 짜임도 건실해 조선 전기의 특징을 잘 보여주고 있다.<br> 👉자세한 내용: <a href='http://www.heritage.go.kr/heri/cul/culSelectDetail.do?VdkVgwKey=11,00010000,11&pageNo=1_1_1_0' target='blank'> 숭례문 웹 사이트 </a>");
$("#name-eng2").html("Sungnyemun");
$("#address-eng-container2").html(
"40, Sejong-daero, Namdaemun-ro 4-ga, Jung-gu, Seoul"
);
$("#explain-eng-container2").html("It was also called Namdaemun because it was located in the south as the main gate of Hanyangdoseong in the Joseon Dynasty. <br><br>It is the oldest wooden building remaining in Seoul. Construction began in the 5th year of King Taejo (1396) and was completed in the 7th year of King Taejo (1398). <br>This building was rebuilt in the 30th year of King Sejong (1448), but when it was dismantled and repaired from 1961 to 1963, it was revealed that there had been major construction work in the 10th year of King Seongjong (1479). It is a two-story pavilion-shaped building with a rainbow-shaped Hongyemun in the center of the stone axis, and 5 kan in the front and 2 kan on the side. <br>The roof has a trapezoidal shape when viewed from the front. <br>The structure is decorated and woven on the upper part of the pillar to support the eaves of the roof. It is a dapo style in which the structure is not only on the pillars but also between the pillars. .<br>👉Details: <a href='http://www.heritage.go.kr/heri/cul/culSelectDetail.do?VdkVgwKey=11,00010000,11&pageNo=1_1_1_0' target='blank'> Sungnyemun website </a>");
break;
case "청계천":
$("#address-ko-container2").html("서울특별시 종로구 청계천로 1");
$("#explain-ko-container2").html("대한민국 서울특별시 내부에 있는 지방하천으로, 한강 수계에 속하며 중랑천의 지류이다. <br>최장 발원지는 종로구 청운동에 위치한 ‘백운동 계곡’이며, 남쪽으로 흐르다가 청계광장 부근의 지하에서 삼청동천을 합치며 몸집을 키운다. <br>이곳에서 방향을 동쪽으로 틀어 서울의 전통적인 도심지를 가로지르다가, 한양대학교 서울캠퍼스 옆에서 중랑천으로 흘러든다. <br>현재 시민들의 도심 속 휴식공간 및 여가공간으로 자리잡았다.");
$("#name-eng2").html("Cheonggyecheon");
$("#address-eng-container2").html("1, Cheonggyecheon-ro, Jongno-gu, Seoul");
$("#explain-eng-container2").html("It is a local river in Seoul, South Korea. It belongs to the Han River system and is a tributary of the Jungnangcheon Stream. <br>The longest source is ‘Baekundong Valley’ located in Cheongun-dong, Jongno-gu, and it flows south and grows in size by joining the Samcheongdongcheon Stream in the basement near Cheonggye Plaza. <br>From here, turn east and cross the traditional downtown of Seoul, and it flows into Jungnangcheon next to Hanyang University's Seoul campus. <br>Currently, it has established itself as a resting and leisure space in the city center.");
break;
case "63빌딩":
$("#address-ko-container2").html("서울특별시 영등포구 63로 50");
$("#explain-ko-container2").html("63빌딩 혹은 63 스퀘어는 대한민국 서울특별시 영등포구 여의도동에 있는 마천루이다. <br>이전 명칭은 한화 63 시티이고 지상높이는 249m(해발 264m), 안테나 높이를 포함할 경우 지상높이는 274m(해발 289m)다. <br>리첸시아 타워 바로 옆에 위치하고 있다.");
$("#name-eng2").html("63 Building / 63 Square");
$("#address-eng-container2").html("50, 63-ro, Yeongdeungpo-gu, Seoul");
$("#explain-eng-container2").html("63 Building or 63 Square is a skyscraper in Yeouido-dong, Yeongdeungpo-gu, Seoul, South Korea. <br>The previous name was Hanwha 63 City, and it is 249m above sea level (264m above sea level) and 274m above the ground (289m above sea level) when including the antenna height. <br>Located right next to the Richencia Tower.");
break;
case "롯데월드":
$("#address-ko-container2").html("서울특별시 송파구 올림픽로 240");
$("#explain-ko-container2").html("롯데월드 놀이시설은 실내의 롯데월드 어드벤처와 야외의 매직아일랜드가 운영되고 있으며, 민속박물관, 아이스링크, 백화점, 마트, 호텔 등이 포함된다.");
$("#name-eng2").html("Lotte World");
$("#address-eng-container2").html("240 Olympic-ro, Songpa-gu, Seoul");
$("#explain-eng-container2").html("Lotte World amusement facilities operate indoor Lotte World Adventure and outdoor Magic Island, and include a folk museum, ice rink, department store, mart, hotel, etc.");
break;
case "여의도 한강공원":
$("#address-ko-container2").html("서울특별시 영등포구 여의동로 330");
$("#explain-ko-container2").html("정치, 금융, 언론의 중심지인 여의도에 자리하고 지하철, 버스 등 대중교통으로 접근성이 좋아 직장인과 일반시민들이 즐겨찾는 명소이자<br>봄꽃축제, 세계불꽃축제, 각종 공연 및 마라톤행사 등 다양한 행사가 이어져 볼거리와 즐길거리가 풍부한 휴식공간입니다.<br>또한 밤섬, 여의도 샛강 등이 비교적 자연그대로 보존되어 있어 생태학습장 및 자연친화형 공원으로 조성되어 있습니다.");
$("#name-eng2").html("Yeouido Hangang Park(Yeouido Han River Park)");
$("#address-eng-container2").html("330, Yeouidong-ro, Yeongdeungpo-gu, Seoul");
$("#explain-eng-container2").html("It is located in Yeouido, the center of politics, finance, and media, and is easily accessible by public transportation such as subway and bus. It is a resting space with abundant things to see and enjoy.<br>In addition, Bamseom Island and Yeouido Saetgang are relatively preserved in their natural state, making it an eco-learning center and nature-friendly park.");
break;
case "명동성당":
$("#address-ko-container2").html("서울특별시 중구 명동길 74");
$("#explain-ko-container2").html("한국 천주교 서울대교구 주교좌 명동대성당, 통칭 명동성당은 한반도에서 처음으로 지어진 대규모의 고딕 양식 천주교 성당이자, 한국 최초의 본당이다.");
$("#name-eng2").html("Myeongdong Cathedral");
$("#address-eng-container2").html("74, Myeongdong-gil, Jung-gu, Seoul");
$("#explain-eng-container2").html("Myeongdong Cathedral, commonly known as Myeongdong Cathedral, is the first large-scale Gothic Catholic cathedral built on the Korean Peninsula and the first parish church in Korea.");
break;
case "남산타워":
$("#address-container2").html("서울특별시 용산구 남산공원길 105");
$("#explain-ko-container2").html("서울의 상징이자 서울의 가장 아름다운 모습을 한 눈에 내려다 볼 수 있는 가장 높은 곳으로, <br>최신 LED 조명으로 시시각각 색과패턴이 변하는 '빛의 예술'과의 어우러짐 속에서 다양한 미디어 아트와 함게 색다른 문화예술을 경험하실 수 있습니다.<br> 👉자세한 내용: <a href='https://www.nseoultower.co.kr:8501/' target='blank'> 남산타워 웹 사이트 </a>");
$("#name-eng2").html("Namsan N-Tower");
$("#address-eng-container2").html("105, Namsan Gongong-gil, Yongsan-gu, Seoul");
$("#explain-eng-container2").html("It is a symbol of Seoul and the highest place where you can overlook the most beautiful aspects of Seoul at a glance. <br>In harmony with the 'art of light' that changes colors and patterns with the latest LED lighting, various media art You can experience different culture and art together.<br> 👉Details: <a href='https://www.nseoultower.co.kr:8501/' target='blank'> Namsan Tower website </a>");
break;
}
} else if (document.getElementById("remove_btn").value == "true") {
labelContainer2
.childNodes[i]
.innerHTML = "";
}
console.log(labelContainer2.childNodes[i].innerHTML);
}
document
.getElementById("remove_btn")
.value = "false";
document
.getElementById("container2")
.style
.display = "block";
}
</script>
</body>
<!-- Copyright (c) 2021 by Aaron Vanston
(https://codepen.io/aaronvanston/pen/yNYOXR) Permission is hereby granted, free
of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of the Software, and
to permit persons to whom the Software is furnished to do so, subject to the
following conditions: The above copyright notice and this permission notice
shall be included in all copies or substantial portions of the Software. THE
SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
</html>