← back to Wallpaper Tour
index.html
902 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DW Wallpaper Fleet — 73 sites</title>
<style>
:root{--bg:#0a0a0c;--panel:#15151a;--rule:#26262e;--ink:#eee6d8;--mute:#8c8680;--gold:#c9a96a;--ok:#7ad27a;--bad:#e26d6d;}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,'SF Pro Text',sans-serif}
header{padding:24px 32px;border-bottom:1px solid var(--rule);background:var(--panel);display:flex;justify-content:space-between;align-items:baseline}
h1{margin:0;font:300 32px/1 'SF Pro Display',serif;letter-spacing:.04em}
h1 b{color:var(--gold);font-weight:500}
.stats{font-family:'SF Mono',monospace;font-size:12px;color:var(--mute);display:flex;gap:18px}
.stats b{color:var(--ink);font-weight:600;font-size:15px;letter-spacing:0}
.cat-tabs{padding:14px 32px;display:flex;gap:8px;border-bottom:1px solid var(--rule);background:var(--panel);overflow-x:auto;align-items:center;flex-wrap:wrap}
.tab{background:transparent;border:1px solid var(--rule);color:var(--ink);padding:6px 12px;font:600 11px 'SF Pro Text';text-transform:uppercase;letter-spacing:.1em;border-radius:3px;cursor:pointer}
.tab.active{background:var(--gold);color:#000;border-color:var(--gold)}
.divider{width:1px;height:24px;background:var(--rule);margin:0 6px}
.range{display:flex;align-items:center;gap:10px;font:600 11px 'SF Pro Text';text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.range input[type="number"]{width:50px;background:#0e0e10;border:1px solid var(--rule);color:var(--ink);padding:5px 6px;border-radius:3px;font:600 12px 'SF Mono',monospace;text-align:center}
.range input[type="number"]:focus{outline:none;border-color:var(--gold)}
.range .dash{color:var(--mute)}
.range-presets{display:flex;gap:4px}
.range-presets button{background:transparent;border:1px solid var(--rule);color:var(--mute);padding:5px 9px;font:600 10px 'SF Mono',monospace;border-radius:2px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.range-presets button:hover{color:var(--gold);border-color:var(--gold)}
.range-presets button.active{background:var(--gold);color:#000;border-color:var(--gold)}
.grid{padding:24px 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
/* Uniform chip size — carmelwallpaper canonical (feedback_chip_image_uniform_size). */
.thumb{aspect-ratio:1/1.15;background:#0e0e10;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Logo UL + hamburger UR — applied to every DW page per feedback_logo_ul_hamburger_ur_all_tabs. */
.dw-chrome-logo{position:fixed;top:18px;left:22px;z-index:1000;font:600 14px/1 'SF Pro Text',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none;background:rgba(10,10,12,.7);padding:8px 12px;border:1px solid var(--rule);border-radius:3px;backdrop-filter:blur(6px)}
.dw-chrome-logo b{color:var(--ink);font-weight:300;margin-left:6px;letter-spacing:.04em}
.dw-burger{position:fixed;top:18px;right:22px;z-index:1000;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:rgba(10,10,12,.7);backdrop-filter:blur(6px);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.dw-burger:hover{border-color:var(--gold)}
.dw-burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.dw-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dw-burger.open span:nth-child(2){opacity:0}
.dw-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dw-burger-panel{position:fixed;top:74px;right:22px;z-index:999;background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:14px;min-width:220px;display:none;backdrop-filter:blur(8px)}
.dw-burger-panel.open{display:block}
.dw-burger-panel a{display:block;padding:8px 12px;color:var(--ink);text-decoration:none;border-radius:3px;font-size:13px}
.dw-burger-panel a:hover{background:var(--rule);color:var(--gold)}
/* Sort + density above the grid (sort-skill canonical). */
.grid-controls{padding:10px 32px 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font:600 11px 'SF Pro Text';text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.grid-controls select,.grid-controls input[type=range]{background:#0e0e10;border:1px solid var(--rule);color:var(--ink);padding:6px 8px;border-radius:3px;font:600 12px 'SF Mono',monospace}
.grid-controls input[type=range]{padding:0;width:140px}
.grid-controls label{display:flex;align-items:center;gap:8px}
.thumb .placeholder{color:var(--mute);font:300 32px 'SF Pro Display',serif}
.meta{padding:12px 14px}
.name{font:500 14px 'SF Pro Display';letter-spacing:.01em;margin:0 0 4px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.sub{font:400 11px 'SF Mono',monospace;color:var(--mute);letter-spacing:.02em;display:flex;justify-content:space-between}
.pill{font:600 9px/1 'SF Mono',monospace;text-transform:uppercase;letter-spacing:.08em;padding:3px 5px;border-radius:2px;flex-shrink:0}
.pill.ok{background:rgba(122,210,122,.12);color:var(--ok);border:1px solid rgba(122,210,122,.3)}
.pill.bad{background:rgba(226,109,109,.12);color:var(--bad);border:1px solid rgba(226,109,109,.3)}
.footer{padding:18px 32px;color:var(--mute);font-size:11px;text-align:center;border-top:1px solid var(--rule);font-family:'SF Mono',monospace}
.hidden{display:none}
</style>
</head>
<body>
<!-- DW chrome — logo UL + hamburger UR per standing rule (every tab). -->
<a class="dw-chrome-logo" href="#">DW <b>FLEET</b></a>
<button class="dw-burger" id="dwBurger" aria-label="Menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<nav class="dw-burger-panel" id="dwBurgerPanel" aria-label="Site sections">
<a href="#" data-jump="cat-all">All sites</a>
<a href="#" data-jump="cat-commercial">Commercial</a>
<a href="#" data-jump="cat-editorial">Editorial</a>
<a href="#" data-jump="cat-era">Era</a>
<a href="#" data-jump="cat-finish">Finish</a>
<a href="#" data-jump="cat-material">Material</a>
<a href="#" data-jump="cat-other">Other</a>
<a href="#" data-jump="cat-place">Place</a>
</nav>
<header style="padding-left:88px;padding-right:88px">
<h1>DW <b>WALLPAPER FLEET</b></h1>
<div class="stats">
<span><b>73</b> sites</span>
<span><b>68</b> live public</span>
<span><b>52</b> pm2-managed</span>
</div>
</header>
<div class="grid-controls">
<label>Sort
<select id="sortBy">
<option value="default">Default (category, name)</option>
<option value="name-asc">Name A→Z</option>
<option value="name-desc">Name Z→A</option>
<option value="live-first">Live first</option>
<option value="offline-first">Offline first</option>
<option value="category">Category</option>
</select>
</label>
<label>Density
<input type="range" id="density" min="200" max="380" step="10" value="260">
<span id="densityVal" style="font:600 12px 'SF Mono',monospace;color:var(--gold)">260px</span>
</label>
</div>
<div class="cat-tabs">
<button class="tab active" data-cat="all">All (73)</button>
<button class="tab" data-cat="commercial">commercial (8)</button><button class="tab" data-cat="editorial">editorial (10)</button><button class="tab" data-cat="era">era (10)</button><button class="tab" data-cat="finish">finish (8)</button><button class="tab" data-cat="material">material (20)</button><button class="tab" data-cat="other">other (14)</button><button class="tab" data-cat="place">place (3)</button>
<div class="divider"></div>
<div class="range">
<span>Range</span>
<input type="number" id="rStart" min="1" max="73" value="1">
<span class="dash">–</span>
<input type="number" id="rEnd" min="1" max="73" value="73">
<div class="range-presets">
<button data-r="1-10">1–10</button>
<button data-r="1-25">1–25</button>
<button data-r="1-50">1–50</button>
<button data-r="1-73" class="active">All</button>
</div>
<span id="rCount" style="color:var(--gold);font-family:'SF Mono',monospace">73 shown</span>
</div>
</div>
<div class="grid" id="grid">
<a class="card" data-cat="commercial" href="https://architecturalwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/architecturalwallcoverings.jpg" loading="lazy" alt="architecturalwallcoverings">
</div>
<div class="meta">
<div class="name">architecturalwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>architecturalwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://contractwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/contractwallpaper.jpg" loading="lazy" alt="contractwallpaper">
</div>
<div class="meta">
<div class="name">contractwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>contractwallpaper.com</span><span>:9849</span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://healthcarewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/healthcarewallpaper.jpg" loading="lazy" alt="healthcarewallpaper">
</div>
<div class="meta">
<div class="name">healthcarewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>healthcarewallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://hospitalitywallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">H</span>
</div>
<div class="meta">
<div class="name">hospitalitywallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>hospitalitywallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://hospitalitywallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">H</span>
</div>
<div class="meta">
<div class="name">hospitalitywallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>hospitalitywallpaper.com</span><span>:9855</span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://hotelwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">H</span>
</div>
<div class="meta">
<div class="name">hotelwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>hotelwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://restaurantwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">restaurantwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>restaurantwallpaper.com</span><span>:9854</span></div>
</div>
</a>
<a class="card" data-cat="commercial" href="https://wallpapercontractor.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpapercontractor <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpapercontractor.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://bestwallpaperplace.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/bestwallpaperplace.jpg" loading="lazy" alt="bestwallpaperplace">
</div>
<div class="meta">
<div class="name">bestwallpaperplace <span class="pill ok">LIVE</span></div>
<div class="sub"><span>bestwallpaperplace.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpapercanada.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpapercanada <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpapercanada.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperdefinitions.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperdefinitions <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpaperdefinitions.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperdictionary.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperdictionary <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpaperdictionary.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperdistributors.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperdistributors <span class="pill bad">DOWN</span></div>
<div class="sub"><span>wallpaperdistributors.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperestimator.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperestimator <span class="pill bad">DOWN</span></div>
<div class="sub"><span>wallpaperestimator.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperglossary.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperglossary <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpaperglossary.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperhistory.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperhistory <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpaperhistory.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpapersback.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpapersback <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpapersback.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="editorial" href="https://wallpaperwednesday.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaperwednesday <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallpaperwednesday.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1800swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1800swallpaper.jpg" loading="lazy" alt="1800swallpaper">
</div>
<div class="meta">
<div class="name">1800swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1800swallpaper.com</span><span>:9856</span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1890swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1890swallpaper.jpg" loading="lazy" alt="1890swallpaper">
</div>
<div class="meta">
<div class="name">1890swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1890swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1900swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1900swallpaper.jpg" loading="lazy" alt="1900swallpaper">
</div>
<div class="meta">
<div class="name">1900swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1900swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1920swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1920swallpaper.jpg" loading="lazy" alt="1920swallpaper">
</div>
<div class="meta">
<div class="name">1920swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1920swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1930swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1930swallpaper.jpg" loading="lazy" alt="1930swallpaper">
</div>
<div class="meta">
<div class="name">1930swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1930swallpaper.com</span><span>:9837</span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1940swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1940swallpaper.jpg" loading="lazy" alt="1940swallpaper">
</div>
<div class="meta">
<div class="name">1940swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1940swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1950swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1950swallpaper.jpg" loading="lazy" alt="1950swallpaper">
</div>
<div class="meta">
<div class="name">1950swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1950swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1960swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1960swallpaper.jpg" loading="lazy" alt="1960swallpaper">
</div>
<div class="meta">
<div class="name">1960swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1960swallpaper.com</span><span>:9839</span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1970swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1970swallpaper.jpg" loading="lazy" alt="1970swallpaper">
</div>
<div class="meta">
<div class="name">1970swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1970swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="era" href="https://1980swallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/1980swallpaper.jpg" loading="lazy" alt="1980swallpaper">
</div>
<div class="meta">
<div class="name">1980swallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>1980swallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://agedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/agedwallpaper.jpg" loading="lazy" alt="agedwallpaper">
</div>
<div class="meta">
<div class="name">agedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>agedwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://embroideredwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/embroideredwallpaper.jpg" loading="lazy" alt="embroideredwallpaper">
</div>
<div class="meta">
<div class="name">embroideredwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>embroideredwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://flockedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/flockedwallpaper.jpg" loading="lazy" alt="flockedwallpaper">
</div>
<div class="meta">
<div class="name">flockedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>flockedwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://glassbeadedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/glassbeadedwallpaper.jpg" loading="lazy" alt="glassbeadedwallpaper">
</div>
<div class="meta">
<div class="name">glassbeadedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>glassbeadedwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://glitterwalls.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/glitterwalls.jpg" loading="lazy" alt="glitterwalls">
</div>
<div class="meta">
<div class="name">glitterwalls <span class="pill ok">LIVE</span></div>
<div class="sub"><span>glitterwalls.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://mylarwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">M</span>
</div>
<div class="meta">
<div class="name">mylarwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>mylarwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://pastelwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">P</span>
</div>
<div class="meta">
<div class="name">pastelwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>pastelwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="finish" href="https://restorationwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">restorationwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>restorationwallpaper.com</span><span>:9903</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://corkwallcovering.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/corkwallcovering.jpg" loading="lazy" alt="corkwallcovering">
</div>
<div class="meta">
<div class="name">corkwallcovering <span class="pill ok">LIVE</span></div>
<div class="sub"><span>corkwallcovering.com</span><span>:9848</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://fabricwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/fabricwallpaper.jpg" loading="lazy" alt="fabricwallpaper">
</div>
<div class="meta">
<div class="name">fabricwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>fabricwallpaper.com</span><span>:9846</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://goldleafwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/goldleafwallpaper.jpg" loading="lazy" alt="goldleafwallpaper">
</div>
<div class="meta">
<div class="name">goldleafwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>goldleafwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://grassclothwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">G</span>
</div>
<div class="meta">
<div class="name">grassclothwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>grassclothwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://jutewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">J</span>
</div>
<div class="meta">
<div class="name">jutewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>jutewallpaper.com</span><span>:9911</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://linenwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">L</span>
</div>
<div class="meta">
<div class="name">linenwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>linenwallpaper.com</span><span>:9842</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://metallicwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">M</span>
</div>
<div class="meta">
<div class="name">metallicwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>metallicwallpaper.com</span><span>:9847</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://micawallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">M</span>
</div>
<div class="meta">
<div class="name">micawallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>micawallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://naturaltextilewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">N</span>
</div>
<div class="meta">
<div class="name">naturaltextilewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>naturaltextilewallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://naturalwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">N</span>
</div>
<div class="meta">
<div class="name">naturalwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>naturalwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://raffiawallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">raffiawallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>raffiawallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://raffiawalls.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">raffiawalls <span class="pill ok">LIVE</span></div>
<div class="sub"><span>raffiawalls.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://recycledwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">recycledwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>recycledwallpaper.com</span><span>:9902</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://silkwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">silkwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>silkwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://silkwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">silkwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>silkwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://silverleafwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">silverleafwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>silverleafwallpaper.com</span><span>:9912</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://stringwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">stringwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>stringwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://suedewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">suedewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>suedewallpaper.com</span><span>:9907</span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://textilewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">T</span>
</div>
<div class="meta">
<div class="name">textilewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>textilewallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="material" href="https://wallsandfabrics.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallsandfabrics <span class="pill ok">LIVE</span></div>
<div class="sub"><span>wallsandfabrics.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://apartmentwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/apartmentwallpaper.jpg" loading="lazy" alt="apartmentwallpaper">
</div>
<div class="meta">
<div class="name">apartmentwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>apartmentwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://blockprintedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/blockprintedwallpaper.jpg" loading="lazy" alt="blockprintedwallpaper">
</div>
<div class="meta">
<div class="name">blockprintedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>blockprintedwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://chinoiseriewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/chinoiseriewallpaper.jpg" loading="lazy" alt="chinoiseriewallpaper">
</div>
<div class="meta">
<div class="name">chinoiseriewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>chinoiseriewallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://Designer-Wallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">D</span>
</div>
<div class="meta">
<div class="name">Designer-Wallcoverings <span class="pill bad">DOWN</span></div>
<div class="sub"><span>Designer-Wallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/designerwallcoverings.jpg" loading="lazy" alt="designerwallcoverings">
</div>
<div class="meta">
<div class="name">designerwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>designerwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://greenwallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/greenwallcoverings.jpg" loading="lazy" alt="greenwallcoverings">
</div>
<div class="meta">
<div class="name">greenwallcoverings <span class="pill ok">LIVE</span></div>
<div class="sub"><span>greenwallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://handcraftedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/handcraftedwallpaper.jpg" loading="lazy" alt="handcraftedwallpaper">
</div>
<div class="meta">
<div class="name">handcraftedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>handcraftedwallpaper.com</span><span>:9897</span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://museumwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">M</span>
</div>
<div class="meta">
<div class="name">museumwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>museumwallpaper.com</span><span>:9899</span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://retrowalls.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">R</span>
</div>
<div class="meta">
<div class="name">retrowalls <span class="pill ok">LIVE</span></div>
<div class="sub"><span>retrowalls.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://saloonwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">saloonwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>saloonwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://screenprintedwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">screenprintedwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>screenprintedwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://selfadhesivewallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">S</span>
</div>
<div class="meta">
<div class="name">selfadhesivewallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>selfadhesivewallpaper.com</span><span>:9905</span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://vinylwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">V</span>
</div>
<div class="meta">
<div class="name">vinylwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>vinylwallpaper.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="other" href="https://wallpaper-tour.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">W</span>
</div>
<div class="meta">
<div class="name">wallpaper-tour <span class="pill bad">DOWN</span></div>
<div class="sub"><span>wallpaper-tour.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="place" href="https://carmelwallpapers.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<img src="thumbs/carmelwallpapers.jpg" loading="lazy" alt="carmelwallpapers">
</div>
<div class="meta">
<div class="name">carmelwallpapers <span class="pill ok">LIVE</span></div>
<div class="sub"><span>carmelwallpapers.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="place" href="https://hollywood-wallcoverings.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">H</span>
</div>
<div class="meta">
<div class="name">hollywood-wallcoverings <span class="pill bad">DOWN</span></div>
<div class="sub"><span>hollywood-wallcoverings.com</span><span></span></div>
</div>
</a>
<a class="card" data-cat="place" href="https://madagascarwallpaper.com" target="_blank" rel="noopener noreferrer">
<div class="thumb">
<span class="placeholder">M</span>
</div>
<div class="meta">
<div class="name">madagascarwallpaper <span class="pill ok">LIVE</span></div>
<div class="sub"><span>madagascarwallpaper.com</span><span></span></div>
</div>
</a>
</div>
<div class="footer">~/Projects/wallpaper-tour/index.html · 2026-05-11T06:07:14.885Z · sorted by commercial · editorial · era · finish · material · other · place</div>
<script>
const TOTAL = 73;
const state = { cat: 'all', start: 1, end: TOTAL };
function applyFilters() {
const cards = [...document.querySelectorAll('.card')];
// First, get cards matching category
const matchingCat = cards.filter(c => state.cat === 'all' || c.dataset.cat === state.cat);
// Then, slice by range (1-indexed inclusive)
const visible = new Set(matchingCat.slice(state.start - 1, state.end));
for (const c of cards) c.classList.toggle('hidden', !visible.has(c));
document.getElementById('rCount').textContent = visible.size + ' shown';
}
for (const t of document.querySelectorAll('.tab')) {
t.onclick = () => {
document.querySelectorAll('.tab').forEach(x => x.classList.toggle('active', x === t));
state.cat = t.dataset.cat;
applyFilters();
};
}
const rStart = document.getElementById('rStart');
const rEnd = document.getElementById('rEnd');
function readRange() {
state.start = Math.max(1, Math.min(TOTAL, parseInt(rStart.value) || 1));
state.end = Math.max(state.start, Math.min(TOTAL, parseInt(rEnd.value) || TOTAL));
rStart.value = state.start; rEnd.value = state.end;
// clear preset highlights when user types custom range
document.querySelectorAll('.range-presets button').forEach(b => {
b.classList.toggle('active', b.dataset.r === state.start + '-' + state.end);
});
applyFilters();
}
rStart.addEventListener('input', readRange);
rEnd.addEventListener('input', readRange);
for (const btn of document.querySelectorAll('.range-presets button')) {
btn.onclick = () => {
const [s, e] = btn.dataset.r.split('-').map(Number);
rStart.value = s; rEnd.value = e;
readRange();
};
}
// ─── Hamburger menu (chrome upper-right) ────────────────────────────
const burger = document.getElementById('dwBurger');
const panel = document.getElementById('dwBurgerPanel');
burger.addEventListener('click', () => {
const open = !burger.classList.contains('open');
burger.classList.toggle('open', open);
panel.classList.toggle('open', open);
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
});
document.addEventListener('click', (e) => {
if (!burger.contains(e.target) && !panel.contains(e.target) && burger.classList.contains('open')) {
burger.classList.remove('open'); panel.classList.remove('open');
burger.setAttribute('aria-expanded', 'false');
}
});
panel.querySelectorAll('a[data-jump]').forEach(a => {
a.addEventListener('click', (e) => {
e.preventDefault();
const cat = a.dataset.jump.replace('cat-', '');
const tab = [...document.querySelectorAll('.tab')].find(t => t.dataset.cat === cat);
if (tab) tab.click();
burger.classList.remove('open'); panel.classList.remove('open');
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
// ─── Sort + density (sort-skill canonical, localStorage-persisted) ──
const sortSel = document.getElementById('sortBy');
const dens = document.getElementById('density');
const densVal = document.getElementById('densityVal');
const grid = document.getElementById('grid');
try {
const ss = localStorage.getItem('wpTourSort'); if (ss) sortSel.value = ss;
const dd = localStorage.getItem('wpTourDensity'); if (dd) dens.value = dd;
} catch {}
function applyDensity() {
grid.style.gridTemplateColumns = `repeat(auto-fill, minmax(${dens.value}px, 1fr))`;
densVal.textContent = dens.value + 'px';
try { localStorage.setItem('wpTourDensity', dens.value); } catch {}
}
function applySort() {
const mode = sortSel.value;
const cards = [...grid.querySelectorAll('.card')];
if (mode === 'default') {
// Restore the server-rendered order. Each card has its original index
// captured at first call; sort by that.
cards.forEach((c, i) => { if (!c.dataset.origIdx) c.dataset.origIdx = String(i); });
cards.sort((a, b) => Number(a.dataset.origIdx) - Number(b.dataset.origIdx));
} else {
const nameOf = c => (c.querySelector('.name')?.textContent || '').trim().toLowerCase();
const liveOf = c => c.querySelector('.pill.ok') ? 1 : 0;
const catOf = c => c.dataset.cat || '';
const cmp = {
'name-asc' : (a,b) => nameOf(a).localeCompare(nameOf(b)),
'name-desc' : (a,b) => nameOf(b).localeCompare(nameOf(a)),
'live-first' : (a,b) => liveOf(b) - liveOf(a) || nameOf(a).localeCompare(nameOf(b)),
'offline-first': (a,b) => liveOf(a) - liveOf(b) || nameOf(a).localeCompare(nameOf(b)),
'category' : (a,b) => catOf(a).localeCompare(catOf(b)) || nameOf(a).localeCompare(nameOf(b))
}[mode];
if (cmp) cards.sort(cmp);
}
cards.forEach(c => grid.appendChild(c)); // re-append in new order
try { localStorage.setItem('wpTourSort', mode); } catch {}
applyFilters(); // re-evaluate range after re-order
}
sortSel.addEventListener('change', applySort);
dens.addEventListener('input', applyDensity);
applyDensity();
applySort();
</script>
</body>
</html>