initial commit

2026-05-03 10:00:01 +02:00
parent ac2d1f25e5
commit 41d017b70f
20 changed files with 4019 additions and 276 deletions
@@ -0,0 +1,179 @@
+---
+// Navigation items for the theater homepage sections
+const navItems = [
+  { id: 'projekt', label_de: 'Das Projekt', label_en: 'The Project' },
+  { id: 'team', label_de: 'Wer steckt dahinter', label_en: 'Who\'s Behind It' },
+  { id: 'stueck', label_de: 'Das Stück', label_en: 'The Play' },
+  { id: 'mitwirkung', label_de: 'Mitwirkung', label_en: 'Participation' },
+  { id: 'termine', label_de: 'Termine', label_en: 'Schedule' },
+  { id: 'presse', label_de: 'Presse', label_en: 'Press' },
+  { id: 'gallery', label_de: 'Galerie', label_en: 'Gallery' },
+  { id: 'tickets', label_de: 'Tickets', label_en: 'Tickets' },
+];
+---
+
+<nav class="anchor-nav" id="anchor-nav">
+  <div class="nav-container">
+    <ul class="nav-list">
+      {navItems.map((item) => (
+        <li class="nav-item">
+          <a
+            href={`#${item.id}`}
+            class="nav-link"
+            data-section={item.id}
+          >
+            <span class="nav-label-de" data-lang="de">{item.label_de}</span>
+            <span class="nav-label-en" data-lang="en">{item.label_en}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</nav>
+
+<script>
+  // Smooth scroll to sections
+  document.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetId = link.getAttribute('href');
+      if (targetId) {
+        const targetSection = document.querySelector(targetId);
+        if (targetSection) {
+          const navHeight = document.querySelector('.anchor-nav')?.clientHeight || 0;
+          const targetPosition = targetSection.getBoundingClientRect().top + window.scrollY - navHeight - 20;
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+        }
+      }
+    });
+  });
+
+  // Highlight active section on scroll
+  const observerOptions = {
+    root: null,
+    rootMargin: '-20% 0px -70% 0px',
+    threshold: 0
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const sectionId = entry.target.getAttribute('id');
+        document.querySelectorAll('.nav-link').forEach(link => {
+          link.classList.remove('active');
+          if (link.getAttribute('data-section') === sectionId) {
+            link.classList.add('active');
+          }
+        });
+      }
+    });
+  }, observerOptions);
+
+  // Observe all sections
+  document.querySelectorAll('.theater-section').forEach(section => {
+    observer.observe(section);
+  });
+
+  // Make nav sticky on scroll
+  let lastScroll = 0;
+  const nav = document.querySelector('.anchor-nav');
+
+  window.addEventListener('scroll', () => {
+    const currentScroll = window.scrollY;
+
+    if (currentScroll > 400) {
+      nav?.classList.add('sticky');
+    } else {
+      nav?.classList.remove('sticky');
+    }
+
+    lastScroll = currentScroll;
+  });
+</script>
+
+<style>
+  .anchor-nav {
+    background: #2b2b56;
+    padding: 1rem 0;
+    transition: all 0.3s ease;
+    z-index: 100;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .anchor-nav.sticky {
+    position: sticky;
+    top: 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  }
+
+  .nav-container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+  }
+
+  .nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  .nav-item {
+    margin: 0;
+  }
+
+  .nav-link {
+    display: block;
+    color: white;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    font-size: 0.95rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .nav-link:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .nav-link.active {
+    background: rgba(255, 255, 255, 0.3);
+    font-weight: 700;
+  }
+
+  /* Language-specific labels */
+  :global([data-language="de"]) .nav-label-en,
+  :global([data-language="en"]) .nav-label-de {
+    display: none;
+  }
+
+  :global([data-language="de"]) .nav-label-de,
+  :global([data-language="en"]) .nav-label-en {
+    display: inline;
+  }
+
+  @media (max-width: 768px) {
+    .nav-list {
+      gap: 0.25rem;
+    }
+
+    .nav-link {
+      padding: 0.4rem 0.75rem;
+      font-size: 0.85rem;
+    }
+
+    .anchor-nav {
+      padding: 0.75rem 0;
+    }
+  }
+</style>