Better CSS

app/services/markdown_render.py

@@ -54,8 +54,7 @@ def slider(options, images):
             html_content.append(f"""<button onclick="openModal('modal{i}')" class="open">  <img src="{val}" class="thumbnail"></button>""".strip())
         else:
             html_content.append(f"""<button onclick="openModal('modal{i}')" class="open_inv">  <img src="{val}" class="thumbnail" ></button>""".strip())
-
+        html_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button><button class="next-btn" onclick="nextModal('modal{i}', 'modal{i+1}')">Next</button></div> </div>""")
-       html_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button> </div> </div>""")
     html_content.append( '</div>' )
     html  = '\n'.join( html_content )
 

data/Kultur/0200_kultur_unikt.md

@@ -33,9 +33,8 @@ Kunst og kultur går hånd i hånd i Portugal. Byer som **Porto** og **Lissabon*
 
 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.  
 
-<h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
 
+### Lidt billeder
 
-### Slider test
 {{ slider(options={"width": 500, "height": 500}, images=["https://picsum.photos/id/34/500/375","https://picsum.photos/id/42/500/375","https://picsum.photos/id/72/500/375","https://picsum.photos/id/94/500/375"]) }}
 

data/Kultur/index.html

@@ -57,18 +57,16 @@
 <h3>En levende kunstscene</h3>
 <p>Kunst og kultur går hånd i hånd i Portugal. Byer som <strong>Porto</strong> og <strong>Lissabon</strong> er fyldt med street art, museer og gallerier, der udtrykker både moderne og traditionel portugisisk kunst.</p>
 <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>
+<h3>Lidt billeder</h3>
-
-<h3>Slider test</h3>
 <p><div class="modal-buttons">
 <button onclick="openModal('modal0')" class="open">  <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
-<div class="modal" id="modal0"> <div class="modal-content"> <h2>Modal 0</h2> <p>This is modal 0.</p> <img src="https://picsum.photos/id/34/500/375" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button> </div> </div>
+<div class="modal" id="modal0"> <div class="modal-content"> <h2>Modal 0</h2> <p>This is modal 0.</p> <img src="https://picsum.photos/id/34/500/375" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button><button class="next-btn" onclick="nextModal('modal0', 'modal1')">Next</button></div> </div>
 <button onclick="openModal('modal1')" class="open_inv">  <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
-<div class="modal" id="modal1"> <div class="modal-content"> <h2>Modal 1</h2> <p>This is modal 1.</p> <img src="https://picsum.photos/id/42/500/375" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button> </div> </div>
+<div class="modal" id="modal1"> <div class="modal-content"> <h2>Modal 1</h2> <p>This is modal 1.</p> <img src="https://picsum.photos/id/42/500/375" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button><button class="next-btn" onclick="nextModal('modal1', 'modal2')">Next</button></div> </div>
 <button onclick="openModal('modal2')" class="open">  <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
-<div class="modal" id="modal2"> <div class="modal-content"> <h2>Modal 2</h2> <p>This is modal 2.</p> <img src="https://picsum.photos/id/72/500/375" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button> </div> </div>
+<div class="modal" id="modal2"> <div class="modal-content"> <h2>Modal 2</h2> <p>This is modal 2.</p> <img src="https://picsum.photos/id/72/500/375" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button><button class="next-btn" onclick="nextModal('modal2', 'modal3')">Next</button></div> </div>
 <button onclick="openModal('modal3')" class="open_inv">  <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
-<div class="modal" id="modal3"> <div class="modal-content"> <h2>Modal 3</h2> <p>This is modal 3.</p> <img src="https://picsum.photos/id/94/500/375" width="80%" height="80%"> <button onclick="closeModal('modal3')">Close</button> </div> </div>
+<div class="modal" id="modal3"> <div class="modal-content"> <h2>Modal 3</h2> <p>This is modal 3.</p> <img src="https://picsum.photos/id/94/500/375" width="80%" height="80%"> <button onclick="closeModal('modal3')">Close</button><button class="next-btn" onclick="nextModal('modal3', 'modal4')">Next</button></div> </div>
 </div></p>
             </div>
             <hr>

static/css/main.css

@@ -2538,31 +2538,38 @@ button:disabled,
   margin-top: 20px;
 }
 .modal-content .modal-buttons button {
-  margin: -10px; /* Gør overlap muligt */
+  position: relative; /* Tillader z-index at tage effekt */
+  margin: -20px; /* Øger negativ margin for mere overlap */
   padding: 12px 18px;
   font-size: 16px;
   cursor: pointer;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, z-index 0.3s ease;
 }
 .modal-content .modal-buttons button:hover {
   transform: scale(1.05);
+  z-index: 3; /* Hæver knappen øverst ved hover */
 }
 .modal-content .modal-buttons button:nth-child(odd) {
-  transform: rotate(10deg); /* Med uret */
+  transform: rotate(10deg); /* Roterer med uret */
+  z-index: 1; /* Start-lag for ulige knapper */
 }
 .modal-content .modal-buttons button:nth-child(even) {
-  transform: rotate(-10deg); /* Mod uret */
+  transform: rotate(-10deg); /* Roterer mod uret */
+  z-index: 2; /* Lidt højere lag for lige knapper */
 }
 .modal-content .close-btn {
   position: absolute;
-  bottom: 10px;
-  left: 50%;
   transform: translateX(-50%);
-  padding: 10px 15px;
-  font-size: 16px;
   cursor: pointer;
 }
 
+.next-btn {
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  transition: background-color 0.3s ease;
+}
+
 .thumbnail {
   width: 150px;
   height: 100px;

static/js/modal_handler.js

@@ -18,6 +18,11 @@ function closeModal(modalId) {
     }
 }
 
+function nextModal(currentModalId, nextModalId) {
+    closeModal(currentModalId); // Luk den nuværende modal
+    openModal(nextModalId); // Åbn den næste modal
+}
+
 // Ensure all modals are hidden on page load
 document.addEventListener('DOMContentLoaded', () => {
     const modals = document.querySelectorAll('.modal'); // Select all modals

static/sass/components/_modals.scss

@@ -77,37 +77,42 @@ $button-color: #000;
     margin-top: 20px;
 
     button {
-      margin: -10px; /* Gør overlap muligt */
+      position: relative; /* Tillader z-index at tage effekt */
+      margin: -20px; /* Øger negativ margin for mere overlap */
       padding: 12px 18px;
       font-size: 16px;
       cursor: pointer;
-      transition: transform 0.3s ease;
+      transition: transform 0.3s ease, z-index 0.3s ease;
 
       &:hover {
         transform: scale(1.05);
+        z-index: 3; /* Hæver knappen øverst ved hover */
       }
     }
 
     button:nth-child(odd) {
-      transform: rotate(10deg); /* Med uret */
+      transform: rotate(10deg); /* Roterer med uret */
+      z-index: 1; /* Start-lag for ulige knapper */
     }
 
     button:nth-child(even) {
-      transform: rotate(-10deg); /* Mod uret */
+      transform: rotate(-10deg); /* Roterer mod uret */
+      z-index: 2; /* Lidt højere lag for lige knapper */
     }
   }
 
   .close-btn {
     position: absolute;
-    bottom: 10px;
-    left: 50%;
     transform: translateX(-50%);
-    padding: 10px 15px;
-    font-size: 16px;
     cursor: pointer;
   }
 }
-
+.next-btn {
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  transition: background-color 0.3s ease;
+}
 // Thumbnail styling (forsiden)
 .thumbnail {
   width: 150px;