bendns' repos / panel
html terminal
Diffstat (limited to 'html-src/viewer.html')
-rw-r--r--html-src/viewer.html39
1 files changed, 36 insertions, 3 deletions
diff --git a/html-src/viewer.html b/html-src/viewer.html
index 0630dde..f0eab4e 100644
--- a/html-src/viewer.html
+++ b/html-src/viewer.html
@@ -11,11 +11,41 @@
body {
background-color: #3E3B3B;
+ padding: 0px;
+ margin: 0px;
+ }
+
+ button {
+ border: 4px outset #FBD367;
+ background-color: #3E3B3B96;
+ height: 64px;
+ width: 64px;
+ border-radius: 5px;
+ position: absolute;
+ margin: 5px;
+ cursor: progress;
+ z-index: 1;
+ }
+
+ path {
+ transition: 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
}
</style>
</head>
<body>
+ <button onclick="load()"
+ onmouseenter="document.getElementById('circle').style.stroke='#6ecdec'; document.getElementById('arrow').style.fill='#6ecdec';document.getElementById('arrow').style.stroke='#6ecdec'"
+ onmouseleave="document.getElementById('circle').style.stroke='#bf92f9'; document.getElementById('arrow').style.fill='#bf92f9';document.getElementById('arrow').style.stroke='#bf92f9';">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+ <circle cx="31.24" cy="32.384" r="19.844" style="fill:none;fill-rule:evenodd;stroke-width:1.6" />
+ <path id="circle"
+ d="M49.766 38.974c-3.4 8.685-12.593 13.795-21.938 12.195-9.345-1.599-16.228-9.46-16.427-18.761-.199-9.3 6.343-17.438 15.611-19.42 9.268-1.983 18.671 2.745 22.44 11.282"
+ style="fill:none;fill-rule:evenodd;stroke:#bf92f9;stroke-width:10;stroke-linejoin:bevel;stroke-opacity:1" />
+ <path id="arrow" d="m57.104 20.904-4.244 11.48-11.061-4.748Z"
+ style="fill:#bf92f9;fill-opacity:1;fill-rule:evenodd;stroke:#bf92f9;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
+ </svg>
+ </button>
<img id="picture" draggable="false">
<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
<script type="module">
@@ -31,13 +61,15 @@
});
return base64url.slice(base64url.indexOf(',') + 1)
}
- init().then(() => {
- fetch("http://apricotalliance.org/savefile").then(function (content) {
+ window.load = () => {
+ fetch("/savefile").then(function (content) {
content.arrayBuffer().then(function (buf) {
let pic = document.getElementById('picture');
let imgbuf = render(new Uint8Array(buf));
console.log("render done");
pic.src = URL.createObjectURL(new Blob([imgbuf]))
+ if (window.zooming) return;
+ window.zooming = true;
let panzoom = Panzoom(pic, { maxScale: 7, cursor: "grab", noBind: true });
panzoom.pan(pic.width / 2, pic.height / 2, { animate: true })
panzoom.zoom(1, { animate: true })
@@ -53,7 +85,8 @@
pic.addEventListener('wheel', panzoom.zoomWithWheel)
})
})
- });
+ }
+ init().then(load);
</script>
</body>