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()) html_content.append(f"""<button onclick="openModal('modal{modal_id}')" class="stacked-button"> <img src="{val}" class="thumbnail"></button>""".strip())
else: 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"""<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_content.append( '</div>' )
html = '\n'.join( html_content ) 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> <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> </ul>
<p><div class="button-stack"> <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> <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="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> <div class="modal" id="modalE149BE_0"> <div class="modal-content">
<button onclick="openModal('modal14AE1A_0_1')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" class="thumbnail" ></button> <h2>Modal 0</h2>
<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> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg">
<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-buttons">
<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="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> </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> <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> <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> <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> <h3>Lidt billeder</h3>
<p><div class="button-stack"> <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> <button onclick="openModal('modal6EF317_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> <div class="modal" id="modal6EF317_0"> <div class="modal-content">
<button onclick="openModal('modal7DA7FC_0_1')" class="stacked-button"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button> <h2>Modal 0</h2>
<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> <img src="https://picsum.photos/id/34/500/375">
<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-buttons">
<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="closeModal('modal6EF317_0')">Close</button>
<button onclick="openModal('modal7DA7FC_0_1_2_3')" class="stacked-button"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button> <button class="next-btn" onclick="nextModal('modal6EF317_0', 'modal6EF317_0_1')">Next</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> </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></p>
</div> </div>
<hr> <hr>

37
static/css/main.css
View File

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

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

File diff suppressed because one or more lines are too long

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

@@ -36,12 +36,11 @@ $button-color: #000;
// Modal background // Modal background
.modal { .modal {
display: none;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100vw;
height: 100%; height: 100vh;
background: $modal-bg; background: $modal-bg;
backdrop-filter: blur($modal-blur); backdrop-filter: blur($modal-blur);
display: flex; display: flex;
@@ -53,20 +52,25 @@ $button-color: #000;
// Modal content // Modal content
.modal-content { .modal-content {
background-color: $modal-content-bg; background-color: $modal-content-bg;
padding: 20px; padding: 5px;
border-radius: 8px; border-radius: 8px;
box-shadow: $modal-content-shadow; box-shadow: $modal-content-shadow;
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
position: relative; 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 { img {
width: 100%;
height: auto; 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; object-fit: contain;
border-radius: 5px; border-radius: 15px;
margin: 0 auto;
} }
// Modal knapper (bevarer globale værdier) // Modal knapper (bevarer globale værdier)
@@ -78,9 +82,7 @@ $button-color: #000;
button { button {
position: relative; /* Tillader z-index at tage effekt */ position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */ margin: 20px;
padding: 12px 18px;
font-size: 16px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease; 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 */ 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 { .close-btn {