Update index.html

index.html

@@ -3,31 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Master Pokédex</title>
+    <title>The Master Global Atlas</title>
     <link rel="stylesheet" href="style.css">
     <style>
-        .pkmn-layout-container {
+        .atlas-layout {
             display: flex;
             gap: 25px;
             align-items: flex-start;
             flex-wrap: wrap;
         }
-        .pkmn-sprite {
-            width: 150px;
-            height: 150px;
-            background-color: #0d151f;
-            border-radius: 10px;
-            border: 2px solid #24354a;
+        .flag-box {
+            width: 160px;
+            height: 100px;
+            background-color: #0b0f19;
+            border-radius: 6px;
+            border: 1px solid #1e293b;
             display: flex;
             align-items: center;
             justify-content: center;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
         }
-        .pkmn-sprite img {
+        .flag-box img {
             width: 100%;
-            height: auto;
-            image-rendering: pixelated;
+            height: 100%;
+            object-fit: cover;
         }
-        .description-block {
+        .atlas-desc {
             flex: 1;
             min-width: 300px;
         }
@@ -36,138 +38,95 @@
 <body>
 
     <div class="container">
-        <h1>🔴 The Master Pokédex</h1>
-        <div class="subtitle">Bypassing basic trivia to deliver exact competitive stats, catch mechanics, and regional lore.</div>
+        <h1>🌐 The Master Global Atlas</h1>
+        <div class="subtitle">An uncompromised deep dive into the history, geopolitical anomalies, and cultural realities of Earth.</div>
 
+        <!-- NAVIGATION REGIONS -->
         <div class="nav-bar">
-            <button class="nav-btn active" onclick="filterRegion('all', event)">All Regions</button>
-            <button class="nav-btn" onclick="filterRegion('kanto', event)">Kanto</button>
+            <button class="nav-btn active" onclick="filterContinent('all', event)">All Continents</button>
+            <button class="nav-btn" onclick="filterContinent('europe', event)">Europe</button>
         </div>
 
-        <div class="pokedex-grid" id="dex-grid">
-            <!-- JavaScript will safely render your content here -->
+        <!-- ATLAS GRID TARGET -->
+        <div class="pokedex-grid" id="atlas-grid">
+            <!-- JavaScript Engine will build entries here -->
         </div>
     </div>
     <script>
-        fetch('pokemon.json')
+        // Automatically fetch data from your spreadsheet
+        fetch('atlas.json')
             .then(response => response.json())
             .then(data => {
-                const grid = document.getElementById('dex-grid');
-                grid.innerHTML = data.map(pkmn => `
-                    <div class="pokemon-card" data-region="${pkmn.region}" style="grid-column: 1 / -1; max-width: 100%;">
+                const grid = document.getElementById('atlas-grid');
+                grid.innerHTML = data.map(country => `
+                    <div class="pokemon-card" data-region="${country.region}" style="grid-column: 1 / -1; max-width: 100%;">
                         <div class="pkmn-header">
-                            <h2 class="pkmn-name" style="font-size: 2rem;">${pkmn.name}</h2>
-                            <span class="pkmn-number" style="font-size: 1.5rem;">${pkmn.number}</span>
+                            <h2 class="pkmn-name">${country.name}</h2>
+                            <span style="color: #64748b; font-weight: bold; font-family: monospace;">CAPITAL: ${country.capital}</span>
                         </div>
                         
                         <div class="type-container">
-                            <span class="type-badge type-${pkmn.type1.toLowerCase()}">${pkmn.type1}</span>
+                            <span class="type-badge">${country.category}</span>
                         </div>
 
-                        <div class="pkmn-layout-container">
-                            <div class="pkmn-sprite">
-                                <img src="${pkmn.image_url}" alt="${pkmn.name}">
+                        <div class="atlas-layout">
+                            <div class="flag-box">
+                                <img src="${country.flag_url}" alt="Flag of ${country.name}">
                             </div>
-                            <div class="description-block">
+                            <div class="atlas-desc">
                                 <p style="color: #cbd5e1; font-size: 1.05rem; margin: 0; line-height: 1.6;">
-                                    <strong>Official Category:</strong> ${pkmn.category}<br><br>
-                                    ${pkmn.description}
+                                    ${country.description}
                                 </p>
                             </div>
                         </div>
 
-                        <button class="nav-btn" style="padding: 10px 20px; margin-top: 20px; margin-bottom: 15px;" onclick="toggleData('data-${pkmn.id}', event)">Access Ultimate Master Data Panel ↓</button>
+                        <button class="nav-btn" style="padding: 10px 22px; margin-top: 25px; margin-bottom: 10px;" onclick="togglePanel('view-${country.id}', event)">Access Ultimate Master Data Panel ↓</button>
                         
-                        <div id="data-${pkmn.id}" class="deep-data hidden" style="padding: 20px;">
-                            <h3 style="margin-top:0;">📊 Physical, Regional, & Breeding Statistics</h3>
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 20px;">
+                        <div id="view-${country.id}" class="deep-data hidden">
+                            <h3 style="color: #38bdf8; margin-top: 0;">📊 Vital National Statistics</h3>
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; margin-bottom: 20px;">
                                 <div>
-                                    <strong>Height:</strong> ${pkmn.height}<br>
-                                    <strong>Weight:</strong> ${pkmn.weight}<br>
-                                    <strong>Abilities:</strong> ${pkmn.abilities}<br>
-                                    <strong>Evolutionary Chain:</strong> ${pkmn.evolution}
+                                    <strong>Total Land Area:</strong> ${country.area}<br>
+                                    <strong>Total Population:</strong> ${country.population}<br>
+                                    <strong>Official Languages:</strong> ${country.languages}
                                 </div>
                                 <div>
-                                    <strong>Egg Groups:</strong> ${pkmn.egg_groups}<br>
-                                    <strong>Egg Cycles:</strong> ${pkmn.egg_cycles}<br>
-                                    <strong>EV Yield:</strong> ${pkmn.ev_yield}<br>
-                                    <strong>Catch Rate:</strong> ${pkmn.catch_rate}
+                                    <strong>National Currency:</strong> ${country.currency}<br>
+                                    <strong>System of Government:</strong> ${country.government}<br>
+                                    <strong>Independence Milestone:</strong> ${country.independence}
                                 </div>
                                 <div>
-                                    <strong>Base Friendship:</strong> ${pkmn.friendship}<br>
-                                    <strong>Base Exp. Yield:</strong> ${pkmn.base_exp}<br>
-                                    <strong>Regional Indices:</strong> ${pkmn.indices}
+                                    <strong>Nominal GDP:</strong> ${country.gdp}<br>
+                                    <strong>Human Dev. Index (HDI):</strong> ${country.hdi}<br>
+                                    <strong>Regional Topography:</strong> ${country.topography}
                                 </div>
                             </div>
 
-                            <h3>⚔️ Precise Base Stats</h3>
-                            <div style="margin-bottom: 20px;">
-                                <div class="stat-line"><span class="stat-name">HP:</span> <span class="stat-val">${pkmn.hp}</span></div>
-                                <div class="stat-line"><span class="stat-name">Attack:</span> <span class="stat-val">${pkmn.atk}</span></div>
-                                <div class="stat-line"><span class="stat-name">Defense:</span> <span class="stat-val">${pkmn.def}</span></div>
-                                <div class="stat-line"><span class="stat-name">Special Attack:</span> <span class="stat-val">${pkmn.sp_atk}</span></div>
-                                <div class="stat-line"><span class="stat-name">Special Defense:</span> <span class="stat-val">${pkmn.sp_def}</span></div>
-                                <div class="stat-line"><span class="stat-name">Speed:</span> <span class="stat-val">${pkmn.speed}</span></div>
-                                <div class="special-note" style="background-color: #172535; border-color: #3b82f6;">
-                                    📈 <strong>Game Variable Note:</strong> ${pkmn.game_note}
-                                </div>
-                            </div>
+                            <h3 style="color: #38bdf8;">🛡️ Demographics & Climate Systems</h3>
+                            <div class="stat-line"><span class="stat-name">Ethnic/Religious Matrix:</span> <span class="stat-val">${country.demographics}</span></div>
+                            <div class="stat-line"><span class="stat-name">Climate Classifications:</span> <span class="stat-val">${country.climate}</span></div>
 
-                            <h3>🛡️ Type Effectiveness & Damage Multipliers</h3>
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; font-size: 0.9rem;">
-                                <div style="background: #221616; padding: 10px; border-radius: 4px; border-left: 3px solid #ef4444;"><strong style="color:#fca5a5;">Weak to (2x):</strong> ${pkmn.weak}</div>
-                                <div style="background: #14221a; padding: 10px; border-radius: 4px; border-left: 3px solid #22c55e;"><strong style="color:#a7f3d0;">Resists (0.5x):</strong> ${pkmn.resist}</div>
-                                <div style="background: #1c1c1c; padding: 10px; border-radius: 4px; border-left: 3px solid #94a3b8;"><strong style="color:#cbd5e1;">Immune to (0x):</strong> ${pkmn.immune}</div>
-                                <div style="background: #151e29; padding: 10px; border-radius: 4px; border-left: 3px solid #3b82f6;"><strong style="color:#93c5fd;">Damaged Normally (1x):</strong> ${pkmn.normal}</div>
-                            </div>
-
-                            <h3>🌍 Video Game Inclusion & Habitats</h3>
-                            <p style="font-size: 0.9rem; color: #cbd5e1;">
-                                <strong>Included Games:</strong> ${pkmn.games}<br>
-                                <strong>Natural Habitats:</strong> ${pkmn.habitat}
-                            </p>
+                            <h3 style="color: #38bdf8;">🗺️ Geopolitical Anomalies & Border Quirks</h3>
+                            <p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 20px;">${country.border_anomalies}</p>
 
-                            <h3>⚔️ Master Move Learnset (Level Up & Egg Moves)</h3>
-                            <table style="width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #111a24; border-radius: 6px; overflow: hidden; margin-bottom: 20px;">
-                                <thead>
-                                    <tr style="background: #1e2d3d; text-align: left;">
-                                        <th style="padding: 8px;">Lv.</th>
-                                        <th style="padding: 8px;">Move Name</th>
-                                        <th style="padding: 8px;">Type</th>
-                                        <th style="padding: 8px;">Cat.</th>
-                                        <th style="padding: 8px;">Power</th>
-                                        <th style="padding: 8px;">Acc.</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    ${pkmn.moves.map(move => `
-                                        <tr style="border-bottom: 1px solid #1e293b; ${move.level === 'Egg' ? 'background: #1a231b;' : ''}">
-                                            <td style="padding: 8px; color: ${move.level === 'Egg' ? '#a7f3d0;' : '#cbd5e1;'}">${move.level}</td>
-                                            <td style="padding: 8px; font-weight: bold;">${move.name}</td>
-                                            <td style="padding: 8px;">${move.type}</td>
-                                            <td style="padding: 8px;">${move.cat}</td>
-                                            <td style="padding: 8px;">${move.power}</td>
-                                            <td style="padding: 8px;">${move.acc}</td>
-                                        </tr>
-                                    `).join('')}
-                                </tbody>
-                            </table>
+                            <h3 style="color: #38bdf8;">📜 Comprehensive Historical Narrative</h3>
+                            <p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6;">${country.history_summary}</p>
 
-                            <h3>📖 Historical Field Narrative</h3>
-                            <p style="font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; border-top: 1px solid #24354a; padding-top: 10px; font-style: italic;">
-                                ${pkmn.story}
+                            <h3 style="color: #38bdf8;">📖 Field Accounts & Cultural Narrative</h3>
+                            <p style="font-size: 0.95rem; line-height: 1.6; color: #94a3b8; border-top: 1px solid #1e293b; padding-top: 15px; font-style: italic; margin: 0;">
+                                ${country.story}
                             </p>
                         </div>
                     </div>
                 `).join('');
             });
 
-        function toggleData(id, event) {
+        function togglePanel(id, event) {
             event.stopPropagation();
             document.getElementById(id).classList.toggle('hidden');
         }
 
-        function filterRegion(region, event) {
+        function filterContinent(region, event) {
             const buttons = document.querySelectorAll('.nav-bar .nav-btn');
             buttons.forEach(btn => btn.classList.remove('active'));
             event.target.classList.add('active');