Spaces:

Dorjzodovsuren
/

DesignVisualizer

Running

File size: 7,854 Bytes

<!DOCTYPE html>
<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% !important;
    }

    .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% !important;
        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>
    &copy; 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>