-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (106 loc) · 3.44 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="manifest" href="manifest.json" />
<title>sdraw</title>
<script type="module" src="./index.mjs"></script>
<link rel="stylesheet" href="./css/main.css" />
<script type="module">
import { showUpgradeToast } from "./js/ui/toast.mjs";
function loadServiceWorker() {
return navigator.serviceWorker
.register("./service-worker.js")
.then((registration) => {
console.info(
`Service worker registered with scope: ${registration.scope}`,
);
return registration;
})
.catch((error) => {
console.error(error);
});
}
function checkServiceWorkerUpdate(registration) {
if (registration.waiting) {
showUpgradeToast(registration);
}
registration.addEventListener("updatefound", () => {
if (!registration.installing) {
return;
}
registration.installing.addEventListener("statechange", () => {
if (!registration.waiting || !navigator.serviceWorker.controller) {
return;
}
showUpgradeToast(registration);
});
});
}
if (navigator.serviceWorker) {
loadServiceWorker().then(checkServiceWorkerUpdate);
} else {
console.warn("Service worker is not supported by this browser");
}
</script>
</head>
<body>
<div id="loader"><span id="loader-indicators">...</span></div>
<div id="upgrade-toast" aria-hidden="true" role="alert">
<h3>New version available</h3>
<section class="row">
<button id="upgrade">Upgrade</button>
<button id="dismiss-upgrade">Close</button>
</section>
</div>
<canvas id="cursor"> </canvas>
<video id="cam">Video stream not available</video>
<main>
<canvas id="canvas" width="100%" height="auto"> </canvas>
<section id="panel">
<div id="left-panel-column">
<section id="colors" class="panel-row"></section>
<div class="panel-row">
<section id="tools"></section>
<section id="actions"></section>
</div>
<section id="variants" class="panel-row"></section>
</div>
<div id="right-panel-column">
<section id="global-actions" class="panel-row">
<button id="clear"><img src="img/buttons/clear.svg" /></button>
<button id="save"><img src="img/buttons/save.svg" /></button>
<button id="info"><img src="img/buttons/info.svg" /></button>
</section>
</div>
</section>
</main>
<dialog id="info-dialog">
<h3>sdraw</h3>
<section class="colophon">
<img
width="120px"
height="auto"
src="img/logo.png"
alt="sdraw application logo resembling a pine tree"
/>
<div class="colophon-info">
<pre>MIT License</pre>
<pre>Version: 0.1.2</pre>
<pre>2023</pre>
</div>
</section>
<p>
Programmed by Ondřej Synáček:
<a href="https://synacek.org" target="_blank">https://synacek.org</a>
</p>
<p>
Source
<a href="https://github.com/comatory/sdraw" target="_blank"
>https://github.com/comatory/sdraw</a
>
</p>
<button id="close-info">Close</button>
</dialog>
</body>
</html>