Anpassungen Startseite, Footer, diversers Styling auf allen Seiten
This commit is contained in:
parent
540754d7d0
commit
add5c3eb05
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@ -1,82 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 298.096 298.096" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M187.592,218.502c-10.82-3.316-27.172-8.32-30.632-20.716c-1.292-4.612-1.276-37.344-0.944-59.436
|
||||
c20.636-0.22,39.808-1.256,54.66-2.984c27.704-3.224,27.704-7.308,27.704-9.272l-0.044-0.472l0.044-11.252
|
||||
c0-0.056,0-0.108,0-0.16v-0.008c0-1.964,0-6.048-27.704-9.272c-16.8-1.952-39.12-3.028-62.848-3.028
|
||||
c-23.732,0-46.048,1.076-62.848,3.028c-27.708,3.224-27.708,7.308-27.708,9.272v11.892c0,1.964,0,6.048,27.708,9.272
|
||||
c14.852,1.728,34.02,2.764,54.656,2.984c0.332,22.092,0.348,54.824-0.944,59.436c-3.46,12.392-19.808,17.4-30.628,20.712
|
||||
c-7.596,2.328-11.78,3.608-11.78,6.912c-0.012,0.304-0.044,1.124,0.44,1.86c0.416,0.884,0.996,1.172,0.972,1.148
|
||||
c4.692,3.48,29.272,5.068,50.128,5.068c20.852,0,45.432-1.584,49.956-4.952c0.764-0.456,1.584-1.516,1.584-3.112
|
||||
C199.372,222.114,195.188,220.83,187.592,218.502z M147.828,105.906c50.612,0,82.344,4.776,86.308,8.272
|
||||
c-0.08,0.076-0.156,0.152-0.26,0.228c-0.144,0.104-0.304,0.212-0.496,0.32c-0.22,0.124-0.484,0.244-0.764,0.368
|
||||
c-0.244,0.108-0.5,0.216-0.792,0.324c-0.34,0.128-0.728,0.256-1.132,0.384c-0.344,0.108-0.688,0.22-1.076,0.328
|
||||
c-0.46,0.128-0.972,0.26-1.492,0.388c-0.436,0.108-0.876,0.22-1.356,0.328c-0.576,0.132-1.212,0.26-1.852,0.392
|
||||
c-0.528,0.108-1.048,0.216-1.616,0.32c-0.696,0.132-1.452,0.26-2.208,0.388c-0.616,0.104-1.22,0.208-1.876,0.312
|
||||
c-0.8,0.128-1.664,0.248-2.52,0.372c-0.712,0.104-1.412,0.208-2.168,0.308c-0.908,0.12-1.884,0.24-2.848,0.356
|
||||
c-0.796,0.096-1.572,0.196-2.408,0.288c-1.024,0.116-2.116,0.228-3.196,0.336c-0.876,0.092-1.728,0.184-2.64,0.268
|
||||
c-1.128,0.108-2.324,0.208-3.508,0.312c-0.96,0.084-1.892,0.168-2.884,0.248c-1.236,0.096-2.54,0.188-3.832,0.28
|
||||
c-1.032,0.072-2.032,0.148-3.096,0.216c-1.34,0.088-2.756,0.164-4.148,0.24c-1.104,0.064-2.18,0.128-3.32,0.188
|
||||
c-1.46,0.072-2.992,0.136-4.508,0.2c-1.156,0.048-2.272,0.104-3.46,0.148c-1.676,0.064-3.432,0.112-5.172,0.16
|
||||
c-1.1,0.032-2.16,0.072-3.28,0.1c-2.056,0.052-4.196,0.084-6.332,0.116c-0.88,0.012-1.724,0.036-2.62,0.048
|
||||
c-3.072,0.036-6.216,0.056-9.444,0.056c-3.22,0-6.36-0.02-9.424-0.056c-1.172-0.016-2.28-0.044-3.428-0.06
|
||||
c-1.84-0.032-3.704-0.056-5.484-0.1c-1.672-0.04-3.268-0.096-4.884-0.148c-1.156-0.036-2.344-0.068-3.472-0.108
|
||||
c-2.264-0.084-4.448-0.18-6.6-0.284c-0.38-0.02-0.784-0.032-1.16-0.052c-30.476-1.516-49.04-4.868-51.904-7.492
|
||||
C65.292,110.71,97.072,105.906,147.828,105.906z M61.276,118.61c0.148,0.072,0.344,0.14,0.504,0.208
|
||||
c0.228,0.096,0.46,0.188,0.716,0.284c0.3,0.112,0.628,0.224,0.964,0.336c0.288,0.096,0.576,0.196,0.892,0.292
|
||||
c0.364,0.112,0.772,0.228,1.176,0.34c0.164,0.044,0.304,0.092,0.472,0.136l-4.724,5.66V118.61z M63.196,127.118l5.252-6.3
|
||||
c0.268,0.06,0.524,0.124,0.808,0.184c0.56,0.124,1.184,0.244,1.796,0.368c0.412,0.084,0.792,0.164,1.228,0.248l-5.536,6.636
|
||||
C65.284,127.87,64.08,127.49,63.196,127.118z M69.2,128.846l5.66-6.78c0.392,0.064,0.756,0.132,1.164,0.196
|
||||
c0.884,0.14,1.856,0.28,2.824,0.416l-5.784,6.932C71.66,129.358,70.364,129.102,69.2,128.846z M75.644,130.062l5.856-7.02
|
||||
c1.124,0.148,2.248,0.292,3.484,0.436c0.192,0.024,0.404,0.04,0.596,0.064l-5.936,7.112
|
||||
C78.244,130.458,76.888,130.262,75.644,130.062z M82.308,130.998l5.988-7.172c16.376,1.728,37.308,2.68,59.536,2.68
|
||||
c23.728,0,46.048-1.076,62.848-3.032c1.688-0.196,3.268-0.396,4.756-0.6c0.516-0.072,0.964-0.144,1.46-0.212
|
||||
c0.932-0.132,1.872-0.268,2.724-0.4c0.524-0.084,0.984-0.168,1.476-0.252c0.74-0.124,1.492-0.248,2.168-0.376
|
||||
c0.484-0.092,0.916-0.18,1.372-0.272c0.6-0.12,1.208-0.24,1.756-0.36c0.44-0.096,0.832-0.192,1.24-0.288
|
||||
c0.488-0.116,0.98-0.228,1.424-0.344c0.388-0.1,0.732-0.2,1.088-0.3c0.392-0.112,0.788-0.22,1.144-0.332
|
||||
c0.332-0.104,0.632-0.204,0.932-0.308c0.316-0.108,0.632-0.216,0.916-0.324c0.272-0.104,0.52-0.204,0.764-0.304
|
||||
c0.148-0.06,0.328-0.124,0.468-0.184l-0.028,7.28l0.004,0.036c-3,3.508-34.972,8.46-86.512,8.46
|
||||
C119.56,134.402,97.24,132.906,82.308,130.998z M147.828,229.486c-24.224,0-42.432-1.936-47.24-4.024
|
||||
c1.372-0.904,5.364-2.128,8.648-3.136c11.652-3.568,29.256-8.96,33.308-23.46c1.764-6.312,1.252-49.452,1.092-60.468h8.372
|
||||
c-0.16,11.016-0.672,54.156,1.092,60.464c4.052,14.5,21.66,19.896,33.312,23.464c3.312,1.016,7.344,2.248,8.684,3.156
|
||||
C191.08,227.462,172.596,229.486,147.828,229.486z"/>
|
||||
<path d="M82.696,153.378H22.28c-0.696,0-1.36,0.14-1.964,0.396c-0.5-8.16-0.996-16.324-1.492-24.484
|
||||
c0.292,0.052,0.564,0.172,0.872,0.172c0.076,0,0.152,0,0.228-0.004c2.788-0.128,4.952-2.496,4.828-5.284l-2.684-60.356
|
||||
c-0.12-2.788-2.54-4.992-5.284-4.832c-2.788,0.128-4.952,2.496-4.828,5.284l0.004,0.132c-0.46-0.088-5.384,0.036-7.344,0
|
||||
L0,64.346v174.592c0,0,7.552,0.192,10.252,0.18c4.652-0.024,4.94-3.596,5.036-4.804c0.788-9.676,1.032-31.124,1.192-45.32
|
||||
c0.052-4.576,0.096-8.704,0.148-11.012h49.536c0.252,2.24,0.72,6.46,1.232,11.132c1.528,13.912,3.836,34.936,5.224,45.928
|
||||
c0.144,1.144,1.16,3.396,2.96,3.668c1.38,0.208,2.72,0.172,4.004,0.14l3.344-0.024v-75.368c2.68-0.12,4.84-2.304,4.84-5.02
|
||||
C87.756,155.65,85.484,153.378,82.696,153.378z M16.88,61.25c0.044,0,0.084,0,0.124,0c1.484,0,2.728,1.172,2.792,2.668
|
||||
l2.684,60.356c0.072,1.54-1.124,2.844-2.664,2.916c-0.404,0.016-0.788-0.052-1.136-0.18c-0.468-7.72-4.468-62.84-4.468-62.84
|
||||
C14.144,62.63,15.34,61.322,16.88,61.25z M78.916,234.862c-0.78,0.016-1.524,0.02-2.224-0.044
|
||||
c-0.06-0.104-0.104-0.216-0.116-0.276c-1.384-10.964-3.688-31.968-5.216-45.864c-1.3-11.836-1.416-12.836-1.484-13.136
|
||||
l-0.352-1.56H12.876c0,0-0.804,50.472-1.584,60.008c-0.048,0.588-0.124,0.848-0.1,0.892c-0.088,0.024-7.04,0-7.2,0.004V68.39
|
||||
l0.54,0.008c2.052,0.04,4.092,0.076,6.128-0.012c0.236-0.008,0.392-0.004,0.468-0.016c0.024,0.116,0.056,0.312,0.072,0.616
|
||||
c0.488,9.028,1.04,18.056,1.588,27.08l0.488,8.02c1.136,18.784,3.712,61.672,3.712,61.672h61.928V234.862z M82.696,161.234H22.28
|
||||
c-0.564,0-1.06-0.208-1.5-0.5c-0.024-0.18-0.064-0.364-0.076-0.544c-0.08-1.28-0.156-2.56-0.232-3.836
|
||||
c0.492-0.424,1.112-0.708,1.808-0.708h60.416c1.54,0,2.792,1.252,2.792,2.792S84.236,161.234,82.696,161.234z"/>
|
||||
<path d="M293.476,64.402c-1.96,0.04-3.92,0.076-5.872-0.012c-0.556-0.02-1.02,0.068-1.48,0.16l0.012-0.28
|
||||
c0.124-2.788-2.04-5.156-4.828-5.284c-2.916-0.168-5.16,2.044-5.284,4.832l-2.684,60.356c-0.124,2.788,2.04,5.156,4.828,5.284
|
||||
c0.08,0.004,0.152,0.004,0.228,0.004c0.308,0,0.58-0.116,0.872-0.172c-0.496,8.16-0.988,16.324-1.492,24.484
|
||||
c-0.604-0.256-1.268-0.396-1.964-0.396h-60.42c-2.788,0-5.06,2.272-5.06,5.064c0,2.712,2.156,4.896,4.84,5.02v75.364l3.344,0.024
|
||||
c1.284,0.036,2.62,0.072,4.004-0.14c1.8-0.272,2.816-2.524,2.96-3.668c1.388-10.996,3.696-32.016,5.224-45.928
|
||||
c0.516-4.696,0.98-8.932,1.228-11.132h49.54c0.052,2.308,0.096,6.44,0.148,11.012c0.16,14.192,0.404,35.644,1.192,45.316
|
||||
c0.092,1.208,0.328,4.68,5.112,4.588c2.384-0.044,10.172,0.04,10.172,0.04V64.342L293.476,64.402z M278.396,127.194
|
||||
c-0.04,0-0.084,0-0.124,0c-1.54-0.072-2.736-1.376-2.664-2.916l2.684-60.356c0.068-1.536,1.248-2.724,2.916-2.668
|
||||
c1.54,0.072,2.736,1.376,2.664,2.916l-0.084,1.868c-0.488,0.7-3.912,53.244-4.384,60.96
|
||||
C279.092,127.118,278.752,127.194,278.396,127.194z M215.392,161.234c-1.54,0-2.792-1.252-2.792-2.792
|
||||
c0-1.54,1.252-2.792,2.792-2.792h60.416c0.696,0,1.316,0.28,1.808,0.708c-0.08,1.276-0.156,2.556-0.232,3.832
|
||||
c-0.012,0.18-0.052,0.368-0.076,0.548c-0.44,0.288-0.936,0.496-1.496,0.496H215.392z M294.096,234.886
|
||||
c-0.16-0.004-6.736,0.032-6.844,0.032c-0.164,0-0.264-0.004-0.296,0.004c-0.04-0.104-0.112-0.364-0.16-0.936
|
||||
c-0.776-9.536-1.016-30.904-1.176-45.04c-0.088-7.956-0.144-14.968-0.144-14.968h-56.912l-0.352,1.56
|
||||
c-0.072,0.3-0.184,1.3-1.484,13.136c-1.528,13.9-3.832,34.904-5.212,45.848c-0.016,0.072-0.064,0.184-0.12,0.292
|
||||
c-0.7,0.068-1.44,0.06-2.224,0.044v-69.1h62.288c0,0,2.212-42.888,3.352-61.672l0.488-8.02c0.552-9.024,1.1-18.052,1.588-27.08
|
||||
c0.02-0.312,0.048-0.504,0.04-0.592c0.1-0.008,7.168,0,7.168,0V234.886z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.1 KiB |
@ -49,7 +49,7 @@
|
||||
width: min(100%, var(--content-width));
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
gap: var(--space-40);
|
||||
}
|
||||
|
||||
.step-layout--intro {
|
||||
@ -97,7 +97,7 @@ fieldset {
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
padding: var(--space-6);
|
||||
padding: var(--space-40);
|
||||
border-radius: 1.75rem;
|
||||
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
|
||||
}
|
||||
@ -209,7 +209,7 @@ textarea:focus {
|
||||
.option-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: var(--space-31);
|
||||
padding: var(--space-20);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
@ -444,28 +444,11 @@ textarea:focus {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-add-btn {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
border: 2px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-sm, 0.5rem);
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.gallery-add-btn:hover {
|
||||
border-color: var(--olive);
|
||||
color: var(--olive);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
width: min(100% - 2rem, var(--max-width));
|
||||
margin: 0 auto;
|
||||
padding: var(--space-5) 0 var(--space-6);
|
||||
padding: var(--space-5) 0 var(--space-40);
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -4,26 +4,15 @@
|
||||
Shared Typography Tokens
|
||||
Reuse common text styles across nav, controls and buttons
|
||||
--------------------------------------------------------- */
|
||||
.nav-link,
|
||||
.login-pill,
|
||||
.category-item,
|
||||
|
||||
|
||||
.meta-filter select,
|
||||
.meta-filter input[type="date"],
|
||||
.btn-primary,
|
||||
.empty-state-btn,
|
||||
.detail-primary-btn {
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
}
|
||||
|
||||
.event-date-time,
|
||||
.event-location {
|
||||
color: var(--olive);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
/* Heading hierarchy: page title > detail title > card title > section title */
|
||||
@ -54,17 +43,15 @@
|
||||
--------------------------------------------------------- */
|
||||
.filter-label {
|
||||
margin: 0 0 var(--space-1);
|
||||
color: var(--olive);
|
||||
font-size: 18px;
|
||||
letter-spacing: var(--ls-la);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-6);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.category-group {
|
||||
@ -75,26 +62,15 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
.event-tag {
|
||||
border: 1.5px solid var(--tomato);
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--butter-light);
|
||||
color: var(--tomato);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-31);
|
||||
min-height: 40px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}
|
||||
|
||||
.meta-filter-group {
|
||||
@ -114,48 +90,43 @@
|
||||
|
||||
.meta-filter select,
|
||||
.meta-filter input[type="date"] {
|
||||
border: 1.5px solid var(--tomato);
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--butter-light);
|
||||
color: var(--black);
|
||||
padding: var(--space-1) var(--space-4);
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
height: 37px;
|
||||
padding: 0 var(--space-4);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
.meta-filter select:focus,
|
||||
.meta-filter input[type="date"]:focus {
|
||||
outline: 2px solid rgba(107, 107, 5, 0.35);
|
||||
outline-offset: 1px;
|
||||
}*/
|
||||
border: 1.5px solid var(--olive-dark);
|
||||
outline: 2px solid var(--butter);
|
||||
}
|
||||
|
||||
.meta-filter input[type="date"] {
|
||||
color-scheme: light;
|
||||
accent-color: var(--tomato);
|
||||
accent-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(22deg) brightness(90%) contrast(95%);
|
||||
filter: invert(8%) sepia(5%) saturate(300%) hue-rotate(10deg) brightness(10%) contrast(95%);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||
background-color: var(--olive-light);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.meta-filter select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B05' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
color: var(--black);
|
||||
background-position: right var(--space-4) center;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
@ -164,7 +135,7 @@
|
||||
.event-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.event-card {
|
||||
@ -172,11 +143,9 @@
|
||||
background: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
display: flex;
|
||||
/*justify-content: space-between;
|
||||
align-items: flex-start;*/
|
||||
gap: var(--space-6);
|
||||
gap: var(--space-40);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
@ -232,7 +201,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-1) var(--space-31);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}
|
||||
|
||||
.event-spec-chip {
|
||||
@ -311,9 +280,8 @@
|
||||
padding: 42px var(--space-5);
|
||||
border: 2px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: var(--butter-light);
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08);
|
||||
}
|
||||
|
||||
.empty-state-kicker {
|
||||
@ -345,19 +313,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.empty-state-btn {
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--olive);
|
||||
color: var(--butter-light);
|
||||
font-weight: 600;
|
||||
padding: 10px 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-state-btn:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Detail Page
|
||||
@ -367,29 +322,9 @@
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-1);
|
||||
width: fit-content;
|
||||
color: var(--tomato);
|
||||
text-decoration: none;
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-none);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.detail-back span {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.detail-hero {
|
||||
display: grid;
|
||||
margin-bottom: var(--space-6);
|
||||
margin-bottom: var(--space-40);
|
||||
}
|
||||
|
||||
.detail-top-row {
|
||||
@ -414,7 +349,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "side gallery";
|
||||
gap: var(--space-6);
|
||||
gap: var(--space-40);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@ -460,7 +395,7 @@
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
letter-spacing: var(--ls-la);
|
||||
padding: var(--space-1) var(--space-31);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}
|
||||
|
||||
.detail-gallery {
|
||||
@ -661,9 +596,9 @@
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
padding: var(--space-4) var(--space-5);
|
||||
margin-top: var(--space-6);
|
||||
margin-top: var(--space-40);
|
||||
position: sticky;
|
||||
bottom: var(--space-6);
|
||||
bottom: var(--space-40);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -844,10 +779,6 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
font-size: 15px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.meta-filter {
|
||||
min-width: 155px;
|
||||
@ -861,23 +792,6 @@
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
padding: 22px 20px 20px;
|
||||
}
|
||||
|
||||
.event-date-time,
|
||||
.event-location,
|
||||
.event-spots {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.event-side {
|
||||
padding-top: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.event-side-full {
|
||||
justify-content: flex-end;
|
||||
|
||||
114
css/index.css
114
css/index.css
@ -127,33 +127,43 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 28px 20px;
|
||||
background: var(--white);
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
|
||||
padding: var(--space-40);
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.how-step--numbered {
|
||||
.how-step-number-numbered {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.how-step__corner-number {
|
||||
.how-step_corner-number {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--butter-light);
|
||||
background: var(--tomato);
|
||||
border-radius: var(--radius-lg);
|
||||
top: var(--space-20);
|
||||
left: var(--space-20);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-family: 'Bagel Fat One';
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.how-step__corner-number--brown {
|
||||
.how-step_corner-number--brown {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.how-step__icon {
|
||||
font-size: 2.4rem;
|
||||
.how-step_icon {
|
||||
font-size: 3.5rem;
|
||||
color: var(--brown);
|
||||
margin-top: 12px;
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.how-step__png {
|
||||
@ -166,24 +176,14 @@
|
||||
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: 0.95rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
color: var(--black);
|
||||
.how-step_text {
|
||||
margin-bottom: var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.how-step__label--brown {
|
||||
color: var(--brown);
|
||||
.text-left{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.how-step__label--big {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.how-step__footer-pill {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@ -246,77 +246,71 @@
|
||||
|
||||
.gallery__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: grid;
|
||||
top: 45%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
border: 1.5px solid var(--butter-light);
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
place-items: center;
|
||||
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.2rem;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
z-index: 2;
|
||||
color: var(--olive);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery__arrow:hover {
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.gallery__arrow:hover,
|
||||
.gallery__arrow:focus-visible {
|
||||
outline: 2px solid var(--brown);
|
||||
outline-offset: 3px;
|
||||
border: 1.5px solid var(--butter);
|
||||
background: var(--butter);
|
||||
}
|
||||
|
||||
.gallery__arrow--prev {
|
||||
left: 12px;
|
||||
left: var(--space-4);
|
||||
}
|
||||
|
||||
.gallery__arrow--next {
|
||||
right: 12px;
|
||||
right: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
/* --- Carousel dot indicators --- */
|
||||
|
||||
.gallery__dots {
|
||||
.gallery_dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
|
||||
.gallery__dot {
|
||||
.gallery_dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--brown);
|
||||
border: 2px solid var(--olive);
|
||||
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);
|
||||
.gallery_dot:hover,
|
||||
.gallery_dot--active {
|
||||
background: var(--olive);;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.gallery__dot:focus-visible {
|
||||
outline: 2px solid var(--brown);
|
||||
.gallery_dot:focus-visible {
|
||||
outline: 2px solid var(--olive);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.gallery__dot--active {
|
||||
background: var(--brown);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gallery__track {
|
||||
gap: 16px;
|
||||
|
||||
@ -128,7 +128,7 @@ button[type="submit"]:active {
|
||||
background-color: var(--butter-light);
|
||||
border-left: 4px solid var(--olive);
|
||||
padding: var(--space-3);
|
||||
margin-bottom: var(--space-6);
|
||||
margin-bottom: var(--space-40);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--black);
|
||||
@ -178,31 +178,12 @@ button[type="submit"]:active {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
padding: 40px;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateY(-50px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: var(--olive);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
@ -220,13 +201,6 @@ button[type="submit"]:active {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
color: var(--black);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
@ -253,9 +227,10 @@ button[type="submit"]:active {
|
||||
|
||||
/* --- Footer --- */
|
||||
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border: none;
|
||||
@ -269,6 +244,23 @@ button[type="submit"]:active {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Left aligned */
|
||||
.footer-left {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
/* Center aligned */
|
||||
.footer-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
/* Right aligned */
|
||||
.footer-right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
/* --- Responsive --- */
|
||||
|
||||
@ -292,7 +284,7 @@ button[type="submit"]:active {
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
padding: var(--space-3) var(--space-6);
|
||||
padding: var(--space-3) var(--space-40);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
letter-spacing: var(--ls-la);
|
||||
}
|
||||
|
||||
#profile-headline {
|
||||
#headline {
|
||||
margin: 0.4rem 0;
|
||||
color: var(--brown);
|
||||
font-size: clamp(2rem, 4.4vw, 2.8rem);
|
||||
@ -44,43 +44,11 @@
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.profile-tabs {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.profile-tab {
|
||||
border: 2px solid var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter);
|
||||
color: var(--black);
|
||||
padding: 0.45rem 1rem;
|
||||
min-height: 2.5rem;
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.profile-tab:hover,
|
||||
.profile-tab:focus-visible {
|
||||
background: #faf8e8;
|
||||
}
|
||||
|
||||
.profile-tab.is-active {
|
||||
border-color: transparent;
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* Konsistentes Karten-Layout für alle Profilsektionen. */
|
||||
.profile-panel {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
@ -115,38 +83,34 @@
|
||||
|
||||
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
|
||||
.profile-event-card {
|
||||
border: 1px solid rgba(107, 107, 5, 0.25);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
background: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.profile-event-card-clickable {
|
||||
gap: var(--space-40);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.profile-event-card-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-event-card-clickable:hover {
|
||||
box-shadow: 0 6px 16px rgba(102, 52, 13, 0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.profile-event-title {
|
||||
.profile-event-title h3{
|
||||
margin: 0;
|
||||
color: var(--black);
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/*
|
||||
.profile-event-meta {
|
||||
margin: 0.3rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--olive);
|
||||
}
|
||||
|
||||
}*/
|
||||
|
||||
.profile-event-address-block {
|
||||
margin-top: 0.55rem;
|
||||
@ -191,56 +155,6 @@
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.profile-unregister-btn {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
padding: 0.45rem 0.95rem;
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.profile-cancel-btn {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
padding: 0.45rem 0.95rem;
|
||||
font-family: "Jost", sans-serif;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.profile-cancel-btn:hover,
|
||||
.profile-cancel-btn:focus-visible {
|
||||
background: var(--tomato-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
|
||||
}
|
||||
|
||||
.profile-cancel-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
|
||||
}
|
||||
|
||||
.profile-unregister-btn:hover,
|
||||
.profile-unregister-btn:focus-visible {
|
||||
background: var(--tomato-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
|
||||
}
|
||||
|
||||
.profile-unregister-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
|
||||
}
|
||||
|
||||
.profile-empty {
|
||||
margin: 0;
|
||||
color: var(--black);
|
||||
|
||||
@ -45,10 +45,10 @@
|
||||
--space-1: 0.5rem; /* 8px */
|
||||
--space-2: 0.75rem; /* 12px */
|
||||
--space-3: 1rem; /* 16px */
|
||||
--space-31: 1.25rem; /* 20px */
|
||||
--space-20: 1.25rem; /* 20px */
|
||||
--space-4: 1.5rem; /* 24px */
|
||||
--space-5: 2rem; /* 32px */
|
||||
--space-6: 2.5rem; /* 40px */
|
||||
--space-40: 2.5rem; /* 40px */
|
||||
--space-7: 3rem; /* 48px */
|
||||
--space-8: 4rem; /* 64px */
|
||||
|
||||
@ -151,6 +151,41 @@ p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Margins */
|
||||
|
||||
.margin-bottom-24 {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.margin-bottom-40 {
|
||||
margin-bottom: var(--space-40);
|
||||
}
|
||||
|
||||
.event-side {
|
||||
/* Right-side action area: availability status and optional signup button. */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
padding-top: 36px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Event-Beschrieb oberhalb von Eventtitel */
|
||||
.event-date-time,
|
||||
.event-location,
|
||||
.profile-event-meta {
|
||||
color: var(--olive);
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
||||
display: inline-flex;
|
||||
gap: var(--space-0);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.main-content {
|
||||
margin-top: var(--space-8);
|
||||
@ -251,7 +286,6 @@ p {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-la);
|
||||
margin-bottom: var(--space-6);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -324,10 +358,37 @@ p {
|
||||
border-color: var(--blue-dark);
|
||||
}
|
||||
|
||||
.button-primary-eigener-event{
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
background-color: var(--blue);
|
||||
border: 1.5px solid var(--blue);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter-light);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.button-primary-eigener-event:hover {
|
||||
background: var(--blue-dark);
|
||||
border-color: var(--blue-dark);
|
||||
}
|
||||
|
||||
.button-primary-eigener-event:disabled {
|
||||
border-color: transparent;
|
||||
background-color: var(--olive-light);
|
||||
color: var(--olive-dark);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
background-color: var(--butter);
|
||||
background-color: transparent;
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: var(--font-main);
|
||||
@ -366,7 +427,7 @@ p {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter);
|
||||
color: var(--butter-light);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
@ -377,6 +438,45 @@ p {
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
|
||||
.category-item {
|
||||
border: 1.5px solid var(--tomato);
|
||||
color: var(--tomato);
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--butter-light);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-1) var(--space-20);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.category-item:hover, .category-item:focus-visible {
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.category-item.is-active, .category-item.active {
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.category-item-profile {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
|
||||
}
|
||||
|
||||
.category-items {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.button-small {
|
||||
background: var(--olive);
|
||||
color: var(--butter-light);
|
||||
@ -438,19 +538,13 @@ p {
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Card Footer */
|
||||
.card-footer {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Text Muted */
|
||||
.text-muted {
|
||||
@ -465,7 +559,7 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
height: 1em; /* keeps it aligned with text size */
|
||||
margin-top: var(--space-7);
|
||||
}
|
||||
|
||||
@ -476,7 +570,7 @@ p {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.instagram-invite__icon {
|
||||
.instagram-invite_icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
object-fit: contain;
|
||||
@ -484,12 +578,19 @@ p {
|
||||
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
||||
}
|
||||
|
||||
.instagram-invite__logo {
|
||||
.footer-invite_logo {
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.inline {
|
||||
color: var(--tomato);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Modal / Popup */
|
||||
.modal {
|
||||
display: none;
|
||||
@ -516,9 +617,9 @@ p {
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
padding: 40px;
|
||||
padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
@ -532,12 +633,10 @@ p {
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: var(--olive);
|
||||
font-size: 1.5rem;
|
||||
padding: var(--space-20)var(--space-20) 0 var(--space-20);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@ -557,10 +656,7 @@ p {
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
color: var(--black);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-6);
|
||||
padding: var(--space-20) var(--space-20) var(--space-4) var(--space-20);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@ -577,7 +673,7 @@ p {
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
padding: var(--space-3) var(--space-6);
|
||||
padding: var(--space-3) var(--space-40);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
@ -649,14 +745,36 @@ p {
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
/*justify-content: space-between;*/
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: var(--space-3) var(--space-7);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Left aligned */
|
||||
.footer-left {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
/* Centered */
|
||||
.footer-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
/* Right aligned */
|
||||
.footer-right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 48rem) {
|
||||
.container {
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
"date": "02. MAI. 2026",
|
||||
"time": "12:30 UHR",
|
||||
"category": "Lunch",
|
||||
"diet": "Pescetarisch",
|
||||
"diet": "Fisch",
|
||||
"spots": 8,
|
||||
"host": {
|
||||
"name": "Akiko",
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
|
||||
<h2>1. Verantwortliche Stelle</h2>
|
||||
<h3>1. Verantwortliche Stelle</h3>
|
||||
<p>
|
||||
Invité GmbH<br>
|
||||
Musterstrasse 12<br>
|
||||
@ -31,7 +31,7 @@
|
||||
E-Mail: datenschutz@invite-cooking.ch
|
||||
</p>
|
||||
|
||||
<h2>2. Erhebung und Verarbeitung personenbezogener Daten</h2>
|
||||
<h3>2. Erhebung und Verarbeitung personenbezogener Daten</h3>
|
||||
<p>
|
||||
Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst.
|
||||
Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete
|
||||
@ -40,14 +40,14 @@
|
||||
unserer Website verwendet.
|
||||
</p>
|
||||
|
||||
<h2>3. Registrierung und Nutzerkonto</h2>
|
||||
<h3>3. Registrierung und Nutzerkonto</h3>
|
||||
<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>
|
||||
<h3>4. Cookies</h3>
|
||||
<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
|
||||
@ -55,14 +55,14 @@
|
||||
die Funktionalität der Website eingeschränkt sein kann.
|
||||
</p>
|
||||
|
||||
<h2>5. Datenweitergabe an Dritte</h2>
|
||||
<h3>5. Datenweitergabe an Dritte</h3>
|
||||
<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>
|
||||
<h3>6. Datensicherheit</h3>
|
||||
<p>
|
||||
Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten
|
||||
gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff
|
||||
@ -70,7 +70,7 @@
|
||||
der technologischen Entwicklung fortlaufend verbessert.
|
||||
</p>
|
||||
|
||||
<h2>7. Ihre Rechte</h2>
|
||||
<h3>7. Ihre Rechte</h3>
|
||||
<p>
|
||||
Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten
|
||||
personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung
|
||||
@ -78,7 +78,7 @@
|
||||
datenschutz@invite-cooking.ch
|
||||
</p>
|
||||
|
||||
<h2>8. Änderungen dieser Datenschutzerklärung</h2>
|
||||
<h3>8. Änderungen dieser Datenschutzerklärung</h3>
|
||||
<p>
|
||||
Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie
|
||||
stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer
|
||||
@ -86,16 +86,22 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<p class="p-small">© Invité</p>
|
||||
<a href="impressum.html" class="link-text-footer" >Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer" >Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -149,20 +149,24 @@
|
||||
<fieldset class="form-field">
|
||||
<legend>Ernährungsform</legend>
|
||||
|
||||
<div class="option-grid option-grid--3">
|
||||
<div class="option-grid option-grid--4">
|
||||
<label class="option-card">
|
||||
<input type="radio" name="dietType" value="Omnivor" required />
|
||||
<span>Omnivor</span>
|
||||
<small>Fleisch und/oder Fisch</small>
|
||||
<input type="checkbox" name="dietType" value="Fleisch" />
|
||||
<span>Fleisch</span>
|
||||
</label>
|
||||
|
||||
<label class="option-card">
|
||||
<input type="radio" name="dietType" value="Vegetarisch" />
|
||||
<input type="checkbox" name="dietType" value="Fisch" />
|
||||
<span>Fisch</span>
|
||||
</label>
|
||||
|
||||
<label class="option-card">
|
||||
<input type="checkbox" name="dietType" value="Vegetarisch" />
|
||||
<span>Vegetarisch</span>
|
||||
</label>
|
||||
|
||||
<label class="option-card">
|
||||
<input type="radio" name="dietType" value="Vegan" />
|
||||
<input type="checkbox" name="dietType" value="Vegan" />
|
||||
<span>Vegan</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -293,7 +297,7 @@
|
||||
<label>Fotos hinzufügen <span class="field-hint-inline">(optional)</span></label>
|
||||
<div class="gallery-upload">
|
||||
<div class="gallery-preview" id="galleryPreview"></div>
|
||||
<button type="button" class="gallery-add-btn" id="galleryAddBtn" aria-label="Foto hinzufügen">+</button>
|
||||
<button type="button" class="button-primary" id="galleryAddBtn" aria-label="Foto hinzufügen">Foto hinzufügen</button>
|
||||
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
||||
</div>
|
||||
</div>
|
||||
@ -430,16 +434,22 @@
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/event_create.js"></script>
|
||||
</body>
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event-Detail</title>
|
||||
<title>Invité | Event-Detail</title>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_overview.css">
|
||||
<script src="js/navigation.js" defer></script>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -39,17 +41,22 @@
|
||||
<!-- Snackbar: Feedback bei An-/Abmeldung -->
|
||||
<div class="snackbar" id="snackbar"></div>
|
||||
|
||||
<!-- Instagram Einladung -->
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event-Overview</title>
|
||||
<title>Invité | Event-Übersicht</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_overview.css">
|
||||
@ -39,10 +39,10 @@
|
||||
<!-- Primary category filter buttons -->
|
||||
<div class="category-group">
|
||||
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
||||
<button class="category-item" type="button" data-cat="BRUNCH">Brunch</button>
|
||||
<button class="category-item" type="button" data-cat="LUNCH">Lunch</button>
|
||||
<button class="category-item" type="button" data-cat="COFFEE">Kaffee + Kuchen</button>
|
||||
<button class="category-item" type="button" data-cat="DINNER">Dinner</button>
|
||||
<button class="category-item" type="button" data-cat="Brunch">Brunch</button>
|
||||
<button class="category-item" type="button" data-cat="Lunch">Lunch</button>
|
||||
<button class="category-item" type="button" data-cat="Kaffee + Kuchen">Kaffee + Kuchen</button>
|
||||
<button class="category-item" type="button" data-cat="Dinner">Dinner</button>
|
||||
</div>
|
||||
|
||||
<!-- Secondary filters populated/handled by JavaScript -->
|
||||
@ -56,10 +56,33 @@
|
||||
|
||||
<label class="meta-filter" for="date-filter">
|
||||
<span>Datum</span>
|
||||
<div class="date-input-wrapper">
|
||||
<input id="date-filter" type="date">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<!-- Primary category filter buttons -->
|
||||
<div class="category-group">
|
||||
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
|
||||
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
|
||||
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
|
||||
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<!-- Primary category filter buttons -->
|
||||
<div class="category-group">
|
||||
<button class="category-item" type="button" data-cat="Fleisch">glutenfrei</button>
|
||||
<button class="category-item" type="button" data-cat="Fisch">laktosefrei</button>
|
||||
<button class="category-item" type="button" data-cat="Vegetarisch">ohne Nüsse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Render target: event cards or empty state -->
|
||||
@ -72,16 +95,22 @@
|
||||
<!-- Snackbar: Feedback bei An-/Abmeldung -->
|
||||
<div class="snackbar" id="snackbar"></div>
|
||||
|
||||
<!-- Instagram Einladung -->
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -22,7 +22,7 @@
|
||||
<main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
|
||||
<h1>Impressum</h1>
|
||||
|
||||
<h2>Angaben gemäss § 5 TMG</h2>
|
||||
<h3>Angaben gemäss § 5 TMG</h3>
|
||||
<p>
|
||||
Invité GmbH<br>
|
||||
Musterstrasse 12<br>
|
||||
@ -30,28 +30,28 @@
|
||||
Schweiz
|
||||
</p>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<h3>Kontakt</h3>
|
||||
<p>
|
||||
Telefon: +41 81 123 45 67<br>
|
||||
E-Mail: info@invite-cooking.ch
|
||||
</p>
|
||||
|
||||
<h2>Vertretungsberechtigte Person</h2>
|
||||
<h3>Vertretungsberechtigte Person</h3>
|
||||
<p>Max Mustermann, Geschäftsführer</p>
|
||||
|
||||
<h2>Handelsregistereintrag</h2>
|
||||
<h3>Handelsregistereintrag</h3>
|
||||
<p>
|
||||
Eingetragen im Handelsregister des Kantons Graubünden<br>
|
||||
Firmennummer: CHE-123.456.789
|
||||
</p>
|
||||
|
||||
<h2>Haftungsausschluss</h2>
|
||||
<h3>Haftungsausschluss</h3>
|
||||
<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>
|
||||
<h3>Urheberrecht</h3>
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
|
||||
dem schweizerischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede
|
||||
@ -60,15 +60,21 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
87
index.html
87
index.html
@ -33,7 +33,7 @@
|
||||
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
||||
<section class="hero">
|
||||
<div class="hero__left">
|
||||
<span class="badge">einfach. lecker. gemeinsam.</span>
|
||||
<span class="badge margin-bottom-40">einfach. lecker. gemeinsam.</span>
|
||||
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
|
||||
<p>Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.</p>
|
||||
<a class="button-primary" href="signup.html">Anmelden</a>
|
||||
@ -47,41 +47,34 @@
|
||||
</section>
|
||||
|
||||
<section class="how-it-works">
|
||||
<div class="how-it-works__header">
|
||||
<h2>So funktioniert's</h2>
|
||||
</div>
|
||||
<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>
|
||||
<i class="fa-solid fa-id-card how-step__icon"></i>
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Anmelden & Dabeisein</p>
|
||||
<p class="how-step__label">Erstelle kurz dein Profil und zeig uns deinen Geschmack. Bei uns zählt der Mensch am Tisch, nicht der Lebenslauf.</p>
|
||||
<div class="card-footer">
|
||||
<div class="how-step__footer-banner">
|
||||
<span>QUICK SETUP · 2 MIN</span>
|
||||
</div>
|
||||
<article class="how-step how-step-number-numbered">
|
||||
<span class="how-step_corner-number">1</span>
|
||||
<i class="fa-solid fa-id-card how-step_icon"></i>
|
||||
<h3 class="how-step_text">Anmelden und Dabeisein</h3>
|
||||
<p class="how-step_text text-left">Erstelle kurz dein Profil und zeig uns deinen Geschmack. Bei uns zählt der Mensch am Tisch, nicht der Lebenslauf.</p>
|
||||
<div class="badge margin-bottom-24">
|
||||
<span>Quick Setup in 2 Min</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="how-step how-step--numbered">
|
||||
<span class="how-step__corner-number how-step__corner-number--brown">2</span>
|
||||
<i class="fa-solid fa-magnifying-glass-location how-step__icon"></i>
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Tisch finden oder decken</p>
|
||||
<p class="how-step__label">Entdecke spontane Events in deiner Nähe oder öffne deine eigene Küche. Du entscheidest, ob du Gast oder Gastgeber bist</p>
|
||||
<div class="card-footer">
|
||||
<div class="how-step__footer-banner">
|
||||
<span>GASTGEBER · GAST</span>
|
||||
</div>
|
||||
<article class="how-step how-step-number-numbered">
|
||||
<span class="how-step_corner-number">2</span>
|
||||
<i class="fa-solid fa-magnifying-glass-location how-step_icon"></i>
|
||||
<h3 class="how-step_text">Tisch finden oder decken</h3>
|
||||
<p class="how-step_text text-left">Entdecke spontane Events in deiner Nähe oder öffne deine eigene Küche. Du entscheidest, ob du Gast oder Gastgeber:in bist.</p>
|
||||
<div class="badge margin-bottom-24">
|
||||
<span>Gast – Gastgeber:in</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="how-step how-step--numbered">
|
||||
<span class="how-step__corner-number how-step__corner-number--brown">3</span>
|
||||
<i class="fa-solid fa-utensils how-step__icon"></i>
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Teile den Tisch</p>
|
||||
<p class="how-step__label">Triff neue Leute in entspannter Atmosphäre. Geniesse gutes Essen in Gesellschaft und mach aus einer Mahlzeit eine echte Begegnung.</p>
|
||||
<div class="card-footer">
|
||||
<div class="how-step__footer-banner">
|
||||
<span>GEMEINSAM GENIESSEN</span>
|
||||
</div>
|
||||
<article class="how-step how-step-number-numbered">
|
||||
<span class="how-step_corner-number">3</span>
|
||||
|
||||
<i class="fa-solid fa-utensils how-step_icon"></i>
|
||||
<h3 class="how-step_text">Teile den Tisch</h3>
|
||||
<p class="how-step_text text-left">Triff neue Leute in entspannter Atmosphäre. Geniesse gutes Essen in Gesellschaft und mach aus einer Mahlzeit eine echte Begegnung.</p>
|
||||
<div class="badge margin-bottom-24">
|
||||
<span>Gemeinsam geniessen</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -89,6 +82,9 @@
|
||||
|
||||
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
|
||||
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
|
||||
<h2>Einblick in Cooking-Erlebnisse</h2>
|
||||
<p>#gemeinsam_invité auf Instagram</p>
|
||||
</div>
|
||||
<div class="gallery__carousel">
|
||||
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
@ -138,15 +134,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
|
||||
|
||||
|
||||
<div class="instagram-invite">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="gallery_dots" role="tablist" aria-label="Seite auswählen"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -160,9 +148,22 @@
|
||||
</div>
|
||||
|
||||
<script src="js/index-carousel.js"></script>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -304,7 +304,7 @@ function getReviewValues() {
|
||||
menuDescription: getFieldValue("menuDescription"),
|
||||
eventDescription: getFieldValue("eventDescription"),
|
||||
maxGuests: getFieldValue("maxGuests"),
|
||||
dietType: getFieldValue("dietType"),
|
||||
dietType: getCheckboxValues("dietType"),
|
||||
allergies: buildAllergiesReviewValue(),
|
||||
eventDate: formatDate(getFieldValue("eventDate")),
|
||||
eventTime: getFieldValue("eventTime"),
|
||||
@ -389,7 +389,7 @@ function mapEventTypeToCategory(value) {
|
||||
Brunch: "Brunch",
|
||||
Lunch: "Lunch",
|
||||
Dinner: "Dinner",
|
||||
"Kaffee + Kuchen": "COFFEE"
|
||||
"Kaffee + Kuchen": "Kaffee + Kuchen"
|
||||
};
|
||||
|
||||
return categoryMap[value] || value.toUpperCase();
|
||||
@ -400,7 +400,7 @@ function mapEventTypeToCategory(value) {
|
||||
*/
|
||||
function buildStoredEvent() {
|
||||
const eventType = getFieldValue("eventType");
|
||||
const dietType = getFieldValue("dietType");
|
||||
const dietType = getCheckboxValues("dietType");
|
||||
const menuDescription = form.elements.menuDescription.value.trim();
|
||||
const eventDescription = form.elements.eventDescription.value.trim();
|
||||
const eventDate = form.elements.eventDate.value;
|
||||
@ -472,6 +472,15 @@ function validateCurrentStep() {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Speziell für Schritt 2: Ernährungsform prüfen
|
||||
if (currentStep === 2) {
|
||||
const dietCheck = validateDietType();
|
||||
if (!dietCheck.isValid) {
|
||||
setErrorMessage(dietCheck.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Danach normale Pflichtfelder prüfen
|
||||
const requiredCheck = validateRequiredFields(fields);
|
||||
if (!requiredCheck.isValid) {
|
||||
@ -509,6 +518,22 @@ function validateRadioGroups(fields) {
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Prüft die Ernährungsform-Checkboxen (mindestens eine muss ausgewählt sein).
|
||||
*/
|
||||
function validateDietType() {
|
||||
const checked = form.querySelectorAll('input[name="dietType"]:checked');
|
||||
if (checked.length === 0) {
|
||||
// Mark all as invalid
|
||||
form.querySelectorAll('input[name="dietType"]').forEach(input => {
|
||||
const card = input.closest('.option-card');
|
||||
if (card) card.classList.add('option-card--invalid');
|
||||
});
|
||||
return { isValid: false, message: "Bitte wähle mindestens eine Ernährungsform aus." };
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Prüft alle Pflichtfelder ausser Radios und Checkboxen.
|
||||
* Rückgabe:
|
||||
|
||||
@ -113,9 +113,9 @@
|
||||
}
|
||||
|
||||
const msUntilStart = eventDateTime.getTime() - Date.now();
|
||||
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||
const twentyfourHoursInMs = 12 * 60 * 60 * 1000;
|
||||
|
||||
return msUntilStart <= twelveHoursInMs;
|
||||
return msUntilStart <= twentyfourHoursInMs;
|
||||
}
|
||||
|
||||
// Abmeldefrist: 1 Tag (24 h) vor Eventstart.
|
||||
@ -145,9 +145,9 @@
|
||||
}
|
||||
|
||||
const msUntilStart = eventDateTime.getTime() - Date.now();
|
||||
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||
const twentyfourHoursInMs = 12 * 60 * 60 * 1000;
|
||||
|
||||
return msUntilStart >= 0 && msUntilStart <= twelveHoursInMs;
|
||||
return msUntilStart >= 0 && msUntilStart <= twentyfourHoursInMs;
|
||||
}
|
||||
|
||||
function countRegistrationsForEvent(registrationMap, eventId) {
|
||||
@ -255,10 +255,10 @@
|
||||
// Map diet keys to readable labels while keeping unknown values untouched.
|
||||
function getDietLabel(diet) {
|
||||
const labels = {
|
||||
VEGGIE: 'Vegetarisch',
|
||||
VEGAN: 'Vegan',
|
||||
FLEISCH: 'Fleisch',
|
||||
FISCH: 'Fisch'
|
||||
FISCH: 'Fisch',
|
||||
VEGGIE: 'Vegetarisch',
|
||||
VEGAN: 'Vegan'
|
||||
};
|
||||
|
||||
return labels[diet] || diet;
|
||||
@ -316,12 +316,12 @@
|
||||
|| (!isRegistered && (isFull || isRegistrationClosed))
|
||||
|| (isRegistered && deregInfo.isClosed);
|
||||
const actionButtonVariantClass = isOwnEvent
|
||||
? ' detail-primary-btn-own'
|
||||
? ' button-primary'
|
||||
: isRegistered
|
||||
? ' detail-primary-btn-danger'
|
||||
? ' button-primary-abmelden '
|
||||
: isRegistrationClosed
|
||||
? ' detail-primary-btn-danger'
|
||||
: ' detail-primary-btn-register';
|
||||
? ' button-primary-abmelden '
|
||||
: ' button-primary ';
|
||||
const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess;
|
||||
const addressPanelMarkup = shouldRevealAddress
|
||||
? `
|
||||
@ -333,18 +333,13 @@
|
||||
: '';
|
||||
const detailChips = [
|
||||
`<span class="event-tag">${eventCategory}</span>`,
|
||||
`<span class="event-tag">${dietLabel}</span>`,
|
||||
...event.diet.split(', ').filter(d => d.trim() && d !== 'Keine Angabe').map(d => `<span class="event-tag">${getDietLabel(d.trim())}</span>`),
|
||||
...specifications.map(item => `<span class="event-tag">${item}</span>`)
|
||||
].join('');
|
||||
|
||||
// Render complete detail page layout including:
|
||||
// hero metadata, host card, menu, participants, gallery and sticky action bar.
|
||||
detailContainer.innerHTML = `
|
||||
<div class="detail-page">
|
||||
<a class="detail-back" href="event_overview.html">
|
||||
<span aria-hidden="true">‹</span>
|
||||
Alle Events
|
||||
</a>
|
||||
|
||||
<section class="detail-hero">
|
||||
<div class="detail-top-row">
|
||||
|
||||
@ -263,7 +263,7 @@
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// Schliesst neue Anmeldungen ab 12h vor Start (inkl. bereits gestarteter Events).
|
||||
// Schliesst neue Anmeldungen ab 24h vor Start (inkl. bereits gestarteter Events).
|
||||
function isRegistrationClosedForEvent(event) {
|
||||
const eventDateTime = parseEventDateTime(event);
|
||||
if (!eventDateTime || Number.isNaN(eventDateTime.getTime())) {
|
||||
@ -271,9 +271,9 @@
|
||||
}
|
||||
|
||||
const msUntilStart = eventDateTime.getTime() - Date.now();
|
||||
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||
const twentyfourHoursInMs = 24 * 60 * 60 * 1000;
|
||||
|
||||
return msUntilStart <= twelveHoursInMs;
|
||||
return msUntilStart <= twentyfourHoursInMs;
|
||||
}
|
||||
|
||||
// Safely verify whether a value exists in the given select element.
|
||||
@ -327,7 +327,7 @@
|
||||
<h3>Schade, aktuell gibt es hier keine Events.</h3>
|
||||
<p>Starte dein eigenes Event und bringe die Community an deinen Tisch.</p>
|
||||
<a class="empty-state-link" href="event_create.html">
|
||||
<button class="empty-state-btn" type="button">Event erstellen</button>
|
||||
<button class="button-primary" type="button">Event erstellen</button>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
@ -367,8 +367,13 @@
|
||||
? event.specifications.map(spec => `<span class="event-tag">${spec}</span>`).join('')
|
||||
: '';
|
||||
|
||||
// Build diet tags: split by comma and create individual tags
|
||||
const dietTags = event.diet && event.diet !== 'Keine Angabe' && event.diet !== '–'
|
||||
? event.diet.split(', ').map(d => `<span class="event-tag">${d.trim()}</span>`).join('')
|
||||
: '';
|
||||
|
||||
const actionMarkup = isOwnEvent
|
||||
? '<button class="button-primary" type="button" data-registration-action="own" disabled>Dein Event!</button>'
|
||||
? '<button class="button-primary-eigener-event" type="button" data-registration-action="own" disabled>Dein Event!</button>'
|
||||
: isRegistered
|
||||
? '<button class="button-primary button-primary-abmelden" type="button" data-registration-action="unregister">Abmelden</button>'
|
||||
: isRegistrationClosed
|
||||
@ -393,12 +398,12 @@
|
||||
<h2>${event.title}</h2>
|
||||
<div class="event-meta-row">
|
||||
<span class="event-tag">${event.category}</span>
|
||||
<span class="event-tag">${event.diet}</span>
|
||||
${dietTags}
|
||||
${specsChips}
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
||||
<span class="button-plaetze${isFull ? ' event-spots-full' : ''}">${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`}</span>
|
||||
${isRegistrationClosed ? '' : `<span class="button-plaetze${isFull ? ' event-spots-full' : ''}">${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`}</span>`}
|
||||
${actionMarkup}
|
||||
</div>
|
||||
`;
|
||||
@ -483,6 +488,15 @@
|
||||
|
||||
if (dateFilter) {
|
||||
dateFilter.addEventListener('change', applyFilters);
|
||||
|
||||
// Make calendar icon clickable to focus the date input
|
||||
const calendarIcon = document.querySelector('.calendar-icon');
|
||||
if (calendarIcon) {
|
||||
calendarIcon.addEventListener('click', () => {
|
||||
dateFilter.focus();
|
||||
dateFilter.click();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Kick off initial load/render cycle.
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
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');
|
||||
const dotsContainer = document.querySelector('.gallery_dots');
|
||||
|
||||
// Nur ausführen, wenn die Galerie auf der Seite vorhanden ist.
|
||||
if (carouselTrack) {
|
||||
@ -28,7 +28,7 @@ if (carouselTrack) {
|
||||
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.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);
|
||||
@ -43,7 +43,7 @@ if (carouselTrack) {
|
||||
|
||||
function updateDots() {
|
||||
dots.forEach(function(dot, i) {
|
||||
dot.classList.toggle('gallery__dot--active', i === activePage);
|
||||
dot.classList.toggle('gallery_dot--active', i === activePage);
|
||||
dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
// Zentrale DOM-Referenzen für klare, testbare Funktionen.
|
||||
const loggedOutState = document.getElementById('logged-out-state');
|
||||
const loggedInContent = document.getElementById('logged-in-content');
|
||||
const profileHeadline = document.getElementById('profile-headline');
|
||||
const profileHeadline = document.getElementById('headline');
|
||||
const profileSubline = document.getElementById('profile-subline');
|
||||
const logoutButton = document.getElementById('logout-button');
|
||||
const profileTabButtons = Array.from(document.querySelectorAll('[data-profile-tab]'));
|
||||
const profileTabButtons = Array.from(document.querySelectorAll('[data-category-item]'));
|
||||
const profileTabPanels = Array.from(document.querySelectorAll('[data-profile-panel]'));
|
||||
|
||||
const myEventsCount = document.getElementById('my-events-count');
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
profileTabButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const tabName = button.getAttribute('data-profile-tab');
|
||||
const tabName = button.getAttribute('data-category-item');
|
||||
if (!tabName) {
|
||||
return;
|
||||
}
|
||||
@ -202,7 +202,7 @@
|
||||
// Schaltet den sichtbaren Profilbereich per Tabname um.
|
||||
function activateProfileTab(tabName) {
|
||||
profileTabButtons.forEach(button => {
|
||||
const isActive = button.getAttribute('data-profile-tab') === tabName;
|
||||
const isActive = button.getAttribute('data-category-item') === tabName;
|
||||
button.classList.toggle('is-active', isActive);
|
||||
button.setAttribute('aria-selected', isActive ? 'true' : 'false');
|
||||
});
|
||||
@ -515,13 +515,13 @@
|
||||
|
||||
const actionMarkup = mode === 'registrations'
|
||||
? `
|
||||
<div class="profile-event-actions">
|
||||
<button class="profile-unregister-btn" type="button" data-unregister-id="${event.id}">Abmelden</button>
|
||||
<div class="event-side">
|
||||
<button class="button-primary-abmelden" type="button" data-unregister-id="${event.id}">Abmelden</button>
|
||||
</div>
|
||||
`
|
||||
: `
|
||||
<div class="profile-event-actions">
|
||||
<button class="profile-cancel-btn" type="button" data-cancel-event-id="${event.id}">Event absagen</button>
|
||||
<div class="event-side">
|
||||
<button class="button-primary-eigener-event" type="button" data-cancel-event-id="${event.id}">Event absagen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -546,9 +546,9 @@
|
||||
}
|
||||
|
||||
const msUntilStart = eventDateTime.getTime() - Date.now();
|
||||
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||
const twentyfourHoursInMs = 12 * 60 * 60 * 1000;
|
||||
|
||||
return msUntilStart >= 0 && msUntilStart <= twelveHoursInMs;
|
||||
return msUntilStart >= 0 && msUntilStart <= twentyfourHoursInMs;
|
||||
}
|
||||
|
||||
// Parse für ISO- und lokalisierte Datumsformate aus den Eventdaten.
|
||||
@ -611,15 +611,44 @@
|
||||
return 'Kein Datum';
|
||||
}
|
||||
|
||||
// ISO Format: 2026-02-12
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
|
||||
const [year, month, day] = dateString.split('-');
|
||||
const monthLabel = ['Januar', 'Februar', 'Maerz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'][Number(month) - 1];
|
||||
|
||||
const monthLabel = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'][Number(month) - 1];
|
||||
|
||||
return `${Number(day)}. ${monthLabel} ${year}`;
|
||||
}
|
||||
|
||||
return dateString;
|
||||
// Format: 12. FEB. 2026
|
||||
const match = dateString.match(/^(\d{1,2})\.\s*([A-ZÄÖÜ]{3})\.\s*(\d{4})$/);
|
||||
|
||||
if (match) {
|
||||
const day = match[1];
|
||||
const month = match[2];
|
||||
|
||||
const shortMonthMap = {
|
||||
JAN: 'Januar',
|
||||
FEB: 'Februar',
|
||||
MÄR: 'März',
|
||||
MRZ: 'März',
|
||||
APR: 'April',
|
||||
MAI: 'Mai',
|
||||
JUN: 'Juni',
|
||||
JUL: 'Juli',
|
||||
AUG: 'August',
|
||||
SEP: 'September',
|
||||
OKT: 'Oktober',
|
||||
NOV: 'November',
|
||||
DEZ: 'Dezember'
|
||||
};
|
||||
|
||||
return `${day}. ${shortMonthMap[month] || month} ${match[3]}`;
|
||||
}
|
||||
|
||||
return dateString;
|
||||
}
|
||||
|
||||
// Vereinheitlicht die Zeitanzeige für die Profilseite.
|
||||
function formatEventTime(timeString) {
|
||||
if (!timeString) {
|
||||
|
||||
@ -77,13 +77,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const isEventCreate = currentPage === 'event_create.html';
|
||||
|
||||
return `
|
||||
<a
|
||||
class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
|
||||
href="event_overview.html"
|
||||
${isEventOverview ? 'aria-current="page"' : ''}
|
||||
>
|
||||
Event finden
|
||||
</a>
|
||||
<a
|
||||
class="nav-tab${isEventCreate ? ' nav-tab--active' : ''}"
|
||||
href="event_create.html"
|
||||
@ -91,6 +84,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
>
|
||||
Event erstellen
|
||||
</a>
|
||||
<a
|
||||
class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
|
||||
href="event_overview.html"
|
||||
${isEventOverview ? 'aria-current="page"' : ''}
|
||||
>
|
||||
Event finden
|
||||
</a>
|
||||
<button
|
||||
class="button-small logout-button"
|
||||
onclick="logout()"
|
||||
|
||||
20
login.html
20
login.html
@ -59,15 +59,21 @@
|
||||
</div> <!-- Schliesst main-content -->
|
||||
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
||||
<script src="js/login.js"></script>
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -32,8 +32,8 @@
|
||||
<main class="container profile-page">
|
||||
<section class="profile-hero" aria-label="Profilübersicht">
|
||||
<div>
|
||||
<p class="profile-kicker">Mein Bereich</p>
|
||||
<h1 id="profile-headline">Mein Profil</h1>
|
||||
<p class="badge">Mein Bereich</p>
|
||||
<h1 id="headline">Mein Profil</h1>
|
||||
<p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -48,23 +48,21 @@
|
||||
</section>
|
||||
|
||||
<section id="logged-in-content" class="profile-grid">
|
||||
<nav class="profile-tabs" aria-label="Profilbereiche">
|
||||
<button type="button" class="profile-tab is-active" data-profile-tab="hosting">Hosting</button>
|
||||
<button type="button" class="profile-tab" data-profile-tab="teilnehmen">Teilnehmen</button>
|
||||
<button type="button" class="profile-tab" data-profile-tab="einstellungen">Einstellungen</button>
|
||||
<nav class="category-items" aria-label="Profilbereiche">
|
||||
<button type="button" class="category-item is-active category-item-profile" data-category-item="hosting">Meine Events</button>
|
||||
<button type="button" class="category-item category-item-profile" data-category-item="teilnehmen">Meine Anmeldungen</button>
|
||||
<button type="button" class="category-item category-item-profile" data-category-item="einstellungen">Profil-Einstellungen</button>
|
||||
</nav>
|
||||
|
||||
<article class="profile-panel" data-profile-panel="hosting">
|
||||
<article data-profile-panel="hosting">
|
||||
<div class="panel-head">
|
||||
<h2 class="panel-title">Meine Events</h2>
|
||||
<span id="my-events-count" class="panel-count">0</span>
|
||||
</div>
|
||||
<div id="my-events-list" class="profile-card-list"></div>
|
||||
</article>
|
||||
|
||||
<article class="profile-panel hidden" data-profile-panel="teilnehmen">
|
||||
<article data-profile-panel="teilnehmen">
|
||||
<div class="panel-head">
|
||||
<h2 class="panel-title">Meine Anmeldungen</h2>
|
||||
<span id="my-registrations-count" class="panel-count">0</span>
|
||||
</div>
|
||||
<div id="my-registrations-list" class="profile-card-list"></div>
|
||||
@ -114,9 +112,9 @@
|
||||
<button class="close-btn" onclick="closeLogoutModal()">×</button>
|
||||
<h2>Abmelden?</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="modal-body">
|
||||
Bist du sicher, dass du dich abmelden möchtest?
|
||||
</div>
|
||||
</p>
|
||||
<div class="modal-footer">
|
||||
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
||||
<button class="button-primary" type="button" onclick="confirmLogout()">Abmelden</button>
|
||||
@ -134,26 +132,32 @@
|
||||
<button class="close-btn" onclick="closeCancelEventModal()">×</button>
|
||||
<h2>Event absagen?</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="modal-body">
|
||||
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||
</div>
|
||||
</p>
|
||||
<div class="modal-footer">
|
||||
<button class="button-primary button--outline" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||
<button class="button-primary" type="button" id="confirmCancelEventBtn" style="background-color: var(--tomato); border-color: var(--tomato);">Event absagen</button>
|
||||
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||
<button class="button-primary-abmelden" type="button" id="confirmCancelEventBtn";>Event absagen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<script src="js/my_profil.js"></script>
|
||||
</body>
|
||||
|
||||
20
signup.html
20
signup.html
@ -91,15 +91,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/signup.js"></script>
|
||||
<div class="instagram-invite">
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user