Invario/Key-service-Server
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement custom modal for booking confirmation and refactor package card actions

Browse Source
This commit is contained in:
AIIrondev
2026-05-06 17:28:01 +02:00
parent dd092b65bc
commit 1632a51c18
1 changed files with 143 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/appointments.html
+143 -29
View File
@@ -204,25 +204,6 @@
margin-top: 0.4rem;
}
/* Highlight für Premium/Schulträger Angebot */
.package-card--highlight {
border: 2px solid #1a748c;
background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
box-shadow: 0 20px 48px rgba(26, 116, 140, 0.12);
transform: scale(1.01);
}
.package-card--highlight:hover {
border-color: #135567;
box-shadow: 0 24px 54px rgba(26, 116, 140, 0.18);
transform: translateY(-3px) scale(1.01);
}
.package-card--highlight .package-card__tag {
background: #1a748c;
color: #ffffff;
}
@media (max-width: 760px) {
.booking-hero {
padding: 1.5rem 1.2rem;
@@ -264,6 +245,95 @@
font-size: 1.05rem;
}
}
/* Custom Modal Styles */
.custom-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 1rem;
}
.custom-modal.active {
display: flex;
}
.custom-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(18, 49, 54, 0.4);
backdrop-filter: blur(4px);
}
.custom-modal-content {
position: relative;
background: #ffffff;
border-radius: 20px;
padding: 2.2rem;
max-width: 500px;
width: 100%;
box-shadow: 0 24px 54px rgba(23, 44, 57, 0.2);
z-index: 101;
animation: modalEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalEnter {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.custom-modal-content h3 {
margin-top: 0;
margin-bottom: 1rem;
color: #133d4a;
}
.custom-modal-content p {
color: #4b6a72;
margin-bottom: 0.8rem;
}
.custom-modal-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: flex-end;
}
.custom-modal-actions button {
width: auto;
min-width: 120px;
}
@media (max-width: 600px) {
.custom-modal-content {
padding: 1.6rem;
border-radius: 16px;
}
.custom-modal-actions {
flex-direction: column;
}
.custom-modal-actions button {
width: 100%;
}
}
</style>
{% endblock %}
@@ -294,9 +364,9 @@
</ul>
<div class="package-card__actions">
{% if 'username' in session %}
<form method="POST" action="{{ url_for('book_option_package') }}" onsubmit="return confirm('Möchten Sie dieses Paket wirklich anfragen?\n\nEin Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.')">
<form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
<input type="hidden" name="package" value="inventarsystem">
<button class="btn" type="submit">Jetzt buchen</button>
<button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt buchen</button>
</form>
{% else %}
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
@@ -324,9 +394,9 @@
</ul>
<div class="package-card__actions">
{% if 'username' in session %}
<form method="POST" action="{{ url_for('book_option_package') }}" onsubmit="return confirm('Möchten Sie dieses Paket wirklich anfragen?\n\nEin Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.')">
<form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
<input type="hidden" name="package" value="buecherei">
<button class="btn" type="submit">Jetzt buchen</button>
<button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt buchen</button>
</form>
{% else %}
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
@@ -334,11 +404,11 @@
</div>
</article>
<article class="package-card package-card--highlight">
<article class="package-card">
<div class="package-card__header">
<div>
<span class="package-card__tag">Premium</span>
<h2 class="package-card__name">Schulträger Angebot</h2>
<h2 class="package-card__name">Schulträger</h2>
</div>
<div class="package-card__price">
<span>Auf Anfrage</span>
@@ -353,9 +423,9 @@
</ul>
<div class="package-card__actions">
{% if 'username' in session %}
<form method="POST" action="{{ url_for('book_option_package') }}" onsubmit="return confirm('Möchten Sie dieses Paket wirklich anfragen?\n\nEin Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.')">
<form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
<input type="hidden" name="package" value="schultraeger">
<button class="btn" type="submit">Jetzt anfragen</button>
<button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt anfragen</button>
</form>
{% else %}
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto anfragen</a>
@@ -383,9 +453,9 @@
</ul>
<div class="package-card__actions">
{% if 'username' in session %}
<form method="POST" action="{{ url_for('book_option_package') }}" onsubmit="return confirm('Möchten Sie dieses Paket wirklich anfragen?\n\nEin Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.')">
<form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
<input type="hidden" name="package" value="telefonsupport">
<button class="btn" type="submit">Jetzt buchen</button>
<button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt buchen</button>
</form>
{% else %}
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
@@ -401,4 +471,48 @@
<p><strong>Hinweis:</strong> Bitte logge dich ein oder registriere dich, um eine Buchungsoption anzufragen.</p>
{% endif %}
</section>
<!-- Custom Modal -->
<div class="custom-modal" id="bookingModal" aria-hidden="true" role="dialog" aria-modal="true">
<div class="custom-modal-backdrop" onclick="closeBookingModal()"></div>
<div class="custom-modal-content">
<h3>Buchung bestätigen</h3>
<p>Möchten Sie dieses Paket wirklich anfragen?</p>
<p style="font-size: 0.95rem;">Ein Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.</p>
<div class="custom-modal-actions">
<button class="btn secondary" type="button" onclick="closeBookingModal()">Abbrechen</button>
<button class="btn" type="button" id="confirmBookingBtn">Anfrage bestätigen</button>
</div>
</div>
</div>
<script>
let currentFormToSubmit = null;
function openBookingModal(formElement) {
currentFormToSubmit = formElement;
const modal = document.getElementById('bookingModal');
modal.classList.add('active');
modal.setAttribute('aria-hidden', 'false');
}
function closeBookingModal() {
currentFormToSubmit = null;
const modal = document.getElementById('bookingModal');
modal.classList.remove('active');
modal.setAttribute('aria-hidden', 'true');
}
document.getElementById('confirmBookingBtn').addEventListener('click', function() {
if (currentFormToSubmit) {
currentFormToSubmit.submit();
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeBookingModal();
}
});
</script>
{% endblock %}