-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
152 lines (139 loc) · 5.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Sun Catcher</title>
<!-- MATERIALIZE CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--CUSTOM CSS-->
<link rel="stylesheet" href="assets/styles/style.css">
<!--MATERIAL ICONS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!--VIEWPORTS-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--NAV BAR -->
<nav class="light-blue lighten-4" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html"><img class="sun-logo" src="assets/images/logo.png"></a>
<ul id="nav-mobile" class="right">
<li><div id="loginStatus" class="card-title"></div></li>
<li><a id="logout" href="#"><i class="material-icons">exit_to_app</i></a></li>
</ul>
</div>
</nav>
<!--MAIN-->
<div class="container">
<div class="row">
<div class="col l8 s12">
<!--GOOGLE MAPS-->
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
</div>
<div class = "col l4 s12">
<div id="flipCard" class="card">
<!--scripts hides/shows content in this multi-function panel-->
<!--SIGN OR SIGN UP-->
<div id="login" class="card-content">
<div class="panel-body">
<form role="form">
<div class="custom-cont">
<div id="errorMessage"></div>
</div>
<div class="form-group login-element">
<label for="search"><h5>Email</h5></label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group login-element">
<label for="search"><h5>Password</h5></label>
<input type="text" class="form-control" id="pass">
</div>
<div class="custom-cont">
<button type="submit" class="btn btn-default btn-login" id="submitUsernameButton">Sign In</button>
<button type="submit" class="btn btn-default btn-login" id="newUserButton">Sign Up</button>
</div>
</form>
</div>
</div>
<!--RECENT SEARCHES-->
<div id="recent-searches" class="card-content">
<div class="card-title" id="recent-searches-title"><small>Recent Searches</small></div>
<div class="panel-body" id="table-container">
<table class="table" id="previousSearches">
<tr>
<th id="searches-columns">Location</th>
<th id="searches-columns">Latitude</th>
<th id="searches-columns">Longitude</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--SOLAR DATA-->
<div class="row">
<div class="col l12 m12 s12">
<div class="panel panel-default custom-cont solar-data-cont">
<div class="panel-body" id="icons-container">
<div><h2>
<div id="city-name">
</div></h2>
</div>
<div class="solar-container">
<span>Current Time</span>
<div class="solar-icon"><img class="solar-png" src="assets/images/current-time.png"></div>
<span id="current-time"></span>
</div>
<div class="solar-container">
<span>Sunrise</span>
<div class="solar-icon"><img class="solar-png" src="assets/images/sunrise.png"></div>
<span id="sunrise"></span>
</div>
<div class="solar-container">
<span>Solar Noon</span>
<div class="solar-icon"><img src="assets/images/solar-noon.png"></div>
<span id="solar_noon"></span>
</div>
<div class="solar-container">
<span>Sunset</span>
<div class="solar-icon"><img src="assets/images/sunset.png"></div>
<span id="sunset"></span>
</div>
<div class="solar-container">
<span>Day Length</span>
<div class="solar-icon"><img src="assets/images/day-length.png"></div>
<span id="day_length"></span>
</div>
</div>
<div >
<span id="local">All Times Are Local</span>
</div>
</div>
</div>
</div>
</div>
<!-- JS LIBRARIES -->
<!--JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--MATERIALIZE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!--FIREBASE-->
<script src="https://www.gstatic.com/firebasejs/3.6.3/firebase.js"></script>
<!--MATHJS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.7.0/math.min.js"></script>
<!--MOMENTJS-->
<script type="text/javascript" src="assets/scripts/moment.js"></script>
<!--CUSTOM JS-->
<script type="text/javascript" src="assets/scripts/script.js"></script>
<!--GOOGLE LOCATION JS-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-v-7mR5Rs0s1dGKX4pEbfvp6aImogy4E&libraries=places&callback=initAutocomplete"async defer></script>
</body>
</html>