Merge pull request #23 from com-480-data-visualization/bug/welcome-page-separation

Bug/welcome page separation

Author: lunasrc

docs/country_timeline.html

@@ -74,11 +74,11 @@
   .brand-dim { color: rgba(255,255,255,0.6); font-style: italic; }
 
   .breadcrumb {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
+    justify-content: center;
     font-family: 'Inter', sans-serif;
     font-size: 11px;
     font-style: italic;
@@ -87,6 +87,7 @@
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
     white-space: nowrap;
+    overflow: hidden;
   }
   .breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
   .breadcrumb a:hover { color: rgba(255,255,255,0.9); }
@@ -892,7 +893,7 @@ <h2>No records found.</h2>
     <span class="brand-earth">Earth</span> Natural Disaster Museum<span class="brand-dim"> · est. 2026</span>
   </div>
   <nav class="breadcrumb">
-    <a href="index.html">The Globe: Earth</a>
+    <a href="globe.html">The Globe: Earth</a>
     <span class="sep">/</span>
     <span id="breadcrumbCountry">—</span>
   </nav>

docs/css/style.css

@@ -430,11 +430,11 @@ button {
 }
 
 .breadcrumb {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
@@ -444,6 +444,7 @@ button {
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.6);
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .breadcrumb .sep {
@@ -482,6 +483,32 @@ button {
 .pill-btn .arrow { transition: transform .3s ease; }
 .pill-btn:hover .arrow { transform: translateX(3px); }
 
+@media (max-width: 640px) {
+  .top-bar {
+    height: auto;
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  .brand {
+    text-align: center;
+    white-space: normal;
+  }
+  .breadcrumb {
+    display: none;
+  }
+  .top-bar-action {
+    min-width: 0;
+    justify-content: center;
+  }
+  /* direct pill-btn child (country_timeline.html) */
+  .top-bar > .pill-btn {
+    font-size: 14px;
+    padding: 7px 20px;
+  }
+}
+
 #museum-nav {
   position: fixed;
   bottom: 30px;
@@ -537,7 +564,7 @@ button {
    ============================================ */
 
 #scene-globe {
-  background: var(--void);
+  background: var(--bgcolor);
 }
 
 #globeCanvas {
@@ -1250,30 +1277,19 @@ button {
    SCENE 2: 3D GLOBE WITH SPACE BACKGROUND
    ============================================ */
 
-#globeContainer {
+#starfieldCanvas {
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at center, #0a0e27 0%, #020308 100%);
-  overflow: hidden;
-  z-index: 1;
+  z-index: 0;
+  pointer-events: none;
 }
 
-/* Starfield background */
-#globeContainer::before {
-  content: '';
+#globeContainer {
   position: absolute;
   inset: 0;
-  background-image:
-    radial-gradient(2px 2px at 20px 30px, white, transparent),
-    radial-gradient(2px 2px at 60px 70px, white, transparent),
-    radial-gradient(1px 1px at 50px 50px, white, transparent),
-    radial-gradient(1px 1px at 130px 80px, white, transparent),
-    radial-gradient(2px 2px at 90px 10px, white, transparent);
-  background-repeat: repeat;
-  background-size: 200px 200px;
-  opacity: 0.5;
-  animation: twinkle 100s linear infinite;
-  pointer-events: none;
+  background: transparent;
+  overflow: hidden;
+  z-index: 2;
 }
 
 @keyframes twinkle {
@@ -1290,7 +1306,7 @@ button {
 
 .globe-filter-panel {
   position: absolute;
-  top: 18px;
+  top: calc(74px + 18px);
   left: 22px;
   bottom: auto;
   width: 285px;
@@ -1302,7 +1318,7 @@ button {
   border: 1px solid #353738;
   border-radius: 20px;
   color: var(--text);
-  max-height: calc(100vh - 36px);
+  max-height: calc(100vh - 74px - 36px);
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 80;
@@ -1614,7 +1630,7 @@ button {
 @media (max-width: 900px) {
   .globe-filter-panel {
     left: 16px;
-    top: 16px;
+    top: calc(74px + 16px);
     width: min(285px, calc(100vw - 32px));
   }
 
@@ -1627,7 +1643,8 @@ button {
 
 @media (max-width: 640px) {
   .globe-filter-panel {
-    max-height: calc(100vh - 32px);
+    top: calc(92px + 16px);
+    max-height: calc(100vh - 92px - 32px);
     overflow-y: auto;
   }
 

docs/earth_story.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Natural Disaster Museum · Earth Story</title>
+
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Special+Elite&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="css/style.css">
+
+  <!-- D3 -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+</head>
+
+<body>
+  <header class="top-bar" id="top-bar">
+    <div class="brand">
+      <span class="brand-earth">Earth</span> Natural Disaster Museum<span class="brand-dim"> · est. 2026</span>
+    </div>
+    <nav class="breadcrumb" id="top-breadcrumb">
+      <a class="crumb crumb-link" href="globe.html">The Globe: Earth</a>
+      <span class="sep">/</span>
+      <span class="crumb">Earth Story</span>
+    </nav>
+    <div class="top-bar-action" id="top-bar-action"></div>
+  </header>
+
+  <div id="app">
+    <div id="scene-story" class="scene active">
+      <div class="story-header">
+        <h2 class="story-title">EARTH STORY</h2>
+        <p class="story-subtitle">Analysing 50 years of global disaster trends</p>
+      </div>
+
+      <!-- 4 exhibit frames in a 2x2 grid -->
+      <div class="exhibits-hall" id="overviewHall">
+        <div class="wall-exhibit" id="exhibit-frequency">
+          <div class="exhibit-spotlight"></div>
+          <div class="exhibit-label">EXHIBIT I</div>
+          <div class="exhibit-wall-title">THE RISING TIDE</div>
+          <div class="exhibit-wall-subtitle">Disaster frequency by subgroup, 1975-2025</div>
+          <div class="exhibit-viz-area" id="viz-frequency"></div>
+          <div class="exhibit-caption">This stacked area chart reveals a dramatic increase in disaster frequency over five decades. Climate-related disasters (Meteorological, Hydrological, Climatological) show the steepest rise, while Geophysical events remain relatively stable, underscoring the growing impact of climate change.</div>
+        </div>
+
+        <div class="wall-exhibit" id="exhibit-mortality">
+          <div class="exhibit-spotlight"></div>
+          <div class="exhibit-label">EXHIBIT II</div>
+          <div class="exhibit-wall-title">THE MORTALITY CRISIS</div>
+          <div class="exhibit-wall-subtitle">Annual death toll from natural disasters, 1975-2025</div>
+          <div class="exhibit-viz-area" id="viz-mortality"></div>
+          <div class="exhibit-caption">Disaster mortality shows extreme variability over five decades, with devastating spikes marking catastrophic events like the 2004 Indian Ocean Tsunami and 2010 Haiti Earthquake. Despite advances in early warning systems, these peaks demonstrate the persistent vulnerability of populations in high-risk regions.</div>
+        </div>
+
+        <div class="wall-exhibit" id="exhibit-economic">
+          <div class="exhibit-spotlight"></div>
+          <div class="exhibit-label">EXHIBIT III</div>
+          <div class="exhibit-wall-title">THE HUMAN TOLL</div>
+          <div class="exhibit-wall-subtitle">Affected populations over time, 1975-2025</div>
+          <div class="exhibit-viz-area" id="viz-economic"></div>
+          <div class="exhibit-caption">The number of people affected by natural disasters has grown substantially, reflecting both population growth in hazard-prone areas and improved disaster reporting. Peak years show hundreds of millions impacted, underscoring the scale of displacement, injury, and disruption caused by major events.</div>
+        </div>
+
+        <div class="wall-exhibit" id="exhibit-geography">
+          <div class="exhibit-spotlight"></div>
+          <div class="exhibit-label">EXHIBIT IV</div>
+          <div class="exhibit-wall-title">REGIONAL VULNERABILITY</div>
+          <div class="exhibit-wall-subtitle">Disaster burden across continents</div>
+          <div class="exhibit-viz-area" id="viz-geography"></div>
+          <div class="exhibit-caption">Asia bears the brunt of global disaster impacts, experiencing over half of all natural disasters and the majority of casualties. This regional disparity reflects both geographic exposure to hazards and socioeconomic vulnerabilities that amplify disaster consequences in developing nations.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/data.js"></script>
+  <script src="js/scene4_story.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      await initData();
+      Scene4.init();
+    });
+  </script>
+</body>
+</html>