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

Clean up CSS to use global stylesheet, fix carousel, add impressum page and footer to all pages, update login styles

Browse Source
This commit is contained in:
Estelle Köhler 2026-04-03 16:54:16 +02:00
parent a456caa24a
commit 6d3f699ea4
10 changed files with 534 additions and 592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

573
css/index.css
View File

@ -1,153 +1,50 @@
/* Instagram and Invite logo in gallery info area */ /* ===========================================
.gallery__icon--instagram { INDEX.CSS — Styles specific to index.html
height: 32px; Global styles (reset, variables, body, nav,
width: 32px; brand, typography) are in stylesheet_global.css
object-fit: contain; =========================================== */
border-radius: 8px;
background: none;
/* Olive green filter for PNG: #6b6b05 */
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
}
.gallery__icon--invite {
height: 56px;
width: 56px;
object-fit: contain;
margin-left: 0;
transform: translate(-4%, -1%);
position: relative;
}
* { box-sizing: border-box; }
:root { /* --- Navigation overrides (index-specific) --- */
--black: #000000;
--white: #ffffff;
--button-green: #6b6b05;
--button-green-dark: #514c04;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #FFFDE3; /* butter background color from stylesheet */
}
.page-wrapper {
max-width: 1440px;
margin: 0 auto;
background: var(--white);
padding: 40px;
border: 1px solid var(--black);
}
/* --- 1. Basic Layout Logic --- */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border: 1px solid var(--black);
margin-bottom: 40px; /* Using your 40px margin from the first block */
}
.header__brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 1.2rem;
}
.brand__logo {
height: 34px;
width: auto;
object-fit: contain;
}
/* Grouping container for 'Event finden' and 'Login' */
.header__actions {
display: flex;
align-items: center;
gap: 6px;
}
.top-nav-wrap {
background: #FFFDE3;
padding: 18px 0;
}
.top-nav {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
min-height: 58px;
padding: 12px 24px;
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 0 0 40px;
}
.brand {
display: inline-flex;
align-items: center;
height: 50px;
text-decoration: none;
}
.brand img {
width: auto;
height: 100%;
max-width: 104px;
display: block;
}
.top-nav-links {
display: flex;
align-items: center;
gap: 16px;
}
.nav-link { .nav-link {
color: #221c1a; border: 2px solid var(--olive-light);
line-height: 1.3;
text-decoration: none;
padding: 8px 20px;
border: 2px solid #e5e1b7;
border-radius: 20px;
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
} }
.nav-link:hover, .nav-link:hover,
.nav-link.active, .nav-link.active,
.nav-link:focus-visible { .nav-link:focus-visible {
background: #6b6b05; background: var(--olive);
color: #ffffff; color: var(--white);
border-color: #6b6b05; border-color: var(--olive);
} }
.nav-link--login { .nav-link--login {
background: #6b6b05; background: var(--olive);
color: #ffffff; color: var(--white);
border-color: #6b6b05; border-color: var(--olive);
} }
.nav-link--login:hover, .nav-link--login:hover,
.nav-link--login:focus-visible { .nav-link--login:focus-visible {
background: #ffffff; background: var(--white);
color: #6b6b05; color: var(--olive);
border-color: #6b6b05; border-color: var(--olive);
} }
/* --- Page layout --- */
.main-content { .main-content {
width: min(100% - 4rem, 1120px); width: min(100% - 4rem, 1120px);
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
/* --- Hero section --- */
.hero { .hero {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -157,117 +54,10 @@ body {
padding: 40px 0; padding: 40px 0;
} }
.how-it-works { .hero__left h1 {
margin-bottom: 70px; white-space: nowrap;
} font-size: 2.4rem;
color: var(--black);
.how-it-works__header {
text-align: center;
margin-bottom: 32px;
}
.how-it-works__header h2 {
font-size: 2rem;
margin: 0;
color: #221c1a;
}
.how-it-works__steps {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 20px;
}
.how-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 28px 20px;
background: #6B6B05;
border-radius: 28px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.how-step__icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
background: var(--button-green);
color: var(--white);
border-radius: 50%;
font-size: 1.4rem;
}
.how-step__number {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: #f4efd7;
color: #221c1a;
border-radius: 50%;
font-weight: 700;
}
.how-step__label {
margin: 0;
font-size: 1rem;
line-height: 1.6;
font-weight: 600;
color: #221c1a;
text-align: center;
}
.how-step__icon--brown {
background: #66340d;
}
.how-step__label--brown {
color: #FFFDE3;
}
.how-step__label--big {
font-size: 1.25rem;
font-weight: 700;
}
.how-step--numbered {
position: relative;
}
.how-step__corner-number {
position: absolute;
top: 12px;
left: 16px;
font-size: 2.2rem;
font-weight: 700;
}
.how-step__corner-number--brown {
color: #FFFDE3;
}
.how-step__png {
width: 192px;
height: 192px;
object-fit: contain;
}
.how-step__png--brown {
filter: brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(1200%) hue-rotate(10deg) brightness(104%) contrast(97%);
}
}
@media (max-width: 900px) {
.how-it-works__steps {
grid-template-columns: 1fr;
}
}
.hero__left {
max-width: 520px;
} }
.hero__left p { .hero__left p {
@ -285,7 +75,7 @@ body {
width: 100%; width: 100%;
max-width: 396px; max-width: 396px;
overflow: hidden; overflow: hidden;
border-radius: 30px; border-radius: var(--radius-lg);
} }
.hero-image { .hero-image {
@ -293,7 +83,7 @@ body {
max-width: 396px; max-width: 396px;
max-height: 464px; max-height: 464px;
height: auto; height: auto;
border-radius: 30px; border-radius: var(--radius-lg);
object-fit: cover; object-fit: cover;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
} }
@ -313,17 +103,103 @@ body {
} }
} }
/* Carousel gallery */
/* --- "So funktioniert's" steps --- */
.how-it-works {
margin-bottom: 70px;
}
.how-it-works__header {
text-align: center;
margin-bottom: 32px;
}
.how-it-works__header h2 {
font-size: 2rem;
margin: 0;
color: var(--black);
}
.how-it-works__steps {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 20px;
}
.how-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 28px 20px;
background: var(--white);
border-radius: 28px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.how-step--numbered {
position: relative;
}
.how-step__corner-number {
position: absolute;
top: 12px;
left: 16px;
font-size: 2.2rem;
font-weight: 700;
}
.how-step__corner-number--brown {
color: var(--brown);
}
.how-step__png {
width: 192px;
height: 192px;
object-fit: contain;
}
.how-step__png--brown {
filter: brightness(0) saturate(100%) invert(18%) sepia(56%) saturate(2800%) hue-rotate(16deg) brightness(92%) contrast(95%);
}
.how-step__label {
margin: 0;
font-size: 1rem;
line-height: 1.6;
font-weight: 600;
color: var(--black);
text-align: center;
}
.how-step__label--brown {
color: var(--brown);
}
.how-step__label--big {
font-size: 1.25rem;
font-weight: 700;
}
@media (max-width: 900px) {
.how-it-works__steps {
grid-template-columns: 1fr;
}
}
/* --- Carousel gallery --- */
.gallery__carousel { .gallery__carousel {
position: relative; position: relative;
overflow: hidden;
} }
.gallery__track { .gallery__track {
display: flex; display: flex;
gap: 20px; gap: 20px;
overflow: hidden; margin-bottom: 30px;
margin-bottom: 30px; /* Space between photos and dots */
scroll-behavior: smooth;
} }
.gallery__item { .gallery__item {
@ -331,7 +207,7 @@ body {
min-width: calc((100% - 40px) / 3); min-width: calc((100% - 40px) / 3);
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
background: #fff; background: var(--white);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
} }
@ -347,25 +223,30 @@ body {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 48px; width: 44px;
height: 48px; height: 44px;
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 0; border-radius: 50%;
background: none; background: rgba(0, 0, 0, 0.35);
backdrop-filter: none; backdrop-filter: blur(4px);
border: none; border: 2px solid rgba(255, 255, 255, 0.4);
color: #ffffff; color: var(--white);
cursor: pointer; cursor: pointer;
font-size: 1.6rem; font-size: 1.2rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, color 0.2s ease; transition: background 0.2s ease, transform 0.2s ease;
z-index: 2; z-index: 2;
} }
.gallery__arrow:hover { .gallery__arrow:hover {
transform: translateY(-50%) scale(1.15); background: rgba(0, 0, 0, 0.55);
color: #e5e1b7; transform: translateY(-50%) scale(1.1);
}
.gallery__arrow:focus-visible {
outline: 2px solid var(--brown);
outline-offset: 3px;
} }
.gallery__arrow--prev { .gallery__arrow--prev {
@ -376,7 +257,39 @@ body {
right: 12px; right: 12px;
} }
/* Center arrow removed – using side arrows only */
/* --- Carousel dot indicators --- */
.gallery__dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 12px 0 8px;
}
.gallery__dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--brown);
background: transparent;
cursor: pointer;
padding: 0;
transition: background 0.25s ease, transform 0.2s ease;
}
.gallery__dot:hover {
background: rgba(102, 52, 13, 0.3);
transform: scale(1.2);
}
.gallery__dot:focus-visible {
outline: 2px solid var(--brown);
outline-offset: 3px;
}
.gallery__dot--active {
background: var(--brown);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@ -390,100 +303,8 @@ body {
} }
} }
/* --- 2. Button & Link Styling --- */
.btn {
border: none;
background: var(--button-green);
color: var(--white);
padding: 12px 22px;
font-weight: 700;
cursor: pointer;
text-decoration: none; /* Keeps the link from having an underline */
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.95rem;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { /* --- Gallery info (Instagram link) --- */
background-color: var(--button-green-dark);
transform: translateY(-1px);
}
.nav__link {
color: var(--black); /* Fixes the purple link issue */
}
/* --- 3. The "X" Box Logic --- */
.image-card__placeholder, .placeholder {
width: 100%;
height: 100%;
min-height: 250px;
position: relative;
border: 1px solid var(--black);
background: var(--white);
}
.image-card__placeholder::before, .image-card__placeholder::after,
.placeholder::before, .placeholder::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
/* Drawing the diagonal lines for the wireframe look */
.image-card__placeholder::before, .placeholder::before {
background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}
.image-card__placeholder::after, .placeholder::after {
background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}
/* The "X" Box Logic - IMPORTANT */
.image-card__placeholder, .placeholder {
width: 100%;
height: 100%;
min-height: 250px; /* Ensures the box has height */
position: relative; /* REQUIRED for the X lines to stay inside */
border: 1px solid var(--black);
background: var(--white);
}
/* Creating the diagonal lines */
.image-card__placeholder::before, .image-card__placeholder::after,
.placeholder::before, .placeholder::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.image-card__placeholder::before, .placeholder::before {
background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}
.image-card__placeholder::after, .placeholder::after {
background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}
/* Badges and Buttons */
.social-badge {
display: flex;
justify-content: center; /* This centers the dots */
gap: 10px;
margin-top: 20px; /* This creates space between the photos and the dots */
/* REMOVE any line that says "position: absolute" or "bottom: 16px" */
}
.social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }
.profile-badge {
width: 60px; height: 60px;
border-radius: 50%;
border: 1px solid var(--black);
margin-top: 20px;
}
.gallery__info { .gallery__info {
display: flex; display: flex;
@ -491,31 +312,51 @@ body {
gap: 10px; gap: 10px;
} }
.gallery__handle { .gallery__icon--instagram {
display: flex; height: 32px;
align-items: center; width: 32px;
font-size: 1.1rem; object-fit: contain;
border-radius: 8px;
background: none;
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
}
.gallery__icon--invite {
height: 56px;
width: 56px;
object-fit: contain;
margin-left: 0;
transform: translate(-4%, -1%);
position: relative;
}
/* --- CTA button --- */
.btn {
border: none;
background: var(--olive);
color: var(--white);
padding: 12px 22px;
font-weight: 700; font-weight: 700;
color: var(--black); cursor: pointer;
gap: 6px; text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
font-size: 0.95rem;
transition: background-color 0.2s ease, transform 0.2s ease;
} }
.gallery__icon { .btn:hover {
font-size: 1.15rem; background-color: var(--olive-dark);
color: #DD541A; transform: translateY(-1px);
} }
.gallery__at {
font-size: 1.1rem;
color: #222;
}
.gallery__brand { /* --- Footer --- */
font-family: 'Inter', sans-serif;
color: #DD541A;
}
/* Footer */
.footer { .footer {
display: flex; display: flex;
justify-content: center; justify-content: center;

288
css/login_signup.css
View File

@ -1,97 +1,37 @@
/* Grundlegende Resets */ /* ===========================================
* { LOGIN_SIGNUP.CSS — Styles for login & signup
margin: 0; Global styles (reset, variables, body, nav,
padding: 0; typography) are in stylesheet_global.css
box-sizing: border-box; =========================================== */
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header Styles */ /* --- Page layout --- */
.header {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #0084ff;
text-decoration: none;
letter-spacing: 1px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.header-btn-secondary {
background-color: transparent;
color: #0084ff;
border: 2px solid #0084ff;
}
.header-btn-secondary:hover {
background-color: #0084ff;
color: white;
}
.header-btn-primary {
background-color: #0084ff;
color: white;
}
.header-btn-primary:hover {
background-color: #0073e6;
}
/* Main content wrapper */
.main-content { .main-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex: 1; flex: 1;
padding: 20px; padding: var(--space-4);
} }
.container { .container {
background-color: white; background-color: var(--white);
border-radius: 8px; border-radius: var(--radius-lg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 1000px; max-width: 1000px;
width: 100%; width: 100%;
display: flex; display: flex;
gap: 20px; gap: var(--space-4);
overflow: hidden; overflow: hidden;
} }
/* --- Image section --- */
.image-section { .image-section {
flex: 1; flex: 1;
background-color: #e8f4f8; background-color: var(--butter-light);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -104,6 +44,9 @@ body {
object-fit: cover; object-fit: cover;
} }
/* --- Form section --- */
.form-section { .form-section {
flex: 1; flex: 1;
padding: 40px; padding: 40px;
@ -112,112 +55,130 @@ body {
justify-content: center; justify-content: center;
} }
/* Formularelemente */
h1 { h1 {
color: #333; color: var(--black);
margin-bottom: 20px; margin-bottom: var(--space-4);
text-align: center; text-align: center;
} }
.info-box {
background-color: #e8f4f8; /* --- Form elements --- */
border-left: 4px solid #0084ff;
padding: 15px;
margin-bottom: 30px;
border-radius: 4px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.form-group { .form-group {
margin-bottom: 20px; margin-bottom: var(--space-4);
} }
label { label {
display: block; display: block;
margin-bottom: 6px; margin-bottom: var(--space-1);
color: #333; color: var(--black);
font-weight: bold; font-weight: 600;
font-size: 14px; font-size: 0.9rem;
} }
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"] {
width: 100%; width: 100%;
padding: 12px; padding: var(--space-2);
border: 1px solid #ddd; border: 2px solid var(--olive-light);
border-radius: 4px; border-radius: var(--radius-md);
font-size: 14px; font-size: 0.9rem;
font-family: var(--font-main);
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
font-family: Arial, sans-serif; background: var(--white);
color: var(--black);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: #0084ff; border-color: var(--olive);
box-shadow: 0 0 5px rgba(0, 132, 255, 0.3); box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
} }
button { button[type="submit"] {
width: 100%; width: 100%;
padding: 12px; padding: var(--space-2);
background-color: #0084ff; background-color: var(--olive);
color: white; color: var(--white);
border: none; border: none;
border-radius: 4px; border-radius: var(--radius-pill);
font-size: 16px; font-size: 1rem;
font-weight: bold; font-weight: 700;
font-family: var(--font-main);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 10px; margin-top: var(--space-2);
} }
button:hover { button[type="submit"]:hover {
background-color: #0073e6; background-color: var(--olive-dark);
transform: translateY(-1px);
} }
button:active { button[type="submit"]:active {
background-color: #0063cc; background-color: var(--olive-dark);
transform: translateY(0);
} }
/* Hilfstexte & Fehler */
.signup-hint, .login-hint { /* --- Info box --- */
.info-box {
background-color: var(--butter-light);
border-left: 4px solid var(--olive);
padding: var(--space-3);
margin-bottom: var(--space-6);
border-radius: 4px;
font-size: 0.9rem;
color: var(--black);
line-height: 1.5;
}
/* --- Hints & errors --- */
.signup-hint,
.login-hint {
text-align: center; text-align: center;
margin-top: 20px; margin-top: var(--space-4);
color: #666; color: var(--black);
font-size: 14px; font-size: 0.9rem;
} }
.signup-hint a, .login-hint a { .signup-hint a,
color: #0084ff; .login-hint a {
color: var(--olive);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: 600;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.signup-hint a:hover, .login-hint a:hover { .signup-hint a:hover,
.login-hint a:hover {
text-decoration: underline; text-decoration: underline;
color: var(--olive-dark);
} }
.error-message { .error-message {
color: #d32f2f; color: var(--tomato);
font-size: 13px; font-size: 0.8rem;
margin-top: 5px; margin-top: 5px;
display: none; display: none;
} }
.form-group.has-error input { .form-group.has-error input {
border-color: #d32f2f; border-color: var(--tomato);
box-shadow: 0 0 5px rgba(211, 47, 47, 0.3); box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
} }
.form-group.has-error .error-message { .form-group.has-error .error-message {
display: block; display: block;
} }
/* Modal / Popup Styles */
/* --- Modal / Popup --- */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@ -242,9 +203,9 @@ button:active {
} }
.modal-content { .modal-content {
background-color: white; background-color: var(--white);
padding: 40px; padding: 40px;
border-radius: 8px; border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
max-width: 500px; max-width: 500px;
width: 90%; width: 90%;
@ -259,12 +220,12 @@ button:active {
.modal-header { .modal-header {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: var(--space-4);
} }
.modal-header h2 { .modal-header h2 {
color: #0084ff; color: var(--olive);
font-size: 24px; font-size: 1.5rem;
} }
.close-btn { .close-btn {
@ -272,7 +233,7 @@ button:active {
right: 0; right: 0;
top: 0; top: 0;
font-size: 28px; font-size: 28px;
color: #999; color: var(--black);
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -284,19 +245,57 @@ button:active {
} }
.modal-body { .modal-body {
color: #333; color: var(--black);
font-size: 16px; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
margin-bottom: 30px; margin-bottom: var(--space-6);
} }
.modal-footer { .modal-footer {
display: flex; display: flex;
gap: 10px; gap: var(--space-2);
justify-content: center; justify-content: center;
} }
/* Responsive Anpassungen */ .btn-primary {
padding: var(--space-2) var(--space-5);
background-color: var(--olive);
color: var(--white);
border: none;
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 700;
font-family: var(--font-main);
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: var(--olive-dark);
}
/* --- Footer --- */
.footer {
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-3) var(--space-5);
border: none;
margin-top: 40px;
}
.footer__link {
color: var(--black);
text-decoration: underline;
font-size: 0.8rem;
font-weight: 400;
}
/* --- Responsive --- */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
flex-direction: column; flex-direction: column;
@ -305,19 +304,4 @@ button:active {
.image-section { .image-section {
min-height: 300px; min-height: 300px;
} }
.header {
flex-direction: column;
gap: 15px;
}
.header-buttons {
width: 100%;
flex-direction: column;
}
.header-btn {
width: 100%;
text-align: center;
}
} }

6
event_create.html
View File

@ -16,7 +16,7 @@
<header class="top-nav-wrap"> <header class="top-nav-wrap">
<div class="top-nav"> <div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite"> <a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/invite-logo.svg" alt="Invite Logo"> <img src="assets/logo_invite.svg" alt="Invite Logo">
</a> </a>
<nav class="top-nav-links" aria-label="Hauptnavigation"> <nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a> <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@ -350,8 +350,8 @@
</form> </form>
</main> </main>
<footer class="site-footer"> <footer class="footer">
<p>&copy; Social Cooking</p> <a href="impressum.html" class="footer__link">Impressum</a>
</footer> </footer>
<script src="js/event_create.js"></script> <script src="js/event_create.js"></script>

5
event_detail.html
View File

@ -15,7 +15,7 @@
<header class="top-nav-wrap"> <header class="top-nav-wrap">
<div class="top-nav"> <div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite"> <a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/invite-logo.svg" alt="Invite Logo"> <img src="assets/logo_invite.svg" alt="Invite Logo">
</a> </a>
<nav class="top-nav-links" aria-label="Hauptnavigation"> <nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a> <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@ -35,6 +35,9 @@
<!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox --> <!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox -->
<script src="js/event_detail.js"></script> <script src="js/event_detail.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body> </body>
</html> </html>

5
event_overview.html
View File

@ -17,7 +17,7 @@
<header class="top-nav-wrap"> <header class="top-nav-wrap">
<div class="top-nav"> <div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite"> <a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/invite-logo.svg" alt="Invite Logo"> <img src="assets/logo_invite.svg" alt="Invite Logo">
</a> </a>
<nav class="top-nav-links" aria-label="Hauptnavigation"> <nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a> <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@ -68,5 +68,8 @@
<!-- Page logic: data loading, filtering and card rendering --> <!-- Page logic: data loading, filtering and card rendering -->
<script src="js/event_overview.js"></script> <script src="js/event_overview.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body> </body>
</html> </html>

68
impressum.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Invité | Impressum</title>
<link rel="stylesheet" href="css/stylesheet_global.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header class="top-nav-wrap">
<div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/logo_invite.svg" alt="Invité">
</a>
<nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link" href="event_create.html">Event erstellen</a>
<a class="nav-link nav-link--login" href="login.html">Login</a>
</nav>
</div>
</header>
<main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
<h1>Impressum</h1>
<h2>Angaben gemäss § 5 TMG</h2>
<p>
Invité GmbH<br>
Musterstrasse 12<br>
7000 Chur<br>
Schweiz
</p>
<h2>Kontakt</h2>
<p>
Telefon: +41 81 123 45 67<br>
E-Mail: info@invite-cooking.ch
</p>
<h2>Vertretungsberechtigte Person</h2>
<p>Max Mustermann, Geschäftsführer</p>
<h2>Handelsregistereintrag</h2>
<p>
Eingetragen im Handelsregister des Kantons Graubünden<br>
Firmennummer: CHE-123.456.789
</p>
<h2>Haftungsausschluss</h2>
<p>
Die Inhalte dieser Website wurden mit grösster Sorgfalt erstellt. Für die Richtigkeit,
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.
</p>
<h2>Urheberrecht</h2>
<p>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
dem schweizerischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede
Art der Verwertung ausserhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen
Zustimmung des jeweiligen Autors bzw. Erstellers.
</p>
</main>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body>
</html>

74
index.html
View File

@ -4,6 +4,7 @@
<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é | Events entdecken</title> <title>Invité | Events entdecken</title>
<link rel="stylesheet" href="css/stylesheet_global.css" />
<link rel="stylesheet" href="css/index.css" /> <link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head> </head>
@ -12,7 +13,7 @@
<header class="top-nav-wrap"> <header class="top-nav-wrap">
<div class="top-nav"> <div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite"> <a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/invite-logo.svg" alt="Invité"> <img src="assets/logo_invite.svg" alt="Invité">
</a> </a>
<nav class="top-nav-links" aria-label="Hauptnavigation"> <nav class="top-nav-links" aria-label="Hauptnavigation">
@ -33,7 +34,7 @@
<div class="hero__right"> <div class="hero__right">
<div class="image-card"> <div class="image-card">
<img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" /> <img class="hero-image" src="assets/index_ingredients.jpg" alt="Startpage Ingredients" />
</div> </div>
</div> </div>
</section> </section>
@ -45,62 +46,65 @@
<div class="how-it-works__steps"> <div class="how-it-works__steps">
<article class="how-step how-step--numbered"> <article class="how-step how-step--numbered">
<span class="how-step__corner-number how-step__corner-number--brown">1</span> <span class="how-step__corner-number how-step__corner-number--brown">1</span>
<img src="assets/register icon.png" alt="Register" class="how-step__png how-step__png--brown" /> <img src="assets/icon_register.png" alt="Register" class="how-step__png how-step__png--brown" />
<p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p> <p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
</article> </article>
<article class="how-step how-step--numbered"> <article class="how-step how-step--numbered">
<span class="how-step__corner-number how-step__corner-number--brown">2</span> <span class="how-step__corner-number how-step__corner-number--brown">2</span>
<img src="assets/add-event icon.png" alt="Event erstellen" class="how-step__png how-step__png--brown" /> <img src="assets/icon_add-event.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
<p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p> <p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
</article> </article>
<article class="how-step how-step--numbered"> <article class="how-step how-step--numbered">
<span class="how-step__corner-number how-step__corner-number--brown">3</span> <span class="how-step__corner-number how-step__corner-number--brown">3</span>
<img src="assets/Plate icon.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" /> <img src="assets/icon_Plate.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
<p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p> <p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
</article> </article>
</div> </div>
</section> </section>
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content --> <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
<section class="gallery"> <section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
<div class="gallery__carousel"> <div class="gallery__carousel">
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild"> <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
<i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-left"></i>
</button> </button>
<div class="gallery__track"> <div class="gallery__track" aria-live="polite">
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
<img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating"> <img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
<img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks"> <img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12">
<img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating"> <img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12">
<img src="assets/Burger eating together.jpg" alt="Burger eating together"> <img src="assets/index_Burger eating together.jpg" alt="Burger eating together">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12">
<img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs"> <img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12">
<img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home"> <img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12">
<img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls"> <img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12">
<img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese"> <img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12">
<img src="assets/Salad roommates.jpg" alt="Salad roommates"> <img src="assets/index_Salad roommates.jpg" alt="Salad roommates">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
<img src="assets/Sharing food table.jpg" alt="Sharing food table"> <img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
</article> </article>
<article class="gallery__item"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12">
<img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed"> <img src="assets/index_Spicy food zoomed.jpg" alt="Spicy food zoomed">
</article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 12 von 12">
<img src="assets/index_cooking.jpg" alt="Cooking">
</article> </article>
</div> </div>
@ -109,19 +113,21 @@
</button> </button>
</div> </div>
<div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
<div class="gallery__info"> <div class="gallery__info">
<div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;"> <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="gallery__handle" style="display: flex; align-items: center; gap: 16px; text-decoration: none;">
<img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" /> <img src="assets/Icon_instagram.png" alt="Instagram" class="gallery__icon--instagram" />
<img src="assets/invite-logo.svg" alt="Invité Logo" class="gallery__icon--invite" /> <img src="assets/logo_invite.svg" alt="Invité Logo" class="gallery__icon--invite" />
</div> </a>
</div> </div>
</section> </section>
</main> </main>
<script src="js/index-carousel.js"></script> <script src="js/index-carousel.js"></script>
<footer class="footer"> <footer class="footer">
<a href="#" class="footer__link">Impressum</a> <a href="impressum.html" class="footer__link">Impressum</a>
</footer> </footer>
</body> </body>
</html> </html>

79
js/index-carousel.js
View File

@ -1,52 +1,85 @@
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');
if (carouselTrack) { if (carouselTrack) {
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item')); const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3); const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
let itemsPerPage = getItemsPerPage(); let itemsPerPage = getItemsPerPage();
const pageCount = Math.ceil(items.length / itemsPerPage); let pageCount = Math.ceil(items.length / itemsPerPage);
let activePage = 0; let activePage = 0;
var dots = [];
function scrollToPage(page) { function buildDots() {
if (!dotsContainer) return;
dotsContainer.innerHTML = '';
dots = [];
for (var i = 0; i < pageCount; i++) {
var dot = document.createElement('button');
dot.type = 'button';
dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : '');
dot.setAttribute('role', 'tab');
dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount);
dot.dataset.page = i;
dot.addEventListener('click', function() {
goToPage(parseInt(this.dataset.page));
});
dotsContainer.appendChild(dot);
dots.push(dot);
}
}
function updateDots() {
dots.forEach(function(dot, i) {
dot.classList.toggle('gallery__dot--active', i === activePage);
dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
});
}
function updateTrack() {
var gap = parseFloat(getComputedStyle(carouselTrack).gap) || 20;
var itemWidth = items[0].getBoundingClientRect().width;
var offset = activePage * (itemWidth + gap) * itemsPerPage;
carouselTrack.style.transform = 'translateX(-' + offset + 'px)';
carouselTrack.style.transition = 'transform 0.4s ease';
updateDots();
}
function goToPage(page) {
activePage = page; activePage = page;
const pageWidth = carouselTrack.clientWidth; updateTrack();
carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
} }
function showNext() { function showNext() {
activePage = (activePage + 1) % pageCount; activePage = (activePage + 1) % pageCount;
scrollToPage(activePage); updateTrack();
} }
function showPrev() { function showPrev() {
activePage = (activePage - 1 + pageCount) % pageCount; activePage = (activePage - 1 + pageCount) % pageCount;
scrollToPage(activePage); updateTrack();
} }
function refreshCarousel() { buildDots();
const responsiveItemsPerPage = getItemsPerPage();
if (responsiveItemsPerPage !== itemsPerPage) {
itemsPerPage = responsiveItemsPerPage;
window.location.reload();
}
}
if (nextArrow) nextArrow.addEventListener('click', showNext); if (nextArrow) nextArrow.addEventListener('click', showNext);
if (prevArrow) prevArrow.addEventListener('click', showPrev); if (prevArrow) prevArrow.addEventListener('click', showPrev);
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') { if (event.key === 'ArrowRight') showNext();
showNext(); if (event.key === 'ArrowLeft') showPrev();
}
if (event.key === 'ArrowLeft') {
showPrev();
}
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', function() {
refreshCarousel(); var newPerPage = getItemsPerPage();
scrollToPage(activePage); if (newPerPage !== itemsPerPage) {
itemsPerPage = newPerPage;
pageCount = Math.ceil(items.length / itemsPerPage);
activePage = 0;
}
buildDots();
updateTrack();
}); });
} }

