-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (294 loc) · 14.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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<title>Clock for Google Chrome™</title>
<!-- Ads -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0829514606350414"
crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarLinks" data-offset="0">
<nav id="navver" class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">Clock for Google Chrome™</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="navbarLinks">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#gettingstarted">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#appearance">Appearance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#format">Format</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reminders">Reminders</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
</ul>
</div>
</nav>
<!-- Main content -->
<div style="margin: 5%">
<h1 id="gettingstarted">Getting Started</h1>
<h5>Here are the basics</h5>
<p>To install the Clock for Google Chrome™ extension, visit the <a
href="https://chrome.google.com/webstore/detail/clock-for-google-chrome/emakkfldeggiinnfcdjkakdfcppbfhdg">Chrome
Web Store</a>.</p>
<p>To install the Clock for Microsoft Edge™ extension, visit the <a
href="https://microsoftedge.microsoft.com/addons/detail/clock-for-microsoft-edge%E2%84%A2/mmaenpliijegpihljkfkjpdohapnnpge">Edge
Add-ons page</a>.</p>
<p>The clock appears in the toolbar, right next to the address bar - that's it! You're up and running and need
do nothing more!</p>
<p>If you hover your cursor over the clock, the full date and time are shown.</p>
<p>If you click the clock, a larger clock, the current date, a browseable calendar and details of all the
reminders you have set are shown.</p>
<div class="inline_image">
<img src="assets/popup.PNG" alt="Pop Up">
</div>
<p>Click the larger clock to launch a big clock, and click that for an immersive, full screen experience.</p>
<p>Access the settings page via the icon at the bottom right of the pop up to make Clock your own.</p>
<p>If you are signed in to your browser, all of your settings are securely synchronised and replicated to any
computer that you use.</p>
<p>This is really useful for say, setting a reminder up at home, and having it remind you at work.</p>
<p>All aspects of Clock are customisable. To find out more, browse around and have a go!</p>
<h1 id="appearance">Appearance</h1>
<h5>Analogue, digital or both - the choice is yours</h5>
<h6>Analogue Clock</h6>
<p>To modify the way Clock looks, open the <a
href="chrome-extension://emakkfldeggiinnfcdjkakdfcppbfhdg/html/options.html">options page</a> and click
"Appearance".
The first checkbox shows and hides the analogue clock.</p>
<p>The dots radio buttons control whether the clock has no tick marks:</p>
<div>
<img src="assets/noticks.PNG" alt="No Ticks">
</div>
<p>Four tick marks:</p>
<div>
<img src="assets/fourticks.PNG" alt="Four Ticks">
</div>
<p>Or twelve tick marks:</p>
<div>
<img src="assets/twelveticks.PNG" alt="Twelve Ticks">
</div>
<p> </p>
<p>The clock has two built-in default colours. Typically, Dark Hands looks best on pale themes and Pale Hands
looks best on dark themes.</p>
<p>But you can choose any colour and transparency you like from the "Custom Colour Hands" option</p>
<p>The colour that you select here will be used to theme the pop-up window and the clock that appears on
reminders.</p>
<p>If you choose a pale colour, the background of the popup window will automatically darken so you can see the
hands.</p>
<h6>Digital Clock</h6>
<p>When the Digital Clock and the Analogue Clock are both selected, clock will look like this:</p>
<div>
<img src="assets/digana.PNG" alt="Both Clocks">
</div>
<p>If you prefer a digital-only experience, it will look like this:</p>
<div>
<img src="assets/digonly.PNG" alt="Digital Only">
</div>
<p>If the digital only clock is selected, a new colour picker will appear. You can use this to set the colour
and transparency of the digital text.</p>
<p>NB: Setting the Digital Clock transparency to full will show a pale grey box.</p>
<p>These options are synchronised to all the computers that you use <b>Clock for Google Chrome</b> on.</p>
<h1 id="format">Format</h1>
<h5>Make the date and the calendar look like you want it to</h5>
<h6>Date Format</h6>
<p>You can change the way that the date is shown to suit your own preference.</p>
<p>Open the <a href="chrome-extension://emakkfldeggiinnfcdjkakdfcppbfhdg/html/options.html">options page</a> and
click "Format".
Four built in time and date options are provided to suit your taste. This format is used in the hover text,
the pop-up window and reminders.</p>
<p>You may wish to use a custom format of your choice. To do this, simply choose the "Custom Format" option and
use the following codes:</p>
<p>'t' - The time in 12h format (e.g. 2:34)</p>
<p>'T' - The time in 24h format (e.g. 14:34) </p>
<p>'a' - 'am' or 'pm'</p>
<p>'A' - 'AM' or 'PM'</p>
<p>'l' or 'D' - The full day (e.g. Tuesday) </p>
<p>'j' or 'd' - The day of the month (e.g. 28) </p>
<p>'e' - The day of the month with a leading zero if less than 10 (e.g. 08) </p>
<p>'S' - 'st', 'nd', 'rd', or 'th'</p>
<p>'s' - '/' </p>
<p>'M' - The full month (e.g. July)</p>
<p>'n' or 'm' - The month number with a leading zero (e.g. 07)</p>
<p>'y' - Two digit year (e.g. 13) </p>
<p>'Y' - Four digit year (e.g. 2013)</p>
<p>'g' - Hour number, no leading zero, 12h format (e.g. 3)</p>
<p>'G' - Hour number, no leading zero, 24h format (e.g. 15)</p>
<p>'h' - Hour number, leading zero, 12h format (e.g. 03)</p>
<p>'H' - Hour number, leading zero, 24h format (e.g. 03)</p>
<p>'i' - Minute number, leading zero (e.g. 09)</p>
<p>'x' - Second number, leading zero (e.g. 05)</p>
<p>'\' - Display the next character literally (e.g. '\T' displays 'T')</p>
<p>All other characters are shown verbatim.</p>
<p>For example, "l eS M Y" would be "Tuesday 25th December 2018"</p>
<h6>First Day of the Week</h6>
<p>By default, the first day of the week is Sunday, so calendars are shown like this:</p>
<div class="inline_image">
<img src="assets/sunone.PNG" alt="Sunday First">
</div>
<p>If you prefer the first day of the week to be Monday (or any other day if you want!), then choose the correct
day here to get calendars shown like this:</p>
<div class="inline_image">
<img src="assets/monone.PNG" alt="Monday First">
</div>
<p>Or this(!):</p>
<div class="inline_image">
<img src="assets/wedone.PNG" alt="Wednesday First (why anybody would want to do this beyond me, but hey...">
</div>
<h6>Time Offset</h6>
<p>Normally, you will want the clock to keep time with your location (which is taken from your system time).
However, you may wish to use clock in a different timezone. The Time Offset option sets the clock forwards
or backwards by the specified amount in half hour increments. The clock is updated automatically as you
change this setting and you can choose any offset up to twelve hours forwards or backwards of the system
time.</p>
<p>Along with all other settings, these options are synchronised to all the computers that you use <b>Clock for
Google Chrome</b> on.</p>
<h1 id="reminders">Reminders</h1>
<h5>Synchronised alarms across all your computers</h5>
<p>Reminders are one of the most powerful organisational features of Clock for Google Chrome™. To create a new
reminder, follow these steps:</p>
<ul>
<li>Open the <a href="chrome-extension://emakkfldeggiinnfcdjkakdfcppbfhdg/html/options.html">options
page</a> and click "Reminders".</li>
<li>Enter a meaningful name for the reminder in the 'Label' box</li>
<li>Choose from one of the built in alarm sounds, or choose 'No Sound' if you prefer a silent reminder</li>
<li>Use the slider to set the volume for the alarm sound. Leave it all the way to the right for full volume.
</li>
<li>Choose the time for this reminder. The time will initially be set to the time that the page was loaded,
ensure that you choose a time in the future, otherwise, no reminder will be set</li>
<li>Choose the day for the reminder. There are quick access options for today and tomorrow, but for other
dates, click the 'Other' option and use the browseable calendar to choose the day. The system will
prevent you selecting days in the past, but remember to make sure that the selected date/time
combination is in the future otherwise no reminder will be set</li>
<li>If you would like the reminder to repeat on certain days, click the "Repeat" box and select the days
when the alarm should sound
<div class="inline_image">
<img src="assets/reminders.PNG" alt="Reminder options">
</div>
</li>
<li>When all is done, click "Add New Reminder" and the reminder will be added to the list at the bottom of
the page and in the pop up box when you click the clock
<div class="inline_image">
<img src="assets/reminder.PNG" alt="Set Reminder">
</div>
</li>
<li>The audio icon shows whether there is a sound associated with the reminder or not. Hover over it to see
which sound is selected</li>
<li>If the reminder has a repeat set, the repeat icon will be shown. Hover over it to see when the next
reminder is scheduled</li>
<li>If you want to change a reminder, click the pencil icon, make the changes and 'Add New Reminder' again.
</li>
<li>To delete the reminder, click the cross</li>
</ul>
<p>When the time for the reminder arrives, the selected sound is played and a notification bubble is shown. By
clicking 'Close' on the bubble, the reminder is dismissed and the sound stops. If you click 'Snooze', the
sound stops and the reminder is rescheduled for five minutes after the original time.</p>
<div class="inline_image">
<img src="assets/notification.png" alt="Notification">
</div>
<p>If you can hear the sound, but can't see the reminder, see if Chrome has minimised the notifications to your
System Tray.</p>
<p>Remember, all the reminders you set are automatically synchronised to all the computers that you use Chrome
on.</p>
<h6>Hour Chime</h6>
<p>For the extension to sound a tone every hour, click the "Hour Chime" clock. Use the volume slider to control
how loud the hour chime should be.</p>
<p>Click it once for a chime every hour on the hour:</p>
<div>
<img src="assets/onechime.png" alt="Hour chime">
</div>
<p>Click it again for a chime every hour on the hour and the half hour:</p>
<div>
<img src="assets/twochimes.png" alt="Two chimes">
</div>
<p>Click it again for a chime every quarter:</p>
<div>
<img src="assets/fourchimes.png" alt="Four chimes">
</div>
<p>Click it again to turn the chimes off:</p>
<div>
<img src="assets/nochimes.png" alt="No chimes">
</div>
<h1 id="faq">FAQ</h1>
<h5>If your question isn't here, visit the <a
href="https://chrome.google.com/webstore/detail/clock-for-google-chrome/emakkfldeggiinnfcdjkakdfcppbfhdg">Chrome
Web Store</a></h5>
<ul>
<li>
<b>Why can't I see the Clock?</b>
<br>Make sure that the extension is installed and enabled, make sure that the analogue and/or digital
clock are enabled on the Appearance page, make sure that the button is not hidden (via
chrome://extensions) and try making more room for extension buttons by dragging the right edge of the
address bar to the left.
</li>
<li>
<b>Why can't I set a reminder?</b>
<br>Make sure that you have set a time in the future for the alarm to sound. Setting a time in the past
will not cause a reminder to be created.
</li>
<li>
<b>How do I get in touch with you?</b>
<br>Via <a
href="https://chrome.google.com/webstore/detail/clock-for-google-chrome/emakkfldeggiinnfcdjkakdfcppbfhdg">the
Chrome web store</a>. Here you can report bugs, suggest improvements and ask anything you want.
</li>
<li>
<b>Will this extension wake me up in the morning?</b>
<br>Possibly. But for that to work, you'll need to set a reminder and leave your computer switched on
within earshot while you sleep. So if your computer goes into standby, you oversleep and miss your
train/interview/breakfast, I won't be held responsible. I recommend an alarm clock, reliable family
member or special friend as a more robust solution.
</li>
<li>
<b>How does it work?</b>
<br>It makes very heavy use of the HTML5 Canvas element and some maths to draw the clock. A full
description can be found <a href="https://ab00a.github.io/">here</a>. This, coupled with the native
Chrome extension, notification, alarms and storage sync APIs gives you what you see.
</li>
<li>
<b>Why did you write this?</b>
<br>I always hide the task bar on my computer and the only thing I miss is being able to see the clock.
So I wrote an extension to fill a gap. Over the years, features have been added based on user feedback
and improvements in Chrome's features.
</li>
<li>
<b>Are you a group of developers?</b>
<br>No, there's only me and this is my hobby. So I might be busy with RealLife® sometimes which means
that whilst I'll do my very best to get bugs fixed as soon as I can, it might not always be immediate.
</li>
<li>
<b>What languages are supported?</b>
<br>Nearly all of the languages that Chrome supports. The language will be automatically set according
to the system. If you find problems with the translation and would like to make it better, please let me
know.
</li>
<li>
<b>I'm feeling altruistic, what do I do?</b>
<br>Give money to charity.
</li>
<li>
<b>Will this extension create World Peace?</b>
<br>Yes, yes it will, just give it time.
</li>
</ul>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>