← back to Dw Substitute Viewer
substitute viewer: top-10 alternatives for discontinued FVH-40402
e3dd63ee99dd7cf3901b4b82dca001ee4b983f02 · 2026-07-07 13:43:23 -0700 · Steve
Files touched
Diff
commit e3dd63ee99dd7cf3901b4b82dca001ee4b983f02
Author: Steve <steve@designerwallcoverings.com>
Date: Tue Jul 7 13:43:23 2026 -0700
substitute viewer: top-10 alternatives for discontinued FVH-40402
---
.gitignore | 8 ++++
index.html | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 154 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1924158
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ef218ae
--- /dev/null
+++ b/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Substitute Finder — FVH-40402</title>
+<style>
+ :root{ --cols:5; --ink:#1c1a17; --muted:#8a8178; --line:#e7e1d8; --bg:#faf7f2; --spice:#b4531f; }
+ *{box-sizing:border-box}
+ body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
+ header{padding:28px 32px 18px;border-bottom:1px solid var(--line);background:#fff}
+ h1{margin:0 0 4px;font-size:22px;font-weight:600;letter-spacing:.2px}
+ .sub{color:var(--muted);font-size:13px}
+ .wrap{max-width:1400px;margin:0 auto;padding:24px 32px 60px}
+
+ /* discontinued original banner */
+ .orig{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--spice);border-radius:12px;padding:16px 18px;margin:22px 0 8px}
+ .orig img{width:120px;height:120px;object-fit:cover;border-radius:8px;background:#eee;flex-shrink:0}
+ .orig .meta{min-width:0}
+ .tag-disco{display:inline-block;background:var(--spice);color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:20px;margin-bottom:6px}
+ .orig h2{margin:2px 0 4px;font-size:18px;font-weight:600}
+ .orig .attrs{color:var(--muted);font-size:13px;line-height:1.5}
+
+ .controls{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:26px 0 14px}
+ .controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
+ select,input[type=range]{font:inherit}
+ select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
+ .count{margin-left:auto;color:var(--muted);font-size:13px}
+
+ .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:18px}
+ .card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;text-decoration:none;color:inherit}
+ .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
+ .card .ph{position:relative;aspect-ratio:1/1;background:#efe9e0}
+ .card .ph img{width:100%;height:100%;object-fit:cover;display:block}
+ .rank{position:absolute;top:8px;left:8px;background:#1c1a17;color:#fff;font-size:12px;font-weight:600;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
+ .swatch{position:absolute;top:8px;right:8px;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:20px}
+ .card .body{padding:11px 12px 13px}
+ .card .vend{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
+ .card .title{font-size:13.5px;font-weight:600;margin:2px 0 4px;line-height:1.3}
+ .card .sku{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
+ .card .why{font-size:11.5px;color:#6b6255;margin-top:7px;line-height:1.4}
+ footer{color:var(--muted);font-size:12px;margin-top:30px;text-align:center}
+</style>
+</head>
+<body>
+<header>
+ <h1>Substitute Finder</h1>
+ <div class="sub">Nearest active alternatives for a discontinued item · from the full dw_unified catalog</div>
+</header>
+<div class="wrap">
+
+ <div class="orig" id="orig"></div>
+
+ <div class="controls">
+ <label>Sort
+ <select id="sort">
+ <option value="best">Best match (default)</option>
+ <option value="color">Color closeness</option>
+ <option value="vendor">Vendor A→Z</option>
+ <option value="sku">SKU A→Z</option>
+ <option value="title">Title A→Z</option>
+ </select>
+ </label>
+ <label>Density
+ <input type="range" id="density" min="3" max="7" step="1" value="5">
+ </label>
+ <span class="count" id="count"></span>
+ </div>
+
+ <div class="grid" id="grid"></div>
+
+ <footer>Original spec: Faux-hide vinyl · Burnt Orange (Clay) · Class A Fire Rated · Commercial. Substitutes ranked by texture + color + spec parity.</footer>
+</div>
+
+<script>
+const BASE = "https://www.designerwallcoverings.com/products/";
+const ORIGINAL = {
+ sku:"FVH-40402", title:"Hairly Hide — Faux Vinyl Hide — Burnt Orange Spice",
+ vendor:"Hollywood Wallcoverings", color:"Clay",
+ attrs:"Faux Finish · Vinyl · Textured · Class A Fire Rated · Commercial",
+ handle:"hairly-hide-faux-vinyl-hide-wallpaper-burnt-orange-spice-fvh-40402",
+ img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/files/fvh-40402-sample-hairly-hide-faux-vinyl-hide-burnt-orange-spice-hollywood.jpg?v=1775715526"
+};
+// colorRank: lower = closer to Burnt Orange Spice
+const SUBS = [
+ {rank:1, sku:"PRO-43853", vendor:"Phillipe Romano", title:"Milford Faux Leather Upholstery Vinyl", color:"Burnt Orange", colorRank:1, handle:"milford-faux-leather-upholstery-vinyl-pro-43853", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/8fb169a8d440abc2f2a39ceaf1eb3ae3.jpg?v=1572309343", why:"Faux-leather vinyl in true Burnt Orange — closest texture + color match."},
+ {rank:2, sku:"PRO-43976", vendor:"Phillipe Romano", title:"Groton Aged Faux Leather", color:"Burnt Orange", colorRank:1, handle:"groton-aged-faux-leather-pro-43976", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/f896cdd461006db7aba1b003f1e63698.jpg?v=1572309362", why:"Aged faux-leather, Burnt Orange — warm hide look, spot-on hue."},
+ {rank:3, sku:"SDR-72103", vendor:"Designer Wallcoverings", title:"Raked Faux Suede", color:"Burnt Orange", colorRank:1, handle:"raked-faux-suede-sdr-72103", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/e13b4296022995a82e169e5750131642.jpg?v=1572309154", why:"Textured faux-suede, exact Burnt Orange — softer hand than hide."},
+ {rank:4, sku:"SDR-72102", vendor:"Designer Wallcoverings", title:"Raked Faux Suede", color:"Rust", colorRank:2, handle:"raked-faux-suede-sdr-72102", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/25e65d6769fb99dc519fdf1a83726036.jpg?v=1572309154", why:"Same line in Rust — a half-step deeper than the original."},
+ {rank:5, sku:"PRO-43865", vendor:"Phillipe Romano", title:"New Haven Faux Leather Matte Upholstery Vinyl", color:"Amber", colorRank:2, handle:"new-haven-faux-leather-matte-upholstery-vinyl-pro-43865", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/2f79ab4641900b8a81ee60b084bc3ec6.jpg?v=1572309344", why:"Matte faux-leather vinyl, Amber — warm orange, commercial-friendly."},
+ {rank:6, sku:"SDSS-72204", vendor:"Designer Wallcoverings", title:"Soft Faux Suede", color:"Bronze", colorRank:3, handle:"soft-faux-suede-sdss-72204", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/aae7373575172d347db4709226dc10e3.jpg?v=1572309156", why:"Bronze faux-suede — earthy orange-brown neighbor."},
+ {rank:7, sku:"SDSS-72211", vendor:"Designer Wallcoverings", title:"Soft Faux Suede", color:"Bronze", colorRank:3, handle:"soft-faux-suede-sdss-72211", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/files/SDSS-72211-sample-cropped.jpg?v=1774469477", why:"Alternate Bronze colorway of the Soft Faux Suede line."},
+ {rank:8, sku:"PRO-43210", vendor:"Phillipe Romano", title:"Newcastle Faux Leather Upholstery Vinyl", color:"Bronze", colorRank:3, handle:"newcastle-faux-leather-upholstery-vinyl-pro-43210", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/bd3571f7992aa8bf5b092863948ed83e.jpg?v=1572309308", why:"Faux-leather vinyl in Bronze — hide texture, warm metallic-brown."},
+ {rank:9, sku:"SDR-72137", vendor:"Designer Wallcoverings", title:"Raked Faux Suede", color:"Garnet", colorRank:4, handle:"raked-faux-suede-sdr-72137", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/9640bd3353446c0692201068fc9b4327.jpg?v=1572309156", why:"Garnet faux-suede — for a redder, deeper reading of the color."},
+ {rank:10, sku:"SDR-72132", vendor:"Designer Wallcoverings", title:"Raked Faux Suede", color:"Garnet", colorRank:4, handle:"raked-faux-suede-sdr-72132", img:"https://cdn.shopify.com/s/files/1/0015/4117/7456/products/22bfb18871c1ac331df5bf1b7d5c1492.jpg?v=1572309156", why:"Alternate Garnet colorway of the Raked Faux Suede line."}
+];
+
+// ---- original banner ----
+document.getElementById('orig').innerHTML =
+ `<img src="${ORIGINAL.img}" alt="">
+ <div class="meta">
+ <span class="tag-disco">Discontinued · needs substitute</span>
+ <h2>${ORIGINAL.title}</h2>
+ <div class="attrs">${ORIGINAL.vendor} · ${ORIGINAL.sku} · Color ${ORIGINAL.color}<br>${ORIGINAL.attrs}</div>
+ </div>`;
+
+// ---- persisted controls ----
+const grid = document.getElementById('grid'), sortEl = document.getElementById('sort'),
+ densEl = document.getElementById('density'), countEl = document.getElementById('count');
+sortEl.value = localStorage.getItem('sub-sort') || 'best';
+densEl.value = localStorage.getItem('sub-cols') || '5';
+
+function applyDensity(){ document.documentElement.style.setProperty('--cols', densEl.value); localStorage.setItem('sub-cols', densEl.value); }
+function sorted(){
+ const a = SUBS.slice(), s = sortEl.value;
+ if(s==='best') a.sort((x,y)=>x.rank-y.rank);
+ if(s==='color') a.sort((x,y)=>x.colorRank-y.colorRank || x.rank-y.rank);
+ if(s==='vendor') a.sort((x,y)=>x.vendor.localeCompare(y.vendor) || x.rank-y.rank);
+ if(s==='sku') a.sort((x,y)=>x.sku.localeCompare(y.sku));
+ if(s==='title') a.sort((x,y)=>x.title.localeCompare(y.title));
+ return a;
+}
+function render(){
+ const rows = sorted();
+ grid.innerHTML = rows.map(p=>`
+ <a class="card" href="${BASE}${p.handle}" target="_blank" rel="noopener">
+ <div class="ph">
+ <span class="rank">${p.rank}</span>
+ <span class="swatch">${p.color}</span>
+ <img src="${p.img}" loading="lazy" alt="">
+ </div>
+ <div class="body">
+ <div class="vend">${p.vendor}</div>
+ <div class="title">${p.title}</div>
+ <div class="sku">${p.sku}</div>
+ <div class="why">${p.why}</div>
+ </div>
+ </a>`).join('');
+ countEl.textContent = rows.length + ' substitutes';
+}
+sortEl.addEventListener('change', ()=>{ localStorage.setItem('sub-sort', sortEl.value); render(); });
+densEl.addEventListener('input', applyDensity);
+applyDensity(); render();
+</script>
+</body>
+</html>
(oldest)
·
back to Dw Substitute Viewer
·
generated by /substitutefinder: slider-tweakable viewer (mat 883e04f →