source: Klonkt/src/views/pages/admin-updates.ejs@ face47a

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

  <% if (success) { %><div class="alert alert-success"><%= success %></div><% } %>
  <% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>

  <section class="set-card">
    <h2><%= t('aupd.version_heading') %></h2>

    <div class="upd-row">
      <span class="upd-label"><%= t('aupd.app_version') %></span>
      <span class="upd-val"><%= appVersion || '—' %></span>
    </div>
    <div class="upd-row">
      <span class="upd-label"><%= t('aupd.current') %></span>
      <span class="upd-val">
        <% if (currentSha) { %><code><%= currentSha %></code> <span class="upd-desc"><%= currentDesc %></span>
        <% } else { %><em><%= t('aupd.current_unknown') %></em><% } %>
      </span>
    </div>
    <div class="upd-row">
      <span class="upd-label"><%= t('aupd.latest') %></span>
      <span class="upd-val">
        <% if (latestSha) { %><code><%= latestSha %></code> <span class="upd-desc"><%= latestDesc %></span>
        <% } else { %><em><%= t('aupd.latest_failed') %></em><% } %>
      </span>
    </div>

    <div class="upd-status">
      <% if (!canCheck) { %>
        <span class="upd-badge warn">&#9888; <%= t('aupd.no_source') %></span>
      <% } else if (upToDate) { %>
        <span class="upd-badge ok">&#10003; <%= t('aupd.uptodate') %></span>
      <% } else { %>
        <span class="upd-badge new">&#8635; <%= t('aupd.update_available') %><% if (behind) { %> (<%= behind === '1' ? t('aupd.behind_one', { n: behind }) : t('aupd.behind_many', { n: behind }) %>)<% } %></span>
      <% } %>
    </div>

    <% if (canCheck) { %>
    <form method="post" action="/admin/updates/run" class="set-form"
          onsubmit="return confirm('<%= t('aupd.run_confirm') %>');">
      <button type="submit" class="btn btn-primary">
        <%= upToDate ? '↻ ' + t('aupd.redeploy') : '⬆ ' + t('aupd.update_now') %>
      </button>
    </form>
    <% } %>

    <p class="set-help" style="margin-top:1rem">
      <%= t('aupd.help') %>
    </p>
  </section>
</div>

<style>
.admin-page { max-width: 700px; margin: 3rem auto; padding: 0 1rem; }
.admin-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 .25rem; }
.set-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; }
.set-card h2 { font-family: var(--font-display, serif); font-size: 1.25rem; margin: 0 0 1rem; }
.set-help { color: var(--ink-muted); font-size: .9rem; }
.upd-row { display: flex; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.upd-label { width: 90px; flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.upd-val { font-size: .9rem; }
.upd-val code { background: var(--paper); padding: .1rem .4rem; border-radius: 4px; font-size: .85em; }
.upd-desc { color: var(--ink-muted); }
.upd-status { margin: 1.1rem 0; }
.upd-badge { font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 20px; }
.upd-badge.ok { background: #d1fae5; color: #065f46; }
.upd-badge.new { background: #fef3c7; color: #92400e; }
.upd-badge.warn { background: #fee2e2; color: #991b1b; }
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
</style>