Changeset 9019a3e in Klonkt for src/views/pages/paid-gate.ejs

Timestamp:

07/21/2026 02:42:30 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

c7a211d

Parents:

c3d12a6

git-author:

Robin <roboburr@…> (07/21/2026 02:42:27 AM)

git-committer:

Robin <roboburr@…> (07/21/2026 02:42:30 AM)

Message:

Feature: prominent "Word supporter" button on the paid gate

The gate only had a small "word het op Patreon" text line, easy to miss,
so a new visitor didn't see paying as the first step. When the owner has
set the public Patreon page, the gate now shows two clear buttons: "Word
supporter op Patreon" (primary) and "Al supporter? Ontgrendelen" (ghost,
for those who already pledge). Without a Patreon page set it falls back to
a single "Ontgrendelen met Patreon" button.

Changed files:
src/views/pages/paid-gate.ejs

• two-button actions block + .pg-actions/.pg-btn-ghost styles; anchors styled as buttons (display/text-align/text-decoration)

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/views/pages/paid-gate.ejs (modified) (2 diffs)

src/views/pages/paid-gate.ejs

@@ -10 +10 @@
   <% } %>
 
+  <% var _hasPatron = (typeof pgPatronUrl !== 'undefined' && pgPatronUrl); %>
   <section class="pg-card">
     <div class="pg-lock">💶</div>
     <h2 class="pg-h2">Voor supporters</h2>
     <p class="pg-sub">
-      Deze post is voor supporters van deze site. Steun je de maker op Patreon
-      <% if (typeof pgCents !== 'undefined' && pgCents) { %>(vanaf &euro;<%= (pgCents/100).toFixed(2) %>)<% } %>,
-      dan ontgrendel je 'm met je passkey. Geen account, geen cookie.
+      Deze post is voor supporters van deze site
+      <% if (typeof pgCents !== 'undefined' && pgCents) { %>(vanaf &euro;<%= (pgCents/100).toFixed(2) %> per maand op Patreon)<% } %>.
+      Word supporter en ontgrendel 'm daarna met een passkey. Geen account op deze site, geen cookie.
     </p>
-    <button type="button" id="pg-unlock" class="pg-btn">Ontgrendelen</button>
+
+    <div class="pg-actions">
+      <% if (_hasPatron) { %>
+        <a class="pg-btn" href="<%= pgPatronUrl %>" target="_blank" rel="noopener">Word supporter op Patreon</a>
+        <button type="button" id="pg-unlock" class="pg-btn pg-btn-ghost">Al supporter? Ontgrendelen</button>
+      <% } else { %>
+        <button type="button" id="pg-unlock" class="pg-btn">Ontgrendelen met Patreon</button>
+      <% } %>
+    </div>
     <p id="pg-status" class="pg-status" hidden></p>
-    <% if (typeof pgPatronUrl !== 'undefined' && pgPatronUrl) { %>
-      <p class="pg-join">Nog geen supporter? <a href="<%= pgPatronUrl %>" target="_blank" rel="noopener">Word het op Patreon</a> en ontgrendel daarna met je passkey.</p>
-    <% } %>
   </section>
 </article>
@@ -86 +92 @@
   .pg-h2 { font-size: 22px; margin: 0 0 8px; }
   .pg-sub { opacity: .85; line-height: 1.6; margin: 0 auto 12px; max-width: 34em; }
-  .pg-btn { padding: 12px 24px; border: none; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
+  .pg-btn { display: inline-block; text-align: center; text-decoration: none; padding: 12px 24px; border: none; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
     background: var(--accent, #6b8f71); color: #fff; }
   .pg-btn:disabled { opacity: .6; cursor: default; }
+  .pg-btn:hover { filter: brightness(1.05); }
+  .pg-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 320px; margin: 0 auto; }
+  .pg-btn-ghost { background: transparent; color: var(--ink, #222); border: 1px solid color-mix(in srgb, var(--ink, #000) 22%, transparent); }
   .pg-status { margin: 12px 0 0; opacity: .9; }
   .pg-status.is-err { color: #c0392b; }
-  .pg-join { margin: 14px 0 0; font-size: .92rem; opacity: .8; }
 </style>