Refactor everything

internal/server/public/main.css

@@ -0,0 +1,117 @@
+/* Default theme */
+:root {
+    /* Light theme */
+    --text-light: #2b2a2a;
+    --bg-light: #f4edd7;
+
+    --clickable-light: #ed3e3b;
+    --clickable-hover-light: #e55552;
+    --clickable-label-light: #f4edd7;
+    --text-hover-light: #656565;
+
+    --textarea-bg-light: #f9f5e4;
+    --textarea-border-light: #c3c3c2;
+
+    /* Dark theme */
+    --text-dark: #f5f0e1;
+    --bg-dark: #1b1916;
+
+    --clickable-dark: #ed3e3b;
+    --clickable-hover-dark: #ae3836;
+    --clickable-label-dark: #f5f2ee;
+    --text-hover-dark: #a9a8a4;
+
+    --textarea-bg-dark: #201d1b; /* 252020 f5f0e1 */
+    --textarea-border-dark: #2c2727;
+}
+
+* { box-sizing: border-box; }
+body {
+    color: var(--text-light);
+    background-color: var(--bg-light);
+    font-size: 18px;
+    margin: auto auto;
+    max-width: 640px;
+    padding: 15px;
+    line-height: 1.4;
+    font-family: serif;
+    min-height: 85vh;
+    display: flex;
+    flex-direction: column;
+}
+h1,h2,h3,h4,h5,h6 { line-height: 1.2 }
+
+a, a:visited { color: var(--clickable-light); }
+a:hover, a:visited:hover { color: var(--clickable-hover-light); }
+a.no-accent, a.no-accent:visited { color: var(--text-light); }
+a.no-accent:hover, a.no-accent:visited:hover { color: var(--text-hover-light); }
+
+ul:not(li ul),  ol:not(li ol){
+    margin-left: 0;
+    padding-left: 0;
+    list-style-position: inside;
+}
+
+.list-title { margin-bottom: 0}
+.list-desc { margin-top: 0 }
+
+textarea, input {
+    background: var(--textarea-bg-light);
+    max-width: 640px;
+    width: 100%;
+    display: block;
+    resize: vertical;
+    outline: 0;
+    box-shadow: none;
+    border: 2px solid var(--textarea-border-light);
+    margin-bottom: 1em;
+    font-size: 18px;
+}
+input { height: 2.5em; }
+
+button {
+    background-color: var(--clickable-light);
+    border: none;
+    color: var(--clickable-label-light);
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+    margin: 4px 2px;
+    border-radius: 4px;
+    cursor: pointer;
+    max-width: 640px;
+    width: 100%;
+}
+button:hover { background-color: var(--clickable-hover-light); }
+
+footer { margin-top: auto; }
+header > h1, header > p {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+    body {
+        color: var(--text-dark);
+        background-color: var(--bg-dark);
+    }
+    textarea, input {
+        color: var(--text-dark);
+        background-color: var(--textarea-bg-dark);
+        border-color: var(--textarea-border-dark)
+    }
+
+    a, a:visited { color: var(--clickable-dark); }
+    a:hover, a:visited:hover { color: var(--clickable-hover-dark); }
+    a.no-accent, a.no-accent:visited { color: var(--text-dark); }
+    a.no-accent:hover, a.no-accent:visited:hover { color: var(--text-hover-dark); }
+
+    button {
+        background-color: var(--clickable-dark);
+        color: var(--clickable-label-dark);
+    }
+    button:hover { background-color: var(--clickable-hover-dark); }
+}

internal/server/public/main.js

