embed pretalx widget

src/components/Footer.astro

@@ -1,9 +1,13 @@
 ---
 import path from "../utils/path.ts"
+
+const {white = false} = Astro.props
 ---
 
 <footer class="bg-base-200 pb-20">
-  <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
+    {white ?
+        <div class="mask-[url(/transitions/small.svg)] bg-[#fafafa] h-10 mask-repeat-x mask-[auto_100%]"/> :
+        <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>}
   <div class="container pt-8 px-8 max-w-3xl mx-auto">
     <h3 class="text-2xl font-semibold mb-4">
       Kontakt und Infos

src/components/Navbar.astro

@@ -3,7 +3,7 @@ import path from "../utils/path.ts"
 import {Users, List, Info} from "@lucide/astro"
 ---
 
-<div class="navbar bg-base-100 shadow-sm z-20 sticky top-0">
+<div class="navbar bg-base-100 shadow-sm z-30 sticky top-0">
   <div class="navbar-start w-fit max-h-14">
     <div class="dropdown">
       <div tabindex="0" role="button" class="btn btn-ghost sm:hidden">

src/pages/hamburg/2026/programm.astro

@@ -1,60 +1,21 @@
 ---
 import Footer from "../../../components/Footer.astro"
 import Layout from "../../../layouts/Layout.astro"
-import {Calendar, ChevronDown} from "@lucide/astro"
-import path from "../../../utils/path.ts"
-
-const program = [
-    {
-        title: "Warum ist Big Tech gefährlich?",
-        description: "Einfach, sicher und verantwortungsvoll digital unterwegs - eine Herausforderung!"
-    },
-    {
-        title: "Passwort-Manager",
-        description: "Passwörter im Alltag sicher merken"
-    },
-    {
-        title: "Messenger",
-        description: "Alternativen zu SMS, WhatsApp, oder andere Messenger von Großkonzernen"
-    },
-    {
-        title: "Datenschutzrechte für Betroffene",
-        description: "Nutze dein Recht auf Auskunft, Löschen, Korrektur und mehr"
-    },
-    {
-        title: "Die eigene Cloud",
-        description: "Nextcloud Funktionen und interessante Features"
-    },
-    {
-        title: "Office-Anwedungen",
-        description: "Alternativen zu Microsoft Word, PowerPoint und Excel im Vergleich"
-    },
-    {
-        title: "Digitale Unabhängigkeit - wie sieht es bei Euch aus?",
-        description: "Austausch mit Gruppen und Initiativen über Maßnahmen zur digitalen Unabhängigkeit"
-    },
-    {
-        title: "Alles digital?!",
-        description: "Digitale Zwänge und Alternativen"
-    },
-    {
-        title: "Digitale Mythen",
-        description: "Cookie-Banner, Datenschutz und was Hacking wirklich ist"
-    },
-    {
-        title: "OpenStreetMap",
-        description: "Mehr Souveränität bei Karten und Geodaten"
-    },
-]
 ---
 
 <Layout>
-  <div class="bg-base-100">
-    <div class="container p-8 max-w-2xl mx-auto">
-      <h2 class="text-4xl text-center font-semibold">
-        Den Programmplan findet ihr hier: <a class="link" href="https://pretalx.hamburg.ccc.de/didays-hamburg-2026/schedule/">Programm</a>
-      </h2>
+  <div class="bg-base-200 relative">
+    <pretalx-schedule event-url="https://pretalx.hamburg.ccc.de/didays-hamburg-2026/" locale="de" format="grid"
+                      style="--pretalx-clr-primary: #ffad12; --pretalx-sticky-top-offset: 68px;">
+    </pretalx-schedule>
+    <noscript>
+      <div class="pretalx-widget">
+        <div class="pretalx-widget-info-message">
+          JavaScript ist in deinem Browser deaktiviert. Das Programm findest du hier: <a target="_blank" href="https://pretalx.hamburg.ccc.de/didays-hamburg-2026/schedule/">Zum Programm</a>.
         </div>
       </div>
-<Footer/>
+    </noscript>
+  </div>
+  <script type="text/javascript" src="https://pretalx.hamburg.ccc.de/didays-hamburg-2026/widgets/schedule.js"></script>
+  <Footer white={true}/>
 </Layout>