Added iframe draft

app/config.sample.yaml

@@ -205,6 +205,7 @@ cards:
     ensuring agile principles are effectively implemented for sustainable success.
   url: https://www.agile-coach.world
   link_text: www.agile-coach.world
+  iframe: true
 - icon: 
     source: https://cloud.veen.world/s/logo_personal_coach_512x512/download
   title: Personal Coach
@@ -645,4 +646,5 @@ navigation:
       icon:
           class: fa-solid fa-scale-balanced
       url: https://s.veen.world/imprint
+      iframe: true
   

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;
+        }
+    });
+});

app/templates/moduls/base.html.j2

@@ -53,5 +53,6 @@
         <script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
         <script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
         <script src="{{ url_for('static', filename='js/custom_scrollbar.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
     </body>
 </html>

app/templates/moduls/card.html.j2

@@ -12,7 +12,7 @@
             <h3 class="card-title">{{ card.title }}</h3>
             <p class="card-text">{{ card.text }}</p>
             {% if card.url %}
-                <a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link">
+                <a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link {% if card.iframe %}iframe-link{% endif %}">
                     <i class="fa-solid fa-globe"></i> {{ card.link_text }}
                 </a>
             {% else %}

app/templates/moduls/navigation.html.j2

@@ -46,7 +46,7 @@
                     {% if item.url %}
                         <!-- Single Item -->
                         <li class="nav-item">
-                            <a class="nav-link btn btn-light" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
+                            <a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
                                 {{ render_icon_and_name(item) }}
                             </a>
                         </li>

test.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Iframe Navigation</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        #iframe-container {
+            width: 100%;
+            height: 80vh;
+            border: none;
+        }
+        nav {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+
+    <nav>
+        <a href="https://www.example.com" class="iframe-link">Beispiel 1</a> |
+        <a href="https://www.wikipedia.org" class="iframe-link">Wikipedia</a> |
+        <a href="https://www.openstreetmap.org" class="iframe-link">OpenStreetMap</a>
+    </nav>
+
+    <main id="main">
+        <p>Hier wird der Inhalt durch ein Iframe ersetzt.</p>
+    </main>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const links = document.querySelectorAll(".iframe-link");
+            const main = document.getElementById("main");
+
+            links.forEach(link => {
+                link.addEventListener("click", function (event) {
+                    event.preventDefault(); // Verhindert das Standardverhalten
+
+                    const url = this.getAttribute("href");
+
+                    // Prüfe, ob das Iframe bereits existiert
+                    let iframe = document.getElementById("iframe-container");
+
+                    if (!iframe) {
+                        // Neues Iframe erstellen
+                        iframe = document.createElement("iframe");
+                        iframe.id = "iframe-container";
+                        iframe.width = "100%";
+                        iframe.height = "600px";
+                        iframe.style.border = "none";
+                        main.innerHTML = ""; // Inhalt von main löschen
+                        main.appendChild(iframe);
+                    }
+
+                    iframe.src = url; // Lade die URL in das Iframe
+                });
+            });
+        });
+    </script>
+
+</body>
+</html>