Grant
5a9ede9247
Pasting keysat.xyz into iMessage / Slack / Discord / X was falling back to just the <meta name=description> tag (which truncated mid- sentence and showed no image). Add proper og:* and twitter:* tags so the share card uses the hero copy + the existing 1024×1024 keysat-thumbnail.png as the social image. Same treatment on support.html with its own title/description. Also update the homepage meta description to match the hero copy verbatim so the on-page lede and the share-card description tell the same story.
198 lines
8.1 KiB
HTML
198 lines
8.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Support Keysat development</title>
|
|
<meta name="description" content="Support Keysat development. Lightning, on-chain, or buy a Patron license.">
|
|
|
|
<!-- Social sharing (Open Graph + Twitter Card). -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Keysat">
|
|
<meta property="og:title" content="Support Keysat development">
|
|
<meta property="og:description" content="Fund Keysat development directly: Lightning, on-chain Bitcoin, a Patron license, or via OpenSats. Pick whichever fits.">
|
|
<meta property="og:url" content="https://keysat.xyz/support.html">
|
|
<meta property="og:image" content="https://keysat.xyz/assets/keysat-thumbnail.png">
|
|
<meta property="og:image:width" content="1024">
|
|
<meta property="og:image:height" content="1024">
|
|
<meta property="og:image:alt" content="Keysat">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Support Keysat development">
|
|
<meta name="twitter:description" content="Fund Keysat development directly: Lightning, on-chain Bitcoin, a Patron license, or via OpenSats.">
|
|
<meta name="twitter:image" content="https://keysat.xyz/assets/keysat-thumbnail.png">
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--navy-950:#0E1F33; --navy-900:#142A47; --navy-800:#1E3A5F;
|
|
--cream-50:#FBF9F2; --cream-100:#F5F1E8; --cream-200:#EDE7D7;
|
|
--gold-700:#8A6F3D; --gold-500:#BFA068; --gold-400:#D4B985;
|
|
--ink-900:#0E1F33; --ink-700:#2C3E54; --ink-500:#5A6B7F;
|
|
--border-1:rgba(14,31,51,0.12); --border-2:rgba(14,31,51,0.20);
|
|
--font-display:'Manrope','Helvetica Neue',Arial,sans-serif;
|
|
--font-body:'Inter','Helvetica Neue',Arial,sans-serif;
|
|
--font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
|
|
}
|
|
*{box-sizing:border-box} html,body{margin:0;padding:0}
|
|
body{
|
|
font-family:var(--font-body); color:var(--ink-900);
|
|
background:var(--cream-100);
|
|
background-image:
|
|
radial-gradient(rgba(14,31,51,0.025) 1px, transparent 1px),
|
|
radial-gradient(rgba(138,111,61,0.022) 1px, transparent 1px);
|
|
background-size:3px 3px, 7px 7px;
|
|
-webkit-font-smoothing:antialiased;
|
|
min-height:100vh;
|
|
}
|
|
.wrap{max-width:760px; margin:0 auto; padding:64px 32px;}
|
|
header.topnav{
|
|
background:rgba(245,241,232,0.85); backdrop-filter:blur(12px);
|
|
border-bottom:1px solid var(--border-1);
|
|
padding:16px 0;
|
|
}
|
|
header.topnav .inner{
|
|
max-width:760px; margin:0 auto; padding:0 32px;
|
|
display:flex; align-items:center; gap:16px;
|
|
}
|
|
header.topnav .brand{
|
|
display:flex; align-items:center; gap:10px;
|
|
font-family:var(--font-display); font-weight:500;
|
|
font-size:14px; letter-spacing:0.30em; text-transform:uppercase;
|
|
color:var(--navy-900); text-decoration:none;
|
|
}
|
|
header.topnav .brand img{width:28px; height:28px}
|
|
header.topnav nav{margin-left:auto; display:flex; gap:24px; font-size:13.5px}
|
|
header.topnav nav a{color:var(--ink-700); text-decoration:none}
|
|
header.topnav nav a:hover{color:var(--navy-900)}
|
|
.eyebrow{
|
|
font-size:11.5px; font-weight:700; letter-spacing:0.18em;
|
|
text-transform:uppercase; color:var(--gold-700); margin-bottom:14px;
|
|
display:inline-flex; align-items:center; gap:10px;
|
|
}
|
|
.eyebrow::before{content:''; display:inline-block; width:28px; height:1px; background:var(--gold-500);}
|
|
h1{
|
|
font-family:var(--font-display); font-weight:500; font-size:48px;
|
|
line-height:1.05; letter-spacing:-0.022em; color:var(--navy-950);
|
|
margin:0 0 14px;
|
|
}
|
|
.lead{
|
|
font-size:18px; line-height:1.55; color:var(--ink-700);
|
|
margin:0 0 36px; max-width:580px;
|
|
}
|
|
h2{
|
|
font-family:var(--font-display); font-weight:700; font-size:22px;
|
|
letter-spacing:-0.015em; color:var(--navy-950);
|
|
margin:36px 0 12px;
|
|
}
|
|
p{font-size:15px; line-height:1.6; color:var(--ink-700); margin:0 0 14px;}
|
|
.card{
|
|
background:var(--cream-50); border:1px solid var(--border-1);
|
|
border-radius:12px; padding:24px 28px;
|
|
margin-bottom:14px;
|
|
}
|
|
.card.featured{box-shadow:0 0 0 1px var(--gold-500) inset;}
|
|
.card .label{
|
|
font-size:11px; font-weight:700; letter-spacing:0.14em;
|
|
text-transform:uppercase; color:var(--ink-500); margin-bottom:10px;
|
|
}
|
|
.card h3{
|
|
font-family:var(--font-display); font-weight:700; font-size:16px;
|
|
margin:0 0 8px; letter-spacing:-0.01em; color:var(--navy-950);
|
|
}
|
|
.card .addr{
|
|
font-family:var(--font-mono); font-size:13px;
|
|
background:var(--navy-950); color:var(--cream-50);
|
|
padding:12px 14px; border-radius:8px;
|
|
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
|
margin-top:12px; word-break:break-all;
|
|
}
|
|
.card .addr button{
|
|
background:rgba(245,241,232,0.10); color:var(--cream-50);
|
|
border:0; padding:6px 10px; border-radius:6px;
|
|
font-family:var(--font-body); font-size:11.5px; cursor:pointer;
|
|
flex-shrink:0;
|
|
}
|
|
.card .addr button:hover{background:rgba(245,241,232,0.20)}
|
|
.card p:last-child{margin-bottom:0}
|
|
.placeholder-warn{
|
|
background:var(--warning-bg, #F7EFD7); border:1px solid rgba(184,134,31,0.3);
|
|
color:#7a5814; padding:12px 16px; border-radius:8px;
|
|
font-size:13.5px; margin-bottom:24px;
|
|
}
|
|
a.btn{
|
|
display:inline-block; background:var(--navy-800); color:var(--cream-50);
|
|
padding:11px 18px; border-radius:8px; font-weight:600;
|
|
text-decoration:none; font-size:14px;
|
|
}
|
|
a.btn:hover{background:var(--navy-900)}
|
|
footer{
|
|
border-top:1px solid var(--border-1); margin-top:64px;
|
|
padding:24px 32px; text-align:center;
|
|
font-size:12.5px; color:var(--ink-500);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topnav">
|
|
<div class="inner">
|
|
<a href="index.html" class="brand"><img src="assets/keysat-mark.svg" alt=""><span>Keysat</span></a>
|
|
<nav>
|
|
<a href="index.html">Home</a>
|
|
<a href="https://docs.keysat.xyz">Docs</a>
|
|
<a href="https://github.com/keysat-xyz">GitHub</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wrap">
|
|
<div class="eyebrow">Support development</div>
|
|
<h1>If Keysat is making you money,<br>send a few sats back.</h1>
|
|
<p class="lead">Keysat is source-available and free to run. There’s no SaaS dial-home, no auto-deducted percentage of your sales. If the project is useful to you, here are three ways to fund continued development.</p>
|
|
|
|
<h2>1. Buy a Patron license</h2>
|
|
<div class="card featured">
|
|
<div class="label">Recommended</div>
|
|
<h3>Patron tier on registry.keysat.xyz</h3>
|
|
<p>Same Keysat binary as the standard license, just priced higher. The admin UI shows a "Patron" badge in your dashboard. The cleanest way to support development. Same purchase flow you’re already familiar with from buying any other Keysat license.</p>
|
|
<p style="margin-top:14px"><a class="btn" href="https://registry.keysat.xyz">Visit the marketplace →</a></p>
|
|
</div>
|
|
|
|
<h2>2. Lightning</h2>
|
|
<div class="card">
|
|
<div class="label">Fast, no-strings tip</div>
|
|
<h3>Lightning Address</h3>
|
|
<p>Tip any amount over Lightning. Hosted on Primal. Works in any Lightning wallet that supports LN addresses.</p>
|
|
<div class="addr">
|
|
<span id="ln-addr">keysat@primal.net</span>
|
|
<button data-copy="keysat@primal.net">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>3. OpenSats</h2>
|
|
<div class="card">
|
|
<div class="label">Fund Bitcoin FOSS broadly</div>
|
|
<h3>OpenSats</h3>
|
|
<p>If you’d rather fund Bitcoin software development broadly rather than this project specifically, <a href="https://opensats.org" style="color:var(--navy-800); font-weight:500">OpenSats</a> is a 501(c)(3) that grants to dozens of FOSS Bitcoin projects, including BTCPay, which Keysat depends on.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
Keysat · software licensing for Bitcoin creators · <a href="index.html" style="color:var(--ink-500)">keysat.xyz</a>
|
|
</footer>
|
|
|
|
<script>
|
|
document.querySelectorAll('button[data-copy]').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(btn.dataset.copy);
|
|
const original = btn.textContent;
|
|
btn.textContent = 'Copied';
|
|
setTimeout(() => { btn.textContent = original; }, 1400);
|
|
} catch (e) {}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|