+
+ );
+};
diff --git a/frontend/src/components/Footer.css b/frontend/src/components/Footer.css
new file mode 100644
index 0000000..f028817
--- /dev/null
+++ b/frontend/src/components/Footer.css
@@ -0,0 +1,53 @@
+.footer {
+ margin-top: auto;
+ padding: 1.5rem 0 0.5rem 0;
+ text-align: center;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+}
+
+.footer-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ font-size: 0.75rem;
+ color: var(--text-muted);
+ opacity: 0.6;
+ transition: opacity 0.2s ease;
+}
+
+.footer-content:hover {
+ opacity: 1;
+}
+
+.footer-link {
+ color: inherit;
+ text-decoration: underline;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.footer-link:hover {
+ color: var(--teal);
+}
+
+.footer-credits {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+}
+
+.footer-credits p {
+ margin: 0;
+}
+
+.footer-credits strong {
+ font-weight: 500;
+ color: var(--text);
+ margin-left: 0.2rem;
+}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
new file mode 100644
index 0000000..fcf1b27
--- /dev/null
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Footer.css';
+
+export const Footer: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css
new file mode 100644
index 0000000..4abc5a1
--- /dev/null
+++ b/frontend/src/components/Header.css
@@ -0,0 +1,64 @@
+.app-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ border-bottom: 1px solid var(--panel-border);
+ background: rgba(8, 14, 20, 0.6);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ z-index: 100;
+}
+
+.header-brand {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ text-decoration: none;
+ color: var(--text);
+}
+
+.header-brand:hover {
+ opacity: 0.9;
+}
+
+.header-logo {
+ height: 40px;
+ width: auto;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
+}
+
+.header-title {
+ font-family: 'Sora', sans-serif;
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--text);
+ letter-spacing: 0.5px;
+}
+
+.header-admin {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+}
+
+.header-username {
+ font-size: 1rem;
+ font-weight: 500;
+ color: var(--teal);
+ background: var(--teal-soft);
+ padding: 0.4rem 0.8rem;
+ border-radius: var(--radius-m);
+}
+
+@media (max-width: 600px) {
+ .app-header {
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ }
+}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..994e781
--- /dev/null
+++ b/frontend/src/components/Header.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { LogOut } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import './Header.css';
+
+interface HeaderProps {
+ showAdminControls?: boolean;
+ username?: string | null;
+ onLogout?: () => void;
+ showResultsLink?: boolean;
+}
+
+export const Header: React.FC
+
+ {title}
+{message}
+
+
+
+
+ 
+ Outfit-Voting Abi26
+
+
+
+ {showResultsLink && (
+
+ Ergebnisse
+
+ )}
+ {showAdminControls && (
+ <>
+ {username && (
+
+ {username}
+
+ )}
+ {onLogout && (
+
+ )}
+
+ )}
+
+
+
+ );
+};
diff --git a/frontend/src/components/SearchableSelect.css b/frontend/src/components/SearchableSelect.css
new file mode 100644
index 0000000..68738e7
--- /dev/null
+++ b/frontend/src/components/SearchableSelect.css
@@ -0,0 +1,104 @@
+.search-select {
+ position: relative;
+ width: 100%;
+ font-family: 'Outfit', sans-serif;
+}
+
+.search-select.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.select-header {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid var(--panel-border);
+ border-radius: var(--radius-m);
+ padding: 0.8rem 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.search-select:not(.disabled) .select-header:hover {
+ background: rgba(255, 255, 255, 0.06);
+ border-color: rgba(255, 255, 255, 0.15);
+}
+
+.chevron {
+ transition: transform 0.2s ease;
+}
+.chevron.open {
+ transform: rotate(180deg);
+}
+
+.select-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ left: 0;
+ right: 0;
+ z-index: 50;
+ display: flex;
+ flex-direction: column;
+ max-height: 300px;
+ overflow: hidden;
+ padding: 0;
+}
+
+.search-box {
+ display: flex;
+ align-items: center;
+ padding: 0.8rem 1rem;
+ border-bottom: 1px solid var(--panel-border);
+ gap: 0.5rem;
+}
+
+.search-icon {
+ color: var(--text-muted);
+}
+
+.search-box input {
+ background: transparent;
+ border: none;
+ outline: none;
+ width: 100%;
+ color: var(--text);
+ font-size: 0.95rem;
+}
+
+.options-list {
+ overflow-y: auto;
+ padding: 0.5rem;
+}
+
+.options-list::-webkit-scrollbar {
+ width: 6px;
+}
+.options-list::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+}
+
+.option-item {
+ padding: 0.6rem 1rem;
+ border-radius: var(--radius-m);
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.option-item:hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.option-item.selected {
+ background: var(--teal-soft);
+ color: var(--teal);
+ font-weight: 500;
+}
+
+.no-options {
+ padding: 1rem;
+ text-align: center;
+ color: var(--text-muted);
+}
diff --git a/frontend/src/components/SearchableSelect.tsx b/frontend/src/components/SearchableSelect.tsx
new file mode 100644
index 0000000..a2f7295
--- /dev/null
+++ b/frontend/src/components/SearchableSelect.tsx
@@ -0,0 +1,64 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Search } from 'lucide-react';
+import './SearchableSelect.css';
+
+interface Option { value: string; label: string; }
+
+interface SearchableSelectProps {
+ options: Option[];
+ value: string;
+ onChange: (val: string) => void;
+ disabled?: boolean;
+}
+
+export const SearchableSelect: React.FC
+
+ Derzeit Gesperrt
+{message}
+
+
+ );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..f4b313d
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Sora:wght@500;600;700&display=swap');
+
+:root {
+ --bg: #010407;
+ --bg-soft: #061019;
+ --panel: rgba(8, 14, 20, 0.82);
+ --panel-border: rgba(255, 255, 255, 0.09);
+ --text: #f4f8fc;
+ --text-muted: rgba(231, 238, 244, 0.66);
+ --teal: #17c1e7;
+ --teal-soft: rgba(23, 193, 231, 0.35);
+ --success: #55e783;
+ --danger: #ff5f69;
+ --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.45);
+ --radius-xl: 28px;
+ --radius-l: 20px;
+ --radius-m: 14px;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+ min-height: 100vh;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+body {
+ font-family: 'Outfit', 'Segoe UI', sans-serif;
+ background:
+ radial-gradient(1050px 520px at 85% -12%, rgba(120, 236, 255, 0.21), transparent 56%),
+ radial-gradient(780px 380px at 12% -8%, rgba(0, 173, 217, 0.24), transparent 52%),
+ var(--bg);
+ background-attachment: fixed;
+ color: var(--text);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+textarea,
+select {
+ font: inherit;
+ color: inherit;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+/* Base Panel Style */
+.panel {
+ background: var(--panel);
+ border: 1px solid var(--panel-border);
+ border-radius: var(--radius-l);
+ box-shadow: var(--shadow-soft);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+}
+
+/* Main Layout */
+.app-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ max-width: 1200px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 100px 2rem 2rem 2rem;
+}
+
+@media (max-width: 768px) {
+ .app-container {
+ padding: 120px 1rem 1rem 1rem;
+ }
+}
+
+/* Shared Categories Grid & Cards */
+.categories-grid {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+}
+
+.category-card {
+ width: 100%;
+ max-width: 600px;
+ padding: 2.2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.category-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+}
+
+.category-title {
+ margin: 0;
+ font-family: 'Sora', sans-serif;
+ font-size: 1.5rem;
+ color: var(--teal);
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..3d7150d
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ !disabled && setIsOpen(!isOpen)}>
+ {selected ? selected.label : 'Bitte wählen...'}
+
+ {isOpen && (
+
+
+ )}
+
+
+
+ {filtered.map(o => (
+
+ { onChange(o.value); setIsOpen(false); setSearch(''); }}
+ >
+ {o.label}
+
+ ))}
+ {filtered.length === 0 && Keine Ergebnisse
}
+ Laden...
;
+
+ return (
+ <>
+
+
+
+
+ Admin Dashboard
+
+
+
+
+ Sperren & Freigaben
+
+
+
+
+
+
Einträge hinzufügen (Bulk)
+
+ setBulkCategory(e.target.value)}
+ list="category-list"
+ />
+
+