forked from AndrewPelfrey/ChasingtheGoldenHours
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (141 loc) · 6.54 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
<!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" />
<!-- EXTERNAL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
<!-- EXTERNAL JAVASCRIPT -->
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U="
crossorigin="anonymous"></script>
<title>Chasing the Golden Hours App</title>
</head>
<body>
<!-- HEADER SECTION -->
<header>
<div id="headerDiv" class="is-flex is-justify-content-space-around is-align-items-center">
<div id="headerLeft">
<!-- SOLAR ICON -->
<i class="fas fa-sun fa-3x icon-style"></i>
</div>
<div id="headerCenter">
<h1 class="has-text-weight-bold has-text-centered is-size-2 mx-4">Chasing the <span id="golden">Golden</span> Hours</h1>
</div>
<div id="headerRight">
<label id="dark-mode-switch" for="theme-switcher">Light/Dark Mode</label>
<input id="theme-switcher" type="checkbox" hidden>
</div>
</div>
<!-- SUBTITLE AREA -->
<div class="subtitle">
<h2 class="has-text-weight-bold is-size-4">Your go-to web app for sunset enthusiasts and photographers.</h2>
</div>
</header>
<!-- MAIN SECTION OF BODY CONTENT -->
<section class="main-section">
<div class="columns">
<!-- SIDEBAR -->
<aside class="column is-full-mobile is-one-full-tablet is-one-third-desktop">
<h3 id="timeStamp"></h3>
<!-- MODAL TRIGGER BUTTON -->
<button class="button is-primary" id="openModal">How to Use This App</button>
<!-- MODAL DIALOG -->
<div id="myModal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h3>HOW TO USE THIS APP:</h3>
<p id="modal-paragraph">Simply enter a current location and desired city,
and it provides the sunset time, directions to the viewing spot, and whether
you can make it there in time. Never miss the perfect sunset moment again.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div><br>
<!-- FORM FOR USER INPUT OF CURRENT AND DESIRED LOCATION FOR SUNSET ANALYSIS -->
<form class="my-4" id="location-form">
<label class="is-flex is-justify-content-space-around is-align-items-center has-text-weight-bold" for="current-location-input">Current Location:</label>
<input type="text" id="current-location-input" autocomplete="off" required>
<br>
<label class="is-flex is-justify-content-space-around is-align-items-center has-text-weight-bold" for="desired-location-input">Desired Location:</label>
<input type="text" id="desired-location-input" autocomplete="off" required>
<button id="submit" type="submit">Submit Button</button>
</form>
</aside>
<!-- MAIN CONTENT WITH DYNAMIC UI INFO -->
<main>
<!-- TODAYS SUNSET AREA -->
<div class="sunset-container column is-full-mobile is-one-half-tablet is-one-half-desktop">
<h2 class="is-size-4">Todays Sunset:</h2>
<div id="sunset-time" class="column box-container">
<h3>Sunset Time:</h3>
</div>
<div id="travel-time" class="column box-container">
<h3>Travel Time:</h3>
</div>
<div id="dusk-time" class="column box-container">
<h3>Dusk Time:</h3>
</div>
<div id="golden-time" class="column box-container">
<h3>Golden Time:</h3>
</div>
<div>
<!-- MAP DISPLAY -->
<div id="map"></div>
<div id="travel-time"></div>
</div>
</div>
<!-- NEXT SUNSET AREA -->
<div class="sunset-container column is-full-mobile is-one-half-tablet is-one-half-desktop">
<h2 class="is-size-4">Next Sunset:</h2>
<div id="tom-sunset-time" class="column box-container">
<h3>Sunset Time:</h3>
</div>
<div id="tom-dusk-time" class="column box-container">
<h3>Dusk Time:</h3>
</div>
<div id="tom-golden-time" class="column box-container">
<h3>Golden Time:</h3>
</div>
<!-- TODAYS WEATHER AREA -->
<div class="weather">
<div id="current-weather-result"></div>
</div>
</main>
</div>
</section>
<!-- SEARCH HISTORY SECTION AREA -->
<section class="search-history-section">
<div>
<h3 class="is-size-4 has-text-centered my-4">Previous Searches:</h3>
<ul>
<div class="search-history-list my-4"></div>
<!-- Search History Item List Will Be Added Here with Previous Search from Local Storage -->
</ul>
</div>
</section>
<!-- FOOTER SECTION AREA -->
<footer>
<div id="footerDiv" class="is-flex is-justify-content-space-between">
<div>
App Created by GCA²
</div>
<div>
Copyright 2024 - All Rights Reserved
</div>
<div>
<p>Powered by <a href="https://sunrisesunset.io/">SunriseSunset.io</a></p>
</div>
</footer>
<!-- JavaScript Libraries for jQuery, jQueryUI and our Custom JS file -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVfV0z4ECsoc5kS77IQ_6Lt08qC1w2LAI&libraries=places"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>