dynamic splitting

index.html

@@ -35,27 +35,58 @@
       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;
-      flex-direction: column;
-      align-items: center;
-      padding: 2rem 1rem;
-      gap: 2rem;
+      justify-content: center;
+      padding: 0 1rem 2rem;
+    }
+
+    .content-wrapper {
+      display: flex;
       width: 100%;
-      max-width: 900px;
-      margin: 0 auto;
+      max-width: 1200px;
+      gap: 1.5rem;
+      justify-content: center;
     }
 
-    /* Sketchfab embed section (full width) */
+    /* Viewer container */
     .viewer-container {
-      width: 100%;
       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 {
@@ -88,7 +119,7 @@
       text-align: right;
       font-size: 0.8rem;
       color: #777;
-      padding: 0.5rem 1rem 1rem;
+      padding: 0.5rem 1rem;
     }
 
     .credits a {
@@ -96,52 +127,34 @@
       text-decoration: none;
     }
 
-    /* Plan section with collapsible image (below) */
+    /* Plan container (hidden initially) */
     .plan-container {
-      width: 100%;
       background-color: #fff;
       border-radius: 12px;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
       overflow: hidden;
-      display: flex;
+      display: none; /* hidden by default */
       flex-direction: column;
+      /* Will become half-width when shown */
+      flex: 0 0 50%;
+      transition: flex 0.3s ease;
     }
 
-    .plan-header {
-      background-color: #283e51;
-      color: #fff;
-      padding: 1rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 1.25rem;
-      letter-spacing: 0.5px;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    /* Arrow icon style */
-    .arrow-toggle {
-      font-size: 1.25rem;
-      transition: transform 0.2s ease-in-out;
-    }
-
+    /* Plan image wrapper to maintain 16:9 aspect ratio */
     .plan-image-wrapper {
-      overflow: hidden;
-      max-height: 0;
-      transition: max-height 0.3s ease;
-    }
-
-    /* When expanded, allow full height */
-    .plan-image-wrapper.expanded {
-      max-height: 1000px; /* Adjust if needed */
+      position: relative;
+      width: 100%;
+      padding-top: 56.25%;
+      background-color: #000;
     }
 
     .plan-image-wrapper img {
-      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
-      height: auto;
-      border-top: 1px solid #ddd;
+      height: 100%;
+      object-fit: contain;
     }
 
     footer {
@@ -152,14 +165,29 @@
       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,
-      .plan-header {
+      .viewer-header {
         font-size: 1rem;
       }
+      .hint-button {
+        width: 80%;
+        font-size: 0.9rem;
+      }
     }
   </style>
 </head>
@@ -168,35 +196,38 @@
     <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>
+
   <main>
-    <!-- Sketchfab Viewer Section -->
-    <div class="viewer-container">
-      <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/3d0aefaafa9c4143a9e67e67895dc4da/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 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/3d0aefaafa9c4143a9e67e67895dc4da/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>
-      <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 Image Section (collapsible, below) -->
-    <div class="plan-container">
-      <div class="plan-header" id="planToggle">
-        <span>Floor Plan</span>
-        <span class="arrow-toggle" id="arrowIcon">►</span>
-      </div>
-      <div class="plan-image-wrapper" id="planWrapper">
-        <img src="plan_image.jpg" alt="Floor Plan of Nomadic Echo Interior" />
+      <!-- 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>
@@ -206,27 +237,27 @@
   </footer>
 
   <script>
-    // Grab elements
-    const planToggle = document.getElementById('planToggle');
-    const planWrapper = document.getElementById('planWrapper');
-    const arrowIcon  = document.getElementById('arrowIcon');
-
-    // Start collapsed
-    let isExpanded = false;
-
-    planToggle.addEventListener('click', () => {
-      isExpanded = !isExpanded;
-
-      if (isExpanded) {
-        // Expand: add class
-        planWrapper.classList.add('expanded');
-        // Change arrow icon
-        arrowIcon.textContent = '▼';
+    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 {
-        // Collapse: remove class
-        planWrapper.classList.remove('expanded');
-        // Reset arrow icon
-        arrowIcon.textContent = '►';
+        // 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>