Compare commits
2 Commits
a456caa24a
...
642f0d4b80
| Author | SHA1 | Date | |
|---|---|---|---|
|
642f0d4b80 | ||
|
|
6d3f699ea4 |
584
css/index.css
584
css/index.css
@ -1,273 +1,63 @@
|
|||||||
/* 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 {
|
|
||||||
display: grid;
|
/* --- Hero section --- */
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 50px;
|
.hero {
|
||||||
margin-bottom: 80px;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 50px;
|
||||||
|
margin-bottom: 80px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
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,35 +312,56 @@ 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;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
border: none;
|
border: none;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
|||||||
@ -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,31 @@ button:active {
|
|||||||
.image-section {
|
.image-section {
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-buttons {
|
/* --- Snackbar --- */
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-btn {
|
.snackbar {
|
||||||
width: 100%;
|
position: fixed;
|
||||||
text-align: center;
|
bottom: 30px;
|
||||||
}
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(100px);
|
||||||
|
background: var(--olive);
|
||||||
|
color: var(--white);
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: var(--font-main);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar--visible {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
95
datenschutz.html
Normal file
95
datenschutz.html
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Invité | Datenschutz</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>Datenschutzerklärung</h1>
|
||||||
|
|
||||||
|
<h2>1. Verantwortliche Stelle</h2>
|
||||||
|
<p>
|
||||||
|
Invité GmbH<br>
|
||||||
|
Musterstrasse 12<br>
|
||||||
|
7000 Chur<br>
|
||||||
|
Schweiz<br>
|
||||||
|
E-Mail: datenschutz@invite-cooking.ch
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>2. Erhebung und Verarbeitung personenbezogener Daten</h2>
|
||||||
|
<p>
|
||||||
|
Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst.
|
||||||
|
Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete
|
||||||
|
Betriebssystem, den Domainnamen Ihres Internet-Service-Providers, Ihre IP-Adresse und
|
||||||
|
Ähnliches. Sie werden ausschliesslich zur technischen Bereitstellung und Verbesserung
|
||||||
|
unserer Website verwendet.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>3. Registrierung und Nutzerkonto</h2>
|
||||||
|
<p>
|
||||||
|
Bei der Erstellung eines Nutzerkontos erheben wir folgende Daten: Name, E-Mail-Adresse
|
||||||
|
und Passwort. Diese Daten werden ausschliesslich zur Bereitstellung unserer Dienste
|
||||||
|
verwendet und nicht an Dritte weitergegeben.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>4. Cookies</h2>
|
||||||
|
<p>
|
||||||
|
Unsere Website verwendet Cookies, um die Nutzererfahrung zu verbessern. Cookies sind
|
||||||
|
kleine Textdateien, die auf Ihrem Endgerät gespeichert werden. Sie können die Verwendung
|
||||||
|
von Cookies in Ihren Browsereinstellungen deaktivieren. Bitte beachten Sie, dass dadurch
|
||||||
|
die Funktionalität der Website eingeschränkt sein kann.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>5. Datenweitergabe an Dritte</h2>
|
||||||
|
<p>
|
||||||
|
Eine Übermittlung Ihrer persönlichen Daten an Dritte findet nicht statt, es sei denn,
|
||||||
|
wir sind gesetzlich dazu verpflichtet oder Sie haben Ihre ausdrückliche Einwilligung
|
||||||
|
erteilt.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>6. Datensicherheit</h2>
|
||||||
|
<p>
|
||||||
|
Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten
|
||||||
|
gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff
|
||||||
|
unberechtigter Personen zu schützen. Unsere Sicherheitsmassnahmen werden entsprechend
|
||||||
|
der technologischen Entwicklung fortlaufend verbessert.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>7. Ihre Rechte</h2>
|
||||||
|
<p>
|
||||||
|
Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten
|
||||||
|
personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung
|
||||||
|
oder Einschränkung der Verarbeitung Ihrer Daten. Bitte wenden Sie sich dazu an:
|
||||||
|
datenschutz@invite-cooking.ch
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>8. Änderungen dieser Datenschutzerklärung</h2>
|
||||||
|
<p>
|
||||||
|
Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie
|
||||||
|
stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer
|
||||||
|
Leistungen umzusetzen. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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,9 @@
|
|||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="footer">
|
||||||
<p>© Social Cooking</p>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="js/event_create.js"></script>
|
<script src="js/event_create.js"></script>
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||||
<link rel="stylesheet" href="css/event_overview.css">
|
<link rel="stylesheet" href="css/event_overview.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -15,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>
|
||||||
@ -35,6 +36,10 @@
|
|||||||
|
|
||||||
<!-- 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>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
<!-- Stylesheet für diese Seite-->
|
<!-- Stylesheet für diese Seite-->
|
||||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||||
<!-- Globales Stylesheet -->
|
<!-- Globales Stylesheet -->
|
||||||
<link rel="stylesheet" href="stylesheet.css">
|
<link rel="stylesheet" href="css/event_overview.css">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
@ -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,9 @@
|
|||||||
|
|
||||||
<!-- 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>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
69
impressum.html
Normal file
69
impressum.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!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>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
index.html
75
index.html
@ -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,22 @@
|
|||||||
</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>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -45,10 +45,11 @@ function validateForm(event) {
|
|||||||
|
|
||||||
// Wenn alle Validierungen bestanden, Form absenden
|
// Wenn alle Validierungen bestanden, Form absenden
|
||||||
if (isValid) {
|
if (isValid) {
|
||||||
//alert('Login erfolgreich! (Dies ist eine Demo)');
|
var snackbar = document.getElementById('snackbar');
|
||||||
|
snackbar.classList.add('snackbar--visible');
|
||||||
// Weiterleitung zur event overview Page
|
setTimeout(function() {
|
||||||
window.location.href = 'event_overview.html';
|
window.location.href = 'event_overview.html';
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
19
login.html
19
login.html
@ -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>
|
||||||
|
|
||||||
<!-- Stylesheet für diese Seite-->
|
|
||||||
<link rel="stylesheet" href="css/login_signup.css">
|
|
||||||
<!-- Navigation Stylesheet -->
|
|
||||||
<link rel="stylesheet" href="css/index.css">
|
|
||||||
<!-- Globales Stylesheet -->
|
<!-- 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>
|
</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>
|
||||||
@ -58,7 +56,12 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- Schließt main-content -->
|
</div> <!-- Schliesst main-content -->
|
||||||
|
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
||||||
<script src="js/login.js"></script>
|
<script src="js/login.js"></script>
|
||||||
|
<footer class="footer">
|
||||||
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -81,5 +81,9 @@
|
|||||||
</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>
|
||||||
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user