added cookie banner and theme select

frontend/src/App.tsx

@@ -41,6 +41,7 @@ import './i18n';
 import { useTranslation } from 'react-i18next';
 import Footer from './components/Footer';
 import { formatDate } from './utils/date';
+import CookieBanner from './components/CookieBanner';
 
 // Code splitting
 const MainPage = lazy(() => import('./pages/MainPage'));
@@ -627,6 +628,7 @@ const App: React.FC = () => {
           </Box>
           <Footer />
         </Box>
+        <CookieBanner onThemeChange={handleThemeChange} currentTheme={themeName} />
       </Router>
     </ThemeProvider>
   );

frontend/src/components/CookieBanner.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    Paper, 
+    Typography, 
+    Button, 
+    Stack, 
+    alpha,
+    Slide
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import type { CatppuccinTheme } from '../theme';
+
+interface CookieBannerProps {
+    onThemeChange: (newTheme: CatppuccinTheme) => void;
+    currentTheme: CatppuccinTheme;
+}
+
+const CookieBanner: React.FC<CookieBannerProps> = ({ onThemeChange, currentTheme }) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const consent = localStorage.getItem('cookie-consent');
+        if (!consent) {
+            setOpen(true);
+        }
+    }, []);
+
+    const handleAccept = () => {
+        localStorage.setItem('cookie-consent', 'true');
+        setOpen(false);
+    };
+
+    const handleToggleTheme = () => {
+        const newTheme = currentTheme === 'holy_light' ? 'holy_dark' : 'holy_light';
+        onThemeChange(newTheme);
+    };
+
+    if (!open) return null;
+
+    return (
+        <Slide direction="up" in={open} mountOnEnter unmountOnExit>
+            <Paper 
+                elevation={10} 
+                sx={{ 
+                    position: 'fixed', 
+                    bottom: { xs: 16, sm: 24 }, 
+                    left: { xs: 16, sm: 24 }, 
+                    right: { xs: 16, sm: 24 }, 
+                    maxWidth: 600, 
+                    margin: '0 auto',
+                    zIndex: 3000,
+                    p: 3,
+                    borderRadius: 4,
+                    border: '1px solid',
+                    borderColor: 'primary.main',
+                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                    backdropFilter: 'blur(10px)',
+                }}
+            >
+                <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1 }}>
+                    {t('cookieBanner.title')} 🍪
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 3, lineHeight: 1.6 }}>
+                    {t('cookieBanner.description')}
+                </Typography>
+                
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} justifyContent="flex-end">
+                    <Button 
+                        variant="outlined" 
+                        color="primary" 
+                        onClick={handleToggleTheme}
+                        sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 'bold' }}
+                    >
+                        {currentTheme === 'holy_light' ? t('cookieBanner.switchToDark') : t('cookieBanner.switchToLight')}
+                    </Button>
+                    <Button 
+                        variant="contained" 
+                        color="primary" 
+                        onClick={handleAccept}
+                        sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 'bold', px: 4 }}
+                    >
+                        {t('cookieBanner.accept')}
+                    </Button>
+                </Stack>
+            </Paper>
+        </Slide>
+    );
+};
+
+export default CookieBanner;

frontend/src/i18n.ts

@@ -149,6 +149,13 @@ const resources = {
         "liabilityContentDesc": "As a service provider, we are responsible for our own content on these pages in accordance with general laws according to § 7 Para. 1 TMG. According to §§ 8 to 10 TMG, however, we as service providers are not obliged to monitor transmitted or stored third-party information.",
         "copyrightTitle": "Copyright:",
         "copyrightDesc": "The content and works created by the site operators on these pages are subject to German copyright law. The reproduction, processing, distribution and any kind of exploitation outside the limits of copyright law require the written consent of the respective author."
+      },
+      "cookieBanner": {
+        "title": "Cookie Settings",
+        "description": "We use cookies to ensure you get the best experience on our website. Would you like to switch to Holy Dark mode? It's easier on the eyes!",
+        "accept": "Accept Cookies",
+        "switchToDark": "Switch to Holy Dark",
+        "switchToLight": "Stay on Holy Light"
       }
     }
   },
@@ -298,6 +305,13 @@ const resources = {
         "liabilityContentDesc": "Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.",
         "copyrightTitle": "Urheberrecht:",
         "copyrightDesc": "Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors."
+      },
+      "cookieBanner": {
+        "title": "Cookie-Einstellungen",
+        "description": "Wir verwenden Cookies, um sicherzustellen, dass Sie das beste Erlebnis auf unserer Website erhalten. Möchten Sie zum Holy Dark Modus wechseln? Er ist schonender für die Augen!",
+        "accept": "Cookies akzeptieren",
+        "switchToDark": "Zu Holy Dark wechseln",
+        "switchToLight": "Bei Holy Light bleiben"
       }
     }
   }