From 4c8b8d77ed84a22bdfb26796cb89b97a65253960 Mon Sep 17 00:00:00 2001 From: Emirhan Sahin <2023251@stud.hs-mannheim.de> Date: Wed, 30 Sep 2026 12:46:20 +0000 Subject: [PATCH] feat(footer): gemeinsame Footer-Komponente auf allen Seiten eingebunden --- angebotsuebersicht.html | 3 + berater.html | 3 + booking-confirmation.html | 6 +- booking.html | 3 + contact-test.html | 3 + index.html | 12 +- paket-details.html | 3 + src/components/footer/footer.html | 69 +++++++++ src/components/footer/footer.js | 15 ++ src/styles/footer.css | 229 ++++++++++++++++++++++++++++++ 10 files changed, 334 insertions(+), 12 deletions(-) create mode 100644 src/components/footer/footer.html create mode 100644 src/components/footer/footer.js create mode 100644 src/styles/footer.css diff --git a/angebotsuebersicht.html b/angebotsuebersicht.html index 06d0290..595ef54 100644 --- a/angebotsuebersicht.html +++ b/angebotsuebersicht.html @@ -6,6 +6,7 @@ Ernährungs-Pakete – Tri-Hub + @@ -30,5 +31,7 @@ type="module" src="/src/features/angebote/angebote-entry.js" > + + diff --git a/berater.html b/berater.html index 722f850..e040412 100644 --- a/berater.html +++ b/berater.html @@ -8,6 +8,7 @@ + @@ -27,5 +28,7 @@ + + diff --git a/booking-confirmation.html b/booking-confirmation.html index 5ad23bf..025df2e 100644 --- a/booking-confirmation.html +++ b/booking-confirmation.html @@ -6,6 +6,7 @@ Buchungsbestätigung – Tri-Hub + @@ -146,9 +147,6 @@ Buchungsbestätigung anzuzeigen. - + + diff --git a/booking.html b/booking.html index 10fd45f..9773233 100644 --- a/booking.html +++ b/booking.html @@ -5,6 +5,7 @@ Paket buchen – Tri-Hub +
@@ -17,5 +18,7 @@ type="module" src="/src/features/booking/booking-entry.js" > + + diff --git a/contact-test.html b/contact-test.html index 9705d86..a49daf9 100644 --- a/contact-test.html +++ b/contact-test.html @@ -4,6 +4,7 @@ Berater kontaktieren – Tri-Hub Testseite +
@@ -22,5 +23,7 @@ type="module" src="/src/features/contact/contact-entry.js" > + + diff --git a/index.html b/index.html index b658775..1f68f10 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ +
- + + + + diff --git a/src/components/footer/footer.html b/src/components/footer/footer.html new file mode 100644 index 0000000..8873ba3 --- /dev/null +++ b/src/components/footer/footer.html @@ -0,0 +1,69 @@ + diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js new file mode 100644 index 0000000..0a9842d --- /dev/null +++ b/src/components/footer/footer.js @@ -0,0 +1,15 @@ +import footerHtml from "./footer.html?raw"; + +/** Fügt das Footer-Fragment am Platzhalter ein. */ +export function initFooter(placeholderSelector = "#footer-placeholder") { + const placeholder = document.querySelector(placeholderSelector); + if (!placeholder) { + console.warn("Footer-Platzhalter nicht gefunden:", placeholderSelector); + return; + } + + placeholder.outerHTML = footerHtml; + +} + +document.addEventListener("DOMContentLoaded", () => initFooter()); diff --git a/src/styles/footer.css b/src/styles/footer.css new file mode 100644 index 0000000..c779dbc --- /dev/null +++ b/src/styles/footer.css @@ -0,0 +1,229 @@ +.trihub-footer, +.trihub-footer * { + box-sizing: border-box; +} + +.trihub-footer { + padding: 4.75rem 0; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 0 0 1.8rem 1.8rem; + background: #06171b; + color: #fff; + font-family: "DM Sans", sans-serif; +} + +.trihub-footer-inner { + width: min(100% - 4rem, 1648px); + margin: 0 auto; + display: grid; + grid-template-columns: 1.35fr 1fr 1fr; + gap: 3.5rem; + align-items: stretch; +} + +.trihub-footer-card { + min-width: 0; + min-height: 34.75rem; + padding: 2rem; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 1.8rem; + background: rgba(255, 255, 255, 0.05); +} + +.trihub-brand { + display: flex; + align-items: center; + gap: 1.4rem; + color: inherit; + text-decoration: none; +} + +.trihub-logo-box { + width: 100px; + height: 90px; + padding: 0.5rem 0.75rem; + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 1.1rem; + background: #fff; + box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); +} + +.trihub-logo-box img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.trihub-brand-label, +.trihub-brand-title { + display: block; +} + +.trihub-brand-label { + margin: 0 0 0.3rem; + color: rgba(255, 255, 255, 0.46); + font-size: 0.68rem; + letter-spacing: 0.28em; + text-transform: uppercase; +} + +.trihub-brand-title { + color: #fff; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; +} + +.trihub-description { + max-width: 36rem; + margin: 2.3rem 0 0; + color: rgba(255, 255, 255, 0.64); + font-size: 0.875rem; + line-height: 1.75rem; +} + +.trihub-contact { + margin-top: 2.1rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + color: rgba(255, 255, 255, 0.68); + font-size: 0.875rem; +} + +.trihub-contact-row { + display: flex; + align-items: flex-start; + gap: 0.75rem; +} + +.trihub-contact-row p { + margin: 0; +} + +.trihub-contact-row a { + color: inherit; + text-decoration: none; +} + +.trihub-contact-row svg { + width: 1rem; + height: 1rem; + margin-top: 0.25rem; + flex-shrink: 0; + color: #ffc21f; +} + +.trihub-socials { + margin-top: 2.1rem; + display: flex; + gap: 0.75rem; +} + +.trihub-social-button { + width: 3.25rem; + height: 3.25rem; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 9999px; + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.7); + transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} + +.trihub-social-button svg { + width: 1.25rem; + height: 1.25rem; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} + +.trihub-social-button:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; +} + +.trihub-footer-heading { + margin: 0 0 1.7rem; + display: flex; + font-family: "DM Sans", sans-serif; + align-items: center; + gap: 0.75rem; + color: rgba(255, 255, 255, 0.46); + font-size: 0.8rem; + font-weight: 400; + letter-spacing: 0.28em; + text-transform: uppercase; +} + +.trihub-footer-heading svg { + width: 1rem; + height: 1rem; + color: #00c7d5; +} + +.trihub-footer-links { + display: flex; + flex-direction: column; + gap: 1rem; + color: rgba(255, 255, 255, 0.7); + font-size: 0.875rem; +} + +.trihub-footer-links a { + color: inherit; + text-decoration: none; + transition: color 0.15s ease; +} + +.trihub-footer-links a:hover { + color: #fff; +} + +.trihub-footer-links .trihub-cookie-link { + margin: 0.7rem 0 0; + color: #00bfd2; + text-decoration: none; +} + +.trihub-footer-links .trihub-cookie-link:hover { + color: #fff; +} + +@media (max-width: 1000px) { + .trihub-footer-inner { + grid-template-columns: 1fr; + } + + .trihub-footer-card { + min-height: auto; + } +} + +@media (max-width: 640px) { + .trihub-footer { + padding: 2rem 0; + } + + .trihub-footer-inner { + width: min(100% - 2rem, 1648px); + gap: 1rem; + } + + .trihub-footer-card { + padding: 1.5rem; + } + + .trihub-brand { + align-items: flex-start; + } +}