feat(settings): a quiet Buy me a coffee link

A donate link belongs in Settings and nowhere in the way — so it sits last,
understated, below the device list. A plain anchor with an inline SVG cup:
no third-party script, no webfont, no tracking, so it works offline and
cannot phone home. Wording says the app is MIT with nothing held back and
that nothing changes if you don't pay.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
kristianwind
2026-08-27 14:49:24 +02:00
co-authored by Claude Opus 4.8
parent ff866cc514
commit 272c4918b0
3 changed files with 76 additions and 0 deletions
+4
View File
@@ -266,6 +266,10 @@ export const da = {
'Hvor du er logget ind. Genkender du ikke en af dem, så log den ud og skift adgangskode.',
'account.thisDevice': 'denne enhed',
'account.signOutDevice': 'Log ud',
'account.support': 'Støt projektet',
'account.supportHint':
'verdande er fri, open source-software under MIT-licensen — ingen betalt version, intet holdt tilbage. Sparede den dig en eftermiddag, kan du give vedligeholderen en kop kaffe. Helt frivilligt, og intet i appen ændrer sig.',
'account.buyCoffee': 'Buy me a coffee',
'account.totpEnabled': 'Slået til.',
'account.recoveryLeftOne': '{n} gendannelseskode tilbage.',
+4
View File
@@ -262,6 +262,10 @@ export const en = {
'Where you are signed in. If you do not recognise one, sign it out and change your password.',
'account.thisDevice': 'this device',
'account.signOutDevice': 'Sign out',
'account.support': 'Support the project',
'account.supportHint':
'verdande is free, open-source software under the MIT licence — no paid tier, nothing held back. If it saved you an afternoon, you can buy the maintainer a coffee. Entirely optional, and nothing in the app changes either way.',
'account.buyCoffee': 'Buy me a coffee',
'account.totpEnabled': 'On.',
'account.recoveryLeftOne': '{n} recovery code left.',
+68
View File
@@ -571,6 +571,42 @@
</ul>
</section>
<!-- Last, and quietly: a donate link belongs in Settings, never in the way of the
work. A plain anchor with an inline SVG — no third-party script, no webfont,
no tracking — so it works offline and cannot phone home. See the coffee-cup
snippet for why not their generated button. -->
<section class="panel">
<header>
<h2>{t('account.support')}</h2>
<p class="hint">{t('account.supportHint')}</p>
</header>
<a
class="bmc"
href="https://buymeacoffee.com/kristianwind"
target="_blank"
rel="noopener noreferrer"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
>
<path d="M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9Z" />
<path d="M17 10h1.5a2.5 2.5 0 0 1 0 5H17" />
<path d="M7.5 5.6c0-.9.8-1.1.8-2M11 5.6c0-.9.8-1.1.8-2M14.5 5.6c0-.9.8-1.1.8-2" />
</svg>
{t('account.buyCoffee')} ↗
</a>
</section>
<style>
.looks {
margin-top: var(--s4);
@@ -771,4 +807,36 @@
.uri {
overflow-wrap: anywhere;
}
/* The understated variant: present, not loud. Bordered and in the muted ink so
it reads as a footnote, brightening on hover. The cup is outline-only. */
.bmc {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s3);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
color: var(--ink-muted);
text-decoration: none;
font-size: var(--text-sm);
transition:
color var(--fast) var(--ease),
border-color var(--fast) var(--ease);
}
.bmc:hover {
color: var(--ink);
border-color: var(--ink-muted);
}
.bmc:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.bmc svg {
flex: none;
}
</style>