we've got a website, sorta!

static/dlibrary.css

@@ -0,0 +1,76 @@
+body {
+    background: #111;
+    color: #eee;
+    font-family: sans-serif;
+}
+
+/* listing stuff */
+
+#list-title {
+    text-align: center;
+}
+
+.card-listing {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.card {
+    background: #333;
+    padding: 10px;
+    flex-grow: 1;
+    max-width: 360px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.card img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+/* viewer stuff */
+
+#viewer-images {
+    display: none;
+}
+
+#image-container {
+    height: 100vh;
+    width: 100vw;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#page-num, #duration {
+    position: fixed;
+    font-size: 14pt;
+    top: 10px;
+    font-weight: bold;
+    opacity: 0.75;
+    text-shadow: /* Duplicate the same shadow to make it very strong */
+        0 0 2px #222,
+        0 0 2px #222,
+        0 0 2px #222;
+}
+
+#page-num {
+    left: 10px;
+}
+
+#duration {
+    right: 10px;
+}
+
+#progress {
+    background-color: #4488ffcc;
+    height: 5px;
+    width: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+}

static/viewer.css

@@ -0,0 +1,6 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}

static/viewer.js

@@ -0,0 +1,120 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const pages = Array.from(document.querySelectorAll('img.viewer-image'));
+    let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
+    let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
+    let paused = true;
+    let interval;
+    let elapsed = 0;
+
+    function startTimer() {
+        if (interval) {
+            clearInterval(interval);
+        }
+        interval = setInterval(
+            function () {
+                if (paused) {
+                    return;
+                }
+                elapsed += 100;
+                if (elapsed >= duration*1000) {
+                    changePage(currentPage + 1);
+                }
+                updateBar();
+            },
+            100
+        );
+    }
+
+    const progressBar = document.getElementById('progress');
+    function updateBar() {
+        progressBar.style.width = `${100*elapsed/(1000*duration)}%`;
+    }
+
+    function stopTimer() {
+        if (interval) {
+            clearInterval(interval);
+            interval = null;
+        }
+        elapsed = 0;
+        updateBar();
+    }
+
+    function changePage(pageNum) {
+        elapsed = 0;
+
+        const previous = pages[currentPage];
+        const current = pages[pageNum];
+
+        if (current == null) {
+            return;
+        }
+
+        previous.classList.remove('current');
+        current.classList.add('current');
+
+        currentPage = pageNum;
+        localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);
+
+        const display = document.getElementById('image-container');
+        display.style.backgroundImage = `url("${current.src}")`;
+
+        document.getElementById('page-num')
+            .innerText = [
+                (pageNum + 1).toLocaleString(),
+                pages.length.toLocaleString()
+            ].join('\u200a/\u200a');
+    }
+
+    function changeDuration(secs, pause) {
+        duration = secs;
+        localStorage.setItem(`${WORK_ID}-duration`, duration);
+        paused = pause;
+
+        document.getElementById('duration').textContent = (paused ? '[paused] ' : '') + duration.toLocaleString() + 's';
+        if (paused) {
+            stopTimer();
+        } else {
+            startTimer();
+        }
+    }
+
+    changePage(currentPage);
+    changeDuration(duration, paused);
+
+    document.onkeydown = event =>{
+        switch (event.keyCode) {
+        case 32: //space
+            changeDuration(duration, !paused);
+            break;
+        case 37: //left
+            changePage(currentPage - 1);
+            break;
+        case 38: //up
+            if (2 <= duration && duration <= 10) {
+                changeDuration(duration - 1, false);
+            } else if (10 < duration && duration <= 20) {
+                changeDuration(duration - 2.5, false);
+            } else if (20 < duration) {
+                changeDuration(duration - 5, false);
+            }
+            break;
+        case 39: //right
+            changePage(currentPage + 1);
+            break;
+        case 40: //down
+            if (duration < 10) {
+                changeDuration(duration + 1, false);
+            } else if (10 <= duration && duration < 20) {
+                changeDuration(duration + 2.5, false);
+            } else if (20 <= duration) {
+                changeDuration(duration + 5, false);
+            }
+            break;
+        case 13: //enter
+            changeDuration(duration, true);
+            localStorage.setItem(`${WORK_ID}-currentPage`, 0);
+            window.location.href = ROOT;
+            break;
+        }
+    };
+});