-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
271 lines (252 loc) · 18.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="keywords" content="Backpacking, Hiking, Adventure, Outdoors, Trekking, Camping, Trails, Gear">
<meta name="description" content="Never forget your hiking essentials again with Backpack Buddy! Get started today!">
<title>Backpack Buddy - Ready for Anything</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- header section -->
<header>
<div id="logo">
<a href="index.html"><img class="logo" src="assets/images/logo.png" alt="logo"></a>
</div>
</header>
<!-- manin image section -->
<main>
<div class="main-img">
<img id="backpack-image" src="assets/images/backpack.png" alt="backpack">
</div>
<div class="backpack-icon-container">
<span id="backpack-icon">0</span>
<button id="backpack-button">My Backpack</button>
</div>
<div class="intro-text">
<h2>Welcome to Backpack Buddy!</h2>
<p>If you're an avid hiker who often forgets what to pack before heading out on an adventure, you've come to the right place. Our website offers a simple solution to ensure that you never leave anything behind again.</p>
</div>
<div id="weather-widget">
<h4>Tomorrow's Weather</h4>
<input id="location-input" type="text" placeholder="Enter your location" />
<button id="search-location">Search</button>
<div id="weather-data" class="weather-data">
<div class="location-text city"></div>
<div class="weather-info">
<div class="temperature"></div>
<div class="description"></div>
<div class="wind-speed"></div>
</div>
<div id="weather-icon-container">
<div class="weather-icon cloudy"></div>
<div class="weather-icon rain"></div>
<div class="weather-icon snow"></div>
<div class="weather-icon sunny"></div>
<div class="weather-icon thunderstorms"></div>
</div>
</div>
</div>
<!-- accordion tabs for categories section -->
<div class="accordion">
<h3 style="padding: 1rem;">Click on the categories below and add your items to the list:</h3>
<button class="accordion-button" aria-label="Toggle Hiking Gear accordion"><i class="fa-solid fa-person-hiking"></i> Hiking Gear</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Hiking boots" aria-label="Hiking boots checkbox"> Hiking boots</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Backpack" aria-label="Backpack checkbox"> Backpack</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Trekking poles" aria-label="Trekking poles checkbox"> Trekking poles</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Clothing & Footwear accordion"><i class="fa-solid fa-shirt"></i> Clothing & Footwear</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Moisture-wicking underwear" aria-label="Moisture-wicking underwear checkbox"> Moisture-wicking underwear</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Moisture-wicking T-shirt" aria-label="Moisture-wicking T-shirt checkbox"> Moisture-wicking T-shirt</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Quick-drying pants/shorts" aria-label="Quick-drying pants/shorts checkbox"> Quick-drying pants/shorts</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Long-sleeve shirt" aria-label="Long-sleeve shirt checkbox"> Long-sleeve shirt (for sun, bugs)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Lightweight fleece or jacket" aria-label="Lightweight fleece or jacket checkbox"> Lightweight fleece or jacket</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Boots or shoes suited to terrain" aria-label="Boots or shoes suited to terrain checkbox"> Boots or shoes suited to terrain</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Socks" aria-label="Socks checkbox"> Socks (synthetic or wool)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Extra clothes" aria-label="Extra clothes checkbox"> Extra clothes (beyond the minimum expectation)</li>
<li><h4>Additional items for rainy and/or cold weather:</h4></li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Rainwear" aria-label="Rainwear checkbox"> Rainwear (jacket and pants)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Long underwear" aria-label="Long underwear checkbox"> Long underwear</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Warm, insulated jacket or vest" aria-label="Warm, insulated jacket or vest checkbox"> Warm, insulated jacket or vest</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Fleece pants" aria-label="Fleece pants checkbox"> Fleece pants</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Gloves or mittens" aria-label="Gloves or mittens checkbox"> Gloves or mittens</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Warm hat" aria-label="Warm hat checkbox"> Warm hat</li>
<li><h4>Optional:</h4></li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Bandana or Buff" aria-label="Bandana or Buff checkbox"> Bandana or Buff</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Gaiters" aria-label="Gaiters checkbox"> Gaiters (for rainy, snowy or muddy conditions)</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Food & Water accordion"><i class="fa-solid fa-bottle-water"></i> Food & Water</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Water bottles" aria-label="Water bottles checkbox"> Water bottles and/or reservoir</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Water filter" aria-label="Water filter checkbox"> Water filter/purifier or chemical treatment</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Trail snacks" aria-label="Trail snacks checkbox"> Trail snacks</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Lunch" aria-label="Lunch checkbox"> Lunch</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Extra day's supply of food" aria-label="Extra day's supply of food checkbox"> Extra day's supply of food</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Navigation accordion"><i class="fa-solid fa-compass"></i> Navigation</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Map" aria-label="Map checkbox"> Map</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Compass" aria-label="Compass checkbox"> Compass</li>
<li><h4>Optional:</h4></li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Guidebook" aria-label="Guidebook checkbox"> Route description or guidebook</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Altimeter watch" aria-label="Altimeter watch checkbox"> Altimeter watch</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="GPS" aria-label="GPS checkbox"> GPS</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Satellite messenger" aria-label="Satellite messenger checkbox"> Satellite messenger/personal locator beacon</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Emergency & First Aid accordion"><i class="fa-solid fa-star-of-life"></i> Emergency & First Aid</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="First-aid kit" aria-label="First-aid kit checkbox"> First-aid kit or first-aid supplies</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Lighter/matches" aria-label="Lighter/matches checkbox"> Lighter/matches and firestarter</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Emergency shelter" aria-label="Emergency shelter checkbox"> Emergency shelter</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Whistle" aria-label="Whistle checkbox"> Whistle</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Two itineraries" aria-label="Two itineraries checkbox"> Two itineraries: 1 left with friend + 1 under car seat</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Health & Hygiene Aid accordion"><i class="fa-solid fa-pump-medical"></i> Health & Hygiene</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Hand sanitizer" aria-label="Hand sanitizer checkbox"> Hand sanitizer</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Menstrual products" aria-label="Menstrual products checkbox"> Menstrual products</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Prescription medications" aria-label="Prescription medications checkbox"> Prescription medications</li>
<li><h4>Sun protection:</h4></li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Sunscreen" aria-label="Sunscreen checkbox"> Sunscreen</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Sunglasses" aria-label="Sunglasses checkbox"> Sunglasses(+ sunglasses straps)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Sun hat" aria-label="Sun hat checkbox"> Sun hat</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Lip balm" aria-label="Lip balm checkbox"> SPF-rated lip balm</li>
<li><h4>Optional:</h4></li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Insect repellent" aria-label="Insect repellent checkbox"> Insect repellent</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Toilet paper" aria-label="Toilet paper checkbox"> Toilet paper</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Urinary products" aria-label="Urinary products checkbox"> Urinary products</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Sanitation trowel" aria-label="Sanitation trowel checkbox"> Sanitation trowel (if no toilets)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Baby wipes" aria-label="Baby wipes checkbox"> Baby wipes</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Antiseptic wipes" aria-label="Alcohol or antiseptic wipes checkbox"> Alcohol or antiseptic wipes</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Blister treatments" aria-label="Blister treatments checkbox"> Blister treatments</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Tools & Repair Items accordion"><i class="fa-solid fa-screwdriver-wrench"></i> Tools & Repair Items</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Multi-tool" aria-label="Multi-tool checkbox"> Knife or multi-tool</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Gear repair kit" aria-label="Gear-repair kit checkbox"> Small gear-repair kit (duct tape, zip ties, etc)</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Day Hiking Extras accordion"><i class="fa-solid fa-mountain-sun"></i> Day Hiking Extras</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Headlamp" aria-label="Headlamp checkbox"> Headlamp or flashlight (with extra batteries)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Camera" aria-label="Camera checkbox"> Camera</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Field guide" aria-label="Field guide checkbox"> Interpretive field guide(s)</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Journal" aria-label="Journal checkbox"> Outdoor journal with pen/pencil</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Binoculars" aria-label="Binoculars checkbox"> Binoculars</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Radios" aria-label="Two-way radios checkbox"> Two-way radios</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Power bank" aria-label="Power bank checkbox"> Power bank</li>
</ul>
</div>
</div>
<div class="accordion">
<button class="accordion-button" aria-label="Toggle Day Personal Items accordion"><i class="fa-solid fa-image-portrait"></i> Personal Items</button>
<div class="accordion-content">
<ul>
<li><input type="checkbox" class="item-checkbox" name="item" value="Credit card" aria-label="Credit card checkbox"> Credit card and/or cash</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Personal ID" aria-label="ID checkbox"> ID</li>
<li><input type="checkbox" class="item-checkbox" name="item" value="Mobile Phone" aria-label="Mobile Phone checkbox"> Mobile Phone</li>
</ul>
</div>
</div>
<h4 style="color: #664646; text-shadow: 0.3px 0.3px black;">Always Remember *</h4>
<p class="intro-text">The exact items you take for each trip can be based on considerations such as weather, difficulty, duration and distance.</p>
</main>
<!-- modal button -->
<div id="backpack-modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2>My Backpack</h2>
<p>Total Items: <span id="item-count">0</span></p>
<ul id="backpack-list">
<!-- The list of backpack items will be added using JavaScript -->
</ul>
<div class="extra-item">
<label for="extra-item-input">Add extra item:</label>
<input type="text" id="extra-item-input">
<button id="add-extra-item-button">Add Item</button>
</div>
<button id="clear-button">Clear Backpack</button>
<button id="print-button">Print</button>
</div>
<button id="useful-links-button">Useful Links</button>
<div id="useful-links" class="useful-links hidden">
<ul>
<li>Mountain weather information:</li>
<li><a href="https://www.mountain-forecast.com" rel="nofollow" target="_blank">Mountain Weather</a></li>
<li>Great information for beginner hikers:</li>
<li><a href="https://www.rei.com" rel="nofollow" target="_blank">REI</a></li>
<li>Budget friendly quality gear:</li>
<li><a href="https://www.decathlon.com" rel="nofollow" target="_blank">Decathlon</a></li>
<li>App for route setting and navigation:</li>
<li><a href="https://www.alltrails.com" rel="nofollow" target="_blank">Alltrails</a></li>
</ul>
</div>
<h4 style="padding: 0 25px;">Remember to take nothing but pictures and leave nothing but footprints <i class="fa-regular fa-face-smile-wink"></i></h4>
</div>
<!-- sign up form section -->
<div id="sign-up__form___container">
<h4>Sign up for future updates on Backpack Buddy!</h4>
<form id="sign-up__form" action="#" method="POST">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<input type="submit" value="Sign Up">
</form>
</div>
<!-- sign up thank you alert -->
<div id="alert-modal" class="alert-modal">
<div class="alert-modal__content">
<span class="alert-close">×</span>
<p id="alert-message"></p>
</div>
</div>
<!-- footer section -->
<footer>
<p>Disclaimer: This website was created as part of a <i class="fa-brands fa-github" style="color:#664646"></i><a href="https://github.com/kpetrauskas92/backpack-buddy" target="_blank">project.</a> for Code Institute</p>
<hr class="solid">
<p>Copyright © 2023 <a href="index.html" rel="nofollow" target="_blank">Backpack Buddy</a></p>
</footer>
<!-- script section -->
<script defer src="assets/js/script.js"></script>
<script src="https://kit.fontawesome.com/72dd490aed.js" crossorigin="anonymous"></script>
</body>
</html>