hjess/LifeFaq
1
0
Fork 0
generated from hjess/PythonTemplateProject
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug somewhere
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 40s
Details

Browse Source
This commit is contained in:
Henrik Jess
2024-12-19 20:20:07 +01:00
parent af9c8f77fd
commit 7e5c31b00d
5 changed files with 102 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/services/markdown_render.py
View File

@@ -62,7 +62,13 @@ def slider(options, images):
html_content.append(f"""<button onclick="openModal('modal{modal_id}')" class="stacked-button"> <img src="{val}" class="thumbnail"></button>""".strip())
else:
html_content.append(f"""<button onclick="openModal('modal{modal_id}')" class="stacked-button"> <img src="{val}" class="thumbnail" ></button>""".strip())
html_content.append(f"""<div class="modal" id="modal{modal_id}"> <div class="modal-content"> <h2>Modal {i}</h2> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button><button class="next-btn" onclick="nextModal('modal{modal_id}', 'modal{modal_id_next}')">Next</button></div> </div>""")
html_content.append(f"""<div class="modal" id="modal{modal_id}"> <div class="modal-content">
<h2>Modal {i}</h2>
<img src="{val}">
<div class="modal-buttons">
<button onclick="closeModal('modal{modal_id}')">Close</button>
<button class="next-btn" onclick="nextModal('modal{modal_id}', 'modal{modal_id_next}')">Next</button>
</div> </div></div>""")
html_content.append( '</div>' )
html = '\n'.join( html_content )

70
data/Kultur/index.html
View File

@@ -54,12 +54,30 @@
<li><strong>UCI El Corte Inglés</strong>: Den moderne biografoplevelse med de nyeste blockbusters. Sammenligneligt med Palads i København, men med en lidt mere luksuriøs oplevelse i selve komplekset.</li>
</ul>
<p><div class="button-stack">
<button onclick="openModal('modal14AE1A_0')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg" class="thumbnail"></button>
<div class="modal" id="modal14AE1A_0"> <div class="modal-content"> <h2>Modal 0</h2> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button><button class="next-btn" onclick="nextModal('modal14AE1A_0', 'modal14AE1A_0_1')">Next</button></div> </div>
<button onclick="openModal('modal14AE1A_0_1')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" class="thumbnail" ></button>
<div class="modal" id="modal14AE1A_0_1"> <div class="modal-content"> <h2>Modal 1</h2> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button><button class="next-btn" onclick="nextModal('modal14AE1A_0_1', 'modal14AE1A_0_1_2')">Next</button></div> </div>
<button onclick="openModal('modal14AE1A_0_1_2')" class="stacked-button"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg" class="thumbnail"></button>
<div class="modal" id="modal14AE1A_0_1_2"> <div class="modal-content"> <h2>Modal 2</h2> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button><button class="next-btn" onclick="nextModal('modal14AE1A_0_1_2', 'modal14AE1A_0_1_2_3')">Next</button></div> </div>
<button onclick="openModal('modalE149BE_0')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg" class="thumbnail"></button>
<div class="modal" id="modalE149BE_0"> <div class="modal-content">
<h2>Modal 0</h2>
<img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg">
<div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0', 'modalE149BE_0_1')">Next</button>
</div> </div></div>
<button onclick="openModal('modalE149BE_0_1')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" class="thumbnail" ></button>
<div class="modal" id="modalE149BE_0_1"> <div class="modal-content">
<h2>Modal 1</h2>
<img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg">
<div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0_1')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0_1', 'modalE149BE_0_1_2')">Next</button>
</div> </div></div>
<button onclick="openModal('modalE149BE_0_1_2')" class="stacked-button"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg" class="thumbnail"></button>
<div class="modal" id="modalE149BE_0_1_2"> <div class="modal-content">
<h2>Modal 2</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg">
<div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0_1_2')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0_1_2', 'modalE149BE_0_1_2_0')">Next</button>
</div> </div></div>
</div></p>
<p>Biografbesøg i Lissabon er en afslappet måde at tilbringe tid med familien. Jeg nyder selv at tage afsted med Erika for at dele både film og hygge.</p>
<h3>Teatrets verden: Fra klassikere til moderne eksperimenter</h3>
@@ -86,14 +104,38 @@
<p>Samtidig er mange oplevelser billigere end i København, og her er en atmosfære, der er svær at finde nordpå: Lissabon har en unik blanding af tradition og modernitet, som gør den til en by, der bliver ved med at fascinere.</p>
<h3>Lidt billeder</h3>
<p><div class="button-stack">
<button onclick="openModal('modal7DA7FC_0')" class="stacked-button"> <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
<div class="modal" id="modal7DA7FC_0"> <div class="modal-content"> <h2>Modal 0</h2> <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('modal7DA7FC_0', 'modal7DA7FC_0_1')">Next</button></div> </div>
<button onclick="openModal('modal7DA7FC_0_1')" class="stacked-button"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
<div class="modal" id="modal7DA7FC_0_1"> <div class="modal-content"> <h2>Modal 1</h2> <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('modal7DA7FC_0_1', 'modal7DA7FC_0_1_2')">Next</button></div> </div>
<button onclick="openModal('modal7DA7FC_0_1_2')" class="stacked-button"> <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
<div class="modal" id="modal7DA7FC_0_1_2"> <div class="modal-content"> <h2>Modal 2</h2> <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('modal7DA7FC_0_1_2', 'modal7DA7FC_0_1_2_3')">Next</button></div> </div>
<button onclick="openModal('modal7DA7FC_0_1_2_3')" class="stacked-button"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
<div class="modal" id="modal7DA7FC_0_1_2_3"> <div class="modal-content"> <h2>Modal 3</h2> <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('modal7DA7FC_0_1_2_3', 'modal7DA7FC_0_1_2_3_4')">Next</button></div> </div>
<button onclick="openModal('modal6EF317_0')" class="stacked-button"> <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
<div class="modal" id="modal6EF317_0"> <div class="modal-content">
<h2>Modal 0</h2>
<img src="https://picsum.photos/id/34/500/375">
<div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0', 'modal6EF317_0_1')">Next</button>
</div> </div></div>
<button onclick="openModal('modal6EF317_0_1')" class="stacked-button"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
<div class="modal" id="modal6EF317_0_1"> <div class="modal-content">
<h2>Modal 1</h2>
<img src="https://picsum.photos/id/42/500/375">
<div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1', 'modal6EF317_0_1_2')">Next</button>
</div> </div></div>
<button onclick="openModal('modal6EF317_0_1_2')" class="stacked-button"> <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
<div class="modal" id="modal6EF317_0_1_2"> <div class="modal-content">
<h2>Modal 2</h2>
<img src="https://picsum.photos/id/72/500/375">
<div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1_2')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1_2', 'modal6EF317_0_1_2_3')">Next</button>
</div> </div></div>
<button onclick="openModal('modal6EF317_0_1_2_3')" class="stacked-button"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
<div class="modal" id="modal6EF317_0_1_2_3"> <div class="modal-content">
<h2>Modal 3</h2>
<img src="https://picsum.photos/id/94/500/375">
<div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1_2_3')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1_2_3', 'modal6EF317_0_1_2_3_0')">Next</button>
</div> </div></div>
</div></p>
</div>
<hr>

