Update index.html

index.html

@@ -5,6 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>The Master Pokédex</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        .pkmn-layout-container {
+            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;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .pkmn-sprite img {
+            width: 100%;
+            height: auto;
+            image-rendering: pixelated;
+        }
+        .description-block {
+            flex: 1;
+            min-width: 300px;
+        }
+    </style>
 </head>
 <body>
 
@@ -12,20 +39,16 @@
         <h1>🔴 The Master Pokédex</h1>
         <div class="subtitle">Bypassing basic trivia to deliver exact competitive stats, catch mechanics, and regional lore.</div>
 
-        <!-- NAVIGATION CONTROLS -->
         <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>
         </div>
 
-        <!-- DYNAMIC GRID TARGET -->
         <div class="pokedex-grid" id="dex-grid">
-            <!-- JavaScript will safely drop your massive cards right here! -->
+            <!-- JavaScript will safely render your content here -->
         </div>
     </div>
-
     <script>
-        // Load the external database spreadsheet automatically
         fetch('pokemon.json')
             .then(response => response.json())
             .then(data => {
@@ -41,12 +64,19 @@
                             <span class="type-badge type-${pkmn.type1.toLowerCase()}">${pkmn.type1}</span>
                         </div>
 
-                        <p style="color: #cbd5e1; font-size: 1.05rem; margin-bottom: 20px;">
-                            <strong>Official Category:</strong> ${pkmn.category}<br>
-                            <strong>Exhaustive Description:</strong> ${pkmn.description}
-                        </p>
+                        <div class="pkmn-layout-container">
+                            <div class="pkmn-sprite">
+                                <img src="${pkmn.image_url}" alt="${pkmn.name}">
+                            </div>
+                            <div class="description-block">
+                                <p style="color: #cbd5e1; font-size: 1.05rem; margin: 0; line-height: 1.6;">
+                                    <strong>Official Category:</strong> ${pkmn.category}<br><br>
+                                    ${pkmn.description}
+                                </p>
+                            </div>
+                        </div>
 
-                        <button class="nav-btn" style="padding: 8px 18px; margin-bottom: 15px;" onclick="toggleData('data-${pkmn.id}', event)">Access Ultimate Master Data Panel ↓</button>
+                        <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>
                         
                         <div id="data-${pkmn.id}" class="deep-data hidden" style="padding: 20px;">
                             <h3 style="margin-top:0;">📊 Physical, Regional, & Breeding Statistics</h3>
@@ -76,7 +106,7 @@
                                 <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_defense || pkmn.sp_def}</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}
@@ -97,6 +127,32 @@
                                 <strong>Natural Habitats:</strong> ${pkmn.habitat}
                             </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>📖 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}