Added iframe draft

app/static/js/iframe.js

@@ -0,0 +1,46 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const links = document.querySelectorAll(".iframe-link");
+    const mainElement = document.querySelector("main");
+    const container = document.querySelector(".container");
+
+    links.forEach(link => {
+        link.addEventListener("click", function (event) {
+            event.preventDefault(); // Prevent default link behavior
+
+            const url = this.getAttribute("href");
+
+            // Fix the original height of the main element if not already set
+            if (!mainElement.style.height) {
+                mainElement.style.height = `${mainElement.clientHeight}px`;
+            }
+
+            // Replace the container class with container-fluid
+            if (container && !container.classList.contains("container-fluid")) {
+                container.classList.replace("container", "container-fluid");
+            }
+
+            // Check if the iframe already exists
+            let iframe = mainElement.querySelector("iframe");
+
+            if (!iframe) {
+                // Create a new iframe
+                iframe = document.createElement("iframe");
+                iframe.width = "100%";
+                iframe.style.border = "none";
+                iframe.style.height = mainElement.style.height; // Apply fixed height
+                mainElement.innerHTML = ""; // Clear main content
+                mainElement.appendChild(iframe);
+            }
+
+            iframe.src = url; // Load the URL into the iframe
+        });
+    });
+
+    // Adjust iframe height on window resize (optional, to keep it responsive)
+    window.addEventListener("resize", function () {
+        const iframe = mainElement.querySelector("iframe");
+        if (iframe) {
+            iframe.style.height = mainElement.style.height;
+        }
+    });
+});