-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
241 lines (216 loc) · 11.9 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Include Bootstrap 4 CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Local styles -->
<style type="text/css">
/* write styles here or change to a link to the style sheet if comples */
.mySwitches {
font-size: 1.25rem;
font-weight: bold;
color: #007bff; /* same color as Bootstrap "primary" */
vertical-align: text-top;
}
/* Style the range slider for time scrolling */
.slidecontainer {
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #007bff; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #007bff; /* Green background */
cursor: pointer; /* Cursor on hover */
}
</style>
<title>NosillaCast World Clock</title>
</head>
<body>
<nav class='navbar navbar-expand-md navbar-light'>
<a class='navbar-brand' href="#">Helpful Resources</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://momentjs.com">Moment.js home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://momentjs.com/docs/#/use-it/browser/">Moment.js docs</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://momentjs.com/timezone/">Moment Timezone docs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PBS Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-divider"></div>
<a class="nav-link dropdown-item" href="https://www.podfeet.com/blog/pbs-index/" rel="no opener" target="_blank">PBS Index</a>
<a class="nav-link dropdown-item" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" rel="no opener" target="_blank">Bootstrap Docs</a>
<a class="nav-link dropdown-item" href="https://api.jquery.com" rel="no opener" target="_blank">jQuery API</a>
<a class="nav-link dropdown-item" href="https://api.jquery.com/category/ajax/" rel="no opener" target="_blank">AJAX API</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- The page heading -->
<header>
<div class="container-fluid bg bg-light mb-2 rounded">
<div class="col-8">
<div class="row">
<div class="col-10">
<!-- Hide heading on small screens -->
<h1 class="h3 d-md-inline d-none">The NosillaCastaways World Clock</h1>
</div>
</div>
<div class="row">
<p class="lead">
<div class="col-2"><img width="75" alt="Programming by Stealth Logo" src="https://pbs.bartificer.net/assets/logo.png"></div>
<div class="col-md-5 d-xs-none">
<p>Programming By Stealth #92 Challenge</p>
<p><a href="https://pbs.bartificer.net/pbs92.html" target="_blank" rel="noopener">pbs.bartificer.net/...</a></p>
</div>
</div>
</div>
</div> <!-- close container for page header -->
</header>
<!-- The main page body -->
<main>
<!-- html goes here -->
<div class="container p-2 border border-dark bg-light">
<h3 class="mb-3 p-2 text-dark border border-dark rounded">These 3 clocks were created via class instances</h3>
<h4>Drag the slider to shift the time in the 3 clocks below</h4>
<p>If you want to see what time it <em>will</em> be in another city at a future time in your city, drag the slider</p>
<!-- container to hold range sliders -->
<div class="container">
<div class="row">
<div class="col-6">
<form>
<div class="form-group">
<div class="">
<label for="changeHrs">Shift Time (hrs)</label>
<input type="range" class="slider form-control-input" min="0" max="23.5" step=".5" value="0" data-show-value="true" id="changeHrs" data-thumbwidth="20">
<p class="slider_label" id="hrsChosen"></p>
</div>
</div>
</form>
</div>
</div>
</div> <!-- close container for range sliders -->
<!-- One placeholder for all clocks using clockCards template -->
<div class="container mb-3">
<div class="row" id="shiftingClocksPlaceholder"></div>
</div>
<div class="container">
<div class="row" id="staticClocksPlaceholder"></div>
</div>
<!-- end clocks -->
</div><!-- end box around classes with timeshifter -->
<!-- container to hold switches and selectable clock (so I can border it) -->
<div class="container mt-3 p-2 border border-dark">
<h3 class="mb-3 p-2 text-dark border border-dark rounded">This clock is not a class instance</h3>
<!-- container to hold switches -->
<div class="container">
<!-- Switch to show/hide seconds -->
<div class="row pl-3 pb-3"><!-- row for showSeconds switch -->
<div class="col col-md-6 form-control form-check-inline bg-light border border-dark rounded p-2 m3">
<!-- Description of checkbox for screen readers -->
<div id="secondsDesc" class="sr-only">Switch to toggle between hide and show seconds</div>
<div class="mr-2 font-weight-bold align-baseline mySwitches d-none d-md-inline">Hide Seconds</div>
<div class="mr-2 font-weight-bold align-baseline mySwitches d-inline d-md-none">Hide</div>
<div class="custom-control custom-switch form-control-md" aria-describedby="secondsDesc">
<input type="checkbox" class="custom-control-input" id="showSeconds" name="showSeconds" checked>
<label class="custom-control-label mySwitches" for="showSeconds">Show Seconds</label>
</div>
</div>
</div>
<!-- end switch to show/hide seconds -->
<!-- Switch to 12 vs 24 hr clock -->
<div class="row pl-3 pb-3"> <!-- row for numHrs switch -->
<div class="col col-md-6 form-control form-check-inline bg-light border border-dark rounded p-2 m3">
<!-- Description of checkbox for screen readers -->
<div id="hrsDesc" class="sr-only">Switch to toggle between 24 and 12 hour clock</div>
<div class="mr-2 font-weight-bold mySwitches d-none d-md-inline">24 Hour Clock</div>
<div class="mr-2 font-weight-bold mySwitches d-inline d-md-none">24 Hour</div>
<div class="custom-control custom-switch form-control-md" aria-describedby="hrsDesc">
<input type="checkbox" class="custom-control-input" checked id="numHrs" name="numHrs" >
<label class="custom-control-label mySwitches" for="numHrs">12 Hour Clock</label>
</div>
</div>
</div>
<!-- end switch 12 vs 24 hr clock -->
</div> <!-- close hold switches container -->
<!-- A card to hold the 2nd time -->
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="card bg-primary text-white" style="width: 100%">
<div class="card-body">
<label class="h5 card-title bg-light rounded text-primary col p-2 pb-1" for="timeZone" sr-only="true">The time in:</label>
<p><select class="mr-2 ml-2 col-5 col-md-11 text-primary" id="timeZone" name ="locality"></select></p>
<div class="h1" id="forTime2"></div> <!-- placeholder div for clock -->
</div>
</div>
</div>
</div>
</div> <!-- end 2nd time card -->
</div><!-- end container to border switches and clock -->
</main>
<!-- The clock card template for CLASS clocks -->
<script type="text/html" id="clockCards">
<div class= "col-6 col-md m-2">
<div class="card bg-primary text-white" style="width: 100%">
<div class="card-body">
<h5 class="card-title bg-light rounded text-primary col p-2">{{timeDescription}}</h5>
<div id="{{dropDownDivID}}"></div> <!-- placeholder for dropdown select -->
<div class="h3" id="{{timeID}}"></div> <!-- placeholder div for clock -->
</div>
</div>
</div>
</script>
<!-- END NEW PROBABLY WRONG STUFF -->
<!-- Include jQuery, Popper, then Bootstrap - IN THIS ORDER -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Include Mustache.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" integrity="sha256-srhz/t0GOrmVGZryG24MVDyFDYZpvUH2+dnJ8FbpGi0=" crossorigin="anonymous"></script>
<!-- load moment.js with locales -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous"></script>
<!-- load moment-timezone -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data-1970-2030.min.js" integrity="sha256-ob9GYTF6HJFUyVtlWivU47nga6eeRR3Lti9VfUeFhBI=" crossorigin="anonymous"></script>
<!-- Load the local JS Code AFTER the other libraries -->
<script type="text/javascript" src="./script.js"></script>
</body>
</html>