-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (215 loc) · 16.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Weather</title>
</head>
<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://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" type="text/css"
media="all" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link href="index.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
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 type='text/javascript' src='./config/config.js'></script>
<script src='index.js' defer></script>
<body>
<div class="navbar navbar-default navbar-static-top bg-light sticky-top bg-dark" role="navigation">
<div class="container d-flex justify-content-between">
<h3 class="text-warning"> Spatial Weather-LookUp</h3>
<div class="navbar-header ml-auto">
<a href="#" data-toggle="modal" data-target="#ReadmeModal"><small class="text-muted ml-2">READ ME</small>
</a> <a href="#" data-toggle="modal" data-target="#DisclaimerModal"> <small class="text-muted ml-2">DISCLAIMER</small> </a>
<button id="homeloc" class="btn btn-primary btn-sm ml-2" type="submit">Home Location</button>
<button id="reset" class="btn btn-primary btn-sm ml-2" type="submit">Reset View</button>
</div>
<button class="getweather btn btn-primary btn-sm ml-2" type="submit">Get Weather</button>
<div id="aBtnGroup" class="btn-group ml-auto">
<button type="button" value="C" class="btn btn-primary active text-light">°C</button>
<button type="button" value="F" class="btn text-light">°F</button>
</div>
</div>
</div>
<div class="sect sect--padding-top">
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="map-tab" class="nav-link active" data-toggle="tab" href="#home">MAP</a>
</li>
<li class="nav-item">
<a id="weather-tab" class="nav-link disabled" data-toggle="tab" href="#menu1">Weather</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<div id="map-div m-0">
<div class="text-center mt-0 mb-2">
<button class="getweather btn btn-primary btn-sm ml-2" type="submit">Get Weather</button>
</div>
<div id="mapid">
<!-- <div class="leaflet-top leaflet-right">
<input type="button" id="getweather" value="Get Weather" class="btn btn-primary btn-sm btnStyle span3 leaflet-control" style="pointer-events: auto;"/>
</div> -->
</div>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<div id="results" style="display: none;">
<div class="card card-weather">
<div id="main-display" class="card-body flex-wrap" style="height: 500px;">
<div class="d-flex justify-content-between flex-wrap">
<div class="weather-date-location">
<h3 id="fd-place">Place</h3>
<p class="text-gray"> <span id="fd-date">Date Month, Year</span><span> |
</span><span id="fd-time">Time</span></p>
</div>
<div>
<h4 id="fd-temp" class="display-3"> 32</h4>
<h4 class="text-center"><span>Feels like </span> <span id="fd-fl"></span></h4>
</div>
</div>
<div id="other-weather-data" class="d-flex justify-content-between flex-wrap ml-auto mt-auto">
<div id="fd-icon"></div>
<div>
<h6 class="text-gray text-center">Humidity</h6>
<h3 class="text-center"> <span id="fd-hum">Conditions</span></h3>
</div>
<div>
<h6 class="text-gray text-center">Clouds</h6>
<h3 class="text-center"> <span id="fd-clouds">Conditions</span></h3>
</div>
<div>
<h6 class="text-gray text-center">Visibility</h6>
<h3 class="text-center"> <span id="fd-vis">Conditions</span></h3>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="d-flex weekly-weather" style="background-color: rgb(0, 175, 219);"></div>
</div>
</div>
<button id="download" class="mt-3"> Download Data</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ReadmeModal" tabindex="-1" role="dialog" aria-labelledby="ReadmeModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ReadmeModalLabel">READ ME</h5> <button type="button" class="close"
data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body overflow-auto">
<h6> <strong> Introduction </strong></h6>
<p>Hello and Welcome! Thanks for using this web app. You may have already discovered that there is
nothing more than simply viewing weather on a map. You are absolutely right. In fact, there is
nothing special about this web app. It is just weather look up on a map. There could be many
solutions on the internet, providing the same information more effectively.
<p><strong>So why did I develop this?</strong></p>
<p>Lately, I have been learning a lot about new technologies to expand my product management
experience into the technical side. So, as I learn new technology, I thought of creating
something useful, no matter if the solution is available or not in the market. This way, I gain
practical experience in developing products and showcasing my skills.</p>
<p><strong>What features this web app comes with?</strong></p>
<p>Here is the list of things you can do using this app:</p>
<ul style="font-size:10pt;">
<li>Find out the current weather for your home location and anywhere on the planet.</li>
<li>Retrieve a seven-day weather forecast for your home location and anywhere on the planet.
</li>
<li>Get weather information by city names by simply locating them on the map.</li>
<li>Download the weather data in CSV file format by simply clicking on the Download button.</li>
<li>View weather data both in °C and °F</li>
</ul>
<p>How to use?</p>
<ol style="font-size:10pt;">
<li>Navigate and click on the map where you want to get the weather data.</li>
<li>Once you identify the location, click on the button "Get Weather". </li>
<li>This will take you to the "Weather" tab, where the current and 7 days weather forecast data is presented.</li>
<li>Download the weather data in CSV file format by simply clicking on the Download button.</li>
<li>If you wish to view weather data in different temperature units, click on °C and °F</li>
<li>To go back to your home location, click on the button "Home Location" on the top menu bar.</li>
<li>To go reset the map view to the original setting, click on the button "Reset View" on the top menu bar.</li>
</ol>
<p><strong>Would you like to contribute or report bugs?</strong></p>
<p>I have created a GitHub repository for this web app. If you find bugs, please do report them on
GitHub. If You are one like me, passionate about developing simple web apps, I welcome your
contributions. Contact me on GitHub. Here is the link to the <a
href="https://github.com/arjunken/spatialweatherlookup">GitHub Repository</a>.</p>
<p><strong>Have questions to the developer?</strong></p>
<p><a href="https://twitter.com/intent/tweet?screen_name=arjunken&ref_src=twsrc%5Etfw"
class="twitter-mention-button" data-show-count="false">Tweet to @arjunken</a>
</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary m-auto"
data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
<div class="modal fade" id="DisclaimerModal" tabindex="-1" role="dialog" aria-labelledby="DisclaimerModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="DisclaimerModalLabel">DISCLAIMER</h5> <button type="button"
class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This information was brought to you by developer <strong>"Arjun Kenchappagoudra"</strong> and he
has made every attempt to ensure the accuracy and reliability of the information provided on
this website by simply pulling off information from <a
href="https://openweathermap.org/">OpenWeatherMap</a>. The developer does not accept any
responsibility or liability for the accuracy, content, completeness, legality, or reliability of
the information contained on this website.</p>
<p>No warranties, promises and/or representations of any kind, expressed or implied, are given as to
the nature, standard, accuracy or otherwise of the information provided in this website nor to
the suitability or otherwise of the information to your particular circumstances.</p>
<p>Developer cannot and will not guarantee that this website is free from computer viruses or
anything else that has destructive properties.</p>
<p>Developer shall not be liable for any loss or damage of whatever nature (direct, indirect,
consequential, or other) whether arising in contract, tort or otherwise, which may arise as a
result of your use of (or inability to use) this website, or from your use of (or failure to
use) the information on this site. This website provides links to other websites owned by third
parties. The content of such third party sites is not within the developer's control, and
developer cannot and will not take responsibility for the information or content thereon. Links
to such third party sites are not to be taken as an endorsement by the developer of the third
party site, or any products promoted, offered or sold on the third party site, nor that such
sites are free from computer viruses or anything else that has destructive properties. Developer
cannot and does not take responsibility for the collection or use of personal data from any
third party site. In addition, developer will not accept responsibility for the accuracy of
third party advertisements.</p>
<p>The information provided on this website was fetched from third-party information providers using
unique API keys/access tokens which could be visible or accessible. Copying these API
keys/access tokens is prohibited and shall not be used in your projects. Developer retains the
rights of using these API keys/access tokens.</p>
</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary m-auto"
data-dismiss="modal">Accept and Close</button></div>
</div>
</div>
</div>
<footer class="page-footer fixed-bottom bg-dark mt-4">
<div class="footer-copyright text-center text-muted text-light py-2">© 2018 Copyright: <a
href="https://www.arjunken.com"> arjunken.com</a> <span> | Powered by: <a href="https://leafletjs.com/">
LeafletJS</a> | <a href="https://openweathermap.org/"> OpenWeatherMap</a> | <a
href="https://geolocation-db.com/"> Geolocation DB</a> </span> <span> | Technologies:
HTML5,JavaScript, JQuery, CSS, Bootstrap </span></div>
</footer>
</body>
</html>