asseeninmovies: /spotted gallery — 4-tile stats strip (placements/films/brands/categories) with responsive @media; mirrors /spotted/queue header pattern

17d9d2da3f0c86ac579617ad30d352216b4604a7 · 2026-05-12 17:04:33 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 17d9d2da3f0c86ac579617ad30d352216b4604a7
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 17:04:33 2026 -0700

    asseeninmovies: /spotted gallery — 4-tile stats strip (placements/films/brands/categories) with responsive @media; mirrors /spotted/queue header pattern
---
 server.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/server.js b/server.js
index 317250c..c50f16e 100644
--- a/server.js
+++ b/server.js
@@ -268,6 +268,13 @@ app.get('/spotted', async (req, res) => {
     const total = parseInt(totalR.rows[0].n, 10);
     const totalPages = Math.max(1, Math.ceil(total / limit));
     const catsR = await pool.query(`SELECT product_category, count(*) AS n FROM asim_spotted WHERE verified_at IS NOT NULL AND (verified_by IS NULL OR verified_by NOT LIKE 'rejected%') AND product_category IS NOT NULL GROUP BY 1 ORDER BY 2 DESC`);
+    const statsR = await pool.query(`
+      SELECT
+        (SELECT count(*) FROM asim_spotted WHERE verified_at IS NOT NULL AND (verified_by IS NULL OR verified_by NOT LIKE 'rejected%')) AS placements,
+        (SELECT count(DISTINCT movie_id) FROM asim_spotted WHERE verified_at IS NOT NULL AND (verified_by IS NULL OR verified_by NOT LIKE 'rejected%')) AS movies,
+        (SELECT count(DISTINCT NULLIF(TRIM(brand),'')) FROM asim_spotted WHERE verified_at IS NOT NULL AND (verified_by IS NULL OR verified_by NOT LIKE 'rejected%')) AS brands,
+        (SELECT count(DISTINCT product_category) FROM asim_spotted WHERE verified_at IS NOT NULL AND (verified_by IS NULL OR verified_by NOT LIKE 'rejected%') AND product_category IS NOT NULL) AS categories`);
+    const gs = statsR.rows[0] || {};
     const qs = (overrides = {}) => {
       const u = new URLSearchParams();
       if (cat) u.set('category', cat);
@@ -324,9 +331,20 @@ app.get('/spotted', async (req, res) => {
         .submit-banner a{padding:7px 18px;background:var(--gold);color:#1a1410;border-radius:5px;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;font-weight:600}
         .submit-banner a:hover{filter:brightness(1.1)}
         .pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:32px 0}
+        .sp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 22px}
+        .sp-stats .stat{padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:2px}
+        .sp-stats .num{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--gold);line-height:1.0}
+        .sp-stats .lbl{font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint)}
+        @media (max-width:560px){.sp-stats{grid-template-columns:repeat(2,1fr)}}
       </style>
       <h1 class="title">SPOTTED</h1>
       <p class="meta-line">${total.toLocaleString()} verified product placements — set decor, wallcoverings, lighting, props.</p>
+      <div class="sp-stats">
+        <div class="stat"><span class="num">${Number(gs.placements||0).toLocaleString()}</span><span class="lbl">placements</span></div>
+        <div class="stat"><span class="num">${Number(gs.movies||0).toLocaleString()}</span><span class="lbl">films</span></div>
+        <div class="stat"><span class="num">${Number(gs.brands||0).toLocaleString()}</span><span class="lbl">brands</span></div>
+        <div class="stat"><span class="num">${Number(gs.categories||0).toLocaleString()}</span><span class="lbl">categories</span></div>
+      </div>
 
       <div class="submit-banner">
         <span>Saw something on screen that we don't have yet?</span>

← 3d60e9b asseeninmovies: /spotted/queue stats header (4-tile strip — · back to AsSeenInMovies · asseeninmovies: home page perf — parallelize 4 queries via P 25508fb →