Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Visualizer of Design Model of Nomadic Echo Interior</title> | |
| <style> | |
| /* Reset defaults */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: #333; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #4b79a1, #283e51); | |
| color: #fff; | |
| padding: 2rem 1rem; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| letter-spacing: 1px; | |
| } | |
| /* Container for the toggle button */ | |
| .button-wrapper { | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| } | |
| .hint-button { | |
| padding: 0.75rem 1.5rem; | |
| background-color: #4b79a1; | |
| color: #fff; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease; | |
| } | |
| .hint-button:hover { | |
| background-color: #3a5f7a; | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| padding: 0 1rem 2rem; | |
| } | |
| .content-wrapper { | |
| display: flex; | |
| width: 100%; | |
| max-width: 1200px; | |
| gap: 1.5rem; | |
| justify-content: center; | |
| } | |
| /* Viewer container */ | |
| .viewer-container { | |
| background-color: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| /* Start at 70% width */ | |
| flex: 0 0 70%; | |
| transition: flex 0.3s ease; | |
| } | |
| /* Class to shrink viewer to 50% */ | |
| .half-width { | |
| flex: 0 0 50% ; | |
| } | |
| .viewer-header { | |
| background-color: #283e51; | |
| color: #fff; | |
| padding: 1rem; | |
| text-align: center; | |
| font-size: 1.25rem; | |
| letter-spacing: 0.5px; | |
| } | |
| .sketchfab-embed-wrapper { | |
| position: relative; | |
| width: 100%; | |
| /* 16:9 aspect ratio */ | |
| padding-top: 56.25%; | |
| } | |
| .sketchfab-embed-wrapper iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| border-radius: 0 0 12px 12px; | |
| } | |
| .credits { | |
| text-align: right; | |
| font-size: 0.8rem; | |
| color: #777; | |
| padding: 0.5rem 1rem; | |
| } | |
| .credits a { | |
| color: #4b79a1; | |
| text-decoration: none; | |
| } | |
| /* Plan container (hidden initially) */ | |
| .plan-container { | |
| background-color: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); | |
| overflow: hidden; | |
| display: none; /* hidden by default */ | |
| flex-direction: column; | |
| /* Will become half-width when shown */ | |
| flex: 0 0 50%; | |
| transition: flex 0.3s ease; | |
| } | |
| /* Plan image wrapper to maintain 16:9 aspect ratio */ | |
| .plan-image-wrapper { | |
| position: relative; | |
| width: 100%; | |
| padding-top: 56.25%; | |
| background-color: #000; | |
| } | |
| .plan-image-wrapper img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| footer { | |
| background-color: #283e51; | |
| color: #fff; | |
| text-align: center; | |
| padding: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 900px) { | |
| .content-wrapper { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .viewer-container, | |
| .plan-container { | |
| flex: 0 0 100% ; | |
| max-width: 100%; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .viewer-header { | |
| font-size: 1rem; | |
| } | |
| .hint-button { | |
| width: 80%; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Visualizer of Design Model of Nomadic Echo Interior</h1> | |
| </header> | |
| <!-- Button placed outside the render card --> | |
| <div class="button-wrapper"> | |
| <button class="hint-button" id="hintBtn">Show Floor Plan</button> | |
| </div> | |
| <!-- src="https://sketchfab.com/models/3d0aefaafa9c4143a9e67e67895dc4da/embed?autostart=1&camera=0&preload=1" --> | |
| <main> | |
| <div class="content-wrapper"> | |
| <!-- Viewer Panel (initially 70% width) --> | |
| <div class="viewer-container" id="viewerPanel"> | |
| <div class="viewer-header">Explore the 3D Model</div> | |
| <div class="sketchfab-embed-wrapper"> | |
| <iframe | |
| title="25d4c696-c992-43d5-ab5a-03212692591a" | |
| src="https://sketchfab.com/models/36ae900f302a4cf18568411621d6e6a0/embed?autostart=1&camera=0&preload=1" | |
| allow="autoplay; fullscreen; xr-spatial-tracking" | |
| xr-spatial-tracking | |
| execution-while-out-of-viewport | |
| execution-while-not-rendered | |
| web-share | |
| ></iframe> | |
| </div> | |
| <div class="credits"> | |
| Model by <a href="https://sketchfab.com/Ibdzs" target="_blank" rel="noopener">Dorjzodovsuren Batjargal</a> | |
| on <a href="https://sketchfab.com" target="_blank" rel="noopener">Sketchfab</a> | |
| </div> | |
| </div> | |
| <!-- Plan Panel (hidden initially, will appear at 50% width) --> | |
| <div class="plan-container" id="planPanel"> | |
| <div class="plan-image-wrapper"> | |
| <img src="plan_image.jpg" alt="Floor Plan of Nomadic Echo Interior" /> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <br> | |
| <main> | |
| <div class="content-wrapper"> | |
| <!-- Viewer Panel (initially 70% width) --> | |
| <div class="viewer-container" id="viewerPanel"> | |
| <div class="viewer-header">Explore the 3D Model</div> | |
| <div class="sketchfab-embed-wrapper"> | |
| <iframe | |
| title="25d4c696-c992-43d5-ab5a-03212692591a" | |
| src="https://sketchfab.com/models/a82ea39d346f4521a488c628db820657/embed?autostart=1&camera=0&preload=1" | |
| allow="autoplay; fullscreen; xr-spatial-tracking" | |
| xr-spatial-tracking | |
| execution-while-out-of-viewport | |
| execution-while-not-rendered | |
| web-share | |
| ></iframe> | |
| </div> | |
| <div class="credits"> | |
| Model by <a href="https://sketchfab.com/Ibdzs" target="_blank" rel="noopener">Dorjzodovsuren Batjargal</a> | |
| on <a href="https://sketchfab.com" target="_blank" rel="noopener">Sketchfab</a> | |
| </div> | |
| </div> | |
| <!-- Plan Panel (hidden initially, will appear at 50% width) --> | |
| <div class="plan-container" id="planPanel"> | |
| <div class="plan-image-wrapper"> | |
| <img src="IMG_1251.JPG" alt="Floor Plan of Nomadic Echo Interior" /> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| © 2025 Nomadic Echo Interior • All rights reserved | |
| </footer> | |
| <script> | |
| const hintBtn = document.getElementById('hintBtn'); | |
| const viewerPanel = document.getElementById('viewerPanel'); | |
| const planPanel = document.getElementById('planPanel'); | |
| let planVisible = false; | |
| hintBtn.addEventListener('click', () => { | |
| planVisible = !planVisible; | |
| if (planVisible) { | |
| // Show plan panel at 50%, shrink viewer to 50% | |
| planPanel.style.display = 'flex'; | |
| viewerPanel.classList.add('half-width'); | |
| planPanel.classList.add('half-width'); | |
| hintBtn.textContent = 'Hide Floor Plan'; | |
| } else { | |
| // Hide plan panel, set viewer back to 70% | |
| planPanel.style.display = 'none'; | |
| viewerPanel.classList.remove('half-width'); | |
| planPanel.classList.remove('half-width'); | |
| hintBtn.textContent = 'Show Floor Plan'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |