← back to Dw Showroom
public/sherman-oaks.html
120 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DW Showroom — Sherman Oaks</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/showroom.css">
</head>
<body>
<!-- Loading Screen -->
<div id="loading-screen">
<div class="loader-content">
<div class="loader-logo">DW</div>
<div class="loader-title">Designer Wallcoverings</div>
<div class="loader-sub">Sherman Oaks Showroom</div>
<div class="loader-bar"><div class="loader-fill" id="loadFill"></div></div>
<div class="loader-status" id="loadStatus">Initializing showroom...</div>
</div>
</div>
<!-- HUD Overlay -->
<div id="hud">
<!-- Top Bar -->
<div id="top-bar">
<div class="top-left">
<span class="logo-mark">DW</span>
<span class="showroom-title">Sherman Oaks Showroom</span>
</div>
<div class="top-center">
<button class="nav-btn" data-section="wings" title="Wing Boards">Wings</button>
<button class="nav-btn" data-section="books" title="Sample Books">Books</button>
<button class="nav-btn" data-section="table" title="Meeting Table">Table</button>
<button class="nav-btn active" data-section="overview" title="Full View">Overview</button>
</div>
<div class="top-right">
<button id="btn-music" class="icon-btn" title="Listen to Music">♫</button>
<button id="btn-lighting" class="icon-btn" title="Lighting Mode">☼</button>
<button id="btn-fullscreen" class="icon-btn" title="Fullscreen">⛶</button>
</div>
</div>
<!-- Vendor Sidebar -->
<div id="vendor-sidebar">
<div class="sidebar-header">Vendors</div>
<div id="vendor-list"></div>
</div>
<!-- Wing Detail Panel (shows when a wing is open) -->
<div id="wing-detail" class="hidden">
<button id="close-detail" class="close-btn">×</button>
<div id="detail-pattern">Pattern Name</div>
<div id="detail-color">Color</div>
<div id="detail-vendor">Vendor</div>
<div id="detail-sku">SKU</div>
<div id="detail-specs">27" wide | Non-woven | 20.5" repeat</div>
<div class="detail-actions">
<div class="wing-skill-row">
<button class="action-btn primary" id="btn-fan-left">◀ Fan Left</button>
<span class="wing-skill-label">Fan Cascade</span>
<button class="action-btn primary" id="btn-fan-right">Fan Right ▶</button>
</div>
<button class="action-btn" id="btn-add-sample">+ Add to Sample Tray</button>
<button class="action-btn" id="btn-view-shopify">View on Shopify</button>
<button class="action-btn" id="btn-back-wing">← Back to Showroom</button>
</div>
</div>
<!-- Sample Tray -->
<div id="sample-tray">
<div class="tray-header">
<span>Sample Tray</span>
<span id="tray-count">0</span>
</div>
<div id="tray-items"></div>
</div>
<!-- Minimap -->
<canvas id="minimap" width="160" height="128"></canvas>
<!-- Bottom Info -->
<div id="bottom-bar">
<span id="info-text">WASD to walk | Click a wing board to view pattern | M for minimap</span>
<span id="fps-counter">60 FPS</span>
</div>
</div>
<!-- Welcome Tooltip -->
<div id="welcome-tip">
<div class="tip-title">SHOWROOM CONTROLS</div>
<div class="tip-row"><kbd>W A S D</kbd> Walk around</div>
<div class="tip-row"><kbd>Click</kbd> Inspect wing board</div>
<div class="tip-row"><kbd>M</kbd> Toggle minimap</div>
<div class="tip-row"><kbd>Scroll</kbd> Zoom in/out</div>
</div>
<!-- Three.js Canvas -->
<canvas id="showroom-canvas"></canvas>
<!-- Music Player (hidden) -->
<div id="music-player" class="hidden">
<div class="music-header">
<span>Showroom Ambiance</span>
<button id="close-music" class="close-btn">×</button>
</div>
<div class="music-controls">
<button id="music-prev" class="music-btn">◀◀</button>
<button id="music-play" class="music-btn">▶</button>
<button id="music-next" class="music-btn">▶▶</button>
</div>
<div id="music-track">Jazz Lounge</div>
<input type="range" id="music-volume" min="0" max="100" value="30">
</div>
<script src="/js/three.min.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/showroom.js"></script>
</body>
</html>