@@ -0,0 +1,50 @@
+// Format time in "Jan 02, 2006" format
+function formatDate(date) {
+    let options = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    }
+    if (timeZone !== "Local") { options.timeZone = timeZone }
+    let dateFormat = new Intl.DateTimeFormat([langName, "en"], options)
+    return dateFormat.format(date)
+}
+
+async function graceActive() {
+    const response = await fetch("/api/grace");
+    const active = await response.text();
+    return active === "true"
+}
+
+// Set today's date and grace status
+function updateTime() {
+    document.getElementById("today-date").innerText = formatDate(Date.now());
+    graceActive().then(v => document.getElementById("grace").hidden = !v)
+}
+
+// Start interval to update time at start of every minute
+function callEveryMinute() {
+    setInterval(updateTime, 1000 * 60);
+}
+
+// Begin above interval
+function beginTimeUpdater() {
+    const difference = (60 - new Date().getSeconds()) * 1000;
+    setTimeout(callEveryMinute, difference);
+    setTimeout(updateTime, difference);
+    updateTime();
+}
+
+// This does NOT properly sanitize, and assumes a well-meaning user
+function sanitize(title) {
+    return title
+        .trim()
+        .replace(/ +/g, '-')
+        .replace(/[!*'();:@&=+$,\/?#\[\]]/g, '')
+}
+
+// Open a new note
+function newNote(text_prompt) {
+    name = sanitize(prompt(text_prompt + ':'))
+    window.location.replace('/notes/' + name)
+}

internal/server/public/manifest.json

@@ -0,0 +1,22 @@
+{
+  "short_name": "Hibiscus",
+  "name": "Hibiscus.txt",
+  "description": "A plaintext diary",
+  "icons": [
+    {
+      "src": "/public/favicon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/public/favicon.ico",
+      "type": "image/x-icon",
+      "sizes": "16x16"
+    }
+  ],
+  "start_url": "/",
+  "display": "fullscreen",
+  "scope": "/",
+  "background_color": "#f5f0e1",
+  "theme_color": "#f85552"
+}

internal/server/public/themes/gruvbox.css

@@ -0,0 +1,26 @@
+/* Based on https://github.com/morhetz/gruvbox, MIT licensed colorscheme for vim */
+:root {
+    /* Light theme */
+    --text-light: #3c3836;
+    --bg-light: #fbf1c7;
+
+    --clickable-light: #cc241d;
+    --clickable-hover-light: #9d0006;
+    --clickable-label-light: #f9f5d7;
+    --text-hover-light: #665c54;
+
+    --textarea-bg-light: #f9f5d7;
+    --textarea-border-light: #282828;
+
+    /* Dark theme */
+    --text-dark: #ebdbb2;
+    --bg-dark: #282828;
+
+    --clickable-dark: #cc241d;
+    --clickable-hover-dark: #fb4934;
+    --clickable-label-dark: #fbf1c7;
+    --text-hover-dark: #fbf1c7;
+
+    --textarea-bg-dark: #32302f;
+    --textarea-border-dark: #3c3836;
+}

internal/server/public/themes/high-contrast.css

@@ -0,0 +1,26 @@
+/* High contrast theme. It ain't pretty, but it passes WCAG AA and mostly even AAA */
+:root {
+    /* Light theme */
+    --text-light: #000000;
+    --bg-light: #FFFFFF;
+
+    --clickable-light: #CC0000;
+    --clickable-hover-light: #CC3333;
+    --clickable-label-light: #FFFFFF;
+    --text-hover-light: #666666;
+
+    --textarea-bg-light: #FFFFFF;
+    --textarea-border-light: #000000;
+
+    /* Dark theme */
+    --text-dark: #FFFFFF;
+    --bg-dark: #000000;
+
+    --clickable-dark: #FF3333;
+    --clickable-hover-dark: #FF6666;
+    --clickable-label-dark: #000000;
+    --text-hover-dark: #e7e7e7;
+
+    --textarea-bg-dark: #000000;
+    --textarea-border-dark: #666666;
+}

internal/server/public/themes/lavender.css

@@ -0,0 +1,26 @@
+/* Tell me a secret. */
+:root {
+    /* Light theme */
+    --text-light: #3c3836;
+    --bg-light: #e6dffa; /* d4c7fb*/
+
+    --clickable-light: #9975f5;
+    --clickable-hover-light: #765bef;
+    --clickable-label-light: #e2d8ff;
+    --text-hover-light: #665c54;
+
+    --textarea-bg-light: #f3ecff;
+    --textarea-border-light: #282828;
+
+    /* Dark theme */
+    --text-dark: #e6dffa;
+    --bg-dark: #25252a;
+
+    --clickable-dark: #9975f5;
+    --clickable-hover-dark: #765bef;
+    --clickable-label-dark: #e2d8ff;
+    --text-hover-dark: #a5a5b9;
+
+    --textarea-bg-dark: #27272f;
+    --textarea-border-dark: #3c3836;
+}

internal/server/public/themes/sans.css

@@ -0,0 +1,30 @@
+/* Sans Undertale */
+:root {
+    /* Light theme */
+    --text-light: #3c3836;
+    --bg-light: #e2e7e8;
+
+    --clickable-light: #41acda;
+    --clickable-hover-light: #2d8db4;
+    --clickable-label-light: #e2e8e2;
+    --text-hover-light: #665c54;
+
+    --textarea-bg-light: #f3f3f3;
+    --textarea-border-light: #3c3836;
+
+    /* Dark theme */
+    --text-dark: #e2e7e8;
+    --bg-dark: #25282a;
+
+    --clickable-dark: #41acda;
+    --clickable-hover-dark: #2d8db4;
+    --clickable-label-dark: #e2e8e2;
+    --text-hover-dark: #cdd2d3;
+
+    --textarea-bg-dark: #2d3234;
+    --textarea-border-dark: #3c3836;
+}
+
+body, textarea, input, button {
+    font-family: "Comic Sans MS", sans-serif;
+}