Anpassungen Event Detail
This commit is contained in:
parent
433743069c
commit
db939c6660
@ -37,21 +37,7 @@
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0;
|
||||
color: var(--brown);
|
||||
font-family: "Bagel Fat One", cursive;
|
||||
font-size: clamp(44px, 6vw, 52px);
|
||||
line-height: 1.15;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--brown);
|
||||
font-family: "Bagel Fat One", cursive;
|
||||
font-size: clamp(32px, 4.2vw, 44px);
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
@ -120,7 +106,6 @@
|
||||
|
||||
.meta-filter {
|
||||
display: block;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.meta-filter span {
|
||||
@ -185,19 +170,20 @@
|
||||
.event-card {
|
||||
/* Core card container for every overview event entry. */
|
||||
background: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5) 40px var(--space-4);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
/*justify-content: space-between;
|
||||
align-items: flex-start;*/
|
||||
gap: var(--space-6);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transform: translateY(-3px);
|
||||
.event-card:hover {
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.event-main {
|
||||
@ -215,7 +201,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
margin-bottom: var(--space-0);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -236,19 +222,17 @@
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-tag {
|
||||
border: 1px solid var(--tomato);
|
||||
border: 1.5px solid var(--tomato);
|
||||
color: var(--tomato);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 7px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding: var(--space-1) var(--space-31);
|
||||
}
|
||||
|
||||
.event-spec-chip {
|
||||
@ -270,7 +254,9 @@
|
||||
.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;
|
||||
@ -279,33 +265,21 @@
|
||||
.event-spots {
|
||||
color: var(--olive);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-spots-full {
|
||||
.event-spots-full, .detail-spots-pill-full {
|
||||
/* Sold-out visual state, intentionally high-contrast and always filled. */
|
||||
border: 2px solid var(--tomato);
|
||||
border: 1.5px solid var(--tomato);
|
||||
padding: var(--space-01) var(--space-4);
|
||||
border-radius: var(--radius-pill);
|
||||
color: var(--butter-light);
|
||||
background: var(--tomato);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 7px 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fffde8;
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 10px 22px;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary-register {
|
||||
@ -407,7 +381,7 @@
|
||||
|
||||
.detail-hero {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.detail-top-row {
|
||||
@ -430,23 +404,20 @@
|
||||
.detail-content-grid {
|
||||
/* Two-column detail layout: content stack (left) + gallery (right). */
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "side gallery";
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-6);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.detail-side-stack {
|
||||
grid-area: side;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
gap: var(--space-3);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.host-card {
|
||||
border: 2px solid var(--butter);
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.host-header {
|
||||
display: flex;
|
||||
@ -472,22 +443,16 @@
|
||||
}
|
||||
|
||||
.host-role {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--olive-light);
|
||||
border: 1.5px solid var(--olive);
|
||||
background: var(--olive);;
|
||||
color: var(--butter-light);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(107, 107, 5, 0.08);
|
||||
color: var(--olive);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
letter-spacing: var(--ls-la);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.host-card p {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
line-height: 1.3;
|
||||
color: var(--black);
|
||||
padding: var(--space-1) var(--space-31);
|
||||
}
|
||||
|
||||
.detail-gallery {
|
||||
@ -497,9 +462,9 @@
|
||||
|
||||
.detail-gallery-large {
|
||||
/* Editorial mosaic: first image spans two rows, side images stack vertically. */
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(2, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
@ -508,9 +473,8 @@
|
||||
height: 100%;
|
||||
min-height: 220px;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--black);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 12px rgba(34, 28, 26, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
}
|
||||
|
||||
.detail-gallery-item {
|
||||
@ -527,7 +491,7 @@
|
||||
|
||||
.detail-gallery-item:hover .detail-gallery-image,
|
||||
.detail-gallery-item:focus-visible .detail-gallery-image {
|
||||
transform: scale(1.015);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.detail-gallery-large img:first-child {
|
||||
@ -551,16 +515,18 @@
|
||||
|
||||
.detail-lightbox-backdrop {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
background: var(--black);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.detail-lightbox-content {
|
||||
position: relative;
|
||||
z-index: 300;
|
||||
margin: 0;
|
||||
max-width: min(96vw, 1100px);
|
||||
max-height: 90vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.detail-lightbox-image {
|
||||
@ -568,7 +534,7 @@
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: #111;
|
||||
}
|
||||
|
||||
@ -585,9 +551,9 @@
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 14px 16px;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.detail-panel-compact {
|
||||
@ -597,8 +563,8 @@
|
||||
.detail-menu-list {
|
||||
margin: 20px;
|
||||
list-style: disc;
|
||||
font-size: 20px;
|
||||
line-height: 1.35;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detail-participants-head {
|
||||
@ -682,15 +648,15 @@
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
background: var(--white);
|
||||
backdrop-filter: blur(3px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(3px) saturate(140%);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
padding: 10px 14px;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
margin-top: var(--space-6);
|
||||
position: sticky;
|
||||
bottom: 18px;
|
||||
z-index: 1001;
|
||||
bottom: var(--space-6);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.detail-action-summary {
|
||||
@ -711,9 +677,10 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-action-location {
|
||||
.detail-action-location,
|
||||
.detail-action-meta-text {
|
||||
color: var(--olive);
|
||||
font-size: 17px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-action-location img {
|
||||
@ -721,9 +688,6 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.detail-action-meta-text {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.detail-action-summary strong {
|
||||
font-size: 40px;
|
||||
@ -739,22 +703,23 @@
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
|
||||
.detail-spots-pill {
|
||||
border: 2px solid var(--olive-light);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
padding: 7px 14px;
|
||||
border: none;
|
||||
padding: var(--space-01) var(--space-4);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: var(--olive);
|
||||
}
|
||||
|
||||
/*
|
||||
.detail-spots-pill-full {
|
||||
border-color: var(--tomato);
|
||||
color: var(--tomato);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}*/
|
||||
|
||||
.detail-action-btn-wrap {
|
||||
display: flex;
|
||||
@ -895,10 +860,6 @@
|
||||
padding: 22px 20px 20px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.event-date-time,
|
||||
.event-location,
|
||||
.event-spots {
|
||||
|
||||
@ -392,7 +392,7 @@
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
.footer-link {
|
||||
color: var(--black);
|
||||
text-decoration: underline;
|
||||
font-size: 0.8rem;
|
||||
|
||||
@ -138,26 +138,21 @@ button[type="submit"]:active {
|
||||
|
||||
/* --- Hints & errors --- */
|
||||
|
||||
.signup-hint,
|
||||
.login-hint {
|
||||
text-align: center;
|
||||
|
||||
.link-text {
|
||||
margin-top: var(--space-4);
|
||||
color: var(--black);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signup-hint a,
|
||||
.login-hint a {
|
||||
color: var(--olive);
|
||||
.link-text a{
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.signup-hint a:hover,
|
||||
.login-hint a:hover {
|
||||
.link-text a:hover {
|
||||
color: var(--blue-dark);
|
||||
text-decoration: underline;
|
||||
color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@ -286,7 +281,7 @@ button[type="submit"]:active {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
.footer_link {
|
||||
color: var(--black);
|
||||
text-decoration: underline;
|
||||
font-size: 0.8rem;
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
|
||||
/* Spacing Scale > 1rem = 16px*/
|
||||
--space-0: 0.25rem; /* 4px */
|
||||
--space-01: 0.375rem; /* 6px */
|
||||
--space-1: 0.5rem; /* 8px */
|
||||
--space-2: 0.75rem; /* 12px */
|
||||
--space-3: 1rem; /* 16px */
|
||||
@ -86,7 +87,7 @@ h1 {
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
color: var(--brown);
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -95,7 +96,7 @@ h2 {
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
color: var(--brown);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -115,13 +116,41 @@ p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.p-small {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.link-text a{
|
||||
color: var(--blue);
|
||||
margin-top: var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.link-text a:hover {
|
||||
color: var(--blue-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-text-footer{
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.link-text-footer:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.main-content {
|
||||
margin-top: var(--space-8);
|
||||
|
||||
@ -145,7 +174,7 @@ p {
|
||||
position: sticky;
|
||||
height: 58px;
|
||||
top: 1rem;
|
||||
z-index: 1000;
|
||||
z-index: 100;
|
||||
background: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@ -245,7 +274,7 @@ p {
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
padding: var(--space-01) var(--space-4);
|
||||
background-color: var(--olive);
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
@ -268,10 +297,11 @@ p {
|
||||
background: transparent;
|
||||
color: var(--olive-dark);
|
||||
opacity: 0.6;
|
||||
padding: 0.375rem 0 0.375rem 1.5rem;
|
||||
padding: var(--space-01) 0 var(--space-01) var(--space-4);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.button-primary-abmelden {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
@ -314,6 +344,7 @@ p {
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
|
||||
.button--outline {
|
||||
background-color: transparent;
|
||||
color: var(--olive);
|
||||
@ -614,19 +645,10 @@ p {
|
||||
/* Footer */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border: none;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
color: var(--black);
|
||||
text-decoration: underline;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
padding: var(--space-3) var(--space-7);
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
"location": "Luzern",
|
||||
"address": "Pilatusstrasse 18, 6003 Luzern",
|
||||
"date": "11. APR. 2026",
|
||||
"time": "3:30 UHR",
|
||||
"category": "DINNER",
|
||||
"diet": "VEGGIE",
|
||||
"time": "15:30 UHR",
|
||||
"category": "Dinner",
|
||||
"diet": "Vegetarisch",
|
||||
"spots": 6,
|
||||
"host": {
|
||||
"name": "Ferdinando",
|
||||
@ -45,9 +45,9 @@
|
||||
"title": "Noche Peruana",
|
||||
"location": "Chur",
|
||||
"address": "Obere Gasse 41, 7000 Chur",
|
||||
"date": "11. APR. 2026",
|
||||
"date": "16. Juni 2026",
|
||||
"time": "19:00 UHR",
|
||||
"category": "DINNER",
|
||||
"category": "Dinner",
|
||||
"diet": "Omnivore",
|
||||
"spots": 4,
|
||||
"host": {
|
||||
@ -89,7 +89,7 @@
|
||||
"address": "Limmatquai 92, 8001 Zürich",
|
||||
"date": "02. MAI. 2026",
|
||||
"time": "12:30 UHR",
|
||||
"category": "LUNCH",
|
||||
"category": "Lunch",
|
||||
"diet": "Pescetarisch",
|
||||
"spots": 8,
|
||||
"host": {
|
||||
|
||||
@ -93,8 +93,9 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -437,8 +437,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
<script src="js/event_create.js"></script>
|
||||
|
||||
@ -47,8 +47,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
@ -80,8 +80,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -67,8 +67,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -161,8 +161,8 @@
|
||||
|
||||
<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>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -325,7 +325,7 @@
|
||||
const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess;
|
||||
const addressPanelMarkup = shouldRevealAddress
|
||||
? `
|
||||
<article class="detail-panel detail-panel-compact">
|
||||
<article class="detail-panel">
|
||||
<h2 class="detail-section-title">Adresse</h2>
|
||||
<p>${event.address}</p>
|
||||
</article>
|
||||
@ -363,23 +363,22 @@
|
||||
|
||||
<section class="detail-content-grid">
|
||||
<div class="detail-side-stack">
|
||||
<article class="host-card detail-panel">
|
||||
<article class="detail-panel">
|
||||
<header class="host-header">
|
||||
<span class="host-avatar">${hostInitial}</span>
|
||||
<span class="host-name">${hostName}</span>
|
||||
<span class="host-role">Host</span>
|
||||
<span class="host-name">${hostName}</span>
|
||||
</header>
|
||||
${hostMessage.map(paragraph => `<p>${paragraph}</p>`).join('')}
|
||||
</article>
|
||||
|
||||
<article class="detail-panel detail-panel-compact">
|
||||
<article class="detail-panel">
|
||||
<h2 class="detail-section-title">Menu</h2>
|
||||
<ul class="detail-menu-list">
|
||||
${menuItems.map(item => `<li>${item}</li>`).join('')}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="detail-panel detail-panel-compact">
|
||||
<article class="detail-panel">
|
||||
<div class="detail-participants-head">
|
||||
<h2 class="detail-section-title">Teilnehmer</h2>
|
||||
<button type="button" class="detail-participants-link" data-show-all-participants>Alle ansehen</button>
|
||||
|
||||
@ -390,7 +390,7 @@
|
||||
</span>
|
||||
<span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span>
|
||||
</div>
|
||||
<h3 class="event-title">${event.title}</h3>
|
||||
<h2>${event.title}</h2>
|
||||
<div class="event-meta-row">
|
||||
<span class="event-tag">${event.category}</span>
|
||||
<span class="event-tag">${event.diet}</span>
|
||||
@ -398,7 +398,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
||||
<span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`}</span>
|
||||
<span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`}</span>
|
||||
${actionMarkup}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<button type="submit" class="button-primary">Login</button>
|
||||
|
||||
<div class="signup-hint">
|
||||
<div class="link-text">
|
||||
Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
|
||||
</div>
|
||||
</form>
|
||||
@ -66,8 +66,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -147,8 +147,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<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>
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
<button type="submit" class="button-primary">Konto erstellen</button>
|
||||
|
||||
|
||||
<div class="login-hint">
|
||||
<div class="link-text">
|
||||
Du hast bereits einen Account? <a href="login.html">Hier geht es zum Login.</a>
|
||||
</div>
|
||||
</form>
|
||||
@ -98,8 +98,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user