forked from AndrewPelfrey/ChasingtheGoldenHours
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (145 loc) · 6.33 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
<!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-between is-align-items-center">
<div id="headerLeft">
<!-- SOLAR ICON -->
<i class="fas fa-sun fa-3x icon-style"></i>
</div>
<div id="headerCenter">
<p class="has-text-centered is-size-2 mx-6">Chasing the <span id="golden">Golden</span> Hours</p>
</div>
<div id="headerRight">
<label for="theme-switcher">Dark Mode</label>
<input type="checkbox" id="theme-switcher">
</div>
</div>
<!-- SUBTITLE AREA -->
<div class="subtitle">
<h2>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 id="location-form">
<label for="current-location-input">Current Location:</label>
<input type="text" id="current-location-input" autocomplete="off">
<br>
<label for="desired-location-input">Desired Location:</label>
<input type="text" id="desired-location-input" autocomplete="off">
<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 class="column box-container">
<h3>Time Left:</h3>
</div>
<div id="dusk-time" class="column box-container">
<h3>Dusk Time:</h3>
</div>
<div id="golden-time" class="box-container">
<h3>Golden Time:</h3>
</div>
<div>
<!-- MAP DISPLAY -->
<div id="map"></div>
<div id="travel-time"></div>
<p>It's the Map!</p>
</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 class="column box-container">
<h3>Time Left:</h3>
</div>
<div id="tom-dusk-time" class="column box-container">
<h3>Dusk Time:</h3>
</div>
<div id="tom-golden-time" class="box-container">
<h3>Golden Time:</h3>
</div>
<!-- TODAYS WEATHER AREA -->
<div class="weather">
<div id="current-weather-result">Weather:</div>
</div>
</main>
</div>
</section>
<!-- SEARCH HISTORY SECTION AREA -->
<section class="search-history-section">
<div>
<h3 class="is-size-4">Previous Searches:</h3>
<ul>
<div class="search-history-list"></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>