Changeset 63edb0d in Klonkt for src/views

Timestamp:

06/16/2026 01:08:28 AM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

0b7ebbf

Parents:

af5407f

Message:

hub: hero image upload + dark overlay slider

Reconcile of live edits on /srv that were not yet in git (split-brain).

• admin-settings: multer upload (jpg/png/webp/gif, 5MB, SVG blocked against XSS) + overlay clamp
• hub.js / hub-home.ejs: dark overlay as CSS var (default 45%, non-breaking)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src/views/pages

Files:

• admin-settings.ejs (modified) (2 diffs)
• hub-home.ejs (modified) (2 diffs)

src/views/pages/admin-settings.ejs

@@ -38 +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>
@@ -55 +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>

src/views/pages/hub-home.ejs

@@ -17 +17 @@
 
   <%# ── HERO (label) — de pagina begint hier, geen header erboven ────── %>
-  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>')"<% } %>>
+  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>'); --hero-ov:<%= ((hub.heroOverlay == null ? 45 : hub.heroOverlay)/100).toFixed(2) %>"<% } %>>
     <div class="hub-hero-inner container">
       <h1 class="hub-hero-title"><%= hub.title %></h1>
@@ -128 +128 @@
 .hub-hero.has-img {
   background:
-    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%),
+    linear-gradient(rgba(0,0,0,var(--hero-ov,.45)), rgba(0,0,0,var(--hero-ov,.45))),
     var(--hero-img) center / cover no-repeat;
   border-bottom: 0;