← back to Selfadhesivewallpaper
compliance: add sort-select per CLAUDE.md standing rule (Newest/Color/Style/SKU/Title/Price + localStorage persistence)
37e351b7d1e5117e16a15ee649e2f06b37070313 · 2026-05-06 18:46:08 -0700 · Steve
Files touched
Diff
commit 37e351b7d1e5117e16a15ee649e2f06b37070313
Author: Steve <steve@designerwallcoverings.com>
Date: Wed May 6 18:46:08 2026 -0700
compliance: add sort-select per CLAUDE.md standing rule (Newest/Color/Style/SKU/Title/Price + localStorage persistence)
---
public/index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 54 insertions(+), 10 deletions(-)
diff --git a/public/index.html b/public/index.html
index f849f77..0ca7e32 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,21 @@
<meta name="theme-color" content="#0a0a14">
<link rel="canonical" href="https://selfadhesivewallpaper.com/">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
+<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
+<script type="application/ld+json">
+{
+ "@context": "https://schema.org",
+ "@type": "Organization",
+ "name": "SELF-ADHESIVE",
+ "url": "https://selfadhesivewallpaper.com/",
+ "email": "info@selfadhesivewallpaper.com",
+ "parentOrganization": {
+ "@type": "Organization",
+ "name": "Designer Wallcoverings",
+ "url": "https://designerwallcoverings.com/"
+ }
+}
+</script>
<script src="/zd-loader.js" defer></script>
<style>
:root {
@@ -20,12 +35,12 @@
--cols: 6; /* default grid density — slider controls this */
}
html[data-theme="light"] {
- --bg: #f5e8d4;
- --paper: #0a0905;
+ --bg: #fafaf6;
+ --paper: #1b1814;
--muted: #6b5f56;
--line: rgba(10,9,5,0.12);
- --accent: #5a3818;
- --bg-soft: #ebd8b8;
+ --accent: #14277b;
+ --bg-soft: #c9ccd9;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
@@ -94,8 +109,8 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
.card .sample-btn:hover { background:var(--accent); color:#fff }
-@media (max-width:980px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:680px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
+@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
+@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
.sentinel { height:1px }
.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
@@ -166,6 +181,16 @@ textarea:focus-visible,
</div>
<div class="density">
+ <label>Sort</label>
+ <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
+ <option value="newest">Newest</option>
+ <option value="color">Color</option>
+ <option value="style">Style</option>
+ <option value="sku">SKU A→Z</option>
+ <option value="title">Title A→Z</option>
+ <option value="price-asc">Price ↑</option>
+ <option value="price-desc">Price ↓</option>
+ </select>
<label>Grid</label>
<input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
<span class="ct" id="densityLabel">6 cols</span>
@@ -226,6 +251,7 @@ textarea:focus-visible,
<div class="footer-bottom">
<span>selfadhesivewallpaper.com · a designer wallcoverings family vertical</span>
+ <span><a href="mailto:info@selfadhesivewallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@selfadhesivewallpaper.com</a></span>
<span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
<span id="footerStat"></span>
</div>
@@ -268,7 +294,7 @@ textarea:focus-visible,
// deterministic jitter per slug
let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 14;
+ const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
const x = cx + jx, y = 28 + t * (H - 56) + jy;
const isCurrent = n[0] === SLUG;
const r = isCurrent ? 8 : 4;
@@ -302,7 +328,8 @@ function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
function cardHTML(p) {
- return '<img loading="lazy" src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+ const eager = state.page === 1;
+ return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+ '<div class="overlay">'
+ '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
+ '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
@@ -472,9 +499,9 @@ loadGridPage();
<svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
<span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
</button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@designerwallcoverings.com">
+ <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
<svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@designerwallcoverings.com</span></span>
+ <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
</a>
</div>
</div>
@@ -607,6 +634,23 @@ loadGridPage();
});
}
}, true);
+
+// DW STANDARD sort-select wire-up (added by fleet patcher)
+(function(){
+ const sortSel = document.getElementById("sortSelect");
+ if (!sortSel) return;
+ const KEY = location.hostname.replace(/\./g, "_") + "_sort";
+ const saved = localStorage.getItem(KEY);
+ if (saved) { try { sortSel.value = saved; } catch(e){} }
+ if (typeof state !== "undefined") state.sort = sortSel.value;
+ sortSel.addEventListener("change", e => {
+ const v = e.target.value;
+ try { localStorage.setItem(KEY, v); } catch(e){}
+ if (typeof state !== "undefined") state.sort = v;
+ if (typeof resetGrid === "function") resetGrid();
+ else location.reload();
+ });
+})();
</script>
</body>
← f765cf1 initial scaffold (gitify-all 2026-05-06)
·
back to Selfadhesivewallpaper
·
graphic-loop pass 2: fix .corner-mark contrast + soften hero da56126 →