-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (119 loc) · 5.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>weatherAppJS</title>
<link rel="icon" type="image/x-icon" href="/public/imgs/sunburst_icon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<link rel="stylesheet" href="/public/styles/main.css">
</head>
<body>
<div id="shell">
<nav class="navbar navbar-expand-lg navbar-dark m-0 p-2">
<a href="#" class="navbar-brand"><i class="fas fa-sun"></i> Weather App JS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<form class="form-inline">
<div class="form-group">
<!-- trigger modal -->
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#locModal">
<i class="fas fa-globe mr-2"></i>Lat & Long
</button>
<button type="button" class="btn btn-dark mr-3" id="getLocalWeather"><i class="fas fa-map-marker-alt mr-2"></i>Local</button>
</div>
<div class="form-group">
<input id="newLocation" class="form-control controls" type="text" placeholder="New Weather Location…">
</div>
<!-- set user unit preference -->
<div class="form-group">
<div class="btn-group ml-4">
<div class="btn btn-outline-secondary" id="fahrenheit">°F</div>
<div class="btn btn-outline-secondary" id="celsius">°C</div>
</div>
</div>
</form>
</div>
</nav>
<div class="container">
<div class="row pr-1 pl-1" id="alertBody">
<div class="weatherBlock col-sm-12 mx-auto text-center mt-4 p-3 pb-4 rounded">
<h1 id="placeName"></h1>
<h5 class="w-latLon"></h5>
<h5 id="w-timezone"></h5>
<canvas id="skycon"></canvas>
<h3 id="w-summary"></h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul id="w-details" class="list-group mt-3">
<li class="list-group-item" id="w-temp"></li>
<li class="list-group-item" id="w-apparent-temp"></li>
<li class="list-group-item" id="w-dewPoint"></li>
</ul>
</div>
<div class="col-sm-6">
<ul id="w-details" class="list-group mt-3">
<li class="list-group-item" id="w-wind"></li>
<li class="list-group-item" id="w-cloudCover"></li>
<li class="list-group-item" id="w-humidity"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="locModalLabel">Choose Weather Location with Lat and Long</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="w-form">
<div class="form-group">
<label for="lat">Latitude</label>
<input type="number" class="form-control" id="lat" placeholder="Enter Latitude Coordinate">
</div>
<div class="form-group">
<label for="lon">Longitude</label>
<input type="number" class="form-control" id="lon" placeholder="Enter Longitude Coordinate">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button id="w-change-btn" type="button" class="btn btn-dark">Save changes</button>
</div>
</div>
</div>
</div>
<footer>
<span>belQati ©2018</span>
<a class="footerLink" href="https://github.com/belqati/" target="blank"><i class="fab fa-github"></i></a>
<div class="float-right">
<img id="darkskylogo" src="/public/imgs/darkskylogo.png">
<a href="https://darksky.net/poweredby/" target="blank">Powered by Dark Sky</a>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="public/scripts/storage.js"></script>
<script src="public/scripts/weather.js"></script>
<script src="public/scripts/skycons.js"></script>
<script src="public/scripts/ui.js"></script>
<script src="app.js"></script>
<!-- for geocoder via app.js -->
<script src='https://unpkg.com/axios/dist/axios.min.js'></script>
</body>
</html>