13
login.html
View File

@ -3,14 +3,12 @@
<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>Login - Social Cooking</title> <title>Invité | Login</title>
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Stylesheet für diese Seite --> <!-- Stylesheet für diese Seite -->
<link rel="stylesheet" href="css/login_signup.css"> <link rel="stylesheet" href="css/login_signup.css">
<!-- Navigation Stylesheet -->
<link rel="stylesheet" href="css/index.css">
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet.css">
</head> </head>
@ -19,7 +17,7 @@
<header class="top-nav-wrap"> <header class="top-nav-wrap">
<div class="top-nav"> <div class="top-nav">
<a class="brand" href="index.html" aria-label="Zur Startseite"> <a class="brand" href="index.html" aria-label="Zur Startseite">
<img src="assets/invite-logo.svg" alt="Invité"> <img src="assets/logo_invite.svg" alt="Invité">
</a> </a>
<nav class="top-nav-links" aria-label="Hauptnavigation"> <nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link nav-link--login" href="login.html">Anmelden</a> <a class="nav-link nav-link--login" href="login.html">Anmelden</a>
@ -60,5 +58,8 @@
</div> </div>
</div> <!-- Schließt main-content --> </div> <!-- Schließt main-content -->
<script src="js/login.js"></script> <script src="js/login.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body> </body>
</html> </html>

3
signup.html
View File

@ -81,5 +81,8 @@
</div> </div>
</div> </div>
<script src="js/signup.js"></script> <script src="js/signup.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body> </body>
</html> </html>