Verbessere Eventdarstellung auf mobilen Geräten
This commit is contained in:
+272
-51
@@ -836,6 +836,12 @@ section {
|
|||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .event-details h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.event-details {
|
.event-details {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -947,77 +953,184 @@ section {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Events Carousel Styling */
|
.events-overview {
|
||||||
.events-carousel {
|
width: 100%;
|
||||||
margin-top: 40px;
|
max-width: 1100px;
|
||||||
|
margin: 40px auto 0;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-inner {
|
.events-overview-content {
|
||||||
padding: 40px 20px;
|
position: relative;
|
||||||
min-height: 500px;
|
}
|
||||||
background: var(--white);
|
|
||||||
|
.events-overview h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview p {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: var(--text-light);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview-media {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
display: block;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-item {
|
.events-overview-text {
|
||||||
transition: transform 0.6s ease-in-out;
|
position: absolute;
|
||||||
}
|
|
||||||
|
|
||||||
.events-carousel .carousel-indicators {
|
|
||||||
margin-bottom: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-carousel .carousel-indicators button {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--secondary-color);
|
|
||||||
opacity: 0.5;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-carousel .carousel-indicators button.active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-carousel .carousel-control-prev,
|
|
||||||
.events-carousel .carousel-control-next {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: var(--secondary-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
left: 32px;
|
||||||
|
width: min(48%, 520px);
|
||||||
|
padding: 28px;
|
||||||
|
background: rgba(255, 255, 255, 0.92);
|
||||||
|
border-left: 4px solid var(--secondary-color);
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-control-prev {
|
.events-tabs {
|
||||||
left: -25px;
|
max-width: 1100px;
|
||||||
|
margin: 32px auto 0;
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-control-next {
|
.events-tablist {
|
||||||
right: -25px;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
border-bottom: 1px solid #e8e6e1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-control-prev:hover,
|
.events-tab {
|
||||||
.events-carousel .carousel-control-next:hover {
|
display: flex;
|
||||||
opacity: 1;
|
align-items: center;
|
||||||
background-color: var(--primary-color);
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--text-light);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .carousel-control-prev-icon,
|
.events-tab:hover,
|
||||||
.events-carousel .carousel-control-next-icon {
|
.events-tab:focus-visible {
|
||||||
width: 20px;
|
background: var(--light-bg);
|
||||||
height: 20px;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-carousel .events-info,
|
.events-tab:focus-visible {
|
||||||
.events-carousel .event-details,
|
outline: 2px solid var(--secondary-color);
|
||||||
.events-carousel .events-dates {
|
outline-offset: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tab.is-active {
|
||||||
|
color: var(--primary-color);
|
||||||
|
border-bottom-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tab i {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel {
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .event-details,
|
||||||
|
.events-tabpanel .events-dates {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .event-details {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .event-details h3,
|
||||||
|
.events-tabpanel .events-dates h3 {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .events-dates {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .events-dates h3 + .dates-grid {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion {
|
||||||
|
border-bottom: 1px solid #e8e6e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion:first-of-type {
|
||||||
|
border-top: 1px solid #e8e6e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion summary {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 4px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion summary::after {
|
||||||
|
content: '\f078';
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-family: 'Font Awesome 5 Free';
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 900;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion[open] summary::after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion summary:focus-visible {
|
||||||
|
outline: 2px solid var(--secondary-color);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-year-accordion .dates-grid {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Suppliers Section */
|
/* Suppliers Section */
|
||||||
.section-suppliers {
|
.section-suppliers {
|
||||||
background: var(--light-bg);
|
background: var(--light-bg);
|
||||||
@@ -1410,7 +1523,89 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dates-grid {
|
.dates-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-card {
|
||||||
|
padding: 12px 14px;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-icon {
|
||||||
|
width: 26px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-info {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
align-items: baseline;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-number {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-time {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
margin-top: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview {
|
||||||
|
margin-top: 25px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview-text {
|
||||||
|
position: static;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--white);
|
||||||
|
border-left: 0;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-overview p {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabs {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tab {
|
||||||
|
min-height: 58px;
|
||||||
|
padding: 12px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel {
|
||||||
|
padding: 28px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-tabpanel .events-dates {
|
||||||
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
@@ -1454,6 +1649,32 @@ section {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.date-card {
|
||||||
|
padding: 10px 12px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-icon {
|
||||||
|
width: 22px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-info {
|
||||||
|
column-gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-number {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-time {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
.event-details {
|
.event-details {
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
+203
-341
@@ -51,8 +51,15 @@
|
|||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "https://schema.org",
|
"@context": "https://schema.org",
|
||||||
"@type": "GourmetStore",
|
<div class="events-overview-content">
|
||||||
"name": "Frida & Fred – Allgäuer Schmankerl",
|
<div class="events-overview-text">
|
||||||
|
<h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
|
||||||
|
<p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
|
||||||
|
</div>
|
||||||
|
<div class="events-overview-media">
|
||||||
|
<img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
"alternateName": "Frida Allgäuer Schmankerl",
|
"alternateName": "Frida Allgäuer Schmankerl",
|
||||||
"url": "https://frida-fred.com",
|
"url": "https://frida-fred.com",
|
||||||
"logo": "https://frida-fred.com/img/logo.png",
|
"logo": "https://frida-fred.com/img/logo.png",
|
||||||
@@ -340,351 +347,143 @@
|
|||||||
<h2 class="section-heading text-center mb-3">Weinreisen & Käsetastings</h2>
|
<h2 class="section-heading text-center mb-3">Weinreisen & Käsetastings</h2>
|
||||||
<p class="section-subtitle text-center mb-5">Entdecken Sie unsere kulinarischen Erlebnisse – eine Weinreise von Lindau über Hagnau bis nach Überlingen mit exquisiten Weinen und unserem leckeren Bio-Heumilchkäse. Jedes Tasting ist auch eine Käseverkostung mit verschiedenen Allgäuer Käsespezialitäten.</p>
|
<p class="section-subtitle text-center mb-5">Entdecken Sie unsere kulinarischen Erlebnisse – eine Weinreise von Lindau über Hagnau bis nach Überlingen mit exquisiten Weinen und unserem leckeren Bio-Heumilchkäse. Jedes Tasting ist auch eine Käseverkostung mit verschiedenen Allgäuer Käsespezialitäten.</p>
|
||||||
|
|
||||||
<!-- Events Carousel -->
|
<div class="events-overview">
|
||||||
<div id="eventsCarousel" class="carousel slide events-carousel" data-bs-ride="carousel" data-bs-interval="6000">
|
<div class="events-overview-content">
|
||||||
<div class="carousel-indicators">
|
<div class="events-overview-media">
|
||||||
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
<img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg">
|
||||||
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
<div class="events-overview-text">
|
||||||
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
||||||
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
|
|
||||||
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<!-- Slide 1: Events Info -->
|
|
||||||
<div class="carousel-item active">
|
|
||||||
<div class="events-info">
|
|
||||||
<h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
|
<h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
|
||||||
<p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
|
<p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
|
||||||
<hr style="border: none; border-top: 1px solid var(--secondary-color); margin: 30px 0;">
|
|
||||||
<img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg" style="width: 100%; max-width: 600px; margin: 20px auto 0; display: block; border-radius: 8px;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Slide 2: Event Details -->
|
|
||||||
<div class="carousel-item">
|
|
||||||
<div class="event-details">
|
|
||||||
<h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Weinreisen 2026/27</h3>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Weintasting</strong>
|
|
||||||
<p>5-7 exquisite Weine vom Bodensee – von Lindau über Hagnau bis Überlingen</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-euro-sign"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Preis pro Person</strong>
|
|
||||||
<p>70€</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Hinweis</strong>
|
|
||||||
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-envelope"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Anmeldung</strong>
|
|
||||||
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Slide 3: Weinreisen Termine -->
|
|
||||||
<div class="carousel-item">
|
|
||||||
<div class="events-dates">
|
|
||||||
<h3>Weinreisen Termine 2026</h3>
|
|
||||||
<div class="dates-grid">
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Samstag</span>
|
|
||||||
<span class="date-number">19. September</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Donnerstag</span>
|
|
||||||
<span class="date-number">30. Oktober</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Samstag</span>
|
|
||||||
<span class="date-number">17. Oktober</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Dienstag</span>
|
|
||||||
<span class="date-number">29. Dezember</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3>Weinreisen Termine 2027</h3>
|
|
||||||
<div class="dates-grid">
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">22. Januar</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">19. Februar</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Donnerstag</span>
|
|
||||||
<span class="date-number">25. März</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">16. April</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">11. Juni</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">17. September</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">15. Oktober</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card wine-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-wine-glass-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">19. November</span>
|
|
||||||
<span class="date-time">19:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="events-cta">
|
|
||||||
<a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Slide 4: Event Details (Käse) -->
|
|
||||||
<div class="carousel-item">
|
|
||||||
<div class="event-details">
|
|
||||||
<h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Käsetastings 2026/27</h3>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Käsetasting</strong>
|
|
||||||
<p>Verschiedene Heumilchkäse-Spezialitäten, perfekt auf die Weine abgestimmt</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-euro-sign"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Preis pro Person</strong>
|
|
||||||
<p>55€</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Hinweis</strong>
|
|
||||||
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="event-detail-item">
|
|
||||||
<i class="fas fa-envelope"></i>
|
|
||||||
<div>
|
|
||||||
<strong>Anmeldung</strong>
|
|
||||||
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Slide 5: Käsetastings Termine -->
|
|
||||||
<div class="carousel-item">
|
|
||||||
<div class="events-dates">
|
|
||||||
<h3>Käsetastings Termine 2026</h3>
|
|
||||||
<div class="dates-grid">
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">09. Oktober</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Freitag</span>
|
|
||||||
<span class="date-number">06. November</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3>Käsetastings Termine 2027</h3>
|
|
||||||
<div class="dates-grid">
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">17. Januar</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">14. Februar</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">14. März</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">11. April</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">09. Mai</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">11. Juli</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">10. Oktober</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="date-card cheese-event">
|
|
||||||
<div class="date-icon">
|
|
||||||
<i class="fas fa-cheese"></i>
|
|
||||||
</div>
|
|
||||||
<div class="date-info">
|
|
||||||
<span class="date-day">Sonntag</span>
|
|
||||||
<span class="date-number">14. November</span>
|
|
||||||
<span class="date-time">18:30 Uhr</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="events-cta">
|
|
||||||
<a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Carousel Controls -->
|
<div class="events-tabs" data-events-tabs>
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#eventsCarousel" data-bs-slide="prev">
|
<div class="events-tablist" role="tablist" aria-label="Veranstaltungsarten">
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
<button type="button" class="events-tab is-active" id="wine-tab" role="tab" aria-selected="true" aria-controls="wine-panel" tabindex="0">
|
||||||
<span class="visually-hidden">Previous</span>
|
<i class="fas fa-wine-glass-alt" aria-hidden="true"></i>
|
||||||
</button>
|
<span>Weinreisen</span>
|
||||||
<button class="carousel-control-next" type="button" data-bs-target="#eventsCarousel" data-bs-slide="next">
|
</button>
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
<button type="button" class="events-tab" id="cheese-tab" role="tab" aria-selected="false" aria-controls="cheese-panel" tabindex="-1">
|
||||||
<span class="visually-hidden">Next</span>
|
<i class="fas fa-cheese" aria-hidden="true"></i>
|
||||||
</button>
|
<span>Käsetastings</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="events-tabpanel is-active" id="wine-panel" role="tabpanel" aria-labelledby="wine-tab" tabindex="0">
|
||||||
|
<div class="event-details">
|
||||||
|
<h3>Weinreisen 2026/27</h3>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-wine-glass-alt" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Weintasting</strong>
|
||||||
|
<p>5-7 exquisite Weine vom Bodensee – von Lindau über Hagnau bis Überlingen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-euro-sign" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Preis pro Person</strong>
|
||||||
|
<p>70€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-users" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Hinweis</strong>
|
||||||
|
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Anmeldung</strong>
|
||||||
|
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="events-dates">
|
||||||
|
<details class="events-year-accordion" data-year-accordion open>
|
||||||
|
<summary>Termine 2026</summary>
|
||||||
|
<div class="dates-grid">
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Samstag</span><span class="date-number">19. September</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Samstag</span><span class="date-number">17. Oktober</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Donnerstag</span><span class="date-number">30. Oktober</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Dienstag</span><span class="date-number">29. Dezember</span></div></div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details class="events-year-accordion" data-year-accordion>
|
||||||
|
<summary>Termine 2027</summary>
|
||||||
|
<div class="dates-grid">
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">22. Januar</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">19. Februar</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Donnerstag</span><span class="date-number">25. März</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">16. April</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">11. Juni</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">17. September</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">15. Oktober</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">19. November</span><span class="date-time">19:30 Uhr</span></div></div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="events-tabpanel" id="cheese-panel" role="tabpanel" aria-labelledby="cheese-tab" tabindex="0" hidden>
|
||||||
|
<div class="event-details">
|
||||||
|
<h3>Käsetastings 2026/27</h3>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-cheese" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Käsetasting</strong>
|
||||||
|
<p>Verschiedene Heumilchkäse-Spezialitäten, perfekt auf die Weine abgestimmt</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-euro-sign" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Preis pro Person</strong>
|
||||||
|
<p>55€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-users" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Hinweis</strong>
|
||||||
|
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-detail-item">
|
||||||
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Anmeldung</strong>
|
||||||
|
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="events-dates">
|
||||||
|
<details class="events-year-accordion" data-year-accordion open>
|
||||||
|
<summary>Termine 2026</summary>
|
||||||
|
<div class="dates-grid">
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">09. Oktober</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">06. November</span></div></div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details class="events-year-accordion" data-year-accordion>
|
||||||
|
<summary>Termine 2027</summary>
|
||||||
|
<div class="dates-grid">
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">17. Januar</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. Februar</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. März</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">11. April</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">09. Mai</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">11. Juli</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">10. Oktober</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
<div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. November</span><span class="date-time">18:30 Uhr</span></div></div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -813,6 +612,69 @@
|
|||||||
|
|
||||||
<script src="lib/bootstrap.bundle.min.js"></script>
|
<script src="lib/bootstrap.bundle.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
// Event tabs
|
||||||
|
const eventsTabs = document.querySelector('[data-events-tabs]');
|
||||||
|
|
||||||
|
if (eventsTabs) {
|
||||||
|
const tabButtons = Array.from(eventsTabs.querySelectorAll('[role="tab"]'));
|
||||||
|
const tabPanels = Array.from(eventsTabs.querySelectorAll('[role="tabpanel"]'));
|
||||||
|
|
||||||
|
const activateEventTab = (tabButton, moveFocus = false) => {
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
const isActive = button === tabButton;
|
||||||
|
button.classList.toggle('is-active', isActive);
|
||||||
|
button.setAttribute('aria-selected', String(isActive));
|
||||||
|
button.tabIndex = isActive ? 0 : -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
tabPanels.forEach(panel => {
|
||||||
|
const isActive = panel.id === tabButton.getAttribute('aria-controls');
|
||||||
|
panel.hidden = !isActive;
|
||||||
|
panel.classList.toggle('is-active', isActive);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (moveFocus) {
|
||||||
|
tabButton.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
tabButtons.forEach((tabButton, tabIndex) => {
|
||||||
|
tabButton.addEventListener('click', () => activateEventTab(tabButton));
|
||||||
|
tabButton.addEventListener('keydown', event => {
|
||||||
|
let nextIndex;
|
||||||
|
|
||||||
|
if (event.key === 'ArrowRight') {
|
||||||
|
nextIndex = (tabIndex + 1) % tabButtons.length;
|
||||||
|
} else if (event.key === 'ArrowLeft') {
|
||||||
|
nextIndex = (tabIndex - 1 + tabButtons.length) % tabButtons.length;
|
||||||
|
} else if (event.key === 'Home') {
|
||||||
|
nextIndex = 0;
|
||||||
|
} else if (event.key === 'End') {
|
||||||
|
nextIndex = tabButtons.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (nextIndex !== undefined) {
|
||||||
|
event.preventDefault();
|
||||||
|
activateEventTab(tabButtons[nextIndex], true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
eventsTabs.querySelectorAll('[data-year-accordion]').forEach(accordion => {
|
||||||
|
accordion.addEventListener('toggle', () => {
|
||||||
|
if (!accordion.open) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
accordion.closest('.events-dates').querySelectorAll('[data-year-accordion]').forEach(otherAccordion => {
|
||||||
|
if (otherAccordion !== accordion) {
|
||||||
|
otherAccordion.open = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Smooth scrolling for internal links
|
// Smooth scrolling for internal links
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
anchor.addEventListener('click', function (e) {
|
anchor.addEventListener('click', function (e) {
|
||||||
|
|||||||
Reference in New Issue
Block a user