← back to Dw Marketing Reels
add public /showcase brand-films gallery page (all 6 promo cuts)
42687b86189efc00b9292f22490f793229498996 · 2026-07-17 10:26:14 -0700 · Steve Abrams
Files touched
A public/showcase.htmlM server.js
Diff
commit 42687b86189efc00b9292f22490f793229498996
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Jul 17 10:26:14 2026 -0700
add public /showcase brand-films gallery page (all 6 promo cuts)
---
public/showcase.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++
server.js | 3 +-
2 files changed, 87 insertions(+), 1 deletion(-)
diff --git a/public/showcase.html b/public/showcase.html
new file mode 100644
index 0000000..229d37d
--- /dev/null
+++ b/public/showcase.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Designer Wallcoverings — Brand Films</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+<style>
+ :root{ --ink:#111; --body:#444; --canvas:#fff; --gold:#b08212; --line:#e7e2d8; }
+ *{ box-sizing:border-box; margin:0; padding:0; }
+ body{ font-family:'Lora',Georgia,serif; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; }
+ header{ text-align:center; padding:64px 24px 40px; border-bottom:1px solid var(--line); }
+ .kicker{ text-transform:uppercase; letter-spacing:4px; font-size:13px; color:var(--gold); margin-bottom:18px; }
+ h1{ font-weight:400; color:var(--ink); font-size:clamp(28px,5vw,46px); line-height:1.15; letter-spacing:.5px; }
+ .sub{ margin-top:14px; font-size:clamp(15px,2.2vw,18px); font-style:italic; color:var(--body); }
+ .wrap{ max-width:1180px; margin:0 auto; padding:48px 24px 24px; }
+ .section-label{ text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold); margin:36px 0 20px; padding-bottom:10px; border-bottom:1px solid var(--line); }
+ .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; align-items:end; }
+ .card{ display:flex; flex-direction:column; }
+ .card video{ width:100%; border-radius:6px; background:#faf8f4; display:block; box-shadow:0 1px 0 var(--line); }
+ .card .meta{ margin-top:12px; }
+ .card .name{ color:var(--ink); font-size:16px; }
+ .card .place{ text-transform:uppercase; letter-spacing:2px; font-size:11px; color:var(--gold); margin-top:4px; }
+ footer{ text-align:center; padding:56px 24px 72px; border-top:1px solid var(--line); margin-top:48px; }
+ footer .mark{ text-transform:uppercase; letter-spacing:5px; color:var(--ink); font-size:15px; }
+ footer a{ color:var(--gold); text-decoration:none; letter-spacing:1px; font-size:14px; display:inline-block; margin-top:10px; }
+ .rule{ width:44px; height:1px; background:var(--gold); margin:18px auto 0; }
+</style>
+</head>
+<body>
+ <header>
+ <div class="kicker">Designer Wallcoverings</div>
+ <h1>Brand Films</h1>
+ <div class="sub">Walls that make an entrance — the collections, in motion.</div>
+ <div class="rule"></div>
+ </header>
+
+ <div class="wrap">
+ <div class="section-label">The Film · 32 seconds</div>
+ <div class="grid">
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata" style="max-width:360px;margin:0 auto">
+ <source src="/reels/dw-brand-promo-vertical-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Vertical</div><div class="place">Reels · Stories · Phone</div></div>
+ </div>
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata" style="max-width:460px;margin:0 auto">
+ <source src="/reels/dw-brand-promo-square-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Square</div><div class="place">Instagram Feed</div></div>
+ </div>
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata">
+ <source src="/reels/dw-brand-promo-wide-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Wide · 16:9</div><div class="place">Website · YouTube</div></div>
+ </div>
+ </div>
+
+ <div class="section-label">The Short · 15 seconds</div>
+ <div class="grid">
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata" style="max-width:360px;margin:0 auto">
+ <source src="/reels/dw-brand-promo-short-vertical-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Vertical</div><div class="place">Reels · TikTok · Shorts</div></div>
+ </div>
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata" style="max-width:460px;margin:0 auto">
+ <source src="/reels/dw-brand-promo-short-square-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Square</div><div class="place">Instagram Feed</div></div>
+ </div>
+ <div class="card">
+ <video controls muted loop playsinline preload="metadata">
+ <source src="/reels/dw-brand-promo-short-wide-20260717.mp4" type="video/mp4"></video>
+ <div class="meta"><div class="name">Wide · 16:9</div><div class="place">Website · YouTube</div></div>
+ </div>
+ </div>
+ </div>
+
+ <footer>
+ <div class="mark">Designer Wallcoverings</div>
+ <a href="https://designerwallcoverings.com">designerwallcoverings.com →</a>
+ </footer>
+</body>
+</html>
diff --git a/server.js b/server.js
index 646690d..7518390 100644
--- a/server.js
+++ b/server.js
@@ -76,7 +76,7 @@ async function serveFile(fp, req, res) {
// Everything else (console, APIs, data) stays Basic-Auth gated.
const PUBLIC_MEDIA = /^\/reels\/[^/]+\.mp4$/;
// Public legal pages must be readable without auth (Meta app review fetches them).
-const PUBLIC_PAGES = /^\/(privacy|terms)$/;
+const PUBLIC_PAGES = /^\/(privacy|terms|showcase)$/;
const isPublicMedia = req => (req.method === 'GET' || req.method === 'HEAD') && (PUBLIC_MEDIA.test(new URL(req.url, 'http://localhost').pathname) || PUBLIC_PAGES.test(new URL(req.url, 'http://localhost').pathname));
const server = http.createServer(async (req, res) => {
@@ -90,6 +90,7 @@ const server = http.createServer(async (req, res) => {
if (p === '/' ) return await serveFile(join(ROOT, 'public', 'index.html'), req, res);
if (p === '/privacy') return await serveFile(join(ROOT, 'public', 'privacy.html'), req, res);
if (p === '/terms') return await serveFile(join(ROOT, 'public', 'terms.html'), req, res);
+ if (p === '/showcase') return await serveFile(join(ROOT, 'public', 'showcase.html'), req, res);
if (p === '/api/reels') {
const fp = join(ROOT, 'data', 'reels.json');
return res.writeHead(200, { 'content-type': 'application/json' }).end(existsSync(fp) ? await readFile(fp) : '[]');
← 8c77003 Add shop-by-color reel builder — opens on the color wheel (f
·
back to Dw Marketing Reels
·
Shop-by-color reel posted: Instagram + Bluesky live; Faceboo e86b958 →