-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (70 loc) · 3.17 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Polymer Starter Kit">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Color Your Code</title>
<meta name="description" content="A visual editor for Visual Studio Code themes">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@usepotatoes">
<meta name="twitter:title" content="Color Your Code">
<meta name="twitter:description" content="A visual editor for Visual Studio Code themes made with Web Components and LitElement">
<meta name="twitter:image" content="https://raw.githubusercontent.com/kcmr/color-your-code/master/images/color-your-code-preview-small.png">
<base href="/">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="dank-mono.css">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js', {
scope: '/',
});
});
}
</script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/animejs/anime.min.js"></script>
<script src="dist/cyc-app/cyc-app.js" type="module" async></script>
</head>
<body class="loading">
<div class="loader">
<svg width="160" height="160" viewBox="0 0 160 160" class="vscode-logo">
<g>
<path class="p1" d="M 3 115 L 3 115 L 16 120 L 16 120 L 3 115 Z"></path>
<path class="p2" d="M 112 6 L 148 21 L 148 21 L 112 6 L 112 6 Z"></path>
<path class="p3" d="M 148 135 L 112 152 L 112 152 L 148 135 L 148 135 Z"></path>
</g>
</svg>
</div>
<cyc-app class="app"></cyc-app>
<script>
(function(document) {
const timeline = anime.timeline({
loop: true,
duration: 450,
easing: 'easeInOutQuart',
});
timeline
.add({targets: '.p1', d: {value: 'M 3 115 L 112 6 L 148 21 L 16 120 L 3 115 Z', delay: 400}})
.add({targets: '.p2', d: {value: 'M 112 6 L 148 21 L 150 136 L 112 152 L 112 6 Z'}})
.add({targets: '.p3', d: {value: 'M 148 135 L 112 152 L 3 43 L 17 37 L 148 135 Z'}})
.add({targets: '.p3', d: {value: 'M 148 135 L 112 152 L 112 152 L 148 135 L 148 135 Z', delay: 400}})
.add({targets: '.p2', d: {value: 'M 112 6 L 148 21 L 148 21 L 112 6 L 112 6 Z'}})
.add({targets: '.p1', d: {value: 'M 3 115 L 3 115 L 16 120 L 16 120 L 3 115 Z'}});
const loader = document.querySelector('.loader');
const destroyLoader = () => {
loader.removeEventListener('transitionend', destroyLoader);
document.body.removeChild(loader);
};
const onShellLoaded = () => {
loader.addEventListener('transitionend', destroyLoader);
setTimeout(() => {
document.body.classList.remove('loading');
}, 1800);
};
document.body.addEventListener('shell-loaded', onShellLoaded);
}(document));
</script>
</body>
</html>