37
static/css/main.css
View File

@@ -2500,12 +2500,11 @@ button:disabled,
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
@@ -2516,20 +2515,26 @@ button:disabled,
.modal-content {
background-color: #fff;
padding: 20px;
padding: 5px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
position: relative;
min-width: 70vw;
min-height: 70vh;
max-width: 95vw;
max-height: 95vh;
overflow: auto;
justify-content: center; /* Centrer billedet i modal horisontalt */
align-items: center; /* Centrer billedet i modal vertikalt */
flex-direction: column; /* Knapper placeres nedenunder billedet */
}
.modal-content img {
width: 100%;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 5px;
border-radius: 15px;
margin: 0 auto;
}
.modal-content .modal-buttons {
display: flex;
@@ -2539,9 +2544,7 @@ button:disabled,
}
.modal-content .modal-buttons button {
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
margin: 20px;
cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease;
}
@@ -2549,14 +2552,6 @@ button:disabled,
transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
}
.modal-content .modal-buttons button:nth-child(odd) {
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); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
.modal-content .close-btn {
position: absolute;
transform: translateX(-50%);

2
static/css/main.css.map
View File

File diff suppressed because one or more lines are too long

52
static/sass/components/_modals.scss
View File

@@ -36,12 +36,11 @@ $button-color: #000;
// Modal background
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
background: $modal-bg;
backdrop-filter: blur($modal-blur);
display: flex;
@@ -53,20 +52,25 @@ $button-color: #000;
// Modal content
.modal-content {
background-color: $modal-content-bg;
padding: 20px;
padding: 5px;
border-radius: 8px;
box-shadow: $modal-content-shadow;
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
position: relative;
min-width: 70vw;
min-height: 70vh;
max-width: 95vw; // Maks bredde på 90% af viewportens bredde
max-height: 95vh; // Maks højde på 90% af viewportens højde
overflow: auto; // Tilføj scroll, hvis indholdet bliver for stort
justify-content: center; /* Centrer billedet i modal horisontalt */
align-items: center; /* Centrer billedet i modal vertikalt */
flex-direction: column; /* Knapper placeres nedenunder billedet */
img {
width: 100%;
height: auto;
max-width: 90vw; // Maks bredde på 90% af viewportens bredde
max-height: 90vh; // Maks højde på 90% af viewportens højde
object-fit: contain;
border-radius: 5px;
border-radius: 15px;
margin: 0 auto;
}
// Modal knapper (bevarer globale værdier)
@@ -78,9 +82,7 @@ $button-color: #000;
button {
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
margin: 20px;
cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease;
@@ -89,16 +91,6 @@ $button-color: #000;
z-index: 3; /* Hæver knappen øverst ved hover */
}
}
button:nth-child(odd) {
transform: rotate(10deg); /* Roterer med uret */
z-index: 1; /* Start-lag for ulige knapper */
}
button:nth-child(even) {
transform: rotate(-10deg); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
}
.close-btn {
@@ -107,12 +99,12 @@ $button-color: #000;
cursor: pointer;
}
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
// Thumbnail styling (forsiden)
.thumbnail {
width: 150px;