Changes in src/views/pages/admin-settings.ejs [0091cb7:63edb0d] in Klonkt

File:

• src/views/pages/admin-settings.ejs (modified) (3 diffs)

src/views/pages/admin-settings.ejs

@@ -27 +27 @@
         </span>
       </label>
-      <label class="set-opt">
-        <input type="radio" name="tenancy" value="circle" <%= tenancy === 'circle' ? 'checked' : '' %>>
-        <span>
-          <strong>Cirkels</strong> &mdash; solo + federatie.
-          <small>E&eacute;n eigen site die de publieke posts van andere Klonkt-sites toont. Asymmetrisch: jij bepaalt wie in jouw cirkel zit.</small>
-        </span>
-      </label>
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>
@@ -45 +38 @@
       Hier stel je de naam en intro in. Jouw eigen Klonkt Hub blijft los bestaan onder <code>/user/</code>.
     </p>
-    <form method="post" action="/admin/settings" class="set-form">
+    <form method="post" action="/admin/settings" class="set-form" enctype="multipart/form-data">
       <label class="set-field">
         <span>Naam</span>
@@ -62 +55 @@
         <input type="text" name="hub_hero_image" maxlength="300" value="<%= hubHeroImage %>" placeholder="/media/... of https://...">
       </label>
+      <label class="set-field">
+        <span>…of upload een afbeelding <small style="font-weight:400;color:var(--ink-muted)">— jpg/png/webp/gif, max 5 MB; vervangt de URL hierboven</small></span>
+        <input type="file" name="hub_hero_file" accept="image/png,image/jpeg,image/webp,image/gif">
+      </label>
+      <label class="set-field">
+        <span>Donkere overlay <small style="font-weight:400;color:var(--ink-muted)">— maakt de hero donkerder zodat de tekst leesbaar blijft</small></span>
+        <span style="display:flex;align-items:center;gap:0.75rem">
+          <input type="range" name="hub_hero_overlay" min="0" max="100" step="5" value="<%= hubHeroOverlay %>" style="flex:1"
+            oninput="this.parentNode.querySelector('.ov-val').textContent=this.value+'%';var o=document.getElementById('hero-ov-preview');if(o)o.style.opacity=this.value/100">
+          <span class="ov-val" style="min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums"><%= hubHeroOverlay %>%</span>
+        </span>
+      </label>
+      <% if (hubHeroImage) { %>
+      <div class="set-field">
+        <span style="font-weight:400;color:var(--ink-muted);font-size:0.9rem">Voorbeeld (met overlay):</span>
+        <div style="position:relative;display:inline-block;margin-top:0.4rem;max-width:100%">
+          <img src="<%= hubHeroImage %>" alt="Hero-voorbeeld" style="display:block;max-width:100%;max-height:160px;border-radius:8px;border:1px solid var(--rule)">
+          <div id="hero-ov-preview" style="position:absolute;inset:0;background:#000;opacity:<%= (hubHeroOverlay/100).toFixed(2) %>;border-radius:8px;pointer-events:none"></div>
+        </div>
+      </div>
+      <% } %>
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>
-  </section>
-  <% } %>
-
-  <% if (tenancy === 'circle') { %>
-  <section class="set-card" style="margin-top:1rem">
-    <h2>Cirkel</h2>
-    <p class="set-help">
-      Beheer welke andere Klonkt-sites je in je cirkel toont, en of jouw site in
-      cirkels van anderen mag verschijnen.
-    </p>
-    <p><a href="/admin/circle" class="btn btn-primary">Beheer je cirkel &rarr;</a></p>
   </section>
   <% } %>