Update index.html

index.html

@@ -52,8 +52,17 @@
             <!-- JavaScript Engine will build entries here -->
         </div>
     </div>
-    <script>
-        // Automatically fetch data from your spreadsheet
+      <script>
+        // SMART LOGIC: Automatically converts any two-letter country code into a colorful flag emoji!
+        function getFlagEmoji(countryCode) {
+            const codePoints = countryCode
+                .toUpperCase()
+                .split('')
+                .map(char => 127397 + char.charCodeAt(0));
+            return String.fromCodePoint(...codePoints);
+        }
+
+        // Fetch your spreadsheet data
         fetch('atlas.json')
             .then(response => response.json())
             .then(data => {
@@ -70,8 +79,9 @@
                         </div>
 
                         <div class="atlas-layout">
-                            <div class="flag-box">
-                                <img src="${country.flag_url}" alt="Flag of ${country.name}">
+                            <!-- AUTOMATED IMAGE BOX: Renders a large, scalable native flag with no internet dependencies! -->
+                            <div style="font-size: 5rem; line-height: 1; padding-right: 25px; user-select: none;">
+                                ${getFlagEmoji(country.id)}
                             </div>
                             <div class="atlas-desc">
                                 <p style="color: #cbd5e1; font-size: 1.05rem; margin: 0; line-height: 1.6;">