-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
396 lines (395 loc) · 26.8 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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="UTF-8">
<base href="./" target="_blank">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
<title>Eyeful</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KJL3TQS');</script>
<!-- End Google Tag Manager -->
<meta name="description" content="Eyeful — A universal time tracking application with some neat features.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, SWA, PWA, App, Application, Timer, Time-Tracker, Todos, Todo-List">
<meta name="author" content="Marwan Al-Soltany">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Eyeful">
<meta name="twitter:title" content="Eyeful">
<meta property="og:description" content="Eyeful — A universal time tracking application with some neat features.">
<meta name="twitter:description" content="Eyeful — A universal time tracking application with some neat features.">
<meta property="og:image" content="assets/images/logo.svg">
<meta name="twitter:image" content="assets/images/logo.svg">
<meta name="og:site_name" content="Eyeful">
<meta name="twitter:site" content="Eyeful">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="/">
<link rel="prefetch" href="index.html" as="document" />
<link rel="prefetch" href="de/index.html" as="document" />
<link rel="prefetch" href="fr/index.html" as="document" />
<link rel="prefetch" href="es/index.html" as="document" />
<link rel="prefetch" href="ar/index.html" as="document" />
<link rel="prerender" href="en/index.html" />
<meta name="application-name" content="Eyeful">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#2a2a2a">
<meta name="msapplication-config" content="assets/images/favicon/browserconfig.xml">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Eyeful">
<link href="assets/images/favicon/site.webmanifest" rel="manifest" >
<link href="assets/images/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="assets/images/favicon/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
<link href="assets/images/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
<link href="assets/images/favicon/favicon-194x194.png" rel="icon" type="image/png" sizes="194x194">
<link href="assets/images/favicon/android-chrome-192x192.png" rel="icon" type="image/png" sizes="192x192">
<link href="assets/images/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="assets/images/splashscreen/iphone-5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/iphone-6.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/iphone-plus.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/iphone-x.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/iphone-xr.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/iphone-xs-max.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/ipad-pro-1.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/ipad-pro-3.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/splashscreen/ipad-pro-2.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-startup-image" href="assets/images/splashscreen/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />
<link href="assets/images/favicon/safari-pinned-tab.svg" rel="mask-icon" color="#2a2a2a">
<link rel="stylesheet" type="text/css" href="assets/css/dist/app.bundle.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KJL3TQS"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="app">
<div id="intro" class="employed">
<img src="assets/images/logo.svg" alt="Logo">
</div>
<div class="dynamic">
<div id="modal">
<form data-fn="form">
<h3 data-fn="heading">Enter a value and click OK</h3>
<p data-fn="message"></p>
<label data-fn="current" for="modal-input" title="Current value"></label>
<input data-fn="text" type="text" tabindex="-1" id="modal-input" placeholder="Write something ..." />
<input data-fn="cancel" type="reset" tabindex="-1" value="Cancel" />
<input data-fn="submit" type="button" tabindex="-1" value="OK" />
</form>
</div>
<div id="notifications-bar"></div>
<div class="flyout">
<h4 class="lift" title="Click for more info.">Made with <i>❤️</i> by MAKS.</h4>
<div class="body-text">
<h1>Eyeful</h1>
<p>
This application was developed for personal use. <br/>
However it has come so far that it deserved to be published. <br/>
Feel free to use and/or fork it.
</p>
<p>
Email me directly at
<a href="mailto:MarwanAlsoltany@gmail.com" tabindex="-1">MarwanAlsoltany(at)gmail.com</a>
about bugs or suggestions.
</p>
<p>Licensed under <a href="https://github.com/MarwanAlsoltany/eyeful/blob/master/LICENSE" target="_blank" tabindex="-1">MIT License.</a></p>
<p><a class="button external" href="https://github.com/MarwanAlsoltany/eyeful" target="_blank" tabindex="-1">Github <i class="icon-github"></i></a></p>
</div>
</div>
</div>
<div class="control-center">
<div class="bar">
<div id="indicator">
<span title="A process is going on."></span>
<span title="Waiting for action."></span>
<span title="Clear for further actions."></span>
</div>
<div id="launch-time"></div>
<div id="hamburger" title="Control Center.">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="settings">
<div class="pack">
<label for="amplifier"><span>App Settings</span></label>
<input id="amplifier" type="checkbox" checked tabindex="-1"/>
<div class="tier amplifiable">
<div class="cell-33">
<div class="cell-inner">
<h3>General</h3>
<div class="option">
<span class="caption">Lock Toggles</span>
<label class="toggle locker">
<input type="checkbox" data-fn="glt" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption pc-only">Capacious UI</span>
<label class="toggle">
<input type="checkbox" data-fn="gcu" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption">Notifications Log</span>
<label class="toggle">
<input type="checkbox" data-fn="gnl" tabindex="-1"/>
<span></span>
</label>
</div>
</div>
</div>
<div class="cell-33">
<div class="cell-inner">
<h3>Timer</h3>
<div class="option">
<span class="caption">Simplified Dashboard</span>
<label class="toggle">
<input type="checkbox" data-fn="tsd" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption pc-only">Simplified Table</span>
<label class="toggle">
<input type="checkbox" data-fn="tst" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption">Advanced Options</span>
<label class="toggle">
<input type="checkbox" data-fn="tao" tabindex="-1"/>
<span></span>
</label>
</div>
</div>
</div>
<div class="cell-33">
<div class="cell-inner">
<h3>Modes</h3>
<div class="option">
<span class="caption">Dark</span>
<label class="toggle">
<input type="checkbox" data-fn="mdm" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption">Essentials</span>
<label class="toggle">
<input type="checkbox" data-fn="mem" tabindex="-1"/>
<span></span>
</label>
</div>
<div class="option">
<span class="caption pc-only">Ultra-Simple</span>
<label class="toggle">
<input type="checkbox" data-fn="mum" tabindex="-1"/>
<span></span>
</label>
</div>
</div>
</div>
</div>
<label for="amplifier"><span>User</span></label>
<input id="amplifier" type="checkbox" checked tabindex="-1"/>
<div class="tier amplifiable">
<div class="cell-50">
<div class="cell-inner" id="user-info">
<h3 class="flexed">User Info
<div data-fn="controls" class="controls">
<b class="action" data-fn="import" title="Import user configuration." role="button">Import</b>
<b class="action" data-fn="export" title="Export user configuration." role="button">Export</b>
<b class="action" data-fn="reset" title="Reset user configuration." role="button">Reset</b>
</div>
</h3>
<table data-fn="table" class="user-info">
<tbody>
<tr data-id="userName"><th><i class="icon-user-o"></i>User Name</th><td></td><td title="Click for more information."><i class="icon-question-circle"></i></td></tr>
<tr data-id="userSettings"><th><i class="icon-cog"></i>Settings</th><td></td><td title="Click for more information."><i class="icon-check-circle"></i></td></tr>
<tr data-id="userLanguage"><th><i class="icon-flag"></i>Language</th><td></td><td title="Click for more information."><i class="icon-info-circle"></i></td></tr>
<tr data-id="userId"><th><i class="icon-tag"></i>User ID</th><td class="mono"></td><td title="Click for more information."><i class="icon-info-circle"></i></td></tr>
<tr data-id="sessionId"><th><i class="icon-hourglass-half"></i>Session ID</th><td class="mono"></td><td title="Click for more information."><i class="icon-info-circle"></i></td></tr>
</tbody>
</table>
<button data-fn="reload" tabindex="-1" class="button" title="Reload the application to apply settings changes.">Reload App</button>
</div>
</div>
<div class="cell-50">
<div class="cell-inner" id="notifications-log">
<h3 class="flexed">Notifications Log
<div data-fn="controls" class="controls">
<b class="action" data-fn="clear" title="Clear all logged notifications." role="button">Clear</b>
<b class="action" data-fn="counter" title="Logged notifications count.">0</b>
</div>
</h3>
<ol data-fn="log" class="notifications-log"></ol>
</div>
</div>
</div>
<label for="amplifier"><span>Advanced</span></label>
<input id="amplifier" type="checkbox" checked tabindex="-1"/>
<div class="tier amplifiable">
<div class="cell-33">
<div class="cell-inner shortcuts">
<h3>Keyboard Short­cuts</h3>
<ul>
<li><span><i class="icon-play-circle"></i>Start</span><span><i>Alt</i>+<i>Shift</i>+<i>1</i></span></li>
<li><span><i class="icon-stop-circle"></i>Stop</span><span><i>Alt</i>+<i>Shift</i>+<i>2</i></span></li>
<li><span><i class="icon-plus-circle"></i>Add</span><span><i>Alt</i>+<i>Shift</i>+<i>3</i></span></li>
<li><span><i class="icon-minus-circle"></i>Reset</span><span><i>Alt</i>+<i>Shift</i>+<i>4</i></span></li>
<li><span><i class="icon-refresh"></i>Flip</span><span><i>Alt</i>+<i>Shift</i>+<i>5</i></span></li>
<li><span></span> <span><i>Alt</i>+<i>Shift</i>+<i>F</i></span></li>
<li><span><i class="icon-undo"></i>Restore Entry</span><span><i>Alt</i>+<i>Shift</i>+<i>Z</i></span></li>
<li><span><i class="icon-file-excel-o"></i>Export Excel</span><span><i>Alt</i>+<i>Shift</i>+<i>E</i></span></li>
<li><span><i class="icon-file-text-o"></i>Export JSON</span><span><i>Alt</i>+<i>Shift</i>+<i>J</i></span></li>
<li><span><i class="icon-upload"></i>Open File</span><span><i>Alt</i>+<i>Shift</i>+<i>O</i></span></li>
<li><span><i class="icon-repeat"></i>Recover Entries</span><span><i>Alt</i>+<i>Shift</i>+<i>R</i></span></li>
</ul>
</div>
</div>
<div class="cell-66">
<div class="cell-inner" id="language-pick">
<h3 class="flexed">Language
<div data-fn="controls" class="controls">
<b class="action" data-fn="set" title="Make the selected language the default language" role="button">Set</b>
<b class="action" data-fn="unset" title="Unset default language" role="button">Unset</b>
</div>
</h3>
<form class="language-pick">
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="en">
<label class="language" for="en">
<span>English</span>
</label>
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="de">
<label class="language" for="de">
<span>Deutsch</span>
</label>
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="nl">
<label class="language" for="nl">
<span>Nederlands</span>
</label>
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="fr">
<label class="language" for="fr">
<span>Français</span>
</label>
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="es">
<label class="language" for="es">
<span>Español</span>
</label>
<input data-fn="language" type="radio" name="lang" tabindex="-1" id="ar">
<label class="language" for="ar">
<span>العربية</span>
</label>
</form>
</div>
<div class="cell-inner" id="json-parser">
<h3>JSON Parser</h3>
<input data-fn="file" type="file" accept="application/json" tabindex="-1"/>
<textarea data-fn="textarea" tabindex="-1" placeholder=""></textarea>
<button data-fn="select" tabindex="-1" class="button" title="Select a file from your system.">Select</button>
<button data-fn="import" tabindex="-1" class="button" title="Import selected or pasted JOSN for further actions.">Import</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="static">
<div id="dashboard">
<button data-fn="start" tabindex="1" title="This button starts the timer.">
<i class="icon-play-circle"></i>
</button>
<button data-fn="stop" tabindex="-1" title="This button stops the timer.">
<i class="icon-stop-circle"></i>
</button>
<button data-fn="add" tabindex="-1" title="This button adds an entry.">
<i class="icon-plus-circle"></i>
</button>
<button data-fn="reset" tabindex="-1" title="This button resets the timer.">
<i class="icon-minus-circle"></i>
</button>
<button data-fn="flip" tabindex="2" title="If timer is already started, this button will stop, add, reset and start the timer at the same time.">
<i class="icon-refresh"></i>
</button>
</div>
<div id="clock"></div>
<div class="table-container">
<table class="times-table">
<thead>
<tr>
<th title="Entry indentifier.">ID</th>
<th title="Start time timestamp.">Start Time</th>
<th title="Stop time timestamp.">End Time</th>
<th title="Consumed time from start to stop.">Consumption</th>
<th title="Optional label.">Label</th>
<th title="A note in addition to the label.">Note</th>
</tr>
</thead>
<tbody id="entries-container"></tbody>
</table>
<div class="placeholder"></div>
<div id="entries-options" class="app-options" data-options="false">
<span data-fn="erase" title="Click for more info.">
<i class="icon-trash"></i>Erase
<div class="context">
<span data-fn="imported" title="Erase imported entries."><i class="icon-minus-square-o"></i>Erase Imported</span>
<span data-fn="all" title="Erase all entries (harmful!)."><i class="icon-trash"></i>Erase All</span>
</div>
</span>
<span data-fn="restore" title="Restore the last deleted entry.">
<i class="icon-undo"></i>Restore
<div class="context">
<span data-fn="all" title="Restore all deleted entries."><i class="icon-undo"></i>Restore All</span>
<span data-fn="two" title="Restore the last two deleted entries."><i class="icon-undo"></i>Restore Last Two</span>
<span data-fn="one" title="Restore the last deleted entry."><i class="icon-undo"></i>Restore Last one</span>
</div>
</span>
<span data-fn="recover" title="Recover entries if any JSON is imported.">
<i class="icon-repeat"></i>Recover
<div class="context">
<span data-fn="open" title="Select and import a JSON file from your system."><i class="icon-upload"></i>Open File</span>
<span data-fn="recover" title="Recover entries from the last imported JSON file."><i class="icon-repeat"></i>Recover</span>
</div>
</span>
<span data-fn="export" title="Export entries as one of the available file formats (default XLS).">
<i class="icon-download"></i>Export
<div class="context">
<span data-fn="json" title="Export entries as JSON file. With this file format, non-original (imported) entries are excluded!"><i class="icon-file-text-o"></i>JSON (Recoverable)</span>
<span data-fn="html" title="Export entries as HTML file."><i class="icon-file-code-o"></i>HTML (Document)</span>
<span data-fn="txt" title="Export entries as TXT file."><i class="icon-file-o"></i>TXT (Plain Text)</span>
<span data-fn="csv" title="Export entries as CSV file."><i class="icon-file"></i>CSV (Excel)</span>
<span data-fn="xls" title="Export entries as XLS file."><i class="icon-file-excel-o"></i>XLS (Excel)</span>
</div>
</span>
</div>
</div>
<div class="todos-container">
<div id="todos-header">
<h2>ToDos</h2>
<p>You have added <b data-fn="counter">0</b> ToDos</p>
<form>
<input data-fn="input" type="search" tabindex="3" placeholder="What are you planning to do?" />
<input data-fn="button" type="button" tabindex="-1" value="Add" />
</form>
</div>
<ul id="todos-container"></ul>
<div id="todos-options" class="app-options" data-options="false">
<span data-fn="delete" title="Delete all ToDos."><i class="icon-trash"></i>Delete All</span>
<span data-fn="restore" title="Restore one/all ToDos if any is deleted."><i class="icon-undo"></i>Restore All</span>
</div>
</div>
</div>
</div>
<script src="assets/js/dist/app.bundle.js"></script>
</body>
</html>