From fe9401c38f7aa14c6accd10ec6f246033848880b Mon Sep 17 00:00:00 2001 From: Till Heidrich Date: Wed, 16 Sep 2026 12:20:00 +0200 Subject: [PATCH] =?UTF-8?q?Klarbild-Design,=20neues=20Logo,=20Ein-Klick-Ei?= =?UTF-8?q?nf=C3=BCgen,=20mobil=20=C3=BCberarbeitet,=20Spenden-Knopf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Design auf Klarbild-Tokens umgestellt: Space Grotesk/Mono, Papier/Karte, Blau, Pills - Neues Logo und App-Icon: Klemmbrett mit Pfeil (Zwischenablage -> Datei) - Einfügen-Knopf liest die Zwischenablage direkt (HTML bevorzugt), Fallback-Hinweis - Mobil: 44px-Ziele, 16px-Eingaben, Safe-Area, Bottom-Sheet, Datei öffnen, Speichern per Teilen-Menü - Spenden-Knopf (PayPal) in Kopfzeile, Fußzeile und Rechtstexten; Datenschutz um PayPal und Zwischenablage ergänzt - Service Worker: Seiten network-first (Impressum/Datenschutz froren im Cache ein), Cache v4 - nginx: no-cache für Seiten - Listen mit einem Leerzeichen nach dem Aufzählungszeichen --- DESIGN.md | 56 +- README.md | 27 +- datenschutz.html | 67 +- docs/screenshot-light.png | Bin 103853 -> 55366 bytes docs/screenshot-mobile.png | Bin 0 -> 134830 bytes icon-mono.svg | 10 +- icon.svg | 12 +- impressum.html | 35 +- index.html | 904 ++++++++++-------- legal.css | 108 +-- manifest.webmanifest | 13 +- nginx.conf | 3 + sw.js | 74 +- vendor/fonts/Geist-Variable.woff2 | Bin 69652 -> 0 bytes vendor/fonts/GeistMono-Variable.woff2 | Bin 71368 -> 0 bytes vendor/fonts/LICENSE-SpaceGrotesk.txt | 93 ++ vendor/fonts/LICENSE-SpaceMono.txt | 93 ++ .../space-grotesk-latin-400-normal.woff2 | Bin 0 -> 13388 bytes .../space-grotesk-latin-500-normal.woff2 | Bin 0 -> 13312 bytes .../space-grotesk-latin-700-normal.woff2 | Bin 0 -> 12840 bytes .../fonts/space-mono-latin-400-normal.woff2 | Bin 0 -> 16520 bytes .../fonts/space-mono-latin-700-normal.woff2 | Bin 0 -> 16724 bytes 22 files changed, 884 insertions(+), 611 deletions(-) create mode 100644 docs/screenshot-mobile.png delete mode 100644 vendor/fonts/Geist-Variable.woff2 delete mode 100644 vendor/fonts/GeistMono-Variable.woff2 create mode 100644 vendor/fonts/LICENSE-SpaceGrotesk.txt create mode 100644 vendor/fonts/LICENSE-SpaceMono.txt create mode 100644 vendor/fonts/space-grotesk-latin-400-normal.woff2 create mode 100644 vendor/fonts/space-grotesk-latin-500-normal.woff2 create mode 100644 vendor/fonts/space-grotesk-latin-700-normal.woff2 create mode 100644 vendor/fonts/space-mono-latin-400-normal.woff2 create mode 100644 vendor/fonts/space-mono-latin-700-normal.woff2 diff --git a/DESIGN.md b/DESIGN.md index 3052c83..fcba850 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,51 +1,13 @@ # clip2md — Design System -Register: **product**. Color strategy: **Restrained** (tinted neutrals + one accent ≤10%). -Theme: **dark**. Scene: Nutzer legt spätabends oder tagsüber am Monitor schnell einen langen -Thread ab; eine ruhige, dunkle, blendfreie Fläche hält den Fokus auf dem Text, nicht auf dem UI. +Seit September 2026 Teil der **Klarbild-Familie** (Tokens aus `klarbild-oss/src/styles/tokens.css`). -## Color (OKLCH) +- **Farbe:** warmes Papier `#EAEAE3`, Karte `#FBFBF7`, Linie `#D7D6CC`, Tinte `#16150F`, ein kräftiges Blau `#1B3BE0` (OKLCH 45% 0.23 267) für Primäraktion, Fokus, Logo. Dunkelmodus: blau getönte Neutrals, Blau aufgehellt. +- **Schrift:** Space Grotesk (UI, Überschriften), Space Mono (Editor, Dateiname, Mono-Labels in Versalien mit 0.18em Sperrung). Self-hosted, keine Google-Fonts. +- **Form:** Karten mit 4px Radius, Bedienelemente als Pills (999px). Kein Schatten außer 1px-Hauch und Toast/Sheet. +- **Logo:** Klemmbrett mit Pfeil nach unten (Zwischenablage → Datei) in Blau, Wortmarke „clip**2**md" mit blauer 2. App-Icon: cremefarbenes Klemmbrett auf blauem Quadrat. +- **Mobil:** Touch-Ziele ≥44px, Eingaben 16px (kein iOS-Zoom), `env(safe-area-inset-*)`, Einstellungen als Bottom-Sheet, Aktionsleiste als 5er-Raster mit Icon über Label, Speichern über Teilen-Menü. +- **Motion:** ease-out-quint, 120–240ms, nur Opacity/Transform; `prefers-reduced-motion` respektiert. -Neutrals sind zur Marken-Hue (kühles Blau-Grau, ~265) getönt — nie reines `#000`/`#fff`. - -| Token | OKLCH | Rolle | -| --- | --- | --- | -| `--bg` | `0.17 0.014 265` | App-Hintergrund (tief) | -| `--surface` | `0.215 0.016 265` | Editor-Fläche | -| `--raised` | `0.255 0.018 265` | Bars, Buttons | -| `--line` | `0.32 0.02 265` | Ruhige Rahmen | -| `--line-strong`| `0.42 0.024 265` | Aktive Rahmen | -| `--text` | `0.95 0.006 265` | Primärtext | -| `--muted` | `0.68 0.012 265` | Sekundärtext, Labels | -| `--faint` | `0.5 0.012 265` | Tertiär, Legende | -| `--accent` | `0.74 0.15 152` | Grün — Primäraktion, Fokus, „konvertiert" | -| `--accent-ink` | `0.22 0.05 152` | Text auf Accent | -| `--danger` | `0.66 0.16 25` | Fehler-Toast, destruktiv | - -Accent trägt <10% der Fläche: Save-Button, Fokus-Ring, „konvertiert"-Badge. Sonst Neutrals. - -## Typography - -- **Sans (UI-Chrome):** Inter / system-ui. Labels, Buttons, Legende. -- **Mono (Daten):** ui-monospace / JetBrains Mono. Editor, Dateiname, Zähler — alles, was „Inhalt" ist. -- Scale mit ≥1.25-Kontrast: 11 (legende) · 12.5 (meta) · 14 (body/editor) · 15 (buttons) · 18 (wordmark). -- Editor-Zeilenhöhe 1.65, `tab-size: 2`, Body-Zeilen bleiben durch die Mono-Fläche natürlich lesbar. - -## Elevation & Layout - -- Drei Ebenen: `bg` (App) → `surface` (Editor, das Herzstück, bekommt den Raum) → `raised` (Bars/Buttons). -- Keine Cards, keine Schatten außer einem weichen Toast-Drop. Trennung über 1px-Linien und Ton, nicht Boxen. -- Spacing-Rhythmus variiert bewusst: großzügig um den Editor, kompakt in der Toolbar. -- Radius 10–12px, konsistent. - -## Motion - -- Ease-out-quint (`cubic-bezier(0.22, 1, 0.36, 1)`), 120–240ms. Kein Bounce. -- Nur Opacity/Transform animieren. Toast slidet ein, Button-Press senkt 1px, „konvertiert"-Badge pulst einmal kurz, auto-aktualisierter Dateiname flasht dezent. -- `prefers-reduced-motion`: alle nicht-essenziellen Transitions aus. - -## Accessibility - -- `:focus-visible` Ring in Accent, überall. Touch-Ziele ≥40px. -- Toasts über `aria-live="polite"`. Editor & Felder korrekt gelabelt. -- Kontrast: Text/`bg` und Accent-Ink/Accent über WCAG AA. +## Historie +Vorher: dunkles Theme mit Grün (v1), dann helles Editorial mit Geist und Zinnober/Blau (v2). Beides abgelöst. diff --git a/README.md b/README.md index 7b7c4c3..43910d4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # clip2md — Paste to Markdown Paste a long Reddit thread, an article, or any formatted web content, and save it as clean -Markdown in a single keystroke. Runs entirely in your browser: nothing is uploaded, no account, +Markdown in one click. Works on desktop and phone. Runs entirely in your browser: nothing is uploaded, no account, no tracking, works offline. **Live demo:** https://clip2md.heidrich-digital.de ![clip2md](docs/screenshot-light.png) +clip2md on a phone + ## Why Copying from the web and getting usable Markdown is usually two or three tools and a lot of @@ -19,6 +21,8 @@ Obsidian vault, a wiki, or a repo. ## Features +- **One-click paste.** The *Paste* button reads the clipboard directly (Async Clipboard API) and + picks the HTML version when there is one. Browsers ask once for permission; `⌘V` always works too. - **Smart paste.** Formatted HTML (copy from a browser, e.g. Reddit `⌘A` → `⌘C`) is converted to clean Markdown. Plain text stays raw. Same `⌘V` for both, no mode switch. - **Force raw.** `⌘/Ctrl+Shift+V` pastes the next clip as plain text, skipping conversion. @@ -29,9 +33,11 @@ Obsidian vault, a wiki, or a repo. knowledge bases like Obsidian. - **Conversion options.** Links as plain text, strip images, bullet marker (`-` / `*` / `+`), heading style (ATX `#` / Setext). -- **Drag & drop.** Drop an `.html`, `.md` or `.txt` file to load or convert it. +- **Open & drop files.** Pick or drop an `.html`, `.md` or `.txt` file to load or convert it. +- **Mobile-first.** 44 px touch targets, 16 px inputs (no iOS zoom), safe-area aware, settings as a + bottom sheet; *Save* hands the file to the share sheet (Files, Obsidian, mail) on phones. - **Bilingual.** English and German, switchable in the header. -- **Light & dark.** Warm, flat, editorial light theme by default; dark mode one click away. +- **Light & dark.** Warm paper, one strong blue, clipboard logo; dark mode one click away. - **Save / copy / clear**, word + character count and reading time. - **Installable PWA**, fully offline after first load. @@ -49,9 +55,10 @@ construction. ## Tech -- Single self-contained `index.html` (inline CSS/JS, OKLCH tokens, Geist + Geist Mono). +- Single self-contained `index.html` (inline CSS/JS, OKLCH tokens, Space Grotesk + Space Mono). - Vendored, no CDN: Turndown + GFM plugin, marked, DOMPurify, fonts — all under `vendor/`. -- Served by `nginx:alpine` (`Dockerfile` + `nginx.conf`) with a service worker for offline use. +- Served by `nginx:alpine` (`Dockerfile` + `nginx.conf`) with a service worker for offline use + (network-first for pages, cache-first for static assets). - No build step, no backend, no database. ## Run locally @@ -71,16 +78,20 @@ Any static host works — point it at this repo. The reference deployment uses ## Update vendored libraries ```bash -npm pack turndown turndown-plugin-gfm marked dompurify geist +npm pack turndown turndown-plugin-gfm marked dompurify @fontsource/space-grotesk @fontsource/space-mono # turndown/dist/turndown.js -> vendor/turndown.js # turndown-plugin-gfm/dist/turndown-plugin-gfm.js -> vendor/turndown-plugin-gfm.js # marked/lib/marked.umd.js -> vendor/marked.umd.js # dompurify/dist/purify.min.js -> vendor/purify.min.js -# geist/dist/fonts/**/*-Variable.woff2 -> vendor/fonts/ +# @fontsource/*/files/*-latin-{400,500,700}-normal.woff2 -> vendor/fonts/ ``` Bump the `CACHE` constant in `sw.js` whenever an asset changes so clients pick it up. ## License -[MIT](LICENSE). Turndown, marked, DOMPurify and Geist are under their respective MIT/OFL licenses. +[MIT](LICENSE). Turndown, marked, DOMPurify, Space Grotesk and Space Mono are under their respective MIT/Apache/OFL licenses. + +## Support + +clip2md is free. If it saves you time: [buy me a coffee via PayPal](https://www.paypal.com/donate/?business=info%40tillheidrich.de¤cy_code=EUR&item_name=clip2md). diff --git a/datenschutz.html b/datenschutz.html index a261cec..0773c53 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -2,29 +2,29 @@ - + - + Datenschutzerklärung — clip2md - - + + -