koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anpassung Layou

Browse Source
This commit is contained in:
Simona Oswald 2026-04-21 21:57:57 +02:00
parent 24dc61a887
commit 51a07b6347
19 changed files with 274 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/event_create.css
View File

@ -14,16 +14,9 @@
box-sizing: border-box; box-sizing: border-box;
} }
.event-create-page {
width: min(100% - 2rem, var(--max-width));
margin: 0 auto;
padding: var(--space-5) 0 0;
}
.event-flow-header { .event-flow-header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
margin-bottom: var(--space-4);
} }
.event-form { .event-form {
@ -34,7 +27,6 @@
.step { .step {
display: none; display: none;
padding: var(--space-4) 0 var(--space-4);
} }
.submission-success { .submission-success {
@ -46,10 +38,11 @@
} }
.step-layout { .step-layout {
width: min(100%, var(--content-width)); gap: 80px;
margin: 0 auto; }
display: grid;
gap: var(--space-40); .startseite {
display: flex;
} }
.step-layout--intro { .step-layout--intro {
@ -80,13 +73,13 @@ fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
gap: var(--space-3); gap: var(--space-16);
} }
.step-text { .step-text {
/* definiert Breite des Beschriebtexts der einzelnen Schritte*/ /* definiert Breite des Beschriebtexts der einzelnen Schritte*/
max-width: 600px; max-width: 100%;
} }
.intro-card, .intro-card,
@ -121,21 +114,6 @@ fieldset {
} }
label {
font-family: var(--font-main);
font-weight: 400;
font-size: 1.25rem;
}
legend {
font-size: 1rem;
font-weight: 600;
letter-spacing: var(--ls-sm);
line-height: 1;
margin-bottom: var(--space-3);
}
.field-hint { .field-hint {
margin: -0.25rem 0 0; margin: -0.25rem 0 0;
color: var(--color-muted); color: var(--color-muted);
@ -203,7 +181,7 @@ textarea:focus {
.option-grid { .option-grid {
display: grid; display: grid;
gap: var(--space-3); gap: var(--space-16);
} }
.option-card { .option-card {
@ -243,7 +221,7 @@ textarea:focus {
.counter { .counter {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-3); gap: var(--space-16);
} }
.counter input { .counter input {
@ -264,7 +242,7 @@ textarea:focus {
.review-card--success { .review-card--success {
display: grid; display: grid;
gap: var(--space-5); gap: var(--space-5);
padding: var(--space-3) 0 0; padding: var(--space-16) 0 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
@ -349,9 +327,9 @@ textarea:focus {
.progress-label { .progress-label {
flex-shrink: 0; flex-shrink: 0;
font-size: 0.8rem; font-size: 1rem;
font-weight: 600; font-weight: 400;
color: var(--color-muted); color: var(--black);
white-space: nowrap; white-space: nowrap;
} }
@ -377,9 +355,8 @@ textarea:focus {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-4); gap: var(--space-4);
width: min(100%, var(--content-width));
margin: 0 auto;
padding: var(--space-4) 0; padding: var(--space-4) 0;
width: 100%;
} }
.flow-actions-right { .flow-actions-right {
@ -464,11 +441,11 @@ textarea:focus-visible {
@media (max-width: 767px) { @media (max-width: 767px) {
.site-nav { .site-nav {
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--space-3) 0; padding: var(--space-16) 0;
} }
.site-nav-links { .site-nav-links {
gap: var(--space-3); gap: var(--space-16);
} }
.flow-actions, .flow-actions,
@ -484,7 +461,6 @@ textarea:focus-visible {
@media (min-width: 768px) { @media (min-width: 768px) {
.step-layout--intro { .step-layout--intro {
width: min(100%, 56rem);
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
align-items: stretch; align-items: stretch;
gap: var(--space-8); gap: var(--space-8);

47
css/event_overview.css
View File

@ -1,11 +1,7 @@
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
/* --------------------------------------------------------- /* ---------------------------------------------------------
Shared Typography Tokens Shared Typography Tokens
Reuse common text styles across nav, controls and buttons Reuse common text styles across nav, controls and buttons
--------------------------------------------------------- */ --------------------------------------------------------- */
.meta-filter select, .meta-filter select,
.meta-filter input[type="date"], .meta-filter input[type="date"],
.detail-primary-btn { .detail-primary-btn {
@ -42,15 +38,19 @@
Overview Header + Filters Overview Header + Filters
--------------------------------------------------------- */ --------------------------------------------------------- */
.filter-label { .filter-label {
margin: 0 0 var(--space-1); font-family: var(--font-main);
letter-spacing: var(--ls-la); font-size: 1rem;
font-weight: 600;
letter-spacing: var(--ls-sm);
line-height: 1;
margin-bottom: var(--space-1);
} }
.filter-row { .filter-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-3); gap: var(--space-16);
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
} }
@ -135,7 +135,7 @@
.event-list { .event-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-16);
} }
.event-card { .event-card {
@ -228,7 +228,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-3); gap: var(--space-16);
padding-top: 36px; padding-top: 36px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -250,15 +250,14 @@
.event-spots-full, .detail-spots-pill-full { .event-spots-full, .detail-spots-pill-full {
/* Sold-out visual state, intentionally high-contrast and always filled. */ /* Sold-out visual state, intentionally high-contrast and always filled. */
border: 1.5px solid var(--tomato); border: 1.5px solid var(--tomato-light);
padding: var(--space-01) var(--space-4); padding: var(--space-01) var(--space-4);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
color: var(--butter-light); color: var(--butter-light);
background: var(--tomato); background: var(--tomato-light);
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
} }
@ -358,7 +357,7 @@
.detail-side-stack { .detail-side-stack {
grid-area: side; grid-area: side;
display: grid; display: grid;
gap: var(--space-3); gap: var(--space-16);
align-content: start; align-content: start;
} }
@ -400,7 +399,7 @@
/* Editorial mosaic: first image spans two rows, side images stack vertically. */ /* Editorial mosaic: first image spans two rows, side images stack vertically. */
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(220px, 1fr)); grid-template-rows: repeat(2, minmax(220px, 1fr));
gap: var(--space-3); gap: var(--space-16);
min-height: 520px; min-height: 520px;
} }
@ -649,13 +648,16 @@
color: var(--olive); color: var(--olive);
} }
/*
.detail-spots-pill-full { .detail-spots-pill-full {
border-color: var(--tomato); border: 1.5px solid var(--tomato-light);
color: var(--tomato); color: var(--butter-light);
opacity: 1; background: var(--tomato-light);
font-weight: 600; font-family: var(--font-main);
}*/ font-weight: 400;
font-size: 1.25rem;
cursor: not-allowed;
}
.detail-action-btn-wrap { .detail-action-btn-wrap {
display: flex; display: flex;
@ -717,11 +719,6 @@
box-shadow: 0 2px 6px rgba(102, 52, 13, 0.22); box-shadow: 0 2px 6px rgba(102, 52, 13, 0.22);
} }
.detail-primary-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.detail-primary-btn-own, .detail-primary-btn-own,
.detail-primary-btn-own:disabled { .detail-primary-btn-own:disabled {
border-color: var(--olive-light); border-color: var(--olive-light);

21
css/index.css
View File

@ -6,7 +6,6 @@
/* --- Navigation overrides (index-specific) --- */ /* --- Navigation overrides (index-specific) --- */
.nav-link { .nav-link {
border: 2px solid var(--olive-light); border: 2px solid var(--olive-light);
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
@ -36,10 +35,9 @@
/* --- Page layout --- */ /* --- Page layout --- */
.main-content { .container {
width: min(100% - 4rem, 1120px); width: min(100% - 4rem, 1200px);
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
} }
@ -48,19 +46,10 @@
.hero { .hero {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 55px; gap: 80px;
margin-bottom: 88px; margin-bottom: 100px;
align-items: center;
padding: 44px 0;
} }
/*
.hero__buttons {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}*/
.hero__right { .hero__right {
display: flex; display: flex;
align-items: center; align-items: center;
@ -103,7 +92,7 @@
/* --- "So funktioniert's" steps --- */ /* --- "So funktioniert's" steps --- */
.how-it-works { .how-it-works {
margin-bottom: 70px; margin-bottom: 100px;
} }
.how-it-works__header { .how-it-works__header {

8
css/login_signup.css
View File

@ -7,7 +7,7 @@
/* --- Page layout --- */ /* --- Page layout --- */
.main-content { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -127,7 +127,7 @@ button[type="submit"]:active {
.info-box { .info-box {
background-color: var(--butter-light); background-color: var(--butter-light);
border-left: 4px solid var(--olive); border-left: 4px solid var(--olive);
padding: var(--space-3); padding: var(--space-16);
margin-bottom: var(--space-40); margin-bottom: var(--space-40);
border-radius: 4px; border-radius: 4px;
font-size: 0.9rem; font-size: 0.9rem;
@ -232,7 +232,7 @@ button[type="submit"]:active {
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
padding: var(--space-3) var(--space-5); padding: var(--space-16) var(--space-5);
border: none; border: none;
margin-top: 40px; margin-top: 40px;
} }
@ -284,7 +284,7 @@ button[type="submit"]:active {
transform: translateX(-50%) translateY(100px); transform: translateX(-50%) translateY(100px);
background: var(--olive); background: var(--olive);
color: var(--white); color: var(--white);
padding: var(--space-3) var(--space-40); padding: var(--space-16) var(--space-40);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;

54
css/my_profil.css
View File

@ -1,9 +1,4 @@
.profile-page { 
/* Reserve a large safe zone below sticky nav so title/actions are never covered. */
margin-top: 0;
padding-top: 6.5rem;
margin-bottom: var(--space-8);
}
/* Kopfbereich mit Titel und Logout-Aktion. */ /* Kopfbereich mit Titel und Logout-Aktion. */
.profile-hero { .profile-hero {
@ -44,6 +39,22 @@
gap: var(--space-4); gap: var(--space-4);
} }
.btn-count {
color: var(--black);
background: var(--tomato-light);
height: 32px;
width: 32px;
margin-right: -18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
}
.category-item.is-active .btn-count {
background: var(--butter-light);
}
/* Konsistentes Karten-Layout für alle Profilsektionen. */ /* Konsistentes Karten-Layout für alle Profilsektionen. */
.profile-panel { .profile-panel {
@ -53,27 +64,10 @@
} }
.panel-head { .panel-head {
display: flex; display: none;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: var(--space-3); margin-bottom: var(--space-16);
}
.panel-title {
margin: 0;
color: var(--brown);
font-size: 1.8rem;
}
.panel-count {
min-width: 2rem;
padding: 0.1rem 0.65rem;
border-radius: var(--radius-pill);
background: var(--olive-light);
color: var(--black);
font-size: 0.95rem;
font-weight: 600;
text-align: center;
} }
.profile-card-list { .profile-card-list {
@ -100,7 +94,7 @@
} }
.profile-event-card-clickable:hover { .profile-event-card-clickable:hover {
transform: translateY(-1px); transform: translateY(-3px);
} }
.profile-event-title h3{ .profile-event-title h3{
@ -191,11 +185,11 @@
.form-grid { .form-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--space-3); gap: var(--space-16);
} }
.form-group { .form-group {
margin-bottom: var(--space-3); margin-bottom: var(--space-16);
} }
.form-group label { .form-group label {
@ -250,7 +244,7 @@
.profile-cta-row { .profile-cta-row {
display: flex; display: flex;
gap: var(--space-2); gap: var(--space-2);
margin-top: var(--space-3); margin-top: var(--space-16);
} }
.profile-button-secondary { .profile-button-secondary {
@ -262,7 +256,7 @@
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
.profile-page { .container {
padding-top: 5.5rem; padding-top: 5.5rem;
} }

106
css/stylesheet_global.css
View File

@ -18,7 +18,8 @@
--tomato: #D44B24; --tomato: #D44B24;
--tomato-dark: #D44B24; --tomato-dark: #B53A18;
--tomato-light: #E5937C;
--olive: #6B6B05; --olive: #6B6B05;
--olive-dark: #545404; --olive-dark: #545404;
--olive-light: #C8CC7A; --olive-light: #C8CC7A;
@ -44,7 +45,7 @@
--space-01: 0.375rem; /* 6px */ --space-01: 0.375rem; /* 6px */
--space-1: 0.5rem; /* 8px */ --space-1: 0.5rem; /* 8px */
--space-2: 0.75rem; /* 12px */ --space-2: 0.75rem; /* 12px */
--space-3: 1rem; /* 16px */ --space-16: 1rem; /* 16px */
--space-20: 1.25rem; /* 20px */ --space-20: 1.25rem; /* 20px */
--space-4: 1.5rem; /* 24px */ --space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */ --space-5: 2rem; /* 32px */
@ -124,6 +125,33 @@ p {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
.label-input-field {
font-family: var(--font-main);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: var(--ls-sm);
line-height: 1;
margin-bottom: var(--space-16);
}
label {
font-family: var(--font-main);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: var(--ls-sm);
line-height: 1;
margin-bottom: var(--space-0);
}
.option {
font-family: var(--font-main);
font-size: 1rem;
font-weight: 600;
letter-spacing: var(--ls-sm);
line-height: 1;
margin-bottom: var(--space-16);
}
.link-text a{ .link-text a{
color: var(--blue); color: var(--blue);
margin-top: var(--space-4); margin-top: var(--space-4);
@ -167,7 +195,7 @@ p {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-3); gap: var(--space-16);
padding-top: 36px; padding-top: 36px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -188,16 +216,39 @@ p {
} }
/* Layout */ /* Layout */
.main-content {
margin-top: var(--space-8);
.layout-wide {
width: 75%;
max-width: 1200px;
margin: 82px auto 0 auto;
gap: 120px;
} }
.layout-narrow {
width: 55%;
max-width: 900px;
margin: 82px auto 0 auto;
}
/*
.container { .container {
width: 90%; width: 80%;
max-width: 75rem; max-width: 75rem;
margin: 0 auto; margin: 0 auto;
} }
*/
/* Media Queries (Responsive) */
@media (max-width: 48rem) {
.container {
width: 95%;
}
.nav {
flex-direction: column;
}
}
.icon { .icon {
width: 20px; width: 20px;
@ -436,7 +487,8 @@ p {
transition: background-color 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease;
} }
.counter-button:hover, .counter-button:focus-visible { .counter-button:hover,
.counter-button:focus-visible {
background-color: var(--olive-dark); background-color: var(--olive-dark);
border-color: var(--olive-dark); border-color: var(--olive-dark);
} }
@ -456,28 +508,30 @@ p {
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
} }
.category-item:hover, .category-item:focus-visible { .category-item:hover,
.category-item:focus-visible,
.category-item.is-active,
.category-item.active {
background: var(--tomato); background: var(--tomato);
color: var(--butter-light); color: var(--butter-light);
} }
.category-item.is-active, .category-item.active {
background: var(--tomato); .category-items {
color: var(--butter-light); display: inline-flex;
flex-wrap: wrap;
gap: var(--space-1);
} }
.category-item-profile { .category-item-profile {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
padding: var(--space-1) var(--space-4); height: 44px;
padding: 0 var(--space-4);
}
.category-items {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; align-items: center;
gap: var(--space-1); gap: var(--space-16);
} }
.button-small { .button-small {
@ -490,7 +544,7 @@ p {
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
padding: 10px var(--space-3); padding: 10px var(--space-16);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@ -676,7 +730,7 @@ p {
transform: translateX(-50%) translateY(100px); transform: translateX(-50%) translateY(100px);
background: var(--olive); background: var(--olive);
color: var(--white); color: var(--white);
padding: var(--space-3) var(--space-40); padding: var(--space-16) var(--space-40);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@ -754,7 +808,7 @@ p {
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
margin-top: 120px; margin-top: 120px;
padding: var(--space-3) var(--space-7); padding: var(--space-16) var(--space-7);
} }
.footer-links { .footer-links {
@ -779,13 +833,3 @@ p {
gap: var(--space-4); gap: var(--space-4);
} }
/* Media Queries (Responsive) */
@media (max-width: 48rem) {
.container {
width: 95%;
}
.nav {
flex-direction: column;
}
}

2
datenschutz.html
View File

@ -19,7 +19,7 @@
</div> </div>
</header> </header>
<main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;"> <main class="layout-wide">
<h1>Datenschutzerklärung</h1> <h1>Datenschutzerklärung</h1>
<h3>1. Verantwortliche Stelle</h3> <h3>1. Verantwortliche Stelle</h3>

60
event_create.html
View File

@ -35,11 +35,11 @@
<form id="eventForm" class="event-form" novalidate> <form id="eventForm" class="event-form" novalidate>
<section <section
class="step step--active step--intro" class="step step--active step--intro layout-wide"
data-step="0" data-step="0"
aria-labelledby="intro-title" aria-labelledby="intro-title"
> >
<div class="step-layout step-layout--intro"> <div class="step-layout hero startseite">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Event erstellen</p> <p class="badge">Event erstellen</p>
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1> <h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
@ -52,17 +52,17 @@
</button> </button>
</div> </div>
<aside class="intro-card intro-card--image" aria-label="Stimmungsbild zur Event-Erstellung"> <div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
<img <img
class="intro-image" class="intro-image"
src="assets/eventcreate_foodtable.jpg" src="assets/eventcreate_foodtable.jpg"
alt="Ein gedeckter Tisch mit gemeinsamem Essen" alt="Ein gedeckter Tisch mit gemeinsamem Essen"
/> />
</aside> </div>
</div> </div>
</section> </section>
<section class="step" data-step="1" aria-labelledby="step1-title"> <section class="step layout-narrow" data-step="1" aria-labelledby="step1-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 1</p> <p class="badge">Schritt 1</p>
@ -75,25 +75,25 @@
<div class="step-fields"> <div class="step-fields">
<fieldset class="form-field"> <fieldset class="form-field">
<legend>Art des Essens / Eventtyp</legend> <label>Art des Essens / Eventtyp</label>
<div class="option-grid option-grid--4"> <div class="option-grid option-grid--4">
<label class="option-card"> <label class="option-card option">
<input type="radio" name="eventType" value="Brunch" required /> <input type="radio" name="eventType" value="Brunch" required />
<span>Brunch</span> <span>Brunch</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="radio" name="eventType" value="Lunch" /> <input type="radio" name="eventType" value="Lunch" />
<span>Lunch</span> <span>Lunch</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="radio" name="eventType" value="Kaffee + Kuchen" /> <input type="radio" name="eventType" value="Kaffee + Kuchen" />
<span>Kaffee + Kuchen</span> <span>Kaffee + Kuchen</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="radio" name="eventType" value="Dinner" /> <input type="radio" name="eventType" value="Dinner" />
<span>Dinner</span> <span>Dinner</span>
</label> </label>
@ -101,7 +101,7 @@
</fieldset> </fieldset>
<fieldset class="form-field"> <fieldset class="form-field">
<legend>Maximale Personenanzahl</legend> <label>Maximale Personenanzahl</label>
<div class="counter" data-counter> <div class="counter" data-counter>
<button <button
@ -135,7 +135,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="2" aria-labelledby="step2-title"> <section class="step layout-narrow" data-step="2" aria-labelledby="step2-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 2</p> <p class="badge">Schritt 2</p>
@ -147,25 +147,25 @@
<div class="step-fields"> <div class="step-fields">
<fieldset class="form-field"> <fieldset class="form-field">
<legend>Ernährungsform</legend> <label>Ernährungsform</label>
<div class="option-grid option-grid--4"> <div class="option-grid option-grid--4">
<label class="option-card"> <label class="option-card option">
<input type="checkbox" name="dietType" value="Fleisch" /> <input type="checkbox" name="dietType" value="Fleisch" />
<span>Fleisch</span> <span>Fleisch</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="checkbox" name="dietType" value="Fisch" /> <input type="checkbox" name="dietType" value="Fisch" />
<span>Fisch</span> <span>Fisch</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="checkbox" name="dietType" value="Vegetarisch" /> <input type="checkbox" name="dietType" value="Vegetarisch" />
<span>Vegetarisch</span> <span>Vegetarisch</span>
</label> </label>
<label class="option-card"> <label class="option-card option">
<input type="checkbox" name="dietType" value="Vegan" /> <input type="checkbox" name="dietType" value="Vegan" />
<span>Vegan</span> <span>Vegan</span>
</label> </label>
@ -180,7 +180,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="3" aria-labelledby="step3-title"> <section class="step layout-narrow" data-step="3" aria-labelledby="step3-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 3</p> <p class="badge">Schritt 3</p>
@ -192,23 +192,23 @@
<div class="step-fields"> <div class="step-fields">
<fieldset class="form-field"> <fieldset class="form-field">
<legend>Allergene / Unverträglichkeiten</legend> <label>Allergene / Unverträglichkeiten</label>
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p> <p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
<div class="option-grid option-grid--3"> <div class="option-grid option-grid--3">
<label class="option-card option-card--checkbox"> <label class="option-card option">
<input type="checkbox" name="allergies" value="glutenfrei" /> <input type="checkbox" name="allergies" value="glutenfrei" />
<span>glutenfrei</span> <span>Glutenfrei</span>
</label> </label>
<label class="option-card option-card--checkbox"> <label class="option-card option">
<input type="checkbox" name="allergies" value="laktosefrei" /> <input type="checkbox" name="allergies" value="laktosefrei" />
<span>laktosefrei</span> <span>Laktosefrei</span>
</label> </label>
<label class="option-card option-card--checkbox"> <label class="option-card option">
<input type="checkbox" name="allergies" value="ohne Nüsse" /> <input type="checkbox" name="allergies" value="ohne Nüsse" />
<span>ohne Nüsse</span> <span>Ohne Nüsse</span>
</label> </label>
</div> </div>
</fieldset> </fieldset>
@ -221,7 +221,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="4" aria-labelledby="step4-title"> <section class="step layout-narrow" data-step="4" aria-labelledby="step4-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 4</p> <p class="badge">Schritt 4</p>
@ -247,7 +247,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="5" aria-labelledby="step5-title"> <section class="step layout-narrow" data-step="5" aria-labelledby="step5-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 5</p> <p class="badge">Schritt 5</p>
@ -271,7 +271,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="6" aria-labelledby="step6-title"> <section class="step layout-narrow" data-step="6" aria-labelledby="step6-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 6</p> <p class="badge">Schritt 6</p>
@ -305,7 +305,7 @@
</div> </div>
</section> </section>
<section class="step" data-step="7" aria-labelledby="step7-title"> <section class="step layout-narrow" data-step="7" aria-labelledby="step7-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 7</p> <p class="badge">Schritt 7</p>
@ -378,7 +378,7 @@
</section> </section>
<div class="flow-footer" id="flowFooter" hidden> <div class="flow-footer layout-narrow" id="flowFooter" hidden>
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p> <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>

4
event_detail.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invité | Event-Detail</title> <title>Invité | Event-Detail</title>
<!-- Stylesheet für diese Seite--> <!-- Stylesheet für diese Seite-->
<link rel="stylesheet" href="css/event_overview.css"> <link rel="stylesheet" href="css/event_overview.css">
@ -28,7 +28,7 @@
</header> </header>
<!-- Main content: detail page gets fully injected by JavaScript --> <!-- Main content: detail page gets fully injected by JavaScript -->
<main class="container"> <main class="container layout-wide">
<!-- Render target: loading, error state or full detail layout --> <!-- Render target: loading, error state or full detail layout -->
<div id="detail-view"> <div id="detail-view">
<p>Lädt Event-Details...</p> <p>Lädt Event-Details...</p>

9
event_overview.html
View File

@ -28,13 +28,14 @@
</header> </header>
<!-- Main content: page headline, filter controls and dynamic event list --> <!-- Main content: page headline, filter controls and dynamic event list -->
<main class="container"> <main class="container layout-wide">
<!-- Page headline --> <!-- Page headline -->
<h1>Events</h1> <p class="badge margin-bottom-40">Event finden</p>
<h1>Was darf es sein?</h1>
<!-- Filter section: category chips + location/date filters --> <!-- Filter section: category chips + location/date filters -->
<section class="filter-section"> <section class="filter-section">
<p class="filter-label">Was darf es sein?</p> <p class="filter-label">Art des Essens / Eventtyp</p>
<div class="filter-row"> <div class="filter-row">
<!-- Primary category filter buttons --> <!-- Primary category filter buttons -->
<div class="category-group"> <div class="category-group">
@ -63,6 +64,7 @@
</div> </div>
</div> </div>
<p class="filter-label">Ernährungsform</p>
<div class="filter-row"> <div class="filter-row">
<!-- Primary category filter buttons --> <!-- Primary category filter buttons -->
<div class="category-group"> <div class="category-group">
@ -73,6 +75,7 @@
</div> </div>
</div> </div>
<p class="filter-label">Allergene</p>
<div class="filter-row"> <div class="filter-row">
<!-- Primary category filter buttons --> <!-- Primary category filter buttons -->
<div class="category-group"> <div class="category-group">

2
impressum.html
View File

@ -19,7 +19,7 @@
</div> </div>
</header> </header>
<main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;"> <main class="layout-wide">
<h1>Impressum</h1> <h1>Impressum</h1>
<h3>Angaben gemäss § 5 TMG</h3> <h3>Angaben gemäss § 5 TMG</h3>

2
index.html
View File

@ -29,7 +29,7 @@
</div> </div>
</header> </header>
<main class="main-content"> <main class="container layout-wide">
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression --> <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
<section class="hero"> <section class="hero">
<div class="hero__left"> <div class="hero__left">

69
js/event_detail.js
View File

@ -5,7 +5,7 @@
// ------------------------------------------------------------- // -------------------------------------------------------------
// DOM entry point and shared asset path. // DOM entry point and shared asset path.
// ------------------------------------------------------------- // -------------------------------------------------------------
const detailContainer = document.getElementById('detail-view'); const detailcontainer = document.getElementById('detail-view');
const locationIconPath = 'assets/icon_location.svg'; const locationIconPath = 'assets/icon_location.svg';
const calendarIconPath = 'assets/icon_calendar.svg'; const calendarIconPath = 'assets/icon_calendar.svg';
const gastIconPath = 'assets/icon_gast.svg'; const gastIconPath = 'assets/icon_gast.svg';
@ -212,7 +212,7 @@
if (event) { if (event) {
renderDetailPage(event); renderDetailPage(event);
} else { } else {
detailContainer.innerHTML = "<h1>Event wurde nicht gefunden.</h1><a href='event_overview.html'>Zurück zur Übersicht</a>"; detailcontainer.innerHTML = "<h1>Event wurde nicht gefunden.</h1><a href='event_overview.html'>Zurück zur Übersicht</a>";
} }
} catch (error) { } catch (error) {
console.error("Fehler beim Laden der Details:", error); console.error("Fehler beim Laden der Details:", error);
@ -340,7 +340,7 @@
// Render complete detail page layout including: // Render complete detail page layout including:
// hero metadata, host card, menu, participants, gallery and sticky action bar. // hero metadata, host card, menu, participants, gallery and sticky action bar.
detailContainer.innerHTML = ` detailcontainer.innerHTML = `
<section class="detail-hero"> <section class="detail-hero">
<div class="detail-top-row"> <div class="detail-top-row">
@ -430,25 +430,34 @@
<strong>${event.title}</strong> <strong>${event.title}</strong>
</div> </div>
<div class="detail-action-buttons"> <div class="detail-action-btn-wrap">
<span class="detail-spots-pill${isFull ? ' detail-spots-pill-full' : ''}"> ${isFull ? `
${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`} <button
</span> class="detail-primary-btn detail-spots-pill-full"
<div class="detail-action-btn-wrap"> type="button"
<button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}> disabled>
${actionButtonLabel} Ausgebucht
</button> </button>
${isRegistered && deregInfo.daysLeft !== null ? ` ` : `
<small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}"> <button
${deregInfo.isClosed class="detail-primary-btn${actionButtonVariantClass}"
? 'Abmeldefrist abgelaufen' type="button"
: deregInfo.daysLeft === 1 data-register-button
? 'Noch 1 Tag zur Abmeldung' ${actionButtonDisabled ? 'disabled' : ''}>
: `Noch ${deregInfo.daysLeft} Tage zur Abmeldung`} ${actionButtonLabel}
</small> </button>
` : ''} `}
</div>
</div> ${isRegistered && deregInfo.daysLeft !== null ? `
<small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}">
${deregInfo.isClosed
? 'Abmeldefrist abgelaufen'
: deregInfo.daysLeft === 1
? 'Noch 1 Tag zur Abmeldung'
: `Noch ${deregInfo.daysLeft} Tage zur Abmeldung`}
</small>
` : ''}
</div>
</section> </section>
<div class="detail-lightbox" aria-hidden="true"> <div class="detail-lightbox" aria-hidden="true">
@ -465,11 +474,11 @@
// Lightbox behavior for gallery images: // Lightbox behavior for gallery images:
// open on image click, close via backdrop, close button or ESC. // open on image click, close via backdrop, close button or ESC.
// --------------------------------------------------------- // ---------------------------------------------------------
const lightbox = detailContainer.querySelector('.detail-lightbox'); const lightbox = detailcontainer.querySelector('.detail-lightbox');
const lightboxImage = detailContainer.querySelector('.detail-lightbox-image'); const lightboxImage = detailcontainer.querySelector('.detail-lightbox-image');
const lightboxClose = detailContainer.querySelector('.detail-lightbox-close'); const lightboxClose = detailcontainer.querySelector('.detail-lightbox-close');
const galleryButtons = detailContainer.querySelectorAll('.detail-gallery-item'); const galleryButtons = detailcontainer.querySelectorAll('.detail-gallery-item');
const registerButton = detailContainer.querySelector('[data-register-button]'); const registerButton = detailcontainer.querySelector('[data-register-button]');
// Harte Absicherung: Eigene Events sind auf der Detailseite immer deaktiviert. // Harte Absicherung: Eigene Events sind auf der Detailseite immer deaktiviert.
if (registerButton && isOwnEvent) { if (registerButton && isOwnEvent) {
@ -530,9 +539,9 @@
} }
// "Alle ansehen": Teilnehmerliste aufklappen / zuklappen. // "Alle ansehen": Teilnehmerliste aufklappen / zuklappen.
const showAllBtn = detailContainer.querySelector('[data-show-all-participants]'); const showAllBtn = detailcontainer.querySelector('[data-show-all-participants]');
const avatarRow = detailContainer.querySelector('[data-participants-row]'); const avatarRow = detailcontainer.querySelector('[data-participants-row]');
const fullList = detailContainer.querySelector('[data-participants-full]'); const fullList = detailcontainer.querySelector('[data-participants-full]');
if (showAllBtn && avatarRow && fullList) { if (showAllBtn && avatarRow && fullList) {
showAllBtn.addEventListener('click', () => { showAllBtn.addEventListener('click', () => {

8
js/index-carousel.js
View File

@ -7,7 +7,7 @@
const carouselTrack = document.querySelector('.gallery__track'); const carouselTrack = document.querySelector('.gallery__track');
const prevArrow = document.querySelector('.gallery__arrow--prev'); const prevArrow = document.querySelector('.gallery__arrow--prev');
const nextArrow = document.querySelector('.gallery__arrow--next'); const nextArrow = document.querySelector('.gallery__arrow--next');
const dotsContainer = document.querySelector('.gallery_dots'); const dotscontainer = document.querySelector('.gallery_dots');
// Nur ausführen, wenn die Galerie auf der Seite vorhanden ist. // Nur ausführen, wenn die Galerie auf der Seite vorhanden ist.
if (carouselTrack) { if (carouselTrack) {
@ -22,8 +22,8 @@ if (carouselTrack) {
var dots = []; var dots = [];
function buildDots() { function buildDots() {
if (!dotsContainer) return; if (!dotscontainer) return;
dotsContainer.innerHTML = ''; dotscontainer.innerHTML = '';
dots = []; dots = [];
for (var i = 0; i < pageCount; i++) { for (var i = 0; i < pageCount; i++) {
var dot = document.createElement('button'); var dot = document.createElement('button');
@ -36,7 +36,7 @@ if (carouselTrack) {
dot.addEventListener('click', function() { dot.addEventListener('click', function() {
goToPage(parseInt(this.dataset.page)); goToPage(parseInt(this.dataset.page));
}); });
dotsContainer.appendChild(dot); dotscontainer.appendChild(dot);
dots.push(dot); dots.push(dot);
} }
} }

45
js/my_profil.js
View File

@ -14,7 +14,9 @@
const profileTabPanels = Array.from(document.querySelectorAll('[data-profile-panel]')); const profileTabPanels = Array.from(document.querySelectorAll('[data-profile-panel]'));
const myEventsCount = document.getElementById('my-events-count'); const myEventsCount = document.getElementById('my-events-count');
const myEventsBtnCount = document.getElementById('btn-my-events-count');
const myRegistrationsCount = document.getElementById('my-registrations-count'); const myRegistrationsCount = document.getElementById('my-registrations-count');
const myRegistrationsBtnCount = document.getElementById('btn-my-registrations-count');
const myEventsList = document.getElementById('my-events-list'); const myEventsList = document.getElementById('my-events-list');
const myRegistrationsList = document.getElementById('my-registrations-list'); const myRegistrationsList = document.getElementById('my-registrations-list');
@ -459,28 +461,37 @@
return events.filter(event => idSet.has(Number(event.id))); return events.filter(event => idSet.has(Number(event.id)));
} }
// Rendert gehostete Events inkl. Zähler. // Rendert angemeldete Events inkl. Zähler.
function renderMyEvents(events, user) { function renderMyEvents(events, user) {
const hostedEvents = getMyHostedEvents(events, user); const hostedEvents = getMyHostedEvents(events, user);
myEventsCount.textContent = String(hostedEvents.length); const count = hostedEvents.length;
renderEventCards(myEventsList, hostedEvents, {
title: 'Noch kein eigenes Event', myEventsCount.textContent = String(count);
text: 'Starte dein erstes Dinner und lade die Community an deinen Tisch ein.', if (myEventsBtnCount) myEventsBtnCount.textContent = String(count);
buttonLabel: 'Event erstellen',
href: 'event_create.html' renderEventCards(myEventsList, hostedEvents, {
}, 'hosting'); title: 'Noch kein eigenes Event',
text: 'Starte dein erstes Dinner und lade die Community an deinen Tisch ein.',
buttonLabel: 'Event erstellen',
href: 'event_create.html'
}, 'hosting');
} }
// Rendert angemeldete Events inkl. Zähler. // Rendert angemeldete Events inkl. Zähler.
function renderMyRegistrations(events, user) { function renderMyRegistrations(events, user) {
const registeredEvents = getMyRegisteredEvents(events, user); const registeredEvents = getMyRegisteredEvents(events, user);
myRegistrationsCount.textContent = String(registeredEvents.length);
renderEventCards(myRegistrationsList, registeredEvents, { const count = registeredEvents.length;
title: 'Noch keine Anmeldungen',
text: 'Entdecke spannende Dinner in deiner Naehe und melde dich direkt an.', myRegistrationsCount.textContent = String(count);
buttonLabel: 'Events entdecken', if (myRegistrationsBtnCount) myRegistrationsBtnCount.textContent = String(count);
href: 'event_overview.html'
}, 'registrations'); renderEventCards(myRegistrationsList, registeredEvents, {
title: 'Noch keine Anmeldungen',
text: 'Entdecke spannende Dinner in deiner Naehe und melde dich direkt an.',
buttonLabel: 'Events entdecken',
href: 'event_overview.html'
}, 'registrations');
} }
// Baut die Eventkarten für beide Listen in einheitlichem Markup. // Baut die Eventkarten für beide Listen in einheitlichem Markup.

6
js/navigation.js
View File

@ -6,11 +6,11 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const CURRENT_USER_KEY = 'socialCookingCurrentUser'; const CURRENT_USER_KEY = 'socialCookingCurrentUser';
const navContainers = document.querySelectorAll('.nav-tab-links'); const navcontainers = document.querySelectorAll('.nav-tab-links');
const currentPage = (window.location.pathname.split('/').pop() || 'index.html').toLowerCase(); const currentPage = (window.location.pathname.split('/').pop() || 'index.html').toLowerCase();
// Beendet früh, falls auf einer Seite keine Hauptnavigation vorhanden ist. // Beendet früh, falls auf einer Seite keine Hauptnavigation vorhanden ist.
if (!navContainers.length) { if (!navcontainers.length) {
return; return;
} }
@ -113,7 +113,7 @@ document.addEventListener('DOMContentLoaded', () => {
const nextMarkup = currentUser ? buildLoggedInNavigation(currentUser) : buildLoggedOutNavigation(); const nextMarkup = currentUser ? buildLoggedInNavigation(currentUser) : buildLoggedOutNavigation();
// Wendet das passende Markup auf alle vorhandenen Kopf-Navigationen an. // Wendet das passende Markup auf alle vorhandenen Kopf-Navigationen an.
navContainers.forEach(container => { navcontainers.forEach(container => {
container.innerHTML = nextMarkup; container.innerHTML = nextMarkup;
}); });
}); });

4
login.html
View File

@ -26,7 +26,7 @@
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<div class="main-content"> <div class="container">
<div class="container"> <div class="container">
<div class="image-section"> <div class="image-section">
<img src="assets/index_cooking.jpg" alt="Social Cooking"> <img src="assets/index_cooking.jpg" alt="Social Cooking">
@ -56,7 +56,7 @@
</form> </form>
</div> </div>
</div> </div>
</div> <!-- Schliesst main-content --> </div> <!-- Schliesst container -->
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div> <div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
<script src="js/login.js"></script> <script src="js/login.js"></script>
<div class="footer"> <div class="footer">

11
my_profil.html
View File

@ -29,7 +29,7 @@
</div> </div>
</header> </header>
<main class="container profile-page"> <main class="layout-wide">
<section class="profile-hero" aria-label="Profilübersicht"> <section class="profile-hero" aria-label="Profilübersicht">
<div> <div>
<p class="badge">Mein Bereich</p> <p class="badge">Mein Bereich</p>
@ -49,8 +49,13 @@
<section id="logged-in-content" class="profile-grid"> <section id="logged-in-content" class="profile-grid">
<nav class="category-items" aria-label="Profilbereiche"> <nav class="category-items" aria-label="Profilbereiche">
<button type="button" class="category-item is-active category-item-profile" data-category-item="hosting">Meine Events</button> <button type="button" class="category-item is-active category-item-profile" data-category-item="hosting">
<button type="button" class="category-item category-item-profile" data-category-item="teilnehmen">Meine Anmeldungen</button> Meine Events <span class="btn-count" id="btn-my-events-count">0</span>
</button>
<button type="button"
class="category-item category-item-profile" data-category-item="teilnehmen">
Meine Anmeldungen <span class="btn-count" id="btn-my-registrations-count">0</span>
</button>
<button type="button" class="category-item category-item-profile" data-category-item="einstellungen">Profil-Einstellungen</button> <button type="button" class="category-item category-item-profile" data-category-item="einstellungen">Profil-Einstellungen</button>
</nav> </nav>

4
signup.html
View File

@ -26,7 +26,7 @@
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<div class="main-content"> <div class="container">
<div class="container"> <div class="container">
<div class="image-section"> <div class="image-section">
<img src="assets/index_cooking.jpg" alt="Social Cooking"> <img src="assets/index_cooking.jpg" alt="Social Cooking">
@ -73,7 +73,7 @@
</form> </form>
</div> </div>
</div> </div>
</div> <!-- Schliesst main-content --> </div> <!-- Schliesst container -->
<!-- Welcome Modal --> <!-- Welcome Modal -->
<div id="welcomeModal" class="modal"> <div id="welcomeModal" class="modal">