This repository has been archived by the owner on Feb 13, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
158 lines (142 loc) · 4.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Specify document character encoding -->
<meta charset="utf-8" />
<!-- Color the status bar on mobile devices -->
<meta content="#ffffff" name="theme-color" />
<!-- Allow web page to correctly scale in multi-dpi devices -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- Website description -->
<meta content="Keep track of your clock-in and clock-outs from work" name="description" />
<title>Keep Track</title>
<!-- Scripts -->
<!-- Poor-man old browser detection.
Trigger for: any IE, FF < 45, Chrome < 42, Safari < 10, Opera < 29, IOS < 10, Android Webview <= KitKat
-->
<script>
;(function() {
'use strict'
try {
// eslint-disable-next-line no-unused-vars, prefer-const
let _ = class {}
} catch (_) {
// Must be ES3/IE8 compatible
document.body.innerHTML =
'<p>Your browser is too old and not supported. You will be redirected in 10 seconds...</p>'
setTimeout(function() {
window.location.href = 'https://browsehappy.com/'
}, 10000)
}
})()
</script>
<!-- Safari 10.1/iOS Safari 10.3 nomodule polyfill
Concept from: https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
-->
<script>
;((script, suportESModule) => {
if ('noModule' in script || !('onbeforeload' in script)) return
// Test whether current browser supports ESModules
script.src = '.'
script.type = 'module'
script.onbeforeload = () => {
suportESModule = true
event.preventDefault()
}
document.head.appendChild(script)
script.remove()
if (suportESModule) {
// Current browser support ESModule but not the noModule attribute
document.addEventListener(
'beforeload',
event => event.target.hasAttribute('nomodule') && event.preventDefault(),
true
)
}
})(document.createElement('script'), false)
</script>
<!-- Polyfill ES5+ for older browsers. -->
<script
src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=pollyfill&features=Object.fromEntries%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces5%2Ces6%2Ces7%2CURL"
type="application/javascript"
defer
></script>
<!-- WebComponents polyfill for older browsers. -->
<script
src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
type="application/javascript"
defer
></script>
<!-- Main logic -->
<script src="src/app.js" type="module"></script>
<script src="src/app-fallback.js" type="application/javascript" defer nomodule></script>
<!-- Styles -->
<!-- Sanitize CSS.
Because no one needs to suffers with browser inconsistency.
-->
<link href="node_modules/sanitize.css/sanitize.css" rel="stylesheet" />
<link href="node_modules/sanitize.css/forms.css" rel="stylesheet" />
<link href="node_modules/sanitize.css/typography.css" rel="stylesheet" />
<!-- Main Style. -->
<style>
:root {
--color: #fff;
--accent: #ffaa00;
--background: #444;
--color-on-accent: #000;
}
body {
color: var(--color);
background-color: var(--background);
}
body > nav-bar {
--background: #333;
}
body > nav-bar a {
color: inherit;
text-decoration: none;
}
body > nav-bar a {
color: inherit;
text-decoration: none;
}
body > main {
margin: 1rem;
padding: 0.5rem;
background-color: #333;
}
body > main > header h1 {
text-align: center;
}
body > main > article {
border: thin solid #222;
padding: 1rem;
}
body > main workday-timeline {
--background: #333;
}
</style>
</head>
<body>
<!-- Warn any user without javascript that they should enable it to use this web page -->
<noscript>
<meta content="10;URL='https://www.enable-javascript.com/'" http-equiv="refresh" />
<p>This website requires javascript to work, you will be redirected in 10 seconds...</p>
</noscript>
<nav-bar>
<h2 slot="logo">Keep-Track</h2>
<li slot="item">About</li>
<li slot="item">Settings</li>
<li clickable slot="item"><a href="https://github.com/HeavenVolkoff/keep-track">Github</a></li>
</nav-bar>
<main>
<header>
<h1>Timeline</h1>
</header>
<article>
<workday-timeline></workday-timeline>
</article>
</main>
<footer></footer>
</body>
</html>