website: new Calendar/Bookmarks/Shopping sections, relay rewrite, v2.0.0

Content catch-up from v1.3.3 → v2.0.0: three new feature sections,
relay section expanded to cover group chat / persistent history /
shopping / inbox view, footer version bumped, TODO trimmed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-17 17:05:56 +02:00
1 parent d83de30d6d
commit 1dfffa5d6d
2 files changed
+151 -64

No files matched your search

+122 -11
View File
@@ -399,6 +399,49 @@ See also: <span class="link">[[Infra checklist]]</span>
</div>
</section>
<section class="section" id="calendar">
<div class="section-label">CALENDAR</div>
<div class="feat">
<div class="feat-text">
<h3>Cards become events.<br>Events stay synced.</h3>
<p>A month-grid calendar built into hyprcrd. Journal entries, appointments, and birthdays — all just cards with the right title or tag. Bidirectional CalDAV sync with ownCloud and Nextcloud.</p>
<ul>
<li>Journal entries: title = <code>YYYY-MM-DD</code>, one per day, no tag needed</li>
<li>Appointments: <code>#termin</code> tag + structured template (time, end, location, attendees)</li>
<li>Birthdays: <code>#geburtstag</code> tag, recurring annually</li>
<li>Click any day to create a journal entry, appointment, or birthday</li>
<li>CalDAV sync: bidirectional push/pull with ownCloud, Nextcloud, or any CalDAV server</li>
<li>Per-calendar color + icon configuration</li>
<li>Upcoming-event notifications with configurable lookahead</li>
</ul>
</div>
<div class="feat-visual">
<div style="font-family:var(--mono);font-size:11px;color:var(--tx);line-height:2;">
<div style="text-align:center;margin-bottom:12px;"><span style="color:var(--ac);font-family:var(--pixel);font-size:10px;">APRIL 2026</span></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;">
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Mo</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Tu</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">We</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Th</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Fr</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Sa</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Su</span>
<span style="opacity:0.3">30</span><span style="opacity:0.3">31</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
<span>13</span><span>14</span><span style="color:var(--ac);border:1px solid var(--ac);border-radius:3px;">15</span><span>16</span><span style="color:var(--yl);">17</span><span>18</span><span>19</span>
<span>20</span><span>21</span><span>22</span><span style="color:var(--pk);">23</span><span>24</span><span>25</span><span>26</span>
<span>27</span><span>28</span><span>29</span><span>30</span><span style="opacity:0.3">1</span><span style="opacity:0.3">2</span><span style="opacity:0.3">3</span>
</div>
<div style="margin-top:12px;font-size:10px;display:flex;gap:12px;justify-content:center;">
<span><span style="color:var(--ac);">&bull;</span> journal</span>
<span><span style="color:var(--yl);">&bull;</span> termin</span>
<span><span style="color:var(--pk);">&bull;</span> geburtstag</span>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="gitea">
<div class="section-label"><span class="accent">GITEA</span></div>
<div class="feat reverse">
@@ -477,14 +520,16 @@ See also: <span class="link">[[Infra checklist]]</span>
<div class="feat">
<div class="feat-text">
<h3>Sync between devices.<br>Share with people.</h3>
<p>A self-hosted message relay that connects multiple hyprcrd instances. Per-user encryption. Collaborative buckets with exclusive card locking. Encrypted chat with read receipts.</p>
<p>A self-hosted message relay that connects multiple hyprcrd instances. Per-user encryption. Collaborative buckets. Group chat with persistent history. Shopping lists on your phone.</p>
<ul>
<li>Multi-tenant: each user gets their own login + encryption secret</li>
<li>Cards sync between devices — push from one, poll from another</li>
<li>Collaborative buckets: shared editing with exclusive locks</li>
<li>Chat: encrypted messages with delivery + read receipts</li>
<li>Compose + inbox UI works on mobile</li>
<li>24h ephemeral — the relay routes, it doesn't archive</li>
<li>Collaborative buckets: shared editing with exclusive card locking</li>
<li>Group chat: named rooms, member management, persistent history that backfills on new devices</li>
<li>1:1 chat with delivery + read receipts, disposable or persistent threads</li>
<li>Shopping lists: check off items on your phone, changes sync back to hyprcrd</li>
<li>Dedicated inbox view with inbox, shared buckets, and sent messages</li>
<li>Admin dashboard: user management, last-seen tracking</li>
<li>AES-256-CBC at every hop, bcrypt passwords, master key at rest</li>
</ul>
</div>
@@ -500,11 +545,11 @@ See also: <span class="link">[[Infra checklist]]</span>
<div style="margin-bottom:20px;padding-left:24px;border-left:2px solid var(--bdr);">
<span style="font-size:11px;color:var(--tx);">
1. authenticate sender<br>
2. decrypt with alice's secret<br>
2. decrypt with sender's secret<br>
3. re-encrypt with inter-tenant key<br>
4. store (24h TTL)<br>
5. on bob's poll: decrypt<br>
6. re-encrypt with bob's secret<br>
4. store (persistent or ephemeral)<br>
5. on recipient's poll: decrypt<br>
6. re-encrypt with recipient's secret<br>
7. deliver
</span>
</div>
@@ -520,6 +565,72 @@ See also: <span class="link">[[Infra checklist]]</span>
</div>
</section>
<section class="section" id="bookmarks">
<div class="section-label">BOOKMARKS</div>
<div class="feat">
<div class="feat-text">
<h3>Column-based bookmarks.<br>Stored as cards.</h3>
<p>A bookmark list is a card. Organise links in named columns, drag to reorder, paste a URL and the title + favicon are fetched automatically. Link to other cards for cross-referencing.</p>
<ul>
<li>Tag any card with <code>#bookmarks</code> to turn it into a bookmark list</li>
<li>Named columns: create, rename, delete, drag items between them</li>
<li>Paste a URL from clipboard: title + favicon fetched server-side and stored as data: URI</li>
<li>Full-width column-width slider per list</li>
<li>Card links: <code>card:123</code> opens the linked card or switches to another bookmark list</li>
<li>Multiple lists with different names, colors, and bucket assignments</li>
<li>Board tiles show card color + link icon, no body preview</li>
</ul>
</div>
<div class="feat-visual">
<div style="display:flex;gap:12px;font-family:var(--mono);font-size:11px;">
<div style="flex:1;border:1px solid var(--bdr);border-radius:6px;padding:10px;">
<div style="font-family:var(--pixel);font-size:9px;color:var(--ac);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">Dev</div>
<div style="display:flex;flex-direction:column;gap:4px;">
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--ac);">&#9679;</span><span style="color:var(--hi);">GitHub</span></div>
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--ac);">&#9679;</span><span style="color:var(--hi);">MDN</span></div>
</div>
</div>
<div style="flex:1;border:1px solid var(--bdr);border-radius:6px;padding:10px;">
<div style="font-family:var(--pixel);font-size:9px;color:var(--ac);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">News</div>
<div style="display:flex;flex-direction:column;gap:4px;">
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--yl);">&#9679;</span><span style="color:var(--hi);">HN</span></div>
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--yl);">&#9679;</span><span style="color:var(--hi);">Lobsters</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="shopping">
<div class="section-label">SHOPPING</div>
<div class="feat">
<div class="feat-text">
<h3>Write the list on desktop.<br>Check it off on your phone.</h3>
<p>Tag a card with <code>#einkauf</code> or <code>#shopping</code>. Activate it via the Shopping button. The card's checkbox items sync to the relay and appear as a phone-friendly checklist. Tap to check off, changes sync back.</p>
<ul>
<li>Multiple shopping lists: activate any combination, all show on the phone</li>
<li>Drag-and-drop ordering in the picker, order syncs to the phone</li>
<li>Markdown headings (<code># Produce</code>) group items into sections</li>
<li>Phone only toggles checkboxes — text editing stays in hyprcrd</li>
<li>4-second poll on phone, instant push from hyprcrd on every edit</li>
<li>Works inside the relay UI: same login, same session, no separate app</li>
</ul>
</div>
<div class="feat-visual">
<div style="max-width:240px;margin:0 auto;font-family:var(--mono);font-size:13px;">
<div style="font-family:var(--pixel);font-size:10px;color:var(--ac);text-align:center;margin-bottom:12px;">Shopping</div>
<div style="font-weight:600;font-size:12px;color:var(--hi);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">Baumarkt</div>
<div style="display:flex;flex-direction:column;gap:6px;">
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);">Bretter</div>
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);">Kleber</div>
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);opacity:0.35;text-decoration:line-through;">Schrauben</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="email">
<div class="section-label">EMAIL</div>
<div class="feat">
@@ -635,7 +746,7 @@ See also: <span class="link">[[Infra checklist]]</span>
<li>One SQLite file — back up by copying <code>data/hyprcrd.db</code></li>
<li>Export as JSON+media ZIP or Obsidian/Logseq markdown vault</li>
<li>Plugin system: drop a folder, reload, feature appears</li>
<li>Bundled: chat, email, Gitea, canvas, slideshows, Logseq import, watch</li>
<li>Bundled: chat, email, Gitea, bookmarks, shopping lists, canvas, TIM (time calc), terminal, slideshows, Logseq import, watch</li>
<li>Fully themed: design tokens, presets, build your own</li>
<li>MIT licensed</li>
</ul>
@@ -678,7 +789,7 @@ See also: <span class="link">[[Infra checklist]]</span>
</main>
<footer>hyprcrd &middot; MIT license &middot; v1.3.3</footer>
<footer>hyprcrd &middot; MIT license &middot; v2.0.0</footer>
<script>
(function() {