Modals

data/Kultur/0200_kultur_unikt.md

@@ -35,9 +35,29 @@ Portugal formår at kombinere historie, musik og mad med en afslappet livsstil.
 
 <h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
 
+<!-- Button to open Modal 1 -->
+<button onclick="openModal('modal1')" class="open">Open Modal 1</button>
 
+<!-- Button to open Modal 2 -->
+<button onclick="openModal('modal2')" class="open_inv">Open Modal 2</button>
 
+<!-- Modal 1 -->
+<div class="modal" id="modal1">
+    <div class="modal-content">
+        <h2>Modal 1</h2>
+        <p>This is the first modal.</p>
+        <button onclick="closeModal('modal1')">Close</button>
+    </div>
+</div>
 
+<!-- Modal 2 -->
+<div class="modal" id="modal2">
+    <div class="modal-content">
+        <h2>Modal 2</h2>
+        <p>This is the second modal.</p>
+        <button onclick="closeModal('modal2')">Close</button>
+    </div>
+</div>
 
 ### Slider test
     {{ slider(options={"width": 500, "height": 375}, images=[

data/Kultur/index.html

@@ -59,6 +59,28 @@
 <p>Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl.  </p>
 <h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
 
+<!-- Button to open Modal 1 -->
+<p><button onclick="openModal('modal1')" class="open">Open Modal 1</button></p>
+<!-- Button to open Modal 2 -->
+<p><button onclick="openModal('modal2')" class="open_inv">Open Modal 2</button></p>
+<!-- Modal 1 -->
+<div class="modal" id="modal1">
+    <div class="modal-content">
+        <h2>Modal 1</h2>
+        <p>This is the first modal.</p>
+        <button onclick="closeModal('modal1')">Close</button>
+    </div>
+</div>
+
+<!-- Modal 2 -->
+<div class="modal" id="modal2">
+    <div class="modal-content">
+        <h2>Modal 2</h2>
+        <p>This is the second modal.</p>
+        <button onclick="closeModal('modal2')">Close</button>
+    </div>
+</div>
+
 <h3>Slider test</h3>
 <pre><code>
     <main>

generated_data.json

@@ -6,17 +6,17 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Bolig i Portugal",
+            "name": "Populære områder i Portugal",
             "path": "Bolig",
             "author": "Henrik Jess"
         },
         {
-            "name": "El- og vandregninger i Portugal: Sådan påvirker de leveomkostningerne",
+            "name": "Supermarkedssammenligning",
             "path": "Budget",
             "author": "Henrik Jess"
         },
         {
-            "name": "Permanent ophold i Portugal",
+            "name": "Flytte permanent til Portugal",
             "path": "Flytning",
             "author": "Henrik Jess"
         },
@@ -36,7 +36,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Omkostninger ved at bo i Portugal vs Danmark",
+            "name": "Priser på mad og dagligvarer i Portugal",
             "path": "Hverdag",
             "author": "Henrik Jess"
         },
@@ -46,12 +46,12 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Portugals unikke kultur",
+            "name": "Nattelivet i Portugal",
             "path": "Kultur",
             "author": "Henrik Jess"
         },
         {
-            "name": "Livskvalitet i Portugal",
+            "name": "Portugiserne som mennesker",
             "path": "Livskvalitet",
             "author": "Henrik Jess"
         },
@@ -81,7 +81,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Er transport billigere i Portugal?",
+            "name": "Fordele ved offentlig transport i Portugal",
             "path": "Transport",
             "author": "Henrik Jess"
         }

templates/base_template.html

@@ -5,6 +5,42 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
     <link rel="stylesheet" href="/static/css/main.css">
+    <style>
+
+        /* Modal background with blur effect */
+        .modal {
+            display: none; /* Hidden by default */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
+            backdrop-filter: blur(8px); /* Blurs everything behind the modal */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 999999; /* Ensure it stays on top */
+        }
+
+        /* Modal content */
+        .modal-content {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            width: 400px;
+            text-align: center;
+            z-index: 50000; /* Content stays above the blurred overlay */
+        }
+        .open {
+            transform: rotate(15deg); /* Rotates button 15 degrees */
+        }
+        .open_inv {
+            transform: rotate(-15deg); /* Rotates button 15 degrees */
+        }
+
+    </style>
 </head>
 <body class="is-preload">
 <!-- Wrapper -->
@@ -45,6 +81,25 @@
 <script src="/static/js/breakpoints.min.js"></script>
 <script src="/static/js/util.js"></script>
 <script src="/static/js/main.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+    // Open a specific modal
+    function openModal(modalId) {
+        document.getElementById(modalId).style.display = 'flex';
+    }
 
+    // Close a specific modal
+    function closeModal(modalId) {
+        document.getElementById(modalId).style.display = 'none';
+    }
+
+    // Ensure all modals are hidden on page load
+    window.onload = () => {
+        const modals = document.querySelectorAll('.modal'); // Select all modals
+        modals.forEach(modal => {
+            modal.style.display = 'none';
+        });
+    };
+</script>
 </body>
 </html>