removed non functional js for family image container

static/js/index.js

@@ -70,101 +70,4 @@ document.addEventListener("DOMContentLoaded", function () {
 
         breedingIframe.src = breedingIframeSrc;
     }
-    document.addEventListener("DOMContentLoaded", function () {
-        const familyImagesContainer = document.getElementById("familyImagesContainer");
-        const monsterDropdown = document.getElementById("monsterDropdown");
-        const monsterIframe = document.getElementById("monsterIframe");
-        const breedingIframe = document.getElementById("breedingIframe");
-    
-        // Initialize family images and iframes
-        updateFamilyImages();
-        updateIframes();
-    
-        // Fetch families data from the server
-        fetch("/get_families")
-            .then(response => response.json())
-            .then(data => {
-                populateFamilyImages(familyImagesContainer, data);
-                updateIframes();
-            })
-            .catch(error => console.error("Error fetching families:", error));
-    
-        familyImagesContainer.addEventListener("click", function (event) {
-            const selectedFamily = event.target.dataset.family;
-    
-            if (selectedFamily) {
-                // Update monsterDropdown and trigger iframes update
-                updateMonsterDropdown(selectedFamily);
-                updateIframes();
-            }
-        });
-    
-        monsterDropdown.addEventListener("change", function () {
-            updateIframes();
-        });
-    
-        function populateFamilyImages(container, data) {
-            container.innerHTML = ''; // Clear existing images
-    
-            // Populate family images
-            data.forEach(family => {
-                const image = document.createElement("img");
-                image.src = `../static/img/${family}.png`;
-                image.alt = family;
-                image.dataset.family = family; // Set dataset for identification
-                container.appendChild(image);
-            });
-        }
-    
-        function updateFamilyImages() {
-            // Fetch families data from the server
-            fetch("/get_families")
-                .then(response => response.json())
-                .then(data => populateFamilyImages(familyImagesContainer, data))
-                .catch(error => console.error("Error fetching families:", error));
-        }
-    
-        function updateMonsterDropdown(selectedFamily) {
-            // Fetch monsters data from the server based on the selected family
-            fetch(`/get_monsters?family=${selectedFamily}`)
-                .then(response => response.json())
-                .then(data => populateDropdown(monsterDropdown, data))
-                .catch(error => console.error("Error fetching monsters:", error));
-        }
-    
-        function populateDropdown(dropdown, data) {
-            // Clear existing options
-            dropdown.innerHTML = '<option value="">All Monsters</option>';
-    
-            // Populate dropdown options
-            data.forEach(item => {
-                const option = document.createElement("option");
-                option.value = item;
-                option.text = item;
-                dropdown.appendChild(option);
-            });
-        }
-    
-        function updateIframes() {
-            const selectedFamily = familyDropdown.value;
-            const selectedMonster = monsterDropdown.value;
-    
-            // Update monsterIframe src based on selected family and monster
-            const monsterIframeSrc = selectedMonster
-                ? `/monster/${selectedMonster}`
-                : selectedFamily
-                ? `/monster/${selectedFamily}`
-                : "about:blank";
-    
-            monsterIframe.src = monsterIframeSrc;
-    
-            // Update breedingIframe src based on the selected monster
-            const breedingIframeSrc = selectedMonster
-                ? `/get_breeding_combinations?monster=${selectedMonster}`
-                : "about:blank";
-    
-            breedingIframe.src = breedingIframeSrc;
-        }
-    
-    });
 });

static/style/output.css

@@ -540,6 +540,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .static {
   position: static;
 }
@@ -572,27 +606,11 @@ video {
   display: grid;
 }
 
-.h-96 {
-  height: 24rem;
-}
-
-.h-auto {
-  height: auto;
-}
-
-.w-auto {
-  width: auto;
-}
-
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -605,10 +623,6 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.justify-center {
-  justify-content: center;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }

templates/index.html

@@ -11,7 +11,6 @@
     <h1 class="text-2xl font-black text-white">
       Welcome to the Dragon Warrior Monsters 2 App
     </h1>
-    <div id="familyImagesContainer" class="flex mt-2"></div>
     <div>
       <label for="familyDropdown">Select Family:</label>
       <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">