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

583
css/index.css
View File

@ -1,273 +1,63 @@
/* Instagram and Invite logo in gallery info area */
.gallery__icon--instagram {
height: 32px;
width: 32px;
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%);
}
/* ===========================================
INDEX.CSS — Styles specific to index.html
Global styles (reset, variables, body, nav,
brand, typography) are in stylesheet_global.css
=========================================== */
.gallery__icon--invite {
height: 56px;
width: 56px;
object-fit: contain;
margin-left: 0;
transform: translate(-4%, -1%);
position: relative;
}
* { box-sizing: border-box; }
:root {
--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;
}
/* --- Navigation overrides (index-specific) --- */
.nav-link {
color: #221c1a;
line-height: 1.3;
text-decoration: none;
padding: 8px 20px;
border: 2px solid #e5e1b7;
border-radius: 20px;
border: 2px solid var(--olive-light);
transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover,
.nav-link.active,
.nav-link:focus-visible {
background: #6b6b05;
color: #ffffff;
border-color: #6b6b05;
background: var(--olive);
color: var(--white);
border-color: var(--olive);
}
.nav-link--login {
background: #6b6b05;
color: #ffffff;
border-color: #6b6b05;
background: var(--olive);
color: var(--white);
border-color: var(--olive);
}
.nav-link--login:hover,
.nav-link--login:focus-visible {
background: #ffffff;
color: #6b6b05;
border-color: #6b6b05;
background: var(--white);
color: var(--olive);
border-color: var(--olive);
}
/* --- Page layout --- */
.main-content {
width: min(100% - 4rem, 1120px);
margin: 0 auto;
padding: 0 20px;
}
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-bottom: 80px;
/* --- Hero section --- */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-bottom: 80px;
align-items: center;
padding: 40px 0;
}
.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: #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 h1 {
white-space: nowrap;
font-size: 2.4rem;
color: var(--black);
}
.hero__left p {
@ -285,7 +75,7 @@ body {
width: 100%;
max-width: 396px;
overflow: hidden;
border-radius: 30px;
border-radius: var(--radius-lg);
}
.hero-image {
@ -293,7 +83,7 @@ body {
max-width: 396px;
max-height: 464px;
height: auto;
border-radius: 30px;
border-radius: var(--radius-lg);
object-fit: cover;
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 {
position: relative;
overflow: hidden;
}
.gallery__track {
display: flex;
gap: 20px;
overflow: hidden;
margin-bottom: 30px; /* Space between photos and dots */
scroll-behavior: smooth;
margin-bottom: 30px;
}
.gallery__item {
@ -331,7 +207,7 @@ body {
min-width: calc((100% - 40px) / 3);
border-radius: 24px;
overflow: hidden;
background: #fff;
background: var(--white);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
aspect-ratio: 2 / 3;
}
@ -347,25 +223,30 @@ body {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 0;
background: none;
backdrop-filter: none;
border: none;
color: #ffffff;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(4px);
border: 2px solid rgba(255, 255, 255, 0.4);
color: var(--white);
cursor: pointer;
font-size: 1.6rem;
font-size: 1.2rem;
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;
}
.gallery__arrow:hover {
transform: translateY(-50%) scale(1.15);
color: #e5e1b7;
background: rgba(0, 0, 0, 0.55);
transform: translateY(-50%) scale(1.1);
}
.gallery__arrow:focus-visible {
outline: 2px solid var(--brown);
outline-offset: 3px;
}
.gallery__arrow--prev {
@ -376,7 +257,39 @@ body {
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) {
@ -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 {
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 (Instagram link) --- */
.gallery__info {
display: flex;
@ -491,31 +312,51 @@ body {
gap: 10px;
}
.gallery__handle {
display: flex;
align-items: center;
font-size: 1.1rem;
.gallery__icon--instagram {
height: 32px;
width: 32px;
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;
color: var(--black);
gap: 6px;
cursor: pointer;
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 {
font-size: 1.15rem;
color: #DD541A;
.btn:hover {
background-color: var(--olive-dark);
transform: translateY(-1px);
}
.gallery__at {
font-size: 1.1rem;
color: #222;
}
.gallery__brand {
font-family: 'Inter', sans-serif;
color: #DD541A;
}
/* --- Footer --- */
/* Footer */
.footer {
display: flex;
justify-content: center;

288
css/login_signup.css
View File

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

5
event_detail.html
View File

@ -15,7 +15,7 @@
<header class="top-nav-wrap">
<div class="top-nav">
<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>
<nav class="top-nav-links" aria-label="Hauptnavigation">
<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 -->
<script src="js/event_detail.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body>
</html>

5
event_overview.html
View File

@ -17,7 +17,7 @@
<header class="top-nav-wrap">
<div class="top-nav">
<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>
<nav class="top-nav-links" aria-label="Hauptnavigation">
<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 -->
<script src="js/event_overview.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body>
</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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Invité | Events entdecken</title>
<link rel="stylesheet" href="css/stylesheet_global.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" />
</head>
@ -12,7 +13,7 @@
<header class="top-nav-wrap">
<div class="top-nav">
<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>
<nav class="top-nav-links" aria-label="Hauptnavigation">
@ -33,7 +34,7 @@
<div class="hero__right">
<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>
</section>
@ -45,62 +46,65 @@
<div class="how-it-works__steps">
<article class="how-step how-step--numbered">
<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>
</article>
<article class="how-step how-step--numbered">
<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>
</article>
<article class="how-step how-step--numbered">
<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>
</article>
</div>
</section>
<!-- 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">
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
<i class="fas fa-chevron-left"></i>
</button>
<div class="gallery__track">
<article class="gallery__item">
<img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
<div class="gallery__track" aria-live="polite">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
<img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating">
</article>
<article class="gallery__item">
<img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
<img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
</article>
<article class="gallery__item">
<img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12">
<img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
</article>
<article class="gallery__item">
<img src="assets/Burger eating together.jpg" alt="Burger eating together">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12">
<img src="assets/index_Burger eating together.jpg" alt="Burger eating together">
</article>
<article class="gallery__item">
<img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12">
<img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs">
</article>
<article class="gallery__item">
<img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12">
<img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home">
</article>
<article class="gallery__item">
<img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12">
<img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls">
</article>
<article class="gallery__item">
<img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12">
<img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese">
</article>
<article class="gallery__item">
<img src="assets/Salad roommates.jpg" alt="Salad roommates">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12">
<img src="assets/index_Salad roommates.jpg" alt="Salad roommates">
</article>
<article class="gallery__item">
<img src="assets/Sharing food table.jpg" alt="Sharing food table">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
<img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
</article>
<article class="gallery__item">
<img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12">
<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>
</div>
@ -109,19 +113,21 @@
</button>
</div>
<div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
<div class="gallery__info">
<div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
<img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" />
<img src="assets/invite-logo.svg" alt="Invité Logo" class="gallery__icon--invite" />
</div>
<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/Icon_instagram.png" alt="Instagram" class="gallery__icon--instagram" />
<img src="assets/logo_invite.svg" alt="Invité Logo" class="gallery__icon--invite" />
</a>
</div>
</section>
</main>
<script src="js/index-carousel.js"></script>
<footer class="footer">
<a href="#" class="footer__link">Impressum</a>
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body>
</html>

79
js/index-carousel.js
View File

@ -1,52 +1,85 @@
const carouselTrack = document.querySelector('.gallery__track');
const prevArrow = document.querySelector('.gallery__arrow--prev');
const nextArrow = document.querySelector('.gallery__arrow--next');
const dotsContainer = document.querySelector('.gallery__dots');
if (carouselTrack) {
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
let itemsPerPage = getItemsPerPage();
const pageCount = Math.ceil(items.length / itemsPerPage);
let pageCount = Math.ceil(items.length / itemsPerPage);
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;
const pageWidth = carouselTrack.clientWidth;
carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
updateTrack();
}
function showNext() {
activePage = (activePage + 1) % pageCount;
scrollToPage(activePage);
updateTrack();
}
function showPrev() {
activePage = (activePage - 1 + pageCount) % pageCount;
scrollToPage(activePage);
updateTrack();
}
function refreshCarousel() {
const responsiveItemsPerPage = getItemsPerPage();
if (responsiveItemsPerPage !== itemsPerPage) {
itemsPerPage = responsiveItemsPerPage;
window.location.reload();
}
}
buildDots();
if (nextArrow) nextArrow.addEventListener('click', showNext);
if (prevArrow) prevArrow.addEventListener('click', showPrev);
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
showNext();
}
if (event.key === 'ArrowLeft') {
showPrev();
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') showNext();
if (event.key === 'ArrowLeft') showPrev();
});
window.addEventListener('resize', () => {
refreshCarousel();
scrollToPage(activePage);
window.addEventListener('resize', function() {
var newPerPage = getItemsPerPage();
if (newPerPage !== itemsPerPage) {
itemsPerPage = newPerPage;
pageCount = Math.ceil(items.length / itemsPerPage);
activePage = 0;
}
buildDots();
updateTrack();
});
}

15
login.html
View File

@ -3,14 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Social Cooking</title>
<title>Invité | Login</title>
<!-- Stylesheet für diese Seite-->
<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">
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Stylesheet für diese Seite -->
<link rel="stylesheet" href="css/login_signup.css">
</head>
@ -19,7 +17,7 @@
<header class="top-nav-wrap">
<div class="top-nav">
<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>
<nav class="top-nav-links" aria-label="Hauptnavigation">
<a class="nav-link nav-link--login" href="login.html">Anmelden</a>
@ -60,5 +58,8 @@
</div>
</div> <!-- Schließt main-content -->
<script src="js/login.js"></script>
<footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a>
</footer>
</body>
</html>

3
signup.html
View File

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