-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathparkdetails.html
219 lines (210 loc) · 10.4 KB
/
parkdetails.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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="assets/img/logo1.png" type="image/png">
<title>Park★Sky</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"
integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
<!-- Font Awesome Pro (Angel) -->
<script src="https://kit.fontawesome.com/9338ddc728.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/starChart.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="site-nav" data-hide-for="large">
<div class="title-bar-title align-middle align-center">
<a href="index.html"><img src="assets/img/logot_invert.png" alt="ParkSky Logo" width="300"></a>
<button class="menu-icon" type="button" data-toggle="site-nav"></button>
</div>
</div>
<header class="site-header top-bar" id="site-nav">
<ul class="vertical medium-horizontal menu align-center align-middle">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="parkdetails.html"><span>Park Details</span></a></li>
<li class="show-for-large"><a href="index.html"><img src="assets/img/logot_invert.png" alt="ParkSky Logo" width="300"></a></li>
<li><a href="starchart.html"><span>Star Chart</span></a></li>
<li><a href="https://github.com/vantango/uw-project1-parksky-app" target="_blank"><span>Github</span></a>
</li>
</ul>
</header>
<div id="searchBar">
<p><strong>Select your park & date of visit:</strong></p>
<form id="searchParks" class="text-center">
<div class="field is-grouped">
<div class="control has-icons-left">
<span class="select">
<select name="searchParksSelect" id="searchParksSelect">
<option value="acad" selected>Acadia National Park</option>
<option value="arch">Arches National Park</option>
<option value="badl">Badlands National Park</option>
<option value="bibe">Big Bend National Park</option>
<option value="bisc">Biscayne National Park</option>
<option value="blca">Black Canyon of the Gunnison National Park</option>
<option value="brca">Bryce Canyon National Park</option>
<option value="cany">Canyonlands National Park</option>
<option value="care">Capitol Reef National Park</option>
<option value="cave">Carlsbad Caverns National Park</option>
<option value="chis">Channel Islands National Park</option>
<option value="cong">Congaree National Park</option>
<option value="crla">Crater Lake National Park</option>
<option value="cuva">Cuyahoga Valley National Park</option>
<option value="dena">Denali National Park</option>
<option value="deva">Death Valley National Park</option>
<option value="drto">Dry Tortugas National Park</option>
<option value="ever">Everglades National Park</option>
<option value="jeff">Gateway Arch National Park</option>
<option value="gaar">Gates of the Arctic National Park</option>
<option value="glba">Glacier Bay National Park</option>
<option value="glac">Glacier National Park</option>
<option value="grca">Grand Canyon National Park</option>
<option value="grte">Grand Teton National Park</option>
<option value="grba">Great Basin National Park</option>
<option value="grsa">Great Sand Dunes National Park</option>
<option value="grsm">Great Smoky Mountains National Park</option>
<option value="gumo">Guadalupe Mountains National Park</option>
<option value="hale">Haleakalā National Park</option>
<option value="havo">Hawai'i Volcanoes National Park</option>
<option value="hosp">Hot Springs National Park</option>
<option value="indu">Indiana Dunes National Park</option>
<option value="isro">Isle Royale National Park</option>
<option value="jotr">Joshua Tree National Park</option>
<option value="katm">Katmai National Park</option>
<option value="kefj">Kenai Fjords National Park</option>
<!-- <option value="kica">King's Canyon National Park</option> NOTHING FROM API -->
<option value="kova">Kobuk Valley National Park</option>
<option value="lacl">Lake Clark National Park</option>
<option value="lavo">Lassen Volcanic National Park</option>
<option value="maca">Mammoth Cave National Park</option>
<option value="meve">Mesa Verde National Park</option>
<option value="mora">Mount Rainier National Park</option>
<option value="npsa">National Park of American Samoa</option>
<option value="noca">North Cascades National Park</option>
<option value="olym">Olympic National Park</option>
<option value="pefo">Petrified Forest National Park</option>
<option value="pinn">Pinnacles National Park</option>
<option value="redw">Redwood National Park</option>
<option value="romo">Rocky Mountain National Park</option>
<option value="sagu">Saguaro National Park</option>
<option value="seki">Sequoia and Kings Canyon National Parks</option>
<option value="shen">Shenandoah National Park</option>
<option value="thro">Theodore Roosevelt National Park</option>
<option value="viis">Virgin Islands National Park</option>
<option value="voya">Voyageurs National Park</option>
<option value="whsa">White Sands National Park</option>
<option value="wica">Wind Cave National Park</option>
<option value="wrst">Wrangell-Saint Elias National Park</option>
<option value="yell">Yellowstone National Park</option>
<option value="yose">Yosemite National Park</option>
<option value="zion">Zion National Park</option>
</select>
</span>
</div>
<div class="control">
<!-- can't set "today's date in HTML", it would be static -->
<input id="visitDate" type="date">
</div>
</div>
</form>
<div id="parkAlerts" data-open="parkAlertsModal"><i class="fas fa-exclamation-triangle"></i><span>0</span></div>
<div id="neoAlerts" data-open="neoAlertsModal"><i class="fas fa-meteor"></i><span>0</span></div>
</div>
<div id="site-content">
<section class="grid-x align-center">
<article class="cell">
<h2 id="parkName">Park Name</h2>
</article>
</section>
<div class="grid-x align-center">
<aside id="infobox" class="cell small-11 large-4">
<ul class="accordion" data-responsive-accordion-tabs="accordion large-tabs">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Entrance Fees</a>
<div class="accordion-content" data-tab-content>
<table id="entranceFees"></table>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Entrance Passes</a>
<div class="accordion-content" data-tab-content>
<table id="entrancePasses"></table>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Operating Hours</a>
<div class="accordion-content" data-tab-content>
<table id="operatingHours"></table>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Contact Info</a>
<div class="accordion-content" data-tab-content>
<table id="contactInfo"></table>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Weather</a>
<div class="accordion-content" data-tab-content>
<table id="weather"></table>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Stargazing Activities</a>
<div class="accordion-content" data-tab-content>
<section id="thingsToDo"></section>
</div>
</li>
</ul>
</aside>
<main id="galleryContainer" class="cell small-11 large-7" style="background: #FFF; padding: 1rem;">
<div id="description"></div>
<div class="fotorama" data-auto="false"></div>
<div id="extract"></div>
</main>
</div>
<section id="bg-photo-credit" class="grid-x">
<article class="cell small-12">
<span class="note text-right">Star Chart forked from <a href="https://github.com/ytliu0/starCharts" target="_blank">ytliu0's starCharts</a></span>
<br>
<span class="note text-right">Background Photo by <a href="https://unsplash.com/@vklemen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Klemen Vrankar</a> on <a href="https://unsplash.com/s/photos/starry-sky?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Unsplash</a></span>
</article>
</section>
</div>
<footer class="site-footer">
<p><strong>Park<small>★</small>Sky</strong> by Aleks, Angel and Jessica.</br>UW Coding Bootcamp</p>
</footer>
<div class="reveal alert-modal" id="parkAlertsModal" data-reveal>
<div class="modal-background"></div>
<div class="modal-content">
</div>
<button class="close-button" data-close aria-label="Close Modal" type="button"><span
aria-hidden="true">×</span></button>
</div>
<div class="reveal neo-modal" id="neoAlertsModal" data-reveal>
<div class="modal-background"></div>
<div class="modal-content">
</div>
<button class="close-button" data-close aria-label="Close Modal" type="button"><span
aria-hidden="true">×</span></button>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Foundation -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"
integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
<script>
$(document).foundation();
</script>
<!-- dayjs -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<!-- Team Scripts -->
<script src="assets/js/functions.js"></script>
<script src="assets/js/script.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</body>
</html>