th/hyprcrd
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hilfe eingebaut

Browse Source
This commit is contained in:
th committed 2026-04-07 23:57:30 +02:00
1 parent ae6c818848
commit 836826dba5
6 files changed
+532 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.php
+162 -5
View File
@@ -610,9 +610,165 @@ if (str_starts_with($route, '/api/')) {
</div>
</div>
<div id="footer-count" class="font-pixel text-[10px] text-t-dim whitespace-nowrap absolute left-1/2 -translate-x-1/2"></div>
<div class="font-pixel text-[10px] text-t-dim whitespace-nowrap">© <?= date('Y') ?> hyprcrd</div>
<div class="flex items-center gap-2">
<button id="help-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-question text-sm"></i><span class="font-pixel text-[10px]">help</span></button>
<span class="font-pixel text-[10px] text-t-dim whitespace-nowrap">© <?= date('Y') ?> hyprcrd</span>
</div>
</footer>
<!-- Help -->
<div class="overlay fixed inset-0 z-[95] flex justify-center items-start pt-12 pb-12 px-8" style="background:var(--t-overlay)" id="help">
<div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-3xl max-h-full overflow-y-auto" style="border-radius:4px;">
<div class="flex items-center gap-3 px-6 py-4 border-b border-t-border sticky top-0 bg-t-surface z-[1]">
<i class="ph ph-question text-t-accent text-base"></i>
<h2 class="font-pixel text-sm text-t-accent">help</h2>
<div class="flex-1"></div>
<button id="help-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
</div>
<div class="p-6 text-sm text-t-text space-y-6" id="help-content">
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-info text-sm"></i>concepts</h3>
<div class="text-xs leading-relaxed space-y-3 text-t-muted">
<p><span class="text-t-bright font-pixel">cards</span> are the basic unit — each card has a title, a markdown body, a color, and optional tags. Cards appear as tiles on the board. Click to preview, double-click to edit, right-click for actions. Cards can contain images, checklists, links to other cards, and any markdown content.</p>
<p><span class="text-t-bright font-pixel">buckets</span> organize cards into categories (like folders or columns). Each bucket has a name and color. The bucket bar at the top lets you filter the board. Special built-in views: <span class="text-t-dim font-pixel">all</span> (everything), <span class="text-t-dim font-pixel">current</span> (recently touched), <span class="text-t-dim font-pixel">favorites</span> (starred), <span class="text-t-dim font-pixel">journal</span> (date-titled cards), <span class="text-t-dim font-pixel">unsorted</span> (no bucket). Drag a card onto a bucket tab to move it. Drag to the + button to create a new bucket from a card.</p>
<p><span class="text-t-bright font-pixel">groups</span> let you nest cards. Drag a card to the center of another card to group them. The parent card shows a badge with the member count. Click the badge or use "open group" in the context menu to see all members. Inside a group you can reorder, drag cards out to ungroup, or drag the first card to promote a new parent. Use "dissolve group" to ungroup all at once.</p>
<p><span class="text-t-bright font-pixel">tags</span> are written as <span class="text-t-dim font-pixel">#tagname</span> in the card body and extracted automatically. They support hierarchy: <span class="text-t-dim font-pixel">#project/frontend</span>. Click a tag on any card to filter the board — Ctrl+click to combine multiple tags (AND). Tags can also be assigned via right-click > tags without editing the card body. Each segment of a hierarchical tag is independently clickable.</p>
<p><span class="text-t-bright font-pixel">links</span> connect cards. Write <span class="text-t-dim font-pixel">[[Card Title]]</span> in the body to create a link. Linked cards are clickable in preview and show up as backlinks on the target card. The split view shows related cards based on shared tags, links, and content overlap.</p>
</div>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-keyboard text-sm"></i>shortcuts</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">Ctrl+K</td><td>open / close search</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+Z</td><td>undo last action</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">F1</td><td>open / close help</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Escape</td><td>close any overlay</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-squares-four text-sm"></i>board</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">click card</td><td>open preview</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">double-click</td><td>open editor</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">right-click</td><td>context menu (color, bucket, tags, ...)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+click</td><td>multi-select cards</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">drag card</td><td>reorder, move to bucket, or group</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">click tag</td><td>filter by tag</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+click tag</td><td>add/remove tag filter (AND)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">group badge</td><td>expand group</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-eye text-sm"></i>preview</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">double-click image</td><td>fullscreen (scroll to zoom, drag to pan)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Arrow Left/Right</td><td>prev/next image in gallery</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">click [[link]]</td><td>open linked card</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">click checkbox</td><td>toggle task completion</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">zen mode</td><td>full-screen reading (drag edges to resize)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">split view</td><td>show related / tagged cards side-by-side</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-pencil-simple text-sm"></i>editor</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">Ctrl+S</td><td>save</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+Shift+S</td><td>save and close</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Alt+Arrow Up/Down</td><td>move line</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Shift+Alt+Arrow</td><td>duplicate line</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Tab</td><td>indent (4 spaces)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">paste/drag image</td><td>upload and insert</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">drag divider</td><td>resize editor / preview split</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-lightning text-sm"></i>autocomplete</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">[[</td><td>link to card (search by title)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">#</td><td>tag autocomplete (existing tags)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?</td><td>snippet menu (see below)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Arrow Up/Down</td><td>navigate suggestions</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">Enter / Tab</td><td>accept suggestion</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-magic-wand text-sm"></i>snippets (type ? + keyword + space)</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">?dat</td><td>current date (2026-04-07)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?time</td><td>current time (22:53)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?now</td><td>date + time</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?week</td><td>calendar week (KW15)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?todo</td><td>checkbox - [ ]</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?hr</td><td>horizontal rule ---</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?h1 ?h2 ?h3</td><td>headings</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?table</td><td>markdown table template</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">?code</td><td>fenced code block</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-calculator text-sm"></i>inline calculator</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">?3+5 Space</td><td>replaces with 8</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">34+56? Space</td><td>becomes 34+56=90</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">operators</td><td>+ - * / () % ^</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-hash text-sm"></i>tags</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">#tagname</td><td>write tags in card body</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">#parent/child</td><td>hierarchical tags</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">right-click > tags</td><td>assign tags via context menu</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">click tag segment</td><td>each path level is clickable</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-magnifying-glass text-sm"></i>search</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">text</td><td>search titles + body</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">#tag</td><td>filter by tag</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">#tag word</td><td>tag filter + text search</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">#tag1 #tag2</td><td>multiple tags (AND)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">bucket filter</td><td>dropdown to restrict scope</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-article text-sm"></i>markdown</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">[[title]]</td><td>card link</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">```gallery</td><td>image gallery grid (click to fullscreen)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">```tree</td><td>tree-style list</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">```bullets</td><td>bullet-style list</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">- [ ] / - [x]</td><td>interactive checkboxes</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">external links</td><td>open in new tab automatically</td></tr>
</table>
</section>
<section>
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-download-simple text-sm"></i>import / export</h3>
<table class="w-full text-xs">
<tr><td class="py-1 text-t-dim w-40 font-pixel">export</td><td>JSON + media ZIP (re-importable)</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">vault</td><td>Obsidian / Logseq markdown vault</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">right-click > save .md</td><td>single card as markdown + images</td></tr>
<tr><td class="py-1 text-t-dim font-pixel">import</td><td>restore from exported ZIP</td></tr>
</table>
</section>
</div>
</div>
</div>
<!-- Dialog -->
<div class="overlay fixed inset-0 z-[90] flex justify-center items-center px-4" style="background:var(--t-overlay)" id="dialog">
<div class="bg-t-surface border border-t-border w-full max-w-sm">
@@ -642,7 +798,6 @@ if (str_starts_with($route, '/api/')) {
<i class="ph ph-magnifying-glass text-t-accent text-base"></i>
<input type="text" id="search-input" placeholder="search cards..." class="flex-1 bg-transparent text-t-bright text-sm placeholder:text-t-dim font-mono" autocomplete="off" spellcheck="false">
<select id="search-bucket-filter" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer"><option value="">all buckets</option></select>
<kbd class="text-[9px] text-t-dim border border-t-border rounded px-1.5 py-0.5 font-pixel">esc</kbd>
<button id="search-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
<i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
</button>
@@ -751,6 +906,7 @@ if (str_starts_with($route, '/api/')) {
<div id="link-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-48 overflow-y-auto hidden" style="min-width:220px;max-width:360px;"></div>
<div id="tag-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-48 overflow-y-auto hidden" style="min-width:180px;max-width:300px;"></div>
<div id="snippet-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-56 overflow-y-auto hidden" style="min-width:240px;max-width:360px;"></div>
<!-- Gallery -->
<div class="overlay fixed inset-0 z-[72]" style="background:var(--t-overlay)" id="gallery">
@@ -836,13 +992,14 @@ if (str_starts_with($route, '/api/')) {
<button id="toggle-lines" class="toolbar-btn flex items-center gap-1.5 px-2" title="line numbers"><i class="ph ph-hash text-sm"></i></button>
<button id="toggle-preview" class="toolbar-btn flex items-center gap-1.5 px-2"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[9px]">preview</span></button>
</div>
<div class="flex flex-1 min-h-0">
<div class="flex flex-1 min-h-0 overflow-hidden">
<div id="editor-gutter" class="hidden bg-t-bg text-t-dim text-right font-mono text-sm select-none overflow-hidden shrink-0 border-r border-t-border" style="width:3.5em; padding:1rem 0.25rem 1rem 0.5rem; line-height:1.625;"></div>
<div class="flex-1 relative min-h-full bg-t-bg">
<div id="editor-pane" class="relative min-h-full bg-t-bg" style="flex:1 1 0%;min-width:0;">
<div id="editor-line-hl" class="absolute pointer-events-none left-0 right-0" style="background:var(--t-border);opacity:0.18;display:none;z-index:1;"></div>
<textarea id="editor-body" placeholder="> write markdown..." class="absolute inset-0 w-full h-full text-t-text text-sm font-mono placeholder:text-t-dim border-none overflow-y-auto" style="padding:1rem; line-height:1.625; resize:none; z-index:2; background:transparent;"></textarea>
</div>
<div id="editor-preview" class="flex-1 border-l border-t-border bg-t-bg p-4 overflow-y-auto hidden"><div id="preview-content" class="prose text-sm text-t-text"></div></div>
<div id="editor-divider" class="hidden shrink-0 border-l border-t-border" style="width:1px;cursor:col-resize;position:relative;padding:0 5px;margin:0 -5px;z-index:3;"><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:48px;border-radius:2px;background:var(--t-muted);opacity:0.08;transition:opacity 0.2s;"></div></div>
<div id="editor-preview" class="bg-t-bg p-4 overflow-y-auto hidden" style="flex:1 1 0%;min-width:0;"><div id="preview-content" class="prose text-sm text-t-text"></div></div>
</div>
</div>
</div>