From d5728a0dbe951863ee3ba611f075941c0d726f87 Mon Sep 17 00:00:00 2001
From: shenron <shenron@n8lab.io>
Date: Sat, 14 Feb 2026 14:17:46 -0500
Subject: [PATCH] Phase E: Implement two-column UI layout with SVG map and data
 display

---
 src/app/map/map.css  | 88 ++++++++++++++++++++++++++++++++++++++++++++
 src/app/map/map.html | 46 ++++++++++++++++++++++-
 2 files changed, 133 insertions(+), 1 deletion(-)

diff --git a/src/app/map/map.css b/src/app/map/map.css
index e69de29..7d19ddb 100644
--- a/src/app/map/map.css
+++ b/src/app/map/map.css
@@ -0,0 +1,88 @@
+.container {
+  display: flex;
+  min-height: 100vh;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.map-column {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.data-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.map-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+
+.world-map {
+  max-width: 100%;
+  height: auto;
+  cursor: pointer;
+}
+
+.country-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.info-item {
+  padding: 0.75rem;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.info-item strong {
+  color: #2c3e50;
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.loading, .error, .placeholder {
+  padding: 2rem;
+  text-align: center;
+  color: #666;
+  font-style: italic;
+}
+
+.error {
+  color: #c0392b;
+  background-color: #fadbd8;
+  border-radius: 4px;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: #2c3e50;
+  font-size: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+  
+  .map-column, .data-column {
+    flex: 1;
+  }
+}
diff --git a/src/app/map/map.html b/src/app/map/map.html
index 088f942..515b37d 100644
--- a/src/app/map/map.html
+++ b/src/app/map/map.html
@@ -1 +1,45 @@
-<p>map works!</p>
+<div class="container">
+  <div class="map-column">
+    <h2>Interactive World Map</h2>
+    <div class="map-container">
+      <img src="assets/map-image.svg" alt="World Map" class="world-map" />
+    </div>
+  </div>
+  
+  <div class="data-column">
+    <h2>Country Information</h2>
+    
+    <div *ngIf="loading" class="loading">
+      Loading country data...
+    </div>
+    
+    <div *ngIf="error" class="error">
+      {{ error }}
+    </div>
+    
+    <div *ngIf="countryData && !loading" class="country-info">
+      <div class="info-item">
+        <strong>Country Name:</strong> {{ countryData.name }}
+      </div>
+      <div class="info-item">
+        <strong>Capital:</strong> {{ countryData.capital }}
+      </div>
+      <div class="info-item">
+        <strong>Region:</strong> {{ countryData.region }}
+      </div>
+      <div class="info-item">
+        <strong>Income Level:</strong> {{ countryData.incomeLevel }}
+      </div>
+      <div class="info-item">
+        <strong>Longitude:</strong> {{ countryData.longitude }}
+      </div>
+      <div class="info-item">
+        <strong>Latitude:</strong> {{ countryData.latitude }}
+      </div>
+    </div>
+    
+    <div *ngIf="!countryData && !loading && !error" class="placeholder">
+      Click on a country to view its information
+    </div>
+  </div>
+</div>