-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
197 lines (185 loc) · 9.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.8.2.js'></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<link rel="shortcut icon" href="./UI/img/geo-search-icon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster|Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./UI/styles/loader.css">
<link rel="stylesheet" href="./UI/styles/fb-design.css">
<link rel="stylesheet" href="./UI/styles/dashboard-styles.css">
<title>Geo Search || search location</title>
<meta property="og:url" content="https://geo-search.netlify.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Geo Search || search for any location" />
<meta property="fb:app_id" content="1732816256851456" />
<meta property="og:image" content="https://www.mapquestapi.com/staticmap/v5/map?key=H1snoR7HAMGka2pLiA1cDnQiU2mVEc5x&locations=6.4547,3.38877&size=1100,500@2x" />
<meta property="og:description" content="Geo-Search is a tool that allows people to search for places and extract information such as timezone, map and local weather conditions like temperature" />
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1732816256851456',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
<nav>
<a class="navbar__brand" onclick="reload()" id="nav__logo" href="javascript:void()">
<img src="./UI/img/geo-search-logo_upscaled_illustration_x4.jpg" alt="logo">
<span>Geo search</span>
</a>
<div class="collapsable navbar__flex navbar__collapsable">
<ul class="navbar__nav left__navbar">
<li class="nav__item">
<a href="#" class="nav__link">Dashboard</a>
<span class="underline"></span>
</li>
</ul>
<!-- THIS IS THE RIGHT NAV BAR -->
<ul class="navbar__nav right__navbar">
<li class="nav__item search__container">
<img class="search__bar__icon" src="https://img.icons8.com/android/24/000000/search.png">
<input type="text" name="search__bar" placeholder="search for a location" id="search__bar">
<button type="submit" class="search__btn" id="search__btn">Search</button>
</li>
<!-- <li class="nav__item logged__in__user">
<img class="user__profile__pics" src="./UI/img/profile-pics-tobi.jpg" alt="profile__pics">
<i class="fas fa-cloud-sun"></i>
<i class="fas fa-map-marker-alt"></i>
<span class="user__name">Anani oluwatobiloba</span>
<span class="nav__google__snipet">From Google</span>
<span class="bottom__navigation__span"></span>
</li> -->
<span id="hover__nav">
<img src="./UI/img/angle-arrow-down.svg" alt="arrow down icon">
<div class="dropdown-background">
<div class="dropdown bio">
<div class="triangle-up"></div>
<p>This App was made by Anani oluwatobiloba</p>
<p style="margin: 0;">© 2019</p><br>
<span>My social Media Links</span>
<button class="social__btn">
<a target="_blank" href="https://github.com/oluwatobiloba2000">Github</a></button>
<button class="social__btn">
<a target="_blank" href="https://facebook.com/oluwatobi.anani.9">Facebook</a>
</button>
<button class="social__btn">
<a target="_blank" href="https://twitter.com/Anani_oluwatobi">Twitter</a>
</button>
</div>
</div>
</span>
</ul>
</div>
</nav>
<div class="second__nav">
<!-- THIS IS THE RIGHT NAV BAR -->
<ul class="navbar__nav second__navbar__nav">
<span class="share__wrapper">
<iframe class="iframe" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fgeo-search.netlify.com&width=450&layout=standard&action=like&size=small&show_faces=false&share=false&height=35&appId=1732816256851456" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<!-- Your share button code -->
<div class="fb-share-button"
data-size="large"
data-href="https://geo-search.netlify.com"
data-layout="button_count">
</div>
</span>
</ul>
</div>
</header>
<section class="section">
<div class="spinner">
<span class="logo__container">
<img class="loader__logo" src="./UI/img/geo-search-logo_upscaled_illustration_x4.jpg" alt="logo">
<span class="logo__text">Geo search</span>
</span>
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<span class="loading__text">Loading..... Please wait</span>
</div>
<div class="left__div">
<div class="weather__result__container">
<h1 class="city__name__h1">
<i class="fas fa-map-marker-alt"></i>
<span class="bottom__navigation__span"></span>
<span class="city__name"></span>
</h1>
<div>
<p class="date__dashboard">
<span class="weather__icon"></span>
<span class="today"></span> <br />
<span class="today__date__words"></span>
</p>
<p class="weather__degree"></p>
<p class="temp__scale__btn">
</p>
<p class="weather__description__details description__details"></p>
<p class="pressure__details"></p>
<p class="humidity__details"></p>
<p id="postal__code" class="description__details"></p>
</div>
<span class="view__map__mobile">
<a href="#map">View map for this location</a>
</span>
<div class="location__images">
</div>
</div>
</div>
<div class="error__loader">
<button class="close__loader__btn">X</button>
<img class="error__loader__svg" src="./UI/img/undraw_weather_app_i5sm.svg" alt="svg image">
<!-- chase loader starts -->
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<!-- chase loader ends -->
<div class="alert__container">
<!-- <button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>Loading
</button> -->
</div>
<!-- <div class="waiting">
<p>waiting for weather data <i class="far fa-dot-circle"></i></p>
</div> -->
</div>
<!-- -----------------MAP ARENA STARTS ---------------------- -->
<div id="map" class="right__div">
</div>
</section>
<footer></footer>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfV-yKThJMx3FJcPrYzinBiaZtCIulIfA&libraries=places">
</script>
<script src="./UI/scripts/placeApi.js"></script>
<script src="./UI/scripts/fb-share.js"></script>
</body>
</html>