-
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
<!DOCTYPE html>
<!--
Copyright 2026 Shota FUJI
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
SPDX-License-Identifier: MPL-2.0
-->
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>Template Editor | CTB-PWS01</title>
<script src="./main.js"></script>
<script type="module">
const PREFERENCES_KEY = "ctb.preferences";
function loadPreferences() {
try {
const loaded = localStorage.getItem(PREFERENCES_KEY);
if (!loaded) {
return {};
}
return JSON.parse(loaded);
} catch (err) {
console.warn("Failed to load stored preferences, falling back to defaults.", err);
return {};
}
}
import("/elements.js").then(() => {
const app = Elm.Models.PWS01.Main.init({
flags: {
preferences: loadPreferences(),
}
});
app.ports.writePreferences.subscribe(preferences => {
localStorage.setItem(PREFERENCES_KEY, JSON.stringify(preferences));
});
});
</script>
<style>
:where(*, *::before, *::after) {
box-sizing: border-box;
margin: 0;
}
:root {
--_highlight-color: oklch(50% 0.4 0deg);
}
@font-face {
font-family: "Barlow";
font-weight: normal;
src:
url("/vendor/barlow/fonts/woff2/Barlow-Regular.woff2") format("woff2"),
url("/vendor/barlow/fonts/otf/Barlow-Regular.otf") format("opentype"),
url("/vendor/barlow/fonts/ttf/Barlow-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Inter";
font-weight: 100 900;
src:
local("InterVariable"),
local("Inter"),
url("/vendor/Inter/web/InterVariable.woff2") format("woff2"),
url("/vendor/Inter/InterVariable.ttf") format("ttf");
}
@media print {
:root, body {
margin: 0;
padding: 0;
}
@page {
size: A4;
margin: 0;
}
}
@media not print {
x-preview > svg .highlight-stroke {
stroke: var(--_highlight-color);
}
}
</style>
</head>
</html>