/
index.html
279 lines (241 loc) · 13.4 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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Include Bootstrap 4 CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add to Home Screen stuff -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="TimeShifter">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<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 complex */
.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 */
}
/* Searchboxes */
.mySearchboxes::placeholder {
/* font-size: 1.25rem; */
/* font-weight: bold; */
color: light-grey; /* same color as Bootstrap "primary" */
vertical-align: text-top;
}
/* Stop inline check box from adding a margin-right */
.form-check-inline {
margin-right: 0;
}
/* Hide form-group from static clocks placeholder */
#staticClocksPlaceholder .form-group {
display: none;
}
</style>
</head>
<title>Podfeet Time Shifter Clock</title>
</head>
<body>
<!-- The page heading -->
<header>
<div class="container-fluid mb-2 mt-2 rounded">
<div class="row"> <!-- Open row for header -->
<p class="lead">
<div class="col-2 mr-2">
<a href = "https://podfeet.com" target="_blank" title="Podfeet Podcasts">
<img width="50" alt="Podfeet Logo" src="https://www.podfeet.com/blog/wp-content/uploads/2017/04/100px-square-podfeet-transparent-1.png">
</a>
</div> <!-- open/close col-2 for logo -->
<div class="col col-md-8"><!-- open col-8 for title and explanation button -->
<h1 class="row h3 d-md-inline">Time Shifter Clock <span class="badge badge-primary">V2</span></h1> <!-- row for Heading -->
<div class="row"><!-- row for current local time -->
<!-- Placeholder for current local time -->
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="row" id="staticClocksPlaceholder"></div>
</div>
</div>
</div>
</div>
<!-- row for explanation button -->
<div class="row"> <!-- row for explanation button -->
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#explanationText" aria-expanded="false" aria-controls="explanationText">
Push to Learn How This Works
</button>
</p>
</div> <!-- close row for explanation button -->
</div> <!-- close column for title & explanation button -->
</p>
</div> <!-- close row for header -->
<div class="row"> <!-- open row for explanation -->
<div class="collapse" id="explanationText">
<div class="card card-body">
<p>The purpose of this clock is to help you find and communicate a time <b><em>in the future</em></b> across multiple timezones when planning a meetup.</p>
<ol>
<li>Search for your own city.</li>
<li>Search for another city or time zone (e.g. PST). Add cities as needed if you have more than two participants.</li>
<li>Now drag the time shifter by half-hour increments till you see a day and time in the future that is convenient for you.</li>
<li>Click the Copy URL to send times button, and then paste it in a message to your participants. </li>
</ol>
<p>They will see the date/time exactly as you've sent it. If they don't like the time chosen, they can shift time themselves and send it back to you as an alternate proposal. </p>
<p>If you find Time Shifter Clock useful, add it to your mobile device's home screen and you'll get a progressive web app with a pretty icon and no URL bar.</p>
</div>
</div>
</div>
</div> <!-- close container for page header -->
</header>
<!-- The main page body -->
<main>
<!-- html goes here -->
<!-- TIMESHIFTER CLOCKS -->
<!-- One placeholder for all time shifting clocks using clockCards template -->
<div class="container">
<div class="row pr-1 pl-1">
<div class="col col-lg-8" id="shiftingClocksPlaceholder"></div>
</div>
</div>
<!-- end clock divs -->
</div><!-- end container for timeshifter clocks -->
<!-- Button to add city (clocks) -->
<div class="container">
<div class="row pr-1 pl-1">
<!-- NOTE: Why is the class copyBtn? doesn't hurt anything but weird. -->
<button class = "col-6 btn btn-primary copyBtn" id="addClock">Add Another City</button>
</div>
</div>
<!-- Close container for Button -->
<div class="container mt-2"> <!-- open container to hold range sliders -->
<div class="row">
<form class="col col-md-6 ">
<div class="form-group">
<div >
<label class="mr2" for="changeHrs">Drag to Shift Time (hrs)</label>
<button class="btn" type="button" data-toggle="collapse" data-target="#explainSlider" aria-expanded="false" aria-controls="explainSlider" aria-label="Help"><i class="fas fa-question-circle "> Help</i></button>
<div class="collapse" id="explainSlider">
<div class="card card-body">
As you start to slide, clocks will round down to the nearest hour to current time and shift forward from there.
</div>
</div>
<input type="range" class="slider form-control-input" min="0" max="167.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> -->
<!-- close col for range sliders -->
</div> <!-- close row for range sliders -->
</div> <!-- close container for range sliders -->
<!-- Button to copy the times to a sendable URL -->
<div class="container">
<div class="row pr-1 pl-1">
<button class = "col-md-6 btn btn-danger copyBtn" id="copyBtn">Copy URL to Send Times</button>
<div id="dummy"></div>
</div>
</div>
<!-- Close container for Button -->
<!-- Credits -->
<div class="container mt-2">
<div class="small" name="homage">Released as an open source project at <a href="https://github.com/NosillaCast/time-shifter-clock">github.com/NosillaCast/time-shifter-clock</a></div>
</div>
</main>
<!-- The clock card template for Class clocks -->
<script type="text/html" id="clockCards">
<!-- box that the entire clock sits in -->
<div class="mb-2 {{clockBorder}} " style="width: 100%">
<div class="form-group row">
<label for="{{searchBoxID}}" class="sr-only" >Type 3 characters and look for dropdown</label>
<div id="" class="col input-group" role="combobox">
<div class="input-group-prepend rounded">
<div class=" input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<div class="form-control p-0 pl-1 pt-1" id="{{searchBoxDivID}}" aria-expanded="false">
</div>
</div>
</div>
<div style="color: red" class="rounded col" id="{{timeDescriptionID}}">{{timeDescription}}
</div>
<div class="col mb-3 text-dark" id="{{timeID}}"></div> <!-- placeholder div for the actual time -->
</div>
</script>
<!-- END NEW PROBABLY WRONG STUFF (comment left in because it makes me giggle)-->
<!-- 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>
<!-- Bootstrap 4 Autocomplete Plugin https://github.com/Honatas/bootstrap-4-autocomplete -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-4-autocomplete/dist/bootstrap-4-autocomplete.min.js" 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>
<!-- Include is.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/is_js/0.9.0/is.min.js" integrity="sha256-lnJeulOa3e5IO2EzHr8jKJ3CbT80MBwkS5a+n2ooIr4=" crossorigin="anonymous"></script>
<!-- Include Font Awesome -->
<script src="https://kit.fontawesome.com/017e626a00.js" crossorigin="anonymous"></script>
<!-- Include clipboard.js to allow copy button -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<!-- Load the local JS Code AFTER the other libraries -->
<script type="text/javascript" src="./script.js"></script>
</body>
</html>