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

Anpassungen Event Detail

Browse Source
This commit is contained in:
Simona Oswald 2026-04-17 23:50:58 +02:00
parent 433743069c
commit db939c6660
16 changed files with 149 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
css/event_overview.css
View File

@ -37,21 +37,7 @@
} }
.detail-title { .detail-title {
margin: 0; margin-bottom: var(--space-4);
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;
} }
.detail-section-title { .detail-section-title {
@ -120,7 +106,6 @@
.meta-filter { .meta-filter {
display: block; display: block;
min-width: 220px;
} }
.meta-filter span { .meta-filter span {
@ -185,11 +170,12 @@
.event-card { .event-card {
/* Core card container for every overview event entry. */ /* Core card container for every overview event entry. */
background: var(--butter-light); background: var(--butter-light);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-5) 40px var(--space-4); padding: var(--space-5) var(--space-6);
display: flex; display: flex;
justify-content: space-between; /*justify-content: space-between;
align-items: flex-start; align-items: flex-start;*/
gap: var(--space-6); gap: var(--space-6);
cursor: pointer; cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease; transition: box-shadow 0.2s ease, transform 0.2s ease;
@ -215,7 +201,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--space-4);
margin-bottom: var(--space-4); margin-bottom: var(--space-0);
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -236,19 +222,17 @@
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-1);
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 12px;
} }
.event-tag { .event-tag {
border: 1px solid var(--tomato); border: 1.5px solid var(--tomato);
color: var(--tomato); color: var(--tomato);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
padding: 7px 14px; font-family: var(--font-main);
font-size: 14px; font-weight: 400;
font-weight: 500; font-size: 1rem;
letter-spacing: var(--ls-ui);
line-height: 1; line-height: 1;
text-transform: uppercase; padding: var(--space-1) var(--space-31);
} }
.event-spec-chip { .event-spec-chip {
@ -270,7 +254,9 @@
.event-side { .event-side {
/* Right-side action area: availability status and optional signup button. */ /* Right-side action area: availability status and optional signup button. */
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end;
gap: var(--space-3); gap: var(--space-3);
padding-top: 36px; padding-top: 36px;
flex-shrink: 0; flex-shrink: 0;
@ -279,33 +265,21 @@
.event-spots { .event-spots {
color: var(--olive); color: var(--olive);
font-size: 18px; font-size: 18px;
font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
.event-spots-full { .event-spots-full, .detail-spots-pill-full {
/* Sold-out visual state, intentionally high-contrast and always filled. */ /* 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); border-radius: var(--radius-pill);
color: var(--butter-light); color: var(--butter-light);
background: var(--tomato); background: var(--tomato);
opacity: 1; font-family: var(--font-main);
font-weight: 600; font-weight: 400;
font-size: 14px; font-size: 1.25rem;
padding: 7px 14px; opacity: 0.6;
line-height: 1; cursor: not-allowed;
}
.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;
} }
.btn-primary-register { .btn-primary-register {
@ -407,7 +381,7 @@
.detail-hero { .detail-hero {
display: grid; display: grid;
gap: var(--space-1); margin-bottom: var(--space-6);
} }
.detail-top-row { .detail-top-row {
@ -430,23 +404,20 @@
.detail-content-grid { .detail-content-grid {
/* Two-column detail layout: content stack (left) + gallery (right). */ /* Two-column detail layout: content stack (left) + gallery (right). */
display: grid; display: grid;
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); grid-template-columns: 1fr 1fr;
grid-template-areas: "side gallery"; grid-template-areas: "side gallery";
gap: var(--space-3); gap: var(--space-6);
align-items: stretch; align-items: stretch;
} }
.detail-side-stack { .detail-side-stack {
grid-area: side; grid-area: side;
display: grid; display: grid;
gap: var(--space-2); gap: var(--space-3);
align-content: start; align-content: start;
} }
.host-card {
border: 2px solid var(--butter);
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
}
.host-header { .host-header {
display: flex; display: flex;
@ -472,22 +443,16 @@
} }
.host-role { .host-role {
padding: 4px 10px; border: 1.5px solid var(--olive);
border: 1px solid var(--olive-light); background: var(--olive);;
color: var(--butter-light);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: rgba(107, 107, 5, 0.08); font-family: var(--font-main);
color: var(--olive); font-weight: 400;
font-size: 12px; font-size: 1rem;
font-weight: 600; line-height: 1;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-la);
text-transform: uppercase; padding: var(--space-1) var(--space-31);
}
.host-card p {
margin: 0 0 10px;
font-size: 20px;
line-height: 1.3;
color: var(--black);
} }
.detail-gallery { .detail-gallery {
@ -497,9 +462,9 @@
.detail-gallery-large { .detail-gallery-large {
/* Editorial mosaic: first image spans two rows, side images stack vertically. */ /* 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)); grid-template-rows: repeat(2, minmax(220px, 1fr));
gap: 12px; gap: var(--space-3);
min-height: 520px; min-height: 520px;
} }
@ -508,9 +473,8 @@
height: 100%; height: 100%;
min-height: 220px; min-height: 220px;
object-fit: cover; object-fit: cover;
border: 2px solid var(--black); border-radius: var(--radius-md);
border-radius: 20px; box-shadow: var(--shadow-interaction);
box-shadow: 0 4px 12px rgba(34, 28, 26, 0.14);
} }
.detail-gallery-item { .detail-gallery-item {
@ -527,7 +491,7 @@
.detail-gallery-item:hover .detail-gallery-image, .detail-gallery-item:hover .detail-gallery-image,
.detail-gallery-item:focus-visible .detail-gallery-image { .detail-gallery-item:focus-visible .detail-gallery-image {
transform: scale(1.015); transform: translateY(-3px);
} }
.detail-gallery-large img:first-child { .detail-gallery-large img:first-child {
@ -551,16 +515,18 @@
.detail-lightbox-backdrop { .detail-lightbox-backdrop {
position: absolute; position: absolute;
z-index: 200;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.75); background: var(--black);
opacity: 0.6;
} }
.detail-lightbox-content { .detail-lightbox-content {
position: relative; position: relative;
z-index: 300;
margin: 0; margin: 0;
max-width: min(96vw, 1100px); max-width: min(96vw, 1100px);
max-height: 90vh; max-height: 90vh;
z-index: 1;
} }
.detail-lightbox-image { .detail-lightbox-image {
@ -568,7 +534,7 @@
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
object-fit: contain; object-fit: contain;
border-radius: 16px; border-radius: var(--radius-md);
background: #111; background: #111;
} }
@ -585,9 +551,9 @@
} }
.detail-panel { .detail-panel {
background: rgba(255, 255, 255, 0.86); background: var(--butter-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 14px 16px; padding: var(--space-4) var(--space-5);
} }
.detail-panel-compact { .detail-panel-compact {
@ -597,8 +563,8 @@
.detail-menu-list { .detail-menu-list {
margin: 20px; margin: 20px;
list-style: disc; list-style: disc;
font-size: 20px; font-size: 1.125rem;
line-height: 1.35; line-height: 1.5;
} }
.detail-participants-head { .detail-participants-head {
@ -682,15 +648,15 @@
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
background: var(--white); background: var(--white);
backdrop-filter: blur(3px) saturate(140%); border: 1.5px solid var(--olive-light);
-webkit-backdrop-filter: blur(3px) saturate(140%);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-interaction); box-shadow: var(--shadow-interaction);
padding: 10px 14px; padding: var(--space-4) var(--space-5);
margin-top: var(--space-6);
position: sticky; position: sticky;
bottom: 18px; bottom: var(--space-6);
z-index: 1001; z-index: 100;
} }
.detail-action-summary { .detail-action-summary {
@ -711,9 +677,10 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.detail-action-location { .detail-action-location,
.detail-action-meta-text {
color: var(--olive); color: var(--olive);
font-size: 17px; font-size: 1rem;
} }
.detail-action-location img { .detail-action-location img {
@ -721,9 +688,6 @@
height: 16px; height: 16px;
} }
.detail-action-meta-text {
color: var(--brown);
}
.detail-action-summary strong { .detail-action-summary strong {
font-size: 40px; font-size: 40px;
@ -739,22 +703,23 @@
gap: var(--space-1); gap: var(--space-1);
} }
.detail-spots-pill { .detail-spots-pill {
border: 2px solid var(--olive-light); border: none;
border-radius: var(--radius-pill); padding: var(--space-01) var(--space-4);
font-size: 14px; font-family: var(--font-main);
font-weight: 500; font-weight: 400;
letter-spacing: var(--ls-ui); font-size: 1rem;
padding: 7px 14px;
color: var(--olive); color: var(--olive);
} }
/*
.detail-spots-pill-full { .detail-spots-pill-full {
border-color: var(--tomato); border-color: var(--tomato);
color: var(--tomato); color: var(--tomato);
opacity: 1; opacity: 1;
font-weight: 600; font-weight: 600;
} }*/
.detail-action-btn-wrap { .detail-action-btn-wrap {
display: flex; display: flex;
@ -895,10 +860,6 @@
padding: 22px 20px 20px; padding: 22px 20px 20px;
} }
.event-title {
font-size: 34px;
}
.event-date-time, .event-date-time,
.event-location, .event-location,
.event-spots { .event-spots {

2
css/index.css
View File

@ -392,7 +392,7 @@
margin-top: 40px; margin-top: 40px;
} }
.footer__link { .footer-link {
color: var(--black); color: var(--black);
text-decoration: underline; text-decoration: underline;
font-size: 0.8rem; font-size: 0.8rem;

21
css/login_signup.css
View File

@ -138,26 +138,21 @@ button[type="submit"]:active {
/* --- Hints & errors --- */ /* --- Hints & errors --- */
.signup-hint,
.login-hint { .link-text {
text-align: center;
margin-top: var(--space-4); margin-top: var(--space-4);
color: var(--black); text-align: center;
font-size: 0.9rem;
} }
.signup-hint a, .link-text a{
.login-hint a { color: var(--blue);
color: var(--olive);
text-decoration: none; text-decoration: none;
font-weight: 600;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.signup-hint a:hover, .link-text a:hover {
.login-hint a:hover { color: var(--blue-dark);
text-decoration: underline; text-decoration: underline;
color: var(--olive-dark);
} }
.error-message { .error-message {
@ -286,7 +281,7 @@ button[type="submit"]:active {
margin-top: 40px; margin-top: 40px;
} }
.footer__link { .footer_link {
color: var(--black); color: var(--black);
text-decoration: underline; text-decoration: underline;
font-size: 0.8rem; font-size: 0.8rem;

56
css/stylesheet_global.css
View File

@ -40,6 +40,7 @@
/* Spacing Scale > 1rem = 16px*/ /* Spacing Scale > 1rem = 16px*/
--space-0: 0.25rem; /* 4px */ --space-0: 0.25rem; /* 4px */
--space-01: 0.375rem; /* 6px */
--space-1: 0.5rem; /* 8px */ --space-1: 0.5rem; /* 8px */
--space-2: 0.75rem; /* 12px */ --space-2: 0.75rem; /* 12px */
--space-3: 1rem; /* 16px */ --space-3: 1rem; /* 16px */
@ -86,7 +87,7 @@ h1 {
line-height: 120%; line-height: 120%;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
color: var(--brown); color: var(--brown);
margin-bottom: 2rem; margin-bottom: var(--space-5);
} }
h2 { h2 {
@ -95,7 +96,7 @@ h2 {
line-height: 120%; line-height: 120%;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
color: var(--brown); color: var(--brown);
margin-bottom: 1.5rem; margin-bottom: var(--space-4);
} }
h3 { h3 {
@ -115,13 +116,41 @@ p {
margin-bottom: 1rem; 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 { .error-message {
color: var(--error); color: var(--error);
font-size: 1rem; font-size: 1rem;
} }
/* Layout */ /* Layout */
.main-content { .main-content {
margin-top: var(--space-8); margin-top: var(--space-8);
@ -145,7 +174,7 @@ p {
position: sticky; position: sticky;
height: 58px; height: 58px;
top: 1rem; top: 1rem;
z-index: 1000; z-index: 100;
background: none; background: none;
padding: 0 1rem; padding: 0 1rem;
} }
@ -245,7 +274,7 @@ p {
/* Buttons */ /* Buttons */
.button-primary { .button-primary {
display: inline-block; display: inline-block;
padding: 0.375rem 1.5rem; padding: var(--space-01) var(--space-4);
background-color: var(--olive); background-color: var(--olive);
border: 1.5px solid var(--olive); border: 1.5px solid var(--olive);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@ -268,10 +297,11 @@ p {
background: transparent; background: transparent;
color: var(--olive-dark); color: var(--olive-dark);
opacity: 0.6; 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; cursor: not-allowed;
} }
.button-primary-abmelden { .button-primary-abmelden {
display: inline-block; display: inline-block;
padding: 0.375rem 1.5rem; padding: 0.375rem 1.5rem;
@ -314,6 +344,7 @@ p {
border-color: var(--olive-dark); border-color: var(--olive-dark);
} }
.button--outline { .button--outline {
background-color: transparent; background-color: transparent;
color: var(--olive); color: var(--olive);
@ -614,19 +645,10 @@ p {
/* Footer */ /* Footer */
.footer { .footer {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.5rem;
padding: var(--space-3) var(--space-5); padding: var(--space-3) var(--space-7);
border: none;
margin-top: 2.5rem;
}
.footer__link {
color: var(--black);
text-decoration: underline;
font-size: 0.8rem;
font-weight: 400;
} }
/* Media Queries (Responsive) */ /* Media Queries (Responsive) */

12
data/events.json
View File

@ -5,9 +5,9 @@
"location": "Luzern", "location": "Luzern",
"address": "Pilatusstrasse 18, 6003 Luzern", "address": "Pilatusstrasse 18, 6003 Luzern",
"date": "11. APR. 2026", "date": "11. APR. 2026",
"time": "3:30 UHR", "time": "15:30 UHR",
"category": "DINNER", "category": "Dinner",
"diet": "VEGGIE", "diet": "Vegetarisch",
"spots": 6, "spots": 6,
"host": { "host": {
"name": "Ferdinando", "name": "Ferdinando",
@ -45,9 +45,9 @@
"title": "Noche Peruana", "title": "Noche Peruana",
"location": "Chur", "location": "Chur",
"address": "Obere Gasse 41, 7000 Chur", "address": "Obere Gasse 41, 7000 Chur",
"date": "11. APR. 2026", "date": "16. Juni 2026",
"time": "19:00 UHR", "time": "19:00 UHR",
"category": "DINNER", "category": "Dinner",
"diet": "Omnivore", "diet": "Omnivore",
"spots": 4, "spots": 4,
"host": { "host": {
@ -89,7 +89,7 @@
"address": "Limmatquai 92, 8001 Zürich", "address": "Limmatquai 92, 8001 Zürich",
"date": "02. MAI. 2026", "date": "02. MAI. 2026",
"time": "12:30 UHR", "time": "12:30 UHR",
"category": "LUNCH", "category": "Lunch",
"diet": "Pescetarisch", "diet": "Pescetarisch",
"spots": 8, "spots": 8,
"host": { "host": {

5
datenschutz.html
View File

@ -93,8 +93,9 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <p class="p-small">© Invité</p>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="impressum.html" class="link-text-footer" >Impressum</a>
<a href="datenschutz.html" class="link-text-footer" >Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>

4
event_create.html
View File

@ -437,8 +437,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
<script src="js/event_create.js"></script> <script src="js/event_create.js"></script>

4
event_detail.html
View File

@ -47,8 +47,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>

4
event_overview.html
View File

@ -80,8 +80,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>

4
impressum.html
View File

@ -67,8 +67,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>

4
index.html
View File

@ -161,8 +161,8 @@
<script src="js/index-carousel.js"></script> <script src="js/index-carousel.js"></script>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>

11
js/event_detail.js
View File

@ -325,7 +325,7 @@
const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess; const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess;
const addressPanelMarkup = shouldRevealAddress const addressPanelMarkup = shouldRevealAddress
? ` ? `
<article class="detail-panel detail-panel-compact"> <article class="detail-panel">
<h2 class="detail-section-title">Adresse</h2> <h2 class="detail-section-title">Adresse</h2>
<p>${event.address}</p> <p>${event.address}</p>
</article> </article>
@ -363,23 +363,22 @@
<section class="detail-content-grid"> <section class="detail-content-grid">
<div class="detail-side-stack"> <div class="detail-side-stack">
<article class="host-card detail-panel"> <article class="detail-panel">
<header class="host-header"> <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-role">Host</span>
<span class="host-name">${hostName}</span>
</header> </header>
${hostMessage.map(paragraph => `<p>${paragraph}</p>`).join('')} ${hostMessage.map(paragraph => `<p>${paragraph}</p>`).join('')}
</article> </article>
<article class="detail-panel detail-panel-compact"> <article class="detail-panel">
<h2 class="detail-section-title">Menu</h2> <h2 class="detail-section-title">Menu</h2>
<ul class="detail-menu-list"> <ul class="detail-menu-list">
${menuItems.map(item => `<li>${item}</li>`).join('')} ${menuItems.map(item => `<li>${item}</li>`).join('')}
</ul> </ul>
</article> </article>
<article class="detail-panel detail-panel-compact"> <article class="detail-panel">
<div class="detail-participants-head"> <div class="detail-participants-head">
<h2 class="detail-section-title">Teilnehmer</h2> <h2 class="detail-section-title">Teilnehmer</h2>
<button type="button" class="detail-participants-link" data-show-all-participants>Alle ansehen</button> <button type="button" class="detail-participants-link" data-show-all-participants>Alle ansehen</button>

4
js/event_overview.js
View File

@ -390,7 +390,7 @@
</span> </span>
<span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span> <span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span>
</div> </div>
<h3 class="event-title">${event.title}</h3> <h2>${event.title}</h2>
<div class="event-meta-row"> <div class="event-meta-row">
<span class="event-tag">${event.category}</span> <span class="event-tag">${event.category}</span>
<span class="event-tag">${event.diet}</span> <span class="event-tag">${event.diet}</span>
@ -398,7 +398,7 @@
</div> </div>
</div> </div>
<div class="event-side${isFull ? ' event-side-full' : ''}"> <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} ${actionMarkup}
</div> </div>
`; `;

6
login.html
View File

@ -50,7 +50,7 @@
<button type="submit" class="button-primary">Login</button> <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> Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
</div> </div>
</form> </form>
@ -66,8 +66,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>

4
my_profil.html
View File

@ -147,8 +147,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
<script src="js/my_profil.js"></script> <script src="js/my_profil.js"></script>

6
signup.html
View File

@ -67,7 +67,7 @@
<button type="submit" class="button-primary">Konto erstellen</button> <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> Du hast bereits einen Account? <a href="login.html">Hier geht es zum Login.</a>
</div> </div>
</form> </form>
@ -98,8 +98,8 @@
</a> </a>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="impressum.html" class="footer__link">Impressum</a> <a href="impressum.html" class="footer-link">Impressum</a>
<a href="datenschutz.html" class="footer__link">Datenschutz</a> <a href="datenschutz.html" class="footer-link">Datenschutz</a>
</footer> </footer>
</body> </body>
</html> </html>