[object Object]

← back to Wallco Ai

designs: NEW badge on cards created in last 72h

96a4bc0f99345c65af46e53284f9616532dd44c6 · 2026-05-13 11:17:22 -0700 · Steve

Top-right gold pill (NEW), thin gold halo around the card itself. Reads
d.created_at from the snapshot, threshold = 72h so a generation batch
stays visually fresh through a full weekend.

Steve was eyeballing the grid and couldn't tell which were the new
butterfly+trellis batch vs the back-catalog — this fixes that without
needing to sort or filter.

Files touched

Diff

commit 96a4bc0f99345c65af46e53284f9616532dd44c6
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed May 13 11:17:22 2026 -0700

    designs: NEW badge on cards created in last 72h
    
    Top-right gold pill (NEW), thin gold halo around the card itself. Reads
    d.created_at from the snapshot, threshold = 72h so a generation batch
    stays visually fresh through a full weekend.
    
    Steve was eyeballing the grid and couldn't tell which were the new
    butterfly+trellis batch vs the back-catalog — this fixes that without
    needing to sort or filter.
---
 server.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 0cc7fe1..25127d9 100644
--- a/server.js
+++ b/server.js
@@ -3071,9 +3071,16 @@ app.get('/designs', (req, res) => {
       const roomOverlay = roomKey
         ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true"><span class="card-room-badge">${badgeText}</span>`
         : '';
+      // NEW badge — fires for any design created within the last 72 hours so freshly-
+      // generated batches visually stand out from the back-catalog. Top-right corner,
+      // sits above the favorite heart (which is top-left).
+      const createdMs = Date.parse(d.created_at || '') || 0;
+      const isNew = createdMs && (Date.now() - createdMs < 72 * 3600 * 1000);
+      const newBadge = isNew ? `<span class="card-new-badge" aria-label="Newly added">NEW</span>` : '';
       return `
-    <a href="/design/${d.id}" class="design-card${roomKey ? ' has-room' : ''}" aria-label="${cardAriaLabel(d)}" data-design-id="${d.id}">
+    <a href="/design/${d.id}" class="design-card${roomKey ? ' has-room' : ''}${isNew ? ' is-new' : ''}" aria-label="${cardAriaLabel(d)}" data-design-id="${d.id}">
       <button type="button" class="fav-btn" data-fav-id="${d.id}" aria-pressed="false" aria-label="Save ${d.title} to favorites" title="Favorite"><span class="fav-icon"></span></button>
+      ${newBadge}
       <div class="card-img" style="background-image:url('${d.image_url}')" role="img" aria-label="${d.title} pattern thumbnail">${roomOverlay}</div>
       <div class="card-meta">
         <span class="card-title">${d.title}</span>
@@ -3379,6 +3386,9 @@ ${cat === 'mural-scenic' ? `
       .fav-btn.is-fav { background:rgba(201,71,71,.92);color:#fff }
       .fav-btn[aria-pressed="true"] .fav-icon::before { content:"♥" }
       .fav-btn[aria-pressed="false"] .fav-icon::before { content:"♡" }
+      /* NEW badge — top-right corner, brand-gold pill on dark background */
+      .card-new-badge { position:absolute;top:10px;right:10px;z-index:5;padding:4px 10px;border-radius:999px;background:var(--accent,#c9a14b);color:var(--bg,#fff);font:600 10px/1 var(--sans,system-ui);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.25) }
+      .design-card.is-new { box-shadow:0 0 0 1px var(--accent,#c9a14b),0 6px 22px rgba(201,161,75,.18) }
     </style>
 
     <p class="result-count">${total} design${total===1?'':'s'}${cat?' in '+cat:''}${motifQ?' with '+motifQ:''}${roomQ?' with room preview':''}${q?' matching "'+q+'"':''}<span id="fav-count-extra" style="margin-left:8px;color:var(--ink-faint)"></span></p>

← 9cf27ca hot-or-not: filter broken images, always 6 thumbs, NOT modal  ·  back to Wallco Ai  ·  drunk-animals: drop overnight gate, fire 24/7 like stoned 7e452f1 →