Thought cabinet

2024-12-11 19:21:57 -07:00
parent 50acba5cdb
commit bb6662d7b1
41 changed files with 32477 additions and 2338 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,205 @@
+<html>
+
+<head>
+
+<!-- start importmap -->
+<script type="importmap">
+{
+    "imports": {
+        "device": "./device/nw.js"
+    }
+}
+</script>
+<!-- end importmap -->
+<script>
+window.app = {}
+</script>
+<script src="/src/cabinet.js" type="module"></script>
+<script src="/debug.js" type="module"></script>
+
+<style>
+:root {
+	--iiv: #e8e4cf;
+	--iv: #999580;
+	--v: #6684e1;
+	--vi: #292824;
+	--vii: #20201d;
+	--a: #ae9513;
+}
+
+:root {
+    --iiv: var(--base00);
+    --iv: var(--base01);
+    --v: var(--base0C);
+    --vi: var(--base07);
+    --vii: var(--base06);
+    --a: var(--base0A)
+}
+
+body {
+    margin: 0;
+    caret-color: auto !important
+}
+
+main {
+    height: 100vh;
+    flex-direction: column;
+    box-sizing: border-box;
+    
+    overflow-y: auto;
+
+    padding: 4px 0;
+}
+
+body, .cm-editor .cm-scroller {
+    font-size: 14px;
+    font-family: monospace;
+}
+
+#next-note, #prev-note {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+
+    height: 24px;
+    width: 24px;
+
+    border: 0;
+    outline: none;
+
+    z-index: 1;
+}
+
+#next-note {
+	clip-path: polygon(100% 0, 0 0, 100% 100%);
+
+    z-index: 2;
+}
+
+nav {
+    top: 0;
+    right: 0;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-content: center;
+}
+
+nav, footer, header {
+    position: absolute;
+    width: 100%;
+    height: 24px;
+}
+
+footer, header {
+    position: absolute;
+
+    pointer-events: none;
+    user-select: none;
+
+    content: " ";
+    mask-mode: luminance;
+    pointer-events: none;
+
+    z-index: 1;
+}
+
+header {
+    top: 0;
+    mask-image: url(/assets/top-dither.png);
+}
+
+footer {
+    bottom: 0;
+    mask-image: url(/assets/bottom-dither.png);
+}
+
+aside {
+    display: inline-block;
+    margin: 0;
+    height: 24px;
+    position: relative;
+    z-index: 2;
+    font-weight: bold;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+a svg {
+	height: 100%;
+}
+
+.cm-editor {
+    padding-bottom: 40vh;
+}
+
+.cm-editor .cm-line, nav, aside {
+	padding: 0 2px 0 6px;
+}
+
+nav {
+	padding-right: 6px;
+}
+
+.cm-editor, .cm-editor.cm-focused {
+    flex-grow: 1;
+    outline: none;
+    overflow-y: auto
+}
+
+.cm-gutters {
+    user-select: none;
+    cursor: vertical-text;
+}
+
+::-webkit-scrollbar {
+    background: transparent;
+    width: 6px;
+    height: 6px;
+}
+</style>
+<link rel="stylesheet" href="assets/colors.css">
+
+</head>
+
+<body>
+
+<main id="main">
+
+<aside inert>
+
+<span id="streak"></span>
+<span id="title"></span>
+
+</aside>
+<header></header>
+<footer></footer>
+<nav id="menubar">
+
+<a tabindex="-1" href="#&notes">
+
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm16 5H4v2h16v-2z" fill="currentColor"/> </svg>
+
+</a>
+<a tabindex="-1" href="#&tags">
+
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h4v4H7V7zm6 0h4v4h-4V7zm-6 6h4v4H7v-4zm6 0h4v4h-4v-4z" fill="currentColor"/> </svg>
+
+</svg>
+
+</a>
+    
+</nav>
+<button tabindex="-1" id="next-note" onclick="note.Next()"></button>
+<button tabindex="-1" id="prev-note" onclick="note.Prev()"></button>
+
+</main>
+
+</body>
+
+</html>