← back to Dw Showroom
public/index.html
233 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<title>DW Showroom — Designer Wallcoverings</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--gold: #c9a96e; --gold-light: #e8d5a8; --gold-dark: #a08045;
--bg: #0a0a0f; --bg-card: #12121a; --bg-hover: #1a1a25;
--text: #e0e0e0; --text-dim: #888; --text-muted: #555;
--border: rgba(201,169,110,0.15); --border-hover: rgba(201,169,110,0.35);
}
body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; }
/* Hero */
.hero {
position: relative; padding: 80px 40px 60px; text-align: center;
background: linear-gradient(180deg, rgba(201,169,110,0.06) 0%, transparent 100%);
border-bottom: 1px solid var(--border);
}
.hero::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-logo { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 700; color: var(--gold); letter-spacing: 12px; margin-bottom: 8px; }
.hero-title { font-size: 18px; letter-spacing: 8px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.hero-sub { font-size: 14px; color: var(--text-muted); letter-spacing: 3px; }
/* Showrooms Grid */
.section { max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
.section-header {
display: flex; align-items: center; gap: 16px; margin-bottom: 40px;
}
.section-line { flex: 1; height: 1px; background: var(--border); }
.section-label { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.showroom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.showroom-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; transition: all 0.3s ease; cursor: pointer; text-decoration: none; color: inherit;
position: relative;
}
.showroom-card:hover { border-color: var(--border-hover); background: var(--bg-hover); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,169,110,0.08); }
.card-image {
height: 200px; background: linear-gradient(135deg, #1a1a25 0%, #0f0f18 100%);
display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.card-image::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, var(--bg-card) 100%);
}
.card-3d-badge {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: rgba(201,169,110,0.2); border: 1px solid var(--gold); border-radius: 4px;
padding: 3px 8px; font-size: 10px; font-weight: 600; color: var(--gold); letter-spacing: 1px;
}
.card-status {
position: absolute; top: 12px; left: 12px; z-index: 2;
display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot.live { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.status-dot.coming { background: #f59e0b; }
.card-preview-text {
font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 600;
color: rgba(201,169,110,0.15); letter-spacing: 6px;
}
.card-body { padding: 20px 24px 24px; }
.card-location { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.card-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.card-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.card-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.meta-item { display: flex; align-items: center; gap: 4px; }
.card-enter {
display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
padding: 10px 20px; border: 1px solid var(--gold); border-radius: 6px;
background: rgba(201,169,110,0.08); color: var(--gold); font-size: 12px; font-weight: 500;
letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s;
}
.showroom-card:hover .card-enter { background: rgba(201,169,110,0.2); }
/* Vendors Strip */
.vendors-strip { padding: 40px; border-top: 1px solid var(--border); text-align: center; }
.vendors-label { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; }
.vendors-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 900px; margin: 0 auto; }
.vendor-tag { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; transition: color 0.2s; }
.vendor-tag:hover { color: var(--gold); }
/* Footer */
.footer { padding: 30px 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.04); }
.footer-text { font-size: 11px; color: var(--text-muted); letter-spacing: 2px; }
/* Animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.showroom-card { animation: fadeUp 0.6s ease forwards; opacity: 0; }
.showroom-card:nth-child(1) { animation-delay: 0.1s; }
.showroom-card:nth-child(2) { animation-delay: 0.2s; }
.showroom-card:nth-child(3) { animation-delay: 0.3s; }
.showroom-card:nth-child(4) { animation-delay: 0.4s; }
</style>
</head>
<body>
<!-- Hero -->
<div class="hero">
<div class="hero-logo">DW</div>
<div class="hero-title">Designer Wallcoverings</div>
<div class="hero-sub">Virtual Showroom Experience</div>
</div>
<!-- Showrooms -->
<div class="section">
<div class="section-header">
<span class="section-line"></span>
<span class="section-label">Showrooms</span>
<span class="section-line"></span>
</div>
<div class="showroom-grid">
<!-- Sherman Oaks -->
<a class="showroom-card" href="/sherman-oaks">
<div class="card-image" style="background:linear-gradient(135deg,#1a1520 0%,#2a1f30 50%,#1a1520 100%)">
<span class="card-3d-badge">3D VIRTUAL</span>
<span class="card-status"><span class="status-dot live"></span>Live</span>
<span class="card-preview-text">SO</span>
</div>
<div class="card-body">
<div class="card-location">Sherman Oaks, CA</div>
<div class="card-name">Sherman Oaks Showroom</div>
<div class="card-desc">Walk through our flagship showroom featuring wing boards from 12+ vendors, sample books, and a meeting area. Click wings to inspect patterns up close.</div>
<div class="card-meta">
<span class="meta-item">12 Vendors</span>
<span class="meta-item">120+ Patterns</span>
<span class="meta-item">Interactive 3D</span>
</div>
<div class="card-enter">Enter Showroom →</div>
</div>
</a>
<!-- DW Main Showroom — Command Center -->
<a class="showroom-card" href="http://45.61.58.125:7777">
<div class="card-image" style="background:linear-gradient(135deg,#151520 0%,#1a2535 50%,#151520 100%)">
<span class="card-3d-badge">3D VIRTUAL</span>
<span class="card-status"><span class="status-dot live"></span>Live</span>
<span class="card-preview-text">DW</span>
</div>
<div class="card-body">
<div class="card-location">Los Angeles, CA</div>
<div class="card-name">DW Main Showroom</div>
<div class="card-desc">The full Designer Wallcoverings experience. Browse all product lines, vendor catalogs, and collections in our interactive 3D command center.</div>
<div class="card-meta">
<span class="meta-item">All Product Lines</span>
<span class="meta-item">12+ Vendors</span>
<span class="meta-item">Interactive 3D</span>
</div>
<div class="card-enter">Enter Main Showroom →</div>
</div>
</a>
<!-- Downtown LA (Coming Soon) -->
<div class="showroom-card" style="opacity:0.6;cursor:default">
<div class="card-image" style="background:linear-gradient(135deg,#151520 0%,#1a2535 50%,#151520 100%)">
<span class="card-status"><span class="status-dot coming"></span>Coming Soon</span>
<span class="card-preview-text">DTLA</span>
</div>
<div class="card-body">
<div class="card-location">Downtown Los Angeles, CA</div>
<div class="card-name">DTLA Design Center</div>
<div class="card-desc">Our upcoming downtown showroom in the Pacific Design Center. Commercial and hospitality wallcovering focus with A&D library.</div>
<div class="card-meta">
<span class="meta-item">Coming 2026</span>
<span class="meta-item">Commercial Focus</span>
</div>
</div>
</div>
<!-- Scottsdale (Coming Soon) -->
<div class="showroom-card" style="opacity:0.6;cursor:default">
<div class="card-image" style="background:linear-gradient(135deg,#1a1815 0%,#2a2520 50%,#1a1815 100%)">
<span class="card-status"><span class="status-dot coming"></span>Coming Soon</span>
<span class="card-preview-text">AZ</span>
</div>
<div class="card-body">
<div class="card-location">Scottsdale, AZ</div>
<div class="card-name">Scottsdale Gallery</div>
<div class="card-desc">Desert-inspired showroom featuring natural textures, grasscloths, and specialty wallcoverings curated for the Southwest market.</div>
<div class="card-meta">
<span class="meta-item">Coming 2026</span>
<span class="meta-item">Residential Focus</span>
</div>
</div>
</div>
</div>
</div>
<!-- Vendors -->
<div class="vendors-strip">
<div class="vendors-label">Featured Vendors</div>
<div class="vendors-list">
<span class="vendor-tag">Thibaut</span>
<span class="vendor-tag">Kravet</span>
<span class="vendor-tag">Phillip Jeffries</span>
<span class="vendor-tag">York</span>
<span class="vendor-tag">Schumacher</span>
<span class="vendor-tag">Cole & Son</span>
<span class="vendor-tag">Winfield Thybony</span>
<span class="vendor-tag">Arte</span>
<span class="vendor-tag">Elitis</span>
<span class="vendor-tag">Brewster</span>
<span class="vendor-tag">Innovations</span>
<span class="vendor-tag">Maya Romanoff</span>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-text">Designer Wallcoverings · Since 1981 · Los Angeles, California</div>
</div>
</body>
</html>