-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (225 loc) · 13.6 KB
/
index.html
File metadata and controls
225 lines (225 loc) · 13.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LocaCamp</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./src/styles/reset.css" />
<link rel="stylesheet" href="./src/styles/common.css" />
<link rel="stylesheet" href="./src/styles/header.css" />
<link rel="stylesheet" href="./src/styles/details.css" />
<link rel="stylesheet" href="./src/styles/list.css" />
<link rel="stylesheet" href="./src/styles/map.css" />
<link rel="stylesheet" href="./src/styles/info_window.css" />
<script src="./src/js/data.js" type="module" defer></script>
<script src="./src/js/map.js" type="module" defer></script>
<script src="./src/js/search.js" type="module" defer></script>
</head>
<body>
<div class="wrap">
<header>
<h1>
<a href="#"><img src="./src/assets/images/logo.png" alt="" /></a>
</h1>
<div class="search">
<input type="text" placeholder="캠핑장 이름을 검색해주세요" />
<button class="searchBtn">
<svg
width="26"
height="26"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.5431 23.3369L19.6625 17.4563C21.0783 15.5715 21.8426 13.2773 21.84 10.92C21.84 4.89875 16.9413 0 10.92 0C4.89875 0 0 4.89875 0 10.92C0 16.9413 4.89875 21.84 10.92 21.84C13.2773 21.8426 15.5715 21.0783 17.4563 19.6625L23.3369 25.5431C23.6346 25.8092 24.0228 25.9513 24.4219 25.9401C24.821 25.9289 25.2007 25.7654 25.4831 25.4831C25.7654 25.2007 25.9289 24.821 25.9401 24.4219C25.9513 24.0228 25.8092 23.6346 25.5431 23.3369ZM3.12 10.92C3.12 9.37731 3.57746 7.86926 4.43454 6.58655C5.29161 5.30385 6.50981 4.3041 7.93507 3.71374C9.36033 3.12338 10.9287 2.96891 12.4417 3.26988C13.9548 3.57084 15.3446 4.31372 16.4354 5.40457C17.5263 6.49542 18.2692 7.88524 18.5701 9.3983C18.8711 10.9113 18.7166 12.4797 18.1263 13.9049C17.5359 15.3302 16.5362 16.5484 15.2535 17.4055C13.9707 18.2625 12.4627 18.72 10.92 18.72C8.85207 18.7175 6.86955 17.8949 5.40731 16.4327C3.94506 14.9704 3.12248 12.9879 3.12 10.92Z"
fill="#04101C"
/>
</svg>
</button>
</div>
</header>
<main>
<section class="list-section">
<ul class="list"></ul>
</section>
<section class="detail-section">
<div id="campingImage"><img src="" alt="" /></div>
<button id="close">
<img
src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png"
alt="닫기"
/>
</button>
<div class="campingSiteData">
<h2 id="facilityName"></h2>
<div>
<svg
width="18"
height="21"
viewBox="0 0 18 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.46963 20.3188L8.47316 20.32C8.7049 20.4211 8.83429 20.3976 8.83429 20.3976C8.83429 20.3976 8.96369 20.4211 9.1966 20.32L9.19896 20.3188L9.20601 20.3153L9.22719 20.3059C9.33879 20.2539 9.44901 20.199 9.55774 20.1412C9.77653 20.0283 10.0824 19.8589 10.4482 19.6318C11.1775 19.1801 12.148 18.4955 13.1232 17.5556C15.0712 15.6782 17.0686 12.7432 17.0686 8.63431C17.0686 7.55297 16.8556 6.48221 16.4418 5.48317C16.028 4.48414 15.4215 3.5764 14.6568 2.81177C13.8922 2.04714 12.9845 1.44061 11.9854 1.02679C10.9864 0.612981 9.91564 0.399994 8.83429 0.399994C7.75295 0.399994 6.68219 0.612981 5.68316 1.02679C4.68412 1.44061 3.77638 2.04714 3.01175 2.81177C2.24712 3.5764 1.64059 4.48414 1.22678 5.48317C0.812963 6.48221 0.599976 7.55297 0.599976 8.63431C0.599976 12.7421 2.59739 15.6782 4.54657 17.5556C5.36247 18.3396 6.25868 19.0355 7.22037 19.6318C7.59292 19.8629 7.97604 20.0764 8.36847 20.2718L8.4414 20.3059L8.46257 20.3153L8.46963 20.3188ZM8.83429 11.2811C9.53625 11.2811 10.2095 11.0022 10.7058 10.5058C11.2022 10.0095 11.481 9.33627 11.481 8.63431C11.481 7.93235 11.2022 7.25914 10.7058 6.76278C10.2095 6.26642 9.53625 5.98757 8.83429 5.98757C8.13233 5.98757 7.45912 6.26642 6.96276 6.76278C6.4664 7.25914 6.18755 7.93235 6.18755 8.63431C6.18755 9.33627 6.4664 10.0095 6.96276 10.5058C7.45912 11.0022 8.13233 11.2811 8.83429 11.2811Z"
fill="#238CFA"
/>
</svg>
<strong id="address"></strong>
</div>
<ul>
<li>
<div class="icon">
<svg
width="20"
height="17"
viewBox="0 0 20 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99998 16V11H12V16C12 16.55 12.45 17 13 17H16C16.55 17 17 16.55 17 16V9H18.7C19.16 9 19.38 8.43 19.03 8.13L10.67 0.600001C10.29 0.260001 9.70998 0.260001 9.32998 0.600001L0.969976 8.13C0.629976 8.43 0.839976 9 1.29998 9H2.99998V16C2.99998 16.55 3.44998 17 3.99998 17H6.99998C7.54998 17 7.99998 16.55 7.99998 16Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>홈페이지</strong>
<a id="homepage" target="_blank"></a>
</li>
<li>
<div class="icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18C4.02955 18 0 13.9705 0 9C0 4.02955 4.02955 0 9 0C13.9705 0 18 4.02955 18 9C18 13.9705 13.9705 18 9 18ZM9.81818 3.68182H8.18182V9.33873L11.4545 12.6115L12.6115 11.4545L9.81818 8.66127V3.68182Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>현재운영여부</strong>
<p id="manageStatus"></p>
</li>
<li>
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="23"
viewBox="0 0 18 18"
class="DNzQ2"
aria-hidden="true"
>
<path
d="M6.9 5.4c-.2.3-.2.6 0 .9.2.2.6.2.8 0l2.7-2.6v5.6H2.5V16c0 .3.3.6.6.6s.6-.3.6-.6v-5.6h7.9V3.6l2.7 2.6c.2.2.6.2.8 0 .2-.2.2-.6 0-.8l-3.9-3.8a.3.3 0 00-.4 0L6.9 5.4z"
fill="#D5D5D5"
></path>
</svg>
</div>
<strong>오시는 길</strong>
<p id="direction"></p>
</li>
<li>
<div class="icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.4916 0C12.7464 0 12.9908 0.101236 13.171 0.281439C13.3512 0.461641 13.4525 0.706047 13.4525 0.960892V1.92178H15.3743C15.8591 1.92163 16.3261 2.10474 16.6816 2.43442C17.0371 2.76409 17.2549 3.21596 17.2912 3.69943L17.2961 3.84357V15.3743C17.2962 15.8591 17.1131 16.3261 16.7834 16.6816C16.4537 17.0371 16.0019 17.2549 15.5184 17.2912L15.3743 17.2961H1.92178C1.43694 17.2962 0.969956 17.1131 0.614444 16.7834C0.258932 16.4537 0.0411679 16.0019 0.00480466 15.5184L9.63467e-08 15.3743V3.84357C-0.000153338 3.35872 0.18296 2.89174 0.512633 2.53623C0.842306 2.18072 1.29417 1.96295 1.77765 1.92659L1.92178 1.92178H3.84357V0.960892C3.84357 0.706047 3.9448 0.461641 4.12501 0.281439C4.30521 0.101236 4.54961 0 4.80446 0C5.0593 0 5.30371 0.101236 5.48391 0.281439C5.66411 0.461641 5.76535 0.706047 5.76535 0.960892V1.92178H11.5307V0.960892C11.5307 0.706047 11.6319 0.461641 11.8121 0.281439C11.9923 0.101236 12.2367 0 12.4916 0ZM11.3616 6.12953L7.28548 10.2056L5.92582 8.84693C5.74459 8.6719 5.50187 8.57504 5.24993 8.57723C4.99798 8.57942 4.75698 8.68048 4.57882 8.85863C4.40067 9.03679 4.29961 9.2778 4.29742 9.52974C4.29523 9.78168 4.39208 10.0244 4.56712 10.2056L6.59844 12.2379C6.68857 12.3281 6.7956 12.3997 6.9134 12.4485C7.03121 12.4973 7.15748 12.5225 7.285 12.5225C7.41252 12.5225 7.53879 12.4973 7.6566 12.4485C7.7744 12.3997 7.88143 12.3281 7.97156 12.2379L12.7203 7.48823C12.8121 7.39959 12.8853 7.29356 12.9356 7.17633C12.986 7.0591 13.0125 6.93301 13.0136 6.80542C13.0147 6.67783 12.9904 6.5513 12.9421 6.43321C12.8938 6.31512 12.8224 6.20784 12.7322 6.11762C12.642 6.0274 12.5347 5.95605 12.4166 5.90773C12.2985 5.85942 12.172 5.83511 12.0444 5.83622C11.9168 5.83732 11.7907 5.86383 11.6735 5.91419C11.5563 5.96455 11.4502 6.03775 11.3616 6.12953Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>예약 방법</strong>
<p id="reservationMethod"></p>
</li>
<li>
<div class="icon">
<svg
width="18"
height="16"
viewBox="0 0 18 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.16 3.8C17.07 3.34 16.66 3 16.18 3H1.82C1.34 3 0.93 3.34 0.84 3.8L0 8V9C0 9.55 0.45 10 1 10V15C1 15.55 1.45 16 2 16H10C10.55 16 11 15.55 11 15V10H15V15C15 15.55 15.45 16 16 16C16.55 16 17 15.55 17 15V10C17.55 10 18 9.55 18 9V8L17.16 3.8ZM9 14H3V10H9V14ZM2 2H16C16.55 2 17 1.55 17 1C17 0.45 16.55 0 16 0H2C1.45 0 1 0.45 1 1C1 1.55 1.45 2 2 2Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>내부시설</strong>
<p id="facilities"></p>
</li>
<li>
<div class="icon">
<svg
width="18"
height="11"
viewBox="0 0 18 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.69326 11C1.94513 11 1.30922 10.6995 0.785533 10.0985C0.261844 9.49756 0 8.76781 0 7.90927V4.81854C0 4.52663 0.0861843 4.28212 0.258553 4.085C0.430921 3.88788 0.643987 3.78898 0.897752 3.78829H11.6932C11.768 3.22166 11.97 2.71512 12.2992 2.26868C12.6284 1.82224 13.0324 1.50459 13.5112 1.31571L16.8104 0.0536585C17.0498 -0.0321952 17.2817 -0.0150243 17.5062 0.105171C17.7306 0.225366 17.8802 0.422829 17.955 0.697561C18.0299 0.972293 18.0113 1.23844 17.8994 1.496C17.7875 1.75356 17.6115 1.92527 17.3715 2.01112L14.0723 3.27317C13.8927 3.34185 13.7467 3.46651 13.6342 3.64715C13.5216 3.82779 13.4657 4.02937 13.4663 4.2519V7.90927C13.4663 8.76781 13.2044 9.49756 12.6807 10.0985C12.1571 10.6995 11.5212 11 10.773 11H2.69326Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>취사도구</strong>
<p id="cookingItems"></p>
</li>
<li>
<div class="icon">
<svg
width="18"
height="16"
viewBox="0 0 18 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3296 6.17143C12.9667 6.17143 13.9741 4 13.9741 2.62857C13.9741 1.48571 13.3444 0.114286 12.0852 0.114286C10.4481 0.114286 9.44074 2.28571 9.44074 3.65714C9.44074 4.8 10.0704 6.17143 11.3296 6.17143ZM6.54445 6.17143C7.8037 6.17143 8.43333 4.8 8.43333 3.65714C8.43333 2.17143 7.42593 0 5.78889 0C4.52963 0 3.9 1.37143 3.9 2.51429C3.77407 4 4.78148 6.17143 6.54445 6.17143ZM15.863 5.02857C14.2259 5.02857 13.0926 7.08571 13.0926 8.57143C13.0926 9.6 13.5963 10.6286 14.7296 10.6286C16.3667 10.6286 17.5 8.57143 17.5 7.08571C17.5 6.05714 16.8704 5.02857 15.863 5.02857ZM4.90741 8.57143C4.90741 7.08571 3.64815 5.02857 2.13704 5.02857C1.0037 5.02857 0.5 6.05714 0.5 7.08571C0.5 8.57143 1.75926 10.6286 3.27037 10.6286C4.4037 10.6286 4.90741 9.6 4.90741 8.57143ZM8.93704 8.34286C6.41852 8.34286 3.01852 12 3.01852 14.5143C3.01852 15.6571 3.9 16 4.90741 16C6.41852 16 7.55185 15.0857 8.93704 15.0857C10.1963 15.0857 11.3296 16 12.7148 16C13.7222 16 14.8556 15.7714 14.8556 14.5143C14.8556 12 11.4556 8.34286 8.93704 8.34286Z"
fill="#D5D5D5"
/>
</svg>
</div>
<strong>애완견가능여부</strong>
<p id="allowPets"></p>
</li>
</ul>
<div id="intro">
<strong>캠핑장 소개</strong>
<p></p>
</div>
</div>
</section>
<section class="map-section">
<div id="kakaoMap">
<button id="refreshMapBtn">
<i class="fa-solid fa-arrows-rotate"></i> 현 지도에서 검색
</button>
</div>
</section>
</main>
</div>
</body>
</html>