Bug somewhere

app/services/markdown_render.py

@@ -47,30 +47,16 @@ def slider(options, images):
     width = options.get("width", 500)
     height = options.get("height", 375)
 
-    # First image with a <figure> and <figcaption>
+    html_content = []
-    first_image_html = f'''
+    button_content = []
-    <figure class="relative my-0 slider-bg">
+
-        <img src="{images[0]}" width="{width}" height="{height}">
+    #for i, val in enumerate(images):
-        <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
+    #    html_content.append(f"""<button onclick="openModal('modal{i}')" class="open"> Open Modal {i} </button>""")
-            <h1 class="my-0">Fylgja CSS Slider</h1>
+    #    button_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <button onclick="closeModal('modal{i}')">Close</button> </div> </div>""")
-        </figcaption>
+    #html  = '\n'.join( html_content )
-    </figure>
+    #print(html)
-    '''
+    return """Hej"""
-    ## Todo: https://codepen.io/dp_lewis/pen/WNZQzN
-    # Remaining images as plain <img> tags
-    other_images_html = "".join([
-        f'<img src="{img}" width="{width}" height="{height}">' for img in images[1:]
-    ])
 
-    # Final combined HTML
-    return f'''
-    <main>
-        <div class="scroll-slider hide-scrollbar">
-            {first_image_html}
-            {other_images_html}
-        </div>
-    </main>
-    '''
 
 def create_jinja_environment():
     """Create and configure the Jinja2 environment."""
@@ -102,6 +88,7 @@ def render_markdown_with_jinja(markdown_content: str):
 
     # Step 2: Pass the resulting HTML with Jinja2 custom tags through Jinja2
     env = create_jinja_environment()
+
     template = env.get_template("base_template")
     final_html = template.render(content=intermediate_html)
 

data/Kultur/0200_kultur_unikt.md

@@ -35,29 +35,6 @@ 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,45 +59,7 @@
 <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>
-        <div class="scroll-slider hide-scrollbar">
-            
-    <figure class="relative my-0 slider-bg">
-        <img src="https://picsum.photos/id/34/500/375" width="500" height="375">
-        <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
-            <h1 class="my-0">Fylgja CSS Slider</h1>
-        </figcaption>
-    </figure>
-    
-            <img src="https://picsum.photos/id/42/500/375" width="500" height="375"><img src="https://picsum.photos/id/72/500/375" width="500" height="375"><img src="https://picsum.photos/id/94/500/375" width="500" height="375">
-        </div>
-    </main>
-    
-</code></pre>
             </div>
             <hr>
         </section>

static/css/main.css

@@ -2472,6 +2472,39 @@ button:disabled,
   }
 }
 
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(8px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999999;
+}
+
+.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;
+}
+
+.open {
+  transform: rotate(15deg);
+}
+
+.open_inv {
+  transform: rotate(-15deg);
+}
+
 /* Wrapper */
 #wrapper {
   display: -moz-flex;

static/js/modal_handler.js

@@ -0,0 +1,27 @@
+// Open a specific modal
+function openModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'flex';
+    } else {
+        console.error(`Modal with ID "${modalId}" not found.`);
+    }
+}
+
+// Close a specific modal
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'none';
+    } else {
+        console.error(`Modal with ID "${modalId}" not found.`);
+    }
+}
+
+// Ensure all modals are hidden on page load
+document.addEventListener('DOMContentLoaded', () => {
+    const modals = document.querySelectorAll('.modal'); // Select all modals
+    modals.forEach(modal => {
+        modal.style.display = 'none';
+    });
+});

static/sass/components/_modals.scss

@@ -0,0 +1,43 @@
+// Variables
+$modal-bg: rgba(0, 0, 0, 0.3);
+$modal-blur: 8px;
+$modal-z-index: 999999;
+$modal-content-z-index: 50000;
+$modal-content-bg: #fff;
+$modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+
+// Modal background with blur effect
+.modal {
+  display: none; // Hidden by default
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: $modal-bg; // Semi-transparent dark background
+  backdrop-filter: blur($modal-blur); // Blurs everything behind the modal
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: $modal-z-index; // Ensure it stays on top
+}
+
+// Modal content
+.modal-content {
+  background-color: $modal-content-bg;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: $modal-content-shadow;
+  width: 400px;
+  text-align: center;
+  z-index: $modal-content-z-index; // Content stays above the blurred overlay
+}
+
+// Rotating buttons
+.open {
+  transform: rotate(15deg); // Rotates button 15 degrees clockwise
+}
+
+.open_inv {
+  transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
+}

static/sass/main.scss

@@ -50,6 +50,7 @@
 	@import 'components/mini-posts';
 	@import 'components/features';
 	@import 'components/posts';
+	@import 'components/modals';
 
 // Layout.
 

templates/base_template.html

@@ -5,42 +5,6 @@
     <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 -->
@@ -81,25 +45,7 @@
 <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 src="/static/js/modal_handler.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>