refactor: move TodoMVC example into example/ directory
- example/todomvc/pocketbook/todomvc.cljs — app source - example/todomvc/todomvc.html — page - example/todomvc/js/ — compiled output (gitignored) Server static file serving is now filesystem-based via --static-dir flag instead of classpath resources. No static dir by default (API only); bb server passes --static-dir example/todomvc. Removed resources/public/ — library has no bundled static assets.
This commit is contained in:
Florian Schroedl
264
example/todomvc/pocketbook/todomvc.cljs
Normal file
264
example/todomvc/pocketbook/todomvc.cljs
Normal file
@@ -0,0 +1,264 @@
|
||||
(ns pocketbook.todomvc
|
||||
"TodoMVC built on Pocketbook — offline-first, synced, Clojure-native."
|
||||
(:require [pocketbook.core :as pb]
|
||||
[cljs.core.async :refer [go <!]]
|
||||
[clojure.string :as str]))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; State
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defonce !conn (atom nil))
|
||||
(defonce !todos (atom nil)) ;; the SyncedAtom
|
||||
(defonce !filter (atom :all)) ;; :all | :active | :completed
|
||||
(defonce !editing (atom nil)) ;; id of todo being edited, or nil
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Helpers
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- todos-list
|
||||
"Return todos as sorted vec of [id doc] pairs."
|
||||
[]
|
||||
(->> @@!todos
|
||||
(sort-by (fn [[_ doc]] (:created doc)))
|
||||
vec))
|
||||
|
||||
(defn- active-todos []
|
||||
(remove (fn [[_ doc]] (:completed doc)) (todos-list)))
|
||||
|
||||
(defn- completed-todos []
|
||||
(filter (fn [[_ doc]] (:completed doc)) (todos-list)))
|
||||
|
||||
(defn- visible-todos []
|
||||
(case @!filter
|
||||
:all (todos-list)
|
||||
:active (active-todos)
|
||||
:completed (completed-todos)))
|
||||
|
||||
(defn- all-completed? []
|
||||
(let [ts (todos-list)]
|
||||
(and (seq ts) (every? (fn [[_ doc]] (:completed doc)) ts))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Actions
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- add-todo! [text]
|
||||
(let [text (str/trim text)]
|
||||
(when (seq text)
|
||||
(let [id (str "todo:" (random-uuid))]
|
||||
(swap! @!todos assoc id
|
||||
{:text text
|
||||
:completed false
|
||||
:created (.now js/Date)})))))
|
||||
|
||||
(defn- toggle-todo! [id]
|
||||
(swap! @!todos update-in [id :completed] not))
|
||||
|
||||
(defn- toggle-all! []
|
||||
(let [target (not (all-completed?))]
|
||||
(swap! @!todos
|
||||
(fn [m]
|
||||
(reduce-kv (fn [acc k v] (assoc acc k (assoc v :completed target)))
|
||||
{} m)))))
|
||||
|
||||
(defn- destroy-todo! [id]
|
||||
(swap! @!todos dissoc id))
|
||||
|
||||
(defn- edit-todo! [id new-text]
|
||||
(let [text (str/trim new-text)]
|
||||
(if (seq text)
|
||||
(swap! @!todos assoc-in [id :text] text)
|
||||
(destroy-todo! id))
|
||||
(reset! !editing nil)))
|
||||
|
||||
(defn- clear-completed! []
|
||||
(swap! @!todos
|
||||
(fn [m]
|
||||
(into {} (remove (fn [[_ v]] (:completed v))) m))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Rendering
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- esc [s]
|
||||
(-> (str s)
|
||||
(str/replace "&" "&")
|
||||
(str/replace "<" "<")
|
||||
(str/replace ">" ">")
|
||||
(str/replace "\"" """)))
|
||||
|
||||
(defn- render-todo-item [[id doc]]
|
||||
(let [editing? (= id @!editing)
|
||||
classes (str (when (:completed doc) " completed")
|
||||
(when editing? " editing"))]
|
||||
(str "<li class=\"todo-item" classes "\" data-id=\"" (esc id) "\">"
|
||||
"<div class=\"view\">"
|
||||
"<button class=\"toggle\" data-action=\"toggle\" data-id=\"" (esc id) "\">"
|
||||
(if (:completed doc) "◉" "○")
|
||||
"</button>"
|
||||
"<label class=\"todo-label\" data-action=\"edit-start\" data-id=\"" (esc id) "\">"
|
||||
(esc (:text doc))
|
||||
"</label>"
|
||||
"<button class=\"destroy\" data-action=\"destroy\" data-id=\"" (esc id) "\">×</button>"
|
||||
"</div>"
|
||||
(when editing?
|
||||
(str "<input class=\"edit-input\" data-action=\"edit-input\" data-id=\"" (esc id) "\""
|
||||
" value=\"" (esc (:text doc)) "\" />"))
|
||||
"</li>")))
|
||||
|
||||
(defn- render-footer [active-count total-count]
|
||||
(let [current @!filter]
|
||||
(str "<footer class=\"app-footer\">"
|
||||
"<span class=\"todo-count\">"
|
||||
"<strong>" active-count "</strong> "
|
||||
(if (= 1 active-count) "item" "items") " left"
|
||||
"</span>"
|
||||
"<nav class=\"filters\">"
|
||||
"<button class=\"filter-btn" (when (= :all current) " selected") "\" data-action=\"filter\" data-filter=\"all\">All</button>"
|
||||
"<button class=\"filter-btn" (when (= :active current) " selected") "\" data-action=\"filter\" data-filter=\"active\">Active</button>"
|
||||
"<button class=\"filter-btn" (when (= :completed current) " selected") "\" data-action=\"filter\" data-filter=\"completed\">Completed</button>"
|
||||
"</nav>"
|
||||
(when (pos? (- total-count active-count))
|
||||
"<button class=\"clear-completed\" data-action=\"clear-completed\">Clear completed</button>")
|
||||
"</footer>")))
|
||||
|
||||
(defn- render-sync-status []
|
||||
(let [pending (when @!todos (pb/pending-count @!todos))
|
||||
online? (.-onLine js/navigator)]
|
||||
(str "<div class=\"sync-bar\">"
|
||||
"<span class=\"sync-dot " (if online? "online" "offline") "\"></span>"
|
||||
"<span class=\"sync-text\">"
|
||||
(cond
|
||||
(not online?) "Offline — changes saved locally"
|
||||
(and pending (pos? pending)) (str "Syncing " pending " change" (when (> pending 1) "s") "…")
|
||||
:else "Synced")
|
||||
"</span>"
|
||||
"</div>")))
|
||||
|
||||
(defn- render! []
|
||||
(let [container (js/document.getElementById "app")
|
||||
todos (visible-todos)
|
||||
total (count (todos-list))
|
||||
active (count (active-todos))]
|
||||
(when container
|
||||
(set! (.-innerHTML container)
|
||||
(str
|
||||
"<header class=\"app-header\">"
|
||||
"<h1>todos</h1>"
|
||||
"<div class=\"input-row\">"
|
||||
(when (pos? total)
|
||||
(str "<button class=\"toggle-all" (when (all-completed?) " checked") "\" data-action=\"toggle-all\">❯</button>"))
|
||||
"<input id=\"new-todo\" class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus />"
|
||||
"</div>"
|
||||
"</header>"
|
||||
(when (pos? total)
|
||||
(str "<section class=\"main\">"
|
||||
"<ul class=\"todo-list\">"
|
||||
(apply str (map render-todo-item todos))
|
||||
"</ul>"
|
||||
"</section>"
|
||||
(render-footer active total)))
|
||||
(render-sync-status))))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Event delegation
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- find-action
|
||||
"Walk up from target to find an element with data-action."
|
||||
[el]
|
||||
(loop [node el]
|
||||
(when (and node (not= node js/document.body))
|
||||
(if-let [action (.. node -dataset -action)]
|
||||
[action node]
|
||||
(recur (.-parentElement node))))))
|
||||
|
||||
(defn- handle-click [e]
|
||||
(when-let [[action el] (find-action (.-target e))]
|
||||
(let [id (.. el -dataset -id)]
|
||||
(case action
|
||||
"toggle" (toggle-todo! id)
|
||||
"destroy" (destroy-todo! id)
|
||||
"toggle-all" (toggle-all!)
|
||||
"clear-completed" (clear-completed!)
|
||||
"filter" (reset! !filter (keyword (.. el -dataset -filter)))
|
||||
nil))))
|
||||
|
||||
(defn- handle-dblclick [e]
|
||||
(when-let [[action el] (find-action (.-target e))]
|
||||
(when (= action "edit-start")
|
||||
(let [id (.. el -dataset -id)]
|
||||
(reset! !editing id)
|
||||
(render!)
|
||||
;; Focus the edit input after render
|
||||
(js/requestAnimationFrame
|
||||
(fn []
|
||||
(when-let [input (.querySelector js/document ".edit-input")]
|
||||
(.focus input)
|
||||
;; Move cursor to end
|
||||
(let [len (.-length (.-value input))]
|
||||
(.setSelectionRange input len len)))))))))
|
||||
|
||||
(defn- handle-keydown [e]
|
||||
(let [key (.-key e)]
|
||||
(cond
|
||||
;; Enter on new-todo input
|
||||
(and (= key "Enter") (= "new-todo" (.. e -target -id)))
|
||||
(let [input (.-target e)]
|
||||
(add-todo! (.-value input))
|
||||
(set! (.-value input) ""))
|
||||
|
||||
;; Enter on edit input
|
||||
(and (= key "Enter") (.. e -target -dataset -action)
|
||||
(= "edit-input" (.. e -target -dataset -action)))
|
||||
(let [el (.-target e)]
|
||||
(edit-todo! (.. el -dataset -id) (.-value el)))
|
||||
|
||||
;; Escape cancels edit
|
||||
(and (= key "Escape") @!editing)
|
||||
(do (reset! !editing nil)
|
||||
(render!)))))
|
||||
|
||||
(defn- handle-blur [e]
|
||||
(when (and @!editing
|
||||
(.. e -target -dataset -action)
|
||||
(= "edit-input" (.. e -target -dataset -action)))
|
||||
(let [el (.-target e)]
|
||||
(edit-todo! (.. el -dataset -id) (.-value el)))))
|
||||
|
||||
(defn- bind-events! []
|
||||
(let [app (js/document.getElementById "app")]
|
||||
(.addEventListener app "click" handle-click)
|
||||
(.addEventListener app "dblclick" handle-dblclick)
|
||||
(.addEventListener js/document "keydown" handle-keydown)
|
||||
(.addEventListener app "focusout" handle-blur true)))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Init
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn ^:export init []
|
||||
(go
|
||||
(let [conn (<! (pb/open "pocketbook-todomvc"))
|
||||
todos (pb/synced-atom conn "todo"
|
||||
{:server "http://localhost:8090/sync"
|
||||
:interval 15000})]
|
||||
(reset! !conn conn)
|
||||
(reset! !todos todos)
|
||||
;; Wait for IDB load
|
||||
(<! (pb/ready? todos))
|
||||
;; Initial render
|
||||
(render!)
|
||||
(bind-events!)
|
||||
;; Re-render on any data change
|
||||
(add-watch todos :render (fn [_ _ _ _] (render!)))
|
||||
;; Re-render on filter change
|
||||
(add-watch !filter :render (fn [_ _ _ _] (render!)))
|
||||
;; Online/offline status updates
|
||||
(.addEventListener js/window "online" (fn [_] (render!)))
|
||||
(.addEventListener js/window "offline" (fn [_] (render!)))
|
||||
(js/console.log "🔶 Pocketbook TodoMVC loaded —" (count @todos) "todos"))))
|
||||
|
||||
(init)
|
||||
416
example/todomvc/todomvc.html
Normal file
416
example/todomvc/todomvc.html
Normal file
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pocketbook · TodoMVC</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ── Reset ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
/* ── Palette ──────────────────────────────────────────── */
|
||||
:root {
|
||||
--bg: #F6F1EB;
|
||||
--bg-card: #FFFCF7;
|
||||
--ink: #2C2420;
|
||||
--ink-soft: #8A7E74;
|
||||
--ink-faint: #C8BFB4;
|
||||
--accent: #C0583A;
|
||||
--accent-glow: #E87A55;
|
||||
--green: #5A8A6A;
|
||||
--rule: #E2D9CE;
|
||||
--shadow: rgba(44, 36, 32, 0.06);
|
||||
--shadow-md: rgba(44, 36, 32, 0.10);
|
||||
}
|
||||
|
||||
/* ── Page ─────────────────────────────────────────────── */
|
||||
html {
|
||||
font-size: 17px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Newsreader', 'Georgia', serif;
|
||||
color: var(--ink);
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
/* Subtle grain texture */
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ── Container ────────────────────────────────────────── */
|
||||
.wrapper {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.25rem 4rem;
|
||||
}
|
||||
|
||||
/* ── Branding ─────────────────────────────────────────── */
|
||||
.brand {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.brand-label {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
}
|
||||
.brand-label::before {
|
||||
content: '🔶';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* ── Card ─────────────────────────────────────────────── */
|
||||
#app {
|
||||
background: var(--bg-card);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 1px 2px var(--shadow),
|
||||
0 4px 16px var(--shadow),
|
||||
0 24px 48px var(--shadow-md);
|
||||
overflow: hidden;
|
||||
/* Deckled left edge */
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────── */
|
||||
.app-header h1 {
|
||||
font-family: 'Instrument Serif', serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
color: var(--accent);
|
||||
letter-spacing: -0.02em;
|
||||
padding: 1.5rem 0 0.3rem;
|
||||
line-height: 1;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
color: var(--ink-faint);
|
||||
cursor: pointer;
|
||||
padding: 0.75rem 0.5rem;
|
||||
line-height: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: color 0.15s, transform 0.2s;
|
||||
}
|
||||
.toggle-all:hover { color: var(--ink-soft); }
|
||||
.toggle-all.checked { color: var(--ink); }
|
||||
|
||||
.new-todo {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 1.15rem;
|
||||
color: var(--ink);
|
||||
padding: 1rem 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.new-todo::placeholder {
|
||||
color: var(--ink-faint);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Todo list ────────────────────────────────────────── */
|
||||
.todo-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
position: relative;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.todo-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.todo-item:hover {
|
||||
background: rgba(192, 88, 58, 0.018);
|
||||
}
|
||||
|
||||
.todo-item .view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 3.2rem;
|
||||
padding: 0 0.75rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ── Toggle (circle) ──────────────────────────────────── */
|
||||
.toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
color: var(--ink-faint);
|
||||
transition: color 0.15s, transform 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle:hover {
|
||||
color: var(--ink-soft);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.todo-item.completed .toggle {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* ── Label ────────────────────────────────────────────── */
|
||||
.todo-label {
|
||||
flex: 1;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.45;
|
||||
padding: 0.65rem 0.25rem;
|
||||
cursor: text;
|
||||
word-break: break-word;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.todo-item.completed .todo-label {
|
||||
color: var(--ink-faint);
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--ink-faint);
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
/* ── Destroy ──────────────────────────────────────────── */
|
||||
.destroy {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
transition: color 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.todo-item:hover .destroy,
|
||||
.destroy:focus-visible {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.destroy:hover {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* ── Editing ──────────────────────────────────────────── */
|
||||
.todo-item.editing .view { display: none; }
|
||||
.todo-item.editing {
|
||||
padding: 0;
|
||||
}
|
||||
.edit-input {
|
||||
width: 100%;
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.45;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0.75rem 1rem 0.75rem 3.1rem;
|
||||
color: var(--ink);
|
||||
box-shadow: inset 0 0 0 1px var(--accent);
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────────── */
|
||||
.app-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 1rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--ink-soft);
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.todo-count strong {
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.filter-btn {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: var(--ink-soft);
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.filter-btn:hover {
|
||||
border-color: var(--ink-faint);
|
||||
}
|
||||
.filter-btn.selected {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.clear-completed {
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
.clear-completed:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Sync bar ─────────────────────────────────────────── */
|
||||
.sync-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.55rem 1rem;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--ink-faint);
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.sync-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sync-dot.online {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 4px rgba(90, 138, 106, 0.4);
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
.sync-dot.offline {
|
||||
background: var(--ink-faint);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* ── Info below card ──────────────────────────────────── */
|
||||
.info {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.62rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.info a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--ink-faint);
|
||||
transition: color 0.12s, border-color 0.12s;
|
||||
}
|
||||
.info a:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Loading state ────────────────────────────────────── */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
font-style: italic;
|
||||
color: var(--ink-faint);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.loading::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin-left: 0.3em;
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Empty state ──────────────────────────────────────── */
|
||||
#app:empty::after,
|
||||
.app-header + .sync-bar::before {
|
||||
/* When only header + sync bar visible, show hint */
|
||||
}
|
||||
|
||||
/* ── Focus styles ─────────────────────────────────────── */
|
||||
.new-todo:focus {
|
||||
/* Subtle left bar highlight */
|
||||
}
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.new-todo:focus-visible,
|
||||
.edit-input:focus-visible,
|
||||
.toggle:focus-visible,
|
||||
.destroy:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="brand">
|
||||
<span class="brand-label">Pocketbook · TodoMVC</span>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="loading">Loading from local store</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>Double-click to edit a todo</p>
|
||||
<p>Built with <a href="https://github.com/pocketbook">Pocketbook</a> — offline-first synced atoms for Clojure</p>
|
||||
<p>Data persists in IndexedDB · syncs via Transit to SQLite</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/out/goog/base.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user