1 bis 8 Party: mobile Web-App (Regeln, Karten, Spielleiter) + Docker-Deploy

2026-10-10 15:59:26 +02:00
commit 6ac0282851
92 changed files with 17107 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { Home, ScrollText, Layers, Gamepad2, Mail } from 'lucide-react'
+
+export type TabId = 'start' | 'regeln' | 'karten' | 'spiel' | 'kontakt'
+
+const TABS: { id: TabId; label: string; icon: typeof Home }[] = [
+  { id: 'start', label: 'Start', icon: Home },
+  { id: 'regeln', label: 'Regeln', icon: ScrollText },
+  { id: 'karten', label: 'Karten', icon: Layers },
+  { id: 'spiel', label: 'Spiel', icon: Gamepad2 },
+  { id: 'kontakt', label: 'Kontakt', icon: Mail },
+]
+
+interface Props {
+  aktiv: TabId
+  onWechsel: (tab: TabId) => void
+}
+
+export default function BottomNav({ aktiv, onWechsel }: Props) {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-[#170a2e]/85 backdrop-blur-xl">
+      <div className="mx-auto flex max-w-md items-stretch justify-between px-1 pb-safe">
+        {TABS.map(({ id, label, icon: Icon }) => {
+          const istAktiv = id === aktiv
+          return (
+            <button
+              key={id}
+              onClick={() => onWechsel(id)}
+              className={`flex flex-1 flex-col items-center gap-0.5 py-2.5 transition-all duration-200 ${
+                istAktiv ? 'text-pink-400' : 'text-white/45 hover:text-white/70'
+              }`}
+              aria-current={istAktiv ? 'page' : undefined}
+            >
+              <span
+                className={`rounded-full px-4 py-0.5 transition-all duration-300 ${
+                  istAktiv ? 'bg-pink-400/15 shadow-[0_0_16px_rgba(244,114,182,0.35)]' : ''
+                }`}
+              >
+                <Icon size={21} strokeWidth={istAktiv ? 2.4 : 2} />
+              </span>
+              <span className={`text-[10px] font-bold tracking-wide ${istAktiv ? 'font-extrabold' : ''}`}>
+                {label}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}