prototyp für Pakete und Pakete-details
Majd Ibrahim
parent
00625cd0eb
commit
8c759c3dcb
|
|
@ -1,19 +1,285 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Ernährungs-Pakete – Tri-Hub</title>
|
<title>Ernährungs-Pakete – Tri-Hub</title>
|
||||||
</head>
|
|
||||||
<body>
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<header class="container"><a href="/">Zur Startseite</a></header>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<main class="packages-section" id="angebotsuebersicht-section">
|
<link
|
||||||
<div class="packages-header"><h1>Unsere Ernährungs-Pakete</h1></div>
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap"
|
||||||
<div class="packages-container" id="packages-container"></div>
|
rel="stylesheet" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--page-bg: #0d0d1a;
|
||||||
|
--page-bg-2: #1a1a2e;
|
||||||
|
--green: #10b981;
|
||||||
|
--green-dark: #059669;
|
||||||
|
--white: #ffffff;
|
||||||
|
--light: #f8fafc;
|
||||||
|
--muted: #94a3b8;
|
||||||
|
--line: rgba(248, 250, 252, 0.12);
|
||||||
|
--panel: rgba(255, 255, 255, 0.045);
|
||||||
|
--panel-strong: rgba(255, 255, 255, 0.065);
|
||||||
|
--max: 1180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
color: var(--light);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.09), transparent 30%),
|
||||||
|
radial-gradient(circle at 88% 26%, rgba(16, 185, 129, 0.055), transparent 27%),
|
||||||
|
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||||||
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Playfair Display", Georgia, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(var(--max), calc(100% - 40px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 96px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||||
|
gap: 70px;
|
||||||
|
align-items: end;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading h1 {
|
||||||
|
font-size: clamp(2.4rem, 4.8vw, 4.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-intro {
|
||||||
|
max-width: 650px;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: var(--green);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Package Cards matching the .topic design */
|
||||||
|
.packages-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 22px;
|
||||||
|
padding: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(16, 185, 129, 0.34);
|
||||||
|
background: var(--panel-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-type {
|
||||||
|
color: var(--green);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(16, 185, 129, 0.08);
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
|
color: var(--green);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-desc {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-features {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100px 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group-title {
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group-text {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standardized Buttons */
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
color: var(--light);
|
||||||
|
border-color: rgba(148, 163, 184, 0.25);
|
||||||
|
background: rgba(255, 255, 255, 0.025);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary:hover {
|
||||||
|
border-color: rgba(16, 185, 129, 0.55);
|
||||||
|
background: rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.section-heading {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.packages-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.container {
|
||||||
|
width: min(var(--max), calc(100% - 28px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 68px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="navbar-placeholder"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">TRI-HUB · ERNÄHRUNG</div>
|
||||||
|
<h1>Unsere Ernährungs-Pakete</h1>
|
||||||
|
</div>
|
||||||
|
<p class="section-intro">
|
||||||
|
Wähle das Paket, das zu deinem aktuellen Stand passt. Von den Grundlagen bis zur Wettkampf-Vorbereitung.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="packages-grid" id="packages-container"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<script
|
|
||||||
type="module"
|
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||||
src="/src/features/angebote/angebote-entry.js"
|
<script type="module" src="/src/features/angebote/angebote-entry.js"></script>
|
||||||
></script>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
17
index.html
17
index.html
|
|
@ -722,6 +722,22 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="navbar-placeholder"></div>
|
<div id="navbar-placeholder"></div>
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
<main class="container">
|
||||||
|
<h1>Ernährung, die zu dir passt.</h1>
|
||||||
|
<p>
|
||||||
|
Individuelle 1:1-Beratung für deinen Alltag und deine
|
||||||
|
sportlichen Ziele.
|
||||||
|
</p>
|
||||||
|
<a href="/angebotsuebersicht.html">Beratung kennenlernen</a>
|
||||||
|
|
||||||
|
<section id="beratung" aria-labelledby="beratung-heading">
|
||||||
|
<h2 id="beratung-heading">Deine persönliche Beratung</h2>
|
||||||
|
<p>
|
||||||
|
Entdecke unsere Pakete für deine Ernährung im Alltag und
|
||||||
|
Sport.
|
||||||
|
</p>
|
||||||
|
=======
|
||||||
<main id="main-content">
|
<main id="main-content">
|
||||||
<!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
|
<!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
|
||||||
<section class="hero" id="ernaehrung">
|
<section class="hero" id="ernaehrung">
|
||||||
|
|
@ -1101,6 +1117,7 @@
|
||||||
></div>
|
></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
>>>>>>> dev
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,372 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="de" class="dark">
|
<html lang="de">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="robots" content="noindex" />
|
||||||
<title>Paket-Details – Tri-Hub Ernährungsberatung</title>
|
<title>Paket-Details – Tri-Hub Ernährungsberatung</title>
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet" />
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="/src/styles/packages.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<style>
|
||||||
<header class="container">
|
:root {
|
||||||
<a href="angebotsuebersicht.html">← Zurück zur Angebotsübersicht</a>
|
--page-bg: #0d0d1a;
|
||||||
</header>
|
--page-bg-2: #1a1a2e;
|
||||||
|
--green: #10b981;
|
||||||
|
--green-dark: #059669;
|
||||||
|
--white: #ffffff;
|
||||||
|
--light: #f8fafc;
|
||||||
|
--muted: #94a3b8;
|
||||||
|
--line: rgba(248, 250, 252, 0.12);
|
||||||
|
--panel: rgba(255, 255, 255, 0.045);
|
||||||
|
--panel-strong: rgba(255, 255, 255, 0.065);
|
||||||
|
--max: 1180px;
|
||||||
|
}
|
||||||
|
|
||||||
<main class="packages-section">
|
* {
|
||||||
<div id="package-detail-container" class="detail-page-container">
|
box-sizing: border-box;
|
||||||
<!-- Wird dynamisch durch paket-details.js gefüllt -->
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
color: var(--light);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.09), transparent 30%),
|
||||||
|
radial-gradient(circle at 88% 26%, rgba(16, 185, 129, 0.055), transparent 27%),
|
||||||
|
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||||||
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Playfair Display", Georgia, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(var(--max), calc(100% - 40px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 96px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
padding: 2rem 0 1rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a {
|
||||||
|
color: var(--green);
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
padding: 2rem 0 3rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-badge {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--green);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header h1 {
|
||||||
|
font-size: clamp(2.4rem, 4.8vw, 4.5rem);
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-subtitle {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.1fr 0.9fr;
|
||||||
|
gap: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 22px;
|
||||||
|
padding: 2.5rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-amount {
|
||||||
|
display: block;
|
||||||
|
font-family: "Playfair Display", Georgia, sans-serif;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--green);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-note {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section {
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section h2 {
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-list li {
|
||||||
|
padding-left: 2rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
position: relative;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.7;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-list li:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 8px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: var(--green);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-step {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-step strong {
|
||||||
|
display: block;
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-step p {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variant-box {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variant-box label {
|
||||||
|
display: block;
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Select matches the Input styles from ernaehrung.html */
|
||||||
|
.variant-box select {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||||
|
border-radius: 12px;
|
||||||
|
outline: 0;
|
||||||
|
color: var(--white);
|
||||||
|
background: rgba(13, 13, 26, 0.78);
|
||||||
|
font: inherit;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variant-box select:focus {
|
||||||
|
border-color: rgba(16, 185, 129, 0.75);
|
||||||
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary {
|
||||||
|
color: #06130f;
|
||||||
|
background: var(--green);
|
||||||
|
box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary:hover {
|
||||||
|
background: #34d399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
color: var(--light);
|
||||||
|
border-color: rgba(148, 163, 184, 0.25);
|
||||||
|
background: rgba(255, 255, 255, 0.025);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary:hover {
|
||||||
|
border-color: rgba(16, 185, 129, 0.55);
|
||||||
|
background: rgba(16, 185, 129, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-full {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 54px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.detail-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header h1 {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.container {
|
||||||
|
width: min(var(--max), calc(100% - 28px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 48px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
padding: 1rem 0 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-amount {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="navbar-placeholder"></div>
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a href="/angebotsuebersicht.html">← Zurück zur Übersicht</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="package-detail-container"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script
|
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||||
type="module"
|
<script type="module" src="/src/features/angebote/paket-details.js"></script>
|
||||||
src="/src/features/angebote/paket-details.js"
|
</body>
|
||||||
></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { packagesDetails } from "../../shared/packagesdetails.js";
|
import { packagesDetails } from "../../shared/packagesdetails.js";
|
||||||
|
import { mountBookingPage } from "../booking/booking-page.js";
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const container = document.getElementById("package-detail-container");
|
const container = document.getElementById("package-detail-container");
|
||||||
|
|
@ -14,60 +15,102 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
<div class="package-card">
|
<div class="package-card">
|
||||||
<h2>Paket nicht gefunden</h2>
|
<h2>Paket nicht gefunden</h2>
|
||||||
<p>Bitte wähle ein gültiges Angebot aus der Übersicht.</p>
|
<p>Bitte wähle ein gültiges Angebot aus der Übersicht.</p>
|
||||||
<a href="angebotsuebersicht.html" class="package-btn">Zur Übersicht</a>
|
<a href="angebotsuebersicht.html" class="package-btn">
|
||||||
|
Zur Übersicht
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const variantsHtml = pkg.variants
|
const variantsHtml = pkg.variants?.length
|
||||||
? `<div class="detail-box">
|
? `
|
||||||
|
<div class="detail-box">
|
||||||
<h3>Wähle deine Variante</h3>
|
<h3>Wähle deine Variante</h3>
|
||||||
<select id="variant-select" class="variant-select">
|
<select
|
||||||
${pkg.variants.map((v) => `<option value="${v.variantId}" data-price="${v.price}">${v.label} –${v.price.toFixed(2)} €</option>`).join("")}
|
id="variant-select"
|
||||||
|
class="variant-select"
|
||||||
|
aria-label="Paketvariante"
|
||||||
|
>
|
||||||
|
${pkg.variants
|
||||||
|
.map(
|
||||||
|
(variant) => `
|
||||||
|
<option
|
||||||
|
value="${variant.variantId}"
|
||||||
|
data-price="${variant.price}"
|
||||||
|
>
|
||||||
|
${variant.label} – ${variant.price.toFixed(2)} €
|
||||||
|
</option>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
</select>
|
</select>
|
||||||
</div>`
|
</div>
|
||||||
|
`
|
||||||
: "";
|
: "";
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="package-card detail-view">
|
<div class="package-card detail-view">
|
||||||
<div class="package-type-container">
|
<div class="package-type-container">
|
||||||
<span class="package-type">${pkg.type} · ${pkg.durationLabel}</span>
|
<span class="package-type">
|
||||||
<span class="package-highlight">${pkg.badge}</span>
|
${pkg.type} · ${pkg.durationLabel}
|
||||||
|
</span>
|
||||||
|
${
|
||||||
|
pkg.badge
|
||||||
|
? `<span class="package-highlight">${pkg.badge}</span>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="package-title">${pkg.title}</h1>
|
<h1 class="package-title">${pkg.title}</h1>
|
||||||
<p class="package-desc">${pkg.subtitle}</p>
|
<p class="package-desc">${pkg.subtitle}</p>
|
||||||
|
|
||||||
<div class="price-box">
|
<div class="price-box">
|
||||||
<span class="price-amount" id="displayed-price">${pkg.price.toFixed(2)} €</span>
|
<span class="price-amount" id="displayed-price">
|
||||||
<span class="price-note">inkl. ${pkg.taxRate}% MwSt. (${pkg.billingInterval})</span>
|
${pkg.price.toFixed(2)} €
|
||||||
|
</span>
|
||||||
|
<span class="price-note">
|
||||||
|
inkl. ${pkg.taxRate}% MwSt. (${pkg.billingInterval})
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
${variantsHtml}
|
${variantsHtml}
|
||||||
|
|
||||||
<div class="package-details-box">
|
<div class="package-details-box">
|
||||||
<div class="detail-item">
|
<div class="detail-item">
|
||||||
<h3 class="detail-title">Für wen ist dieses Paket ideal?</h3>
|
<h3 class="detail-title">
|
||||||
|
Für wen ist dieses Paket ideal?
|
||||||
|
</h3>
|
||||||
<ul class="detail-list">
|
<ul class="detail-list">
|
||||||
${pkg.targetGroup.map((item) => `<li>${item}</li>`).join("")}
|
${pkg.targetGroup
|
||||||
|
.map((item) => `<li>${item}</li>`)
|
||||||
|
.join("")}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-item">
|
<div class="detail-item">
|
||||||
<h3 class="detail-title">Das ist im Paket enthalten</h3>
|
<h3 class="detail-title">
|
||||||
|
Das ist im Paket enthalten
|
||||||
|
</h3>
|
||||||
<ul class="detail-list">
|
<ul class="detail-list">
|
||||||
${pkg.includedFeatures.map((feat) => `<li>${feat}</li>`).join("")}
|
${pkg.includedFeatures
|
||||||
|
.map((feature) => `<li>${feature}</li>`)
|
||||||
|
.join("")}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-item">
|
<div class="detail-item">
|
||||||
<h3 class="detail-title">So läuft deine Begleitung ab</h3>
|
<h3 class="detail-title">
|
||||||
|
So läuft deine Begleitung ab
|
||||||
|
</h3>
|
||||||
${pkg.processSteps
|
${pkg.processSteps
|
||||||
.map(
|
.map(
|
||||||
(s) => `
|
(step) => `
|
||||||
<div class="process-step">
|
<div class="process-step">
|
||||||
<strong>${s.step}:</strong> <span class="detail-text">${s.text}</span>
|
<strong>${step.step}:</strong>
|
||||||
|
<span class="detail-text">
|
||||||
|
${step.text}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
)
|
)
|
||||||
|
|
@ -75,28 +118,82 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="proceed-to-booking-btn" class="package-btn primary-cta">
|
<button
|
||||||
${pkg.ctaButtonText}
|
id="proceed-to-booking-btn"
|
||||||
|
class="package-btn primary-cta"
|
||||||
|
type="button"
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
>
|
||||||
|
Jetzt buchen
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Dieser Buchungsablauf ist eine Simulation. Es erfolgt keine
|
||||||
|
Abbuchung und keine verbindliche Beratungsbuchung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="booking-status" role="status"></p>
|
||||||
|
<div id="booking-root"></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const variantSelect = document.getElementById("variant-select");
|
const variantSelect = document.getElementById("variant-select");
|
||||||
const displayedPrice = document.getElementById("displayed-price");
|
const displayedPrice = document.getElementById("displayed-price");
|
||||||
if (variantSelect && displayedPrice) {
|
const bookingBtn = document.getElementById("proceed-to-booking-btn");
|
||||||
variantSelect.addEventListener("change", (e) => {
|
const bookingRoot = document.getElementById("booking-root");
|
||||||
const selectedOption = e.target.selectedOptions[0];
|
const bookingStatus = document.getElementById("booking-status");
|
||||||
const newPrice = parseFloat(
|
|
||||||
selectedOption.getAttribute("data-price"),
|
let cleanupBooking;
|
||||||
);
|
|
||||||
displayedPrice.textContent = `${newPrice.toFixed(2)} €`;
|
function prepareBooking() {
|
||||||
|
cleanupBooking?.();
|
||||||
|
bookingStatus.textContent = "";
|
||||||
|
|
||||||
|
cleanupBooking = mountBookingPage(bookingRoot, {
|
||||||
|
packageId: pkg.id,
|
||||||
|
variantId: variantSelect?.value,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const bookingBtn = document.getElementById("proceed-to-booking-btn");
|
function updatePrice() {
|
||||||
|
if (!variantSelect) return;
|
||||||
|
|
||||||
|
const selectedOption = variantSelect.selectedOptions[0];
|
||||||
|
const price = Number(selectedOption.dataset.price);
|
||||||
|
|
||||||
|
displayedPrice.textContent = `${price.toFixed(2)} €`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePrice();
|
||||||
|
prepareBooking();
|
||||||
|
|
||||||
|
variantSelect?.addEventListener("change", () => {
|
||||||
|
updatePrice();
|
||||||
|
prepareBooking();
|
||||||
|
});
|
||||||
|
|
||||||
bookingBtn.addEventListener("click", () => {
|
bookingBtn.addEventListener("click", () => {
|
||||||
const params = new URLSearchParams({ id: pkg.id });
|
const dialog = bookingRoot.querySelector(".booking__dialog");
|
||||||
if (variantSelect) params.set("variant", variantSelect.value);
|
|
||||||
window.location.href = `booking.html?${params}`;
|
if (!dialog) {
|
||||||
|
bookingStatus.textContent =
|
||||||
|
"Das Buchungsformular ist noch nicht verfügbar. Bitte beachte den Ladehinweis im Buchungsbereich.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dialog.open) return;
|
||||||
|
|
||||||
|
bookingStatus.textContent = "";
|
||||||
|
|
||||||
|
dialog.addEventListener(
|
||||||
|
"close",
|
||||||
|
() => {
|
||||||
|
bookingBtn.focus();
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
dialog.showModal();
|
||||||
|
dialog.querySelector('[name="name"]').focus();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
import "./styles/styles.css";
|
import "./styles/styles.css";
|
||||||
|
<<<<<<< HEAD
|
||||||
|
=======
|
||||||
import "./components/navigationsbar/navigation.js";
|
import "./components/navigationsbar/navigation.js";
|
||||||
|
>>>>>>> dev
|
||||||
|
|
||||||
document.querySelector("#year").textContent = new Date().getFullYear();
|
document.querySelector("#year").textContent = new Date().getFullYear();
|
||||||
|
|
|
||||||
|
|
@ -1,123 +1,10 @@
|
||||||
:root {
|
#booking-root .booking__open {
|
||||||
--bg-dark: #0d0d1a;
|
display: none;
|
||||||
--bg-card: #1a1a2e;
|
|
||||||
--accent-teal: #10b981;
|
|
||||||
--text-white: #ffffff;
|
|
||||||
--text-lightgray: #f8fafc;
|
|
||||||
--text-muted: #94a3b8;
|
|
||||||
|
|
||||||
--font-display: "Playfair Display", serif;
|
|
||||||
--font-body: "Inter", system-ui, sans-serif;
|
|
||||||
}
|
}
|
||||||
|
/* Zusätzliche Booking-Übersicht ausblenden, Dialog erhalten. */
|
||||||
.packages-section {
|
#booking-root > .booking > h2,
|
||||||
background-color: var(--bg-dark);
|
#booking-root .booking__package,
|
||||||
padding: 4rem 2rem;
|
#booking-root .booking__payment,
|
||||||
font-family: var(--font-body);
|
#booking-root .booking__open {
|
||||||
color: var(--text-lightgray);
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
.packages-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
|
||||||
gap: 2rem;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-card {
|
|
||||||
background-color: var(--bg-card);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-type-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-type {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-highlight {
|
|
||||||
background-color: rgba(16, 185, 129, 0.1);
|
|
||||||
color: var(--accent-teal);
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-title {
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: 1.75rem;
|
|
||||||
color: var(--text-white);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-desc {
|
|
||||||
color: var(--text-lightgray);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-details-box {
|
|
||||||
background-color: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
flex-grow: 1; /* Schiebt den Button immer ganz nach unten */
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-title {
|
|
||||||
color: var(--text-white);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-text {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-btn {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--text-white);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.package-btn:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
border-color: var(--accent-teal);
|
|
||||||
color: var(--accent-teal);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue