source: Klonkt/src/views/pages/admin-help.ejs@ 2fbced5

<div class="container admin-page hb">
  <p><a href="/admin" class="btn">&larr; <%= t('ahelp.back') %></a></p>
  <h1><%= t('ahelp.title') %></h1>
  <p class="hb-intro"><%= t('ahelp.intro') %></p>

  <div class="hb-search">
    <input type="search" id="hb-q" placeholder="<%= t('ahelp.search_placeholder') %>" autocomplete="off" aria-label="<%= t('ahelp.search_aria') %>">
  </div>
  <p class="hb-count" id="hb-count" aria-live="polite"></p>

  <div class="hb-list">

    <section class="hb-item">
      <h2>✍️ <%= t('ahelp.s_newpost_h') %></h2>
      <p><%- t('ahelp.s_newpost_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📝 <%= t('ahelp.s_excerpt_h') %></h2>
      <p><%- t('ahelp.s_excerpt_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📌 <%= t('ahelp.s_pin_h') %></h2>
      <p><%- t('ahelp.s_pin_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🗓️ <%= t('ahelp.s_schedule_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_schedule_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🖼️ <%= t('ahelp.s_images_h') %></h2>
      <p><%- t('ahelp.s_images_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🎵 <%= t('ahelp.s_audio_h') %></h2>
      <p><%- t('ahelp.s_audio_b') %></p>
    </section>

    <section class="hb-item">
      <h2>© <%= t('ahelp.s_credit_h') %></h2>
      <p><%- t('ahelp.s_credit_b') %></p>
    </section>

    <section class="hb-item">
      <h2>⬇ <%= t('ahelp.s_downloads_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_downloads_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📃 <%= t('ahelp.s_albums_h') %></h2>
      <p><%- t('ahelp.s_albums_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📅 <%= t('ahelp.s_agenda_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_agenda_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📰 <%= t('ahelp.s_presskit_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_presskit_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🔗 <%= t('ahelp.s_circles_h') %></h2>
      <p><%- t('ahelp.s_circles_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🌐 <%= t('ahelp.s_fedi_h') %></h2>
      <p><%- t('ahelp.s_fedi_b') %></p>
    </section>

    <section class="hb-item">
      <h2>📊 <%= t('ahelp.s_stats_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_stats_b') %></p>
    </section>

    <section class="hb-item">
      <h2>✉️ <%= t('ahelp.s_newsletter_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_newsletter_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🔗 <%= t('ahelp.s_linkbio_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_linkbio_b') %></p>
    </section>

    <section class="hb-item">
      <h2>▶️ <%= t('ahelp.s_embed_h') %> <small>(<%= t('ahelp.premium') %>)</small></h2>
      <p><%- t('ahelp.s_embed_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🎨 <%= t('ahelp.s_appearance_h') %></h2>
      <p><%- t('ahelp.s_appearance_b') %></p>
    </section>

    <section class="hb-item">
      <h2>👥 <%= t('ahelp.s_tenancy_h') %></h2>
      <p><%- t('ahelp.s_tenancy_b') %></p>
    </section>

    <section class="hb-item">
      <h2>⭐ <%= t('ahelp.s_premium_h') %></h2>
      <p><%- t('ahelp.s_premium_b') %></p>
    </section>


    <section class="hb-item">
      <h2>🔑 <%= t('ahelp.s_password_h') %></h2>
      <p><%- t('ahelp.s_password_b') %></p>
    </section>

    <section class="hb-item">
      <h2>🔄 <%= t('ahelp.s_updates_h') %></h2>
      <p><%- t('ahelp.s_updates_b') %></p>
    </section>

  </div>

  <p class="hb-empty" id="hb-empty" hidden><%= t('ahelp.empty') %></p>
</div>

<style>
  .hb { max-width: 760px; }
  .hb h1 { margin-bottom: .25rem; }
  .hb-intro { color: var(--ink-muted, var(--ink-soft)); margin: 0 0 1rem; }
  .hb-search input {
    width: 100%; box-sizing: border-box;
    padding: 0.7rem 0.9rem; font-size: 1rem;
    border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper); color: var(--ink);
    -webkit-appearance: none; appearance: none;
  }
  .hb-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
  .hb-count { color: var(--ink-muted, var(--ink-soft)); font-size: .82rem; margin: .5rem 0 1rem; min-height: 1em; }
  .hb-list { display: flex; flex-direction: column; gap: .75rem; }
  .hb-item { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; }
  .hb-item h2 { font-family: var(--font-display, serif); font-size: 1.15rem; margin: 0 0 .4rem; }
  .hb-item h2 small { font-weight: 400; font-size: .72rem; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem; vertical-align: middle; }
  .hb-item p { margin: 0; line-height: 1.55; color: var(--ink); }
  .hb-item code { background: var(--paper); padding: .08rem .35rem; border-radius: 4px; font-size: .88em; }
  .hb-item.hb-hidden { display: none; }
  .hb-item mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 2px; }
  .hb-empty { color: var(--ink-muted, var(--ink-soft)); padding: 1rem; text-align: center; }
</style>
<%# Het script van deze pagina staat in assets/js/mod/admin-help.js (shaer-bqr). %>