-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
144 lines (126 loc) · 6.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geektrip</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<!--Required meta tag that's supposed to be after Bootstrap(CSS)-->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- EmailJS API (Code from EmailJS website) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.1/dist/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init("user_MYwFFLtpXfxcryP8yyImH");
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// generate the contact number value
this.contact_number.value = Math.random() * 100000 | 0;
emailjs.sendForm("gmail", "contact_form", this);
});
}
</script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<a href="#" class="navbar-brand">Home <i class="far fa-smile"></i></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#search" class="nav-link">Search</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="intro">
<div class="container-fluid">
<div class="welcomepage row">
<div class="col-12">
<!-- Title in its own div so as to be able to enclose it in a semi-opaque box that seems to hover on top of the background image -->
<div class="title">
<h1>GeekTrip</h1>
</div>
<div class="about">
<!-- About info in its own div so as to be able to enclose it in a semi-opaque box that seems to hover on top of the background image -->
<p>Looking for cool places to visit in Tokyo? GeekTrip's got you covered. We've highlighted our top 4 tourist spots for anime and manga nerds and video game geeks. All you need to do is select your interest in the dropdown menu below :) </p>
</div>
</div>
</div>
</div>
</section>
<section id="search">
<div class="container-fluid">
<div class="mappage row">
<div class="col-12 col-md-6 my-auto">
<!-- Dropdown that allows the user to select their interest and see relevant locations rendered on map -->
<label for = "options">Choose your interest:</label>
<select id="options" onchange="initMap();">
<option value="animemanga">Anime and Manga</option>
<option value="videogames">Video Games</option>
</select>
</div>
<div class="col-12 col-md-6 my-auto">
<!-- Map to render map -->
<div id="map">
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container-fluid">
<!-- Contact Page -->
<div class="contactpage row">
<div class="col-12 my-auto">
<h2><u>Got Feedback?</u></h2>
<!-- Included this disclaimer because user privacy policy and GDPR are
more relevant in today's climate than ever before -->
<small class="form-text text-muted">We'll never share your personal details with anyone else.</small>
<!-- Contact form. Opted for place holders instead of labels to adhere to current development trends as well as yield better UX -->
<form id="contact-form" name="contact-form" method="post">
<input type="hidden" name="contact_number">
<input type="text" class="form-control" name="user_name" placeholder="Name">
<input type="email" class="form-control" name="user_email" placeholder="Email">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</section>
<footer>
<!-- Social media handles in footer -->
<div class="s-m">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/?lang=en" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://ie.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/" target="_blank"><i class="fab fa-github-square"></i></a>
</div>
</footer>
<script>
</script>
<script src="assets/data.js"></script>
<script src="assets/map.js"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxVT96vkIfvGuSCWVfoSErjdEgkPiQirA&callback=initMap"></script>
</body>
</html>