source: Klonkt/src/views/pages/fan-gate.ejs

<div class="container fg-navwrap">
  <%# Same post navigation (Newer/Older) as on a regular post, so a visitor
      on the fan gate can still browse rather than getting stuck. Same
      dimensions as .post-page (720px / padding 0 1rem) for pixel-perfect alignment. %>
  <%- include('../partials/post-nav', { newerPost: (typeof newerPost !== 'undefined' ? newerPost : null), olderPost: (typeof olderPost !== 'undefined' ? olderPost : null) }) %>
</div>

<section class="fg">
  <div class="fg-card">
    <div class="fg-lock">🔒</div>
    <h1 class="fg-h1"><%= t('fgate.title') %></h1>
    <% if (typeof fgTitle !== 'undefined' && fgTitle) { %><p class="fg-which">"<%= fgTitle %>"</p><% } %>
    <p class="fg-sub"><%= t('fgate.sub') %></p>

    <%# De hoofdweg: bewijs bij je EIGEN server wie je bent (OpenWebAuth,
        FEP-61cf). Dit is de vraag die fan_only altijd al stelde -- volg je deze
        site? -- in plaats van "heb je hier een account", wat juist de mensen
        buitensloot voor wie de poort openstond. Geen account hier, geen
        wachtwoord hier, geen cookie van een derde. %>
    <form class="fg-owa" method="post" action="/owa/login">
      <input type="hidden" name="next" value="<%= fgNext || '/' %>">
      <label class="fg-label" for="fg-handle"><%= t('fgate.owa_label') %></label>
      <div class="fg-row">
        <input class="fg-input" id="fg-handle" name="handle" type="text" inputmode="email"
               autocomplete="username" spellcheck="false" placeholder="@jij@jouwserver.nl" required>
        <button class="fg-btn" type="submit"><%= t('fgate.owa_go') %></button>
      </div>
      <p class="fg-hint"><%= t('fgate.owa_hint') %></p>
      <% if (typeof owaError !== 'undefined' && owaError) { %>
        <p class="fg-error"><%= t('fgate.owa_failed') %></p>
      <% } %>
    </form>

    <%# De lokale inlog blijft, maar als tweede: die is voor wie hier echt een
        account heeft, en dat is de uitzondering. %>
    <p class="fg-alt"><a href="/auth/login?next=<%= encodeURIComponent(fgNext || '/') %>"><%= t('fgate.login') %></a></p>
  </div>
</section>

<style>
  /* EXACT same class combination (.container + override) and values as
     .post-page in post.ejs, so the post-nav aligns identically in the cascade. */
  .fg-navwrap { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
  .fg { max-width: 480px; margin: 0 auto; padding: 56px 18px; text-align: center; }
  .fg-card { border: 1px solid rgba(128,128,128,.2); border-radius: 18px; padding: 36px 28px; }
  .fg-lock { font-size: 40px; margin-bottom: 8px; }
  .fg-h1 { font-size: 26px; margin: 0 0 6px; }
  .fg-which { font-style: italic; opacity: .8; margin: 0 0 12px; }
  .fg-sub { opacity: .85; line-height: 1.6; margin: 0 0 20px; }
  .fg-btn { display: inline-block; padding: 12px 22px; border-radius: 10px; background: var(--accent,#6b8f71); color: #fff; text-decoration: none; font-weight: 600; border: 0; font-family: inherit; font-size: 1rem; cursor: pointer; }
  .fg-owa { margin: 0 0 18px; text-align: left; }
  .fg-label { display: block; font-size: .85rem; opacity: .8; margin-bottom: 6px; }
  .fg-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .fg-input { flex: 1 1 12rem; min-width: 0; padding: 12px 14px; border-radius: 10px;
              border: 1px solid rgba(128,128,128,.35); background: transparent; color: inherit;
              font-family: inherit; font-size: 1rem; }
  .fg-hint { font-size: .8rem; opacity: .65; margin: 8px 0 0; line-height: 1.5; }
  .fg-error { font-size: .85rem; margin: 8px 0 0; color: #d66; }
  .fg-alt { margin: 0; font-size: .85rem; opacity: .7; }
</style>