-
Notifications
You must be signed in to change notification settings - Fork 1
/
country.html
317 lines (277 loc) · 15.5 KB
/
country.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
<!-- Declared the doctype as well as the language in the HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Middle East</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<link rel="stylesheet" href="assets/css/mapstyle.css" type="text/css" />
<!-- Script for the cdn to connect to emailJS -->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script>
(function() {
emailjs.init("user_9UPvI1Hs4JHGtyozwple6");
})();
</script>
</head>
<body>
<!--Navigation bar which would direct the user to different areas of the site while making the current link active-->
<nav class="navbar navbar-expand-md navbar-light sticky-top">
<a class="navbar-brand">Explore The Middle East</a>
<!--The hamburger icon which would activate once the web browser gets to a specific size-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapse_target">
<ul class="navbar-main navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="country.html">Country</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#contact-modal">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!--Assisted with the bootstrap code for the 'carousel-fade' class from
https://getbootstrap.com/docs/4.5/components/carousel/#crossfade
Making sure the width of each image would be stretched the width of the page as in the CSS,
it would only take 95% of vertical height due to the navigation bar taking 5% of it.-->
<header>
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators under each caption -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<!--image taken from https://pixabay.com/photos/beirut-raouch%C3%A9-lebanon-sea-5172850/ -->
<img src="assets/img/carousel/beirut-hp.jpg" class="d-block w100" alt="Beirut">
<div class="carousel-caption">
<h3>Lebanon</h3>
<p>Beirut</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/archaeological-city-petra-jordan-2595597/ -->
<img src="assets/img/carousel/jordan-hp.jpg" class="d-block w100" alt="Amman">
<div class="carousel-caption">
<h3>Jordan</h3>
<p>Amman</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/burj-al-arab-dubai-sunset-emirates-5809639/ -->
<img src="assets/img/carousel/uae-hp.jpg" class="d-block w100" alt="Dubai">
<div class="carousel-caption">
<h3>UAE</h3>
<p>Dubai</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/istanbul-cami-turkey-travel-sunset-2430072/ -->
<img src="assets/img/carousel/turkey-hp.jpg" class="d-block w100" alt="Istanbul">
<div class="carousel-caption">
<h3>Turkey</h3>
<p>Istanbul</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/landscape-pyramids-desert-sand-5584652/ -->
<img src="assets/img/carousel/egypt-hp.jpg" class="d-block w100" alt="Cairo">
<div class="carousel-caption">
<h3>Egypt</h3>
<p>Cairo</p>
</div>
</div>
<!-- Left and Right controls for the carousel -->
<a href="#myCarousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#myCarousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<main>
<!-- The introduction to the section which would be looking now -->
<div class="description col-12">
<h1 class="homepage-title">Discover what the Middle East Has to show</h1>
<p>The Middle East holds some of the worlds most beauitful places to want to visit, with stories and history
behind each place makes a person only wanting to know more. It also has some of the most incredible cusines that
has been shared with the rest of the world and is well known.</p>
<!-- The drop down options that would be displayed which activate the value IDs -->
<p id="dropCountries">To know more about a specific country,
<select id='myCountries'>
<option value="default" selected="selected">Please select a Country!</option>
<option value="lb">Lebanon</option>
<option value="ae">Dubai</option>
<option value="tr">Turkey</option>
<option value="eg">Egypt</option>
<option value="jo">Jordan</option>
</select>
</p>
</div>
<!-- The information which would be populated when one of the drop downs are selected -->
<div class="container-fluid main-container"></div>
</main>
<div id="middleEastMapResults">
<!-- The search of cities which is connected to the maps.js, it is needed to be -->
<div class="col-12 city-search">
<div id="city-search-field">
<h3>Type in a city you would like to discover!</h3>
<input id="city-location" placeholder="Please type in a city" type="text" required />
</div>
<!-- Reset button to reset the search of the map -->
<input type="reset" onclick="resetCountries()" id="reset-btn">
</div>
<!-- The radio buttons which would define the search the user is looking for -->
<div class="col-12 row select-activity">
<div class="col-4">
<input type="radio" id="tourist_attraction" name="attractions" value="tourist_attraction">
<label for="tourist_attraction">Tourist Attraction</label>
</div>
<div class="col-4">
<input type="radio" id="restaurant" name="attractions" value="restaurant">
<label for="restaurant">Restaurant</label>
</div>
<div class="col-4">
<input type="radio" id="lodging" name="attractions" value="lodging">
<label for="lodging">Accomodation</label>
</div>
</div>
</div>
<!-- Google maps placeholder -->
<div id="map"></div>
<!-- The results from the Google Maps findings -->
<div id="listing">
<table id="resultsTable">
<tbody id="results"></tbody>
</table>
</div>
<!-- The info window within Google Maps where the information about the place would be displayed -->
<div style="display: none">
<div id="places-info-window">
<table>
<tr id="iw-url-row" class="iw_table_row">
<td id="iw-icon" class="iw_table_icon"></td>
<td id="iw-url"></td>
</tr>
<tr id="iw-address-row" class="iw_table_row">
<td class="iw_attribute_name">Address:</td>
<td id="iw-address"></td>
</tr>
<tr id="iw-phone-row" class="iw_table_row">
<td class="iw_attribute_name">Telephone:</td>
<td id="iw-phone"></td>
</tr>
<tr id="iw-rating-row" class="iw_table_row">
<td class="iw_attribute_name">Rating:</td>
<td id="iw-rating"></td>
</tr>
<tr id="iw-website-row" class="iw_table_row">
<td class="iw_attribute_name">Website:</td>
<td id="iw-website"></td>
</tr>
</table>
</div>
</div>
<!-- Contact Me section as it is built within a modal feature. This has been utilised from bootstrap however
modified to make it work for my needs. This is being called from the navigation bar. -->
<div class="modal fade" id="contact-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<!-- The content for the Contact Me modal form -->
<div class="modal-content">
<div class="modal-header">
<h1 class="contact-title">Contact Me</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- The body of the contact form where the user would fill out and have it sent to me. -->
<div class="contact-body">
<div class="row bg-color-contact">
<div class="contact-headers">
<h3 class="contact-heading">Is there a country in the Middle East you would like to know more about?</h3>
<h5>Please let me know.</h5>
</div>
<!-- The Modal form which displays the fields of entry ensuring all is required before sending to the site admin -->
<div class="center-form">
<form id="contactForm">
<input type="text" name="fullname" class="form-control" id="from_fullname" placeholder="Full Name" required />
<input type="text" name="useremail" class="form-control" id="from_useremail" placeholder="Email" required />
<input type="text" name="country_request" class="form-control" id="country_requested" placeholder="Country in Question?" required />
<input type="text" name="question_asked" class="form-control" id="question_asked" placeholder="Question?" required />
<!-- Buttons used to close the modal as well as the submit functionality which would activate the sendEmail.js file -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="send-modal-button">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-section">
<div class="row col-12">
<!--Quick links which would redirect you to different parts of the site-->
<div class="col-lg-4 col-md-3 quicklinks">
<h4>Quick Links</h4>
<div class="row">
<div class="col col-12">
<a href="index.html">Home</a>
</div>
<div class="col col-12">
<a href="country.html">Country</a>
</div>
<div class="col col-12">
<a data-toggle="modal" data-target="#contact-modal">Contact Us</a>
</div>
</div>
</div>
<!-- Utilising font awesome for the icons to link users to my social media links -->
<div class="col-lg-4 col-md-6 social-media">
<h4>Social Media</h4>
<div class="social-logos">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!--Contact information displayed in the footer as alternative methods to reach out-->
<div class="col-lg-4 col-md-3 contact-us">
<h4>Contact Info</h4>
<p>Phone Number: +440000000000<br>
Monday - Friday<br>
09:00 - 17:00</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfhzet6KXKNT4YjmlmDDDaFisliUbjhQ8&callback=initMap&libraries=places,geometry&v=weekly" defer></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/maps.js"></script>
<script src="assets/js/sendEmail.js"></script>
</body>
</html>