Skip to content

Commit d9abe93

Browse files
yejiyangyejiyang
committed
frontend: reword text and add headline
1 parent aa5016f commit d9abe93

File tree

2 files changed

+41
-13
lines changed

2 files changed

+41
-13
lines changed

‎frontend/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/index.html‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -584,6 +584,27 @@
584584
left: 12px;
585585
}
586586

587+
/* Map Headline Overlay */
588+
.map-headline {
589+
position: fixed;
590+
top: 20px;
591+
left: 50%;
592+
transform: translateX(-50%);
593+
background: rgba(255, 255, 255, 0.95);
594+
backdrop-filter: blur(8px);
595+
padding: 12px 24px;
596+
border-radius: 8px;
597+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
598+
border: 1px solid rgba(0, 0, 0, 0.1);
599+
z-index: 1000;
600+
font-family: 'Roboto', 'Arial', sans-serif;
601+
font-size: 18px;
602+
font-weight: 600;
603+
color: #1a73e8;
604+
text-align: center;
605+
white-space: nowrap;
606+
}
607+
587608
/* Version Info */
588609
#version {
589610
position: fixed;
@@ -725,6 +746,11 @@
725746
<body>
726747
<div id="map"></div>
727748

749+
<!-- Map Headline Overlay -->
750+
<div class="map-headline">
751+
GTM Global tsunami hazard – 2017 version
752+
</div>
753+
728754
<!-- Combined Information and Legend Panel -->
729755
<div class="map-info-panel">
730756
<!-- Dataset Information Panel -->
@@ -747,7 +773,7 @@
747773
<!-- Summary shown when expanded -->
748774
<div class="info-summary">
749775
<span class="info-summary-item">
750-
<span class="info-summary-value">200K+</span> points
776+
<span class="info-summary-value">200K+</span> coastal points
751777
</span>
752778
<span class="info-summary-item">
753779
<span class="info-summary-value">Global</span> coverage
@@ -761,15 +787,15 @@
761787
<div class="info-content" id="info-content">
762788
<div class="info-stat">
763789
<span class="info-stat-label">Total Points:</span>
764-
<span class="info-stat-value">~200,000</span>
790+
<span class="info-stat-value">~200,000 Coastal points</span>
765791
</div>
766792
<div class="info-stat">
767793
<span class="info-stat-label">Coverage:</span>
768794
<span class="info-stat-value">Global</span>
769795
</div>
770796
<div class="info-stat">
771797
<span class="info-stat-label">Data Type:</span>
772-
<span class="info-stat-value">Tsunami Runup Heights</span>
798+
<span class="info-stat-value">Maximum Tsunami Inundation Height (m)</span>
773799
</div>
774800
<div class="info-stat">
775801
<span class="info-stat-label">Return Periods:</span>
@@ -783,11 +809,13 @@
783809
<div class="info-instructions">
784810
<h4>How to Use:</h4>
785811
<ul>
786-
<li>Click any point to see detailed runup data</li>
787-
<li>Chart shows runup heights vs return periods</li>
812+
<li>Click on any point to see the local hazard curve</li>
813+
<li>The hazard curve shows the hazard curve at the selected point</li>
788814
<li>Zoom in for more detail and larger points</li>
789815
<li>Toggle satellite view with map controls</li>
790-
<li>Download CSV data from popup</li>
816+
<li>Download CSV data from single points from popup</li>
817+
<li>Download complete dataset here: <a href="https://zenodo.org/record/100000000" target="_blank"
818+
rel="noopener">https://zenodo.org/record/100000000</a></li>
791819
</ul>
792820
</div>
793821

@@ -807,7 +835,7 @@ <h4>How to Use:</h4>
807835
<!-- Risk Legend Panel -->
808836
<div class="map-legend" onclick="toggleLegend()" id="legend-panel">
809837
<div class="legend-header">
810-
<div class="legend-title">Tsunami Risk</div>
838+
<div class="legend-title">Maximum Inundation Height (m)</div>
811839
<span class="legend-toggle-btn" onclick="event.stopPropagation(); toggleLegend()">⌄</span>
812840
</div>
813841

@@ -831,25 +859,25 @@ <h4>How to Use:</h4>
831859
<div class="legend-color" style="background-color: #4CAF50;"></div>
832860
<div class="legend-label">Low Risk</div>
833861
</div>
834-
<div class="legend-description">0-5m runup height • Minimal damage</div>
862+
<div class="legend-description">0-5m inundation height • Minimal damage</div>
835863

836864
<div class="legend-item">
837865
<div class="legend-color" style="background-color: #FFC107;"></div>
838866
<div class="legend-label">Medium Risk</div>
839867
</div>
840-
<div class="legend-description">5-10m runup height • Moderate impact</div>
868+
<div class="legend-description">5-10m inundation height • Moderate impact</div>
841869

842870
<div class="legend-item">
843871
<div class="legend-color" style="background-color: #FF9800;"></div>
844872
<div class="legend-label">High Risk</div>
845873
</div>
846-
<div class="legend-description">10-20m runup height • Significant damage</div>
874+
<div class="legend-description">10-20m inundation height • Significant damage</div>
847875

848876
<div class="legend-item">
849877
<div class="legend-color" style="background-color: #F44336;"></div>
850878
<div class="legend-label">Very High Risk</div>
851879
</div>
852-
<div class="legend-description">>20m runup height • Catastrophic damage</div>
880+
<div class="legend-description">>20m inundation height • Catastrophic damage</div>
853881
</div>
854882
</div>
855883
</div>

0 commit comments

Comments
 (0)