Implement OAuth authentication and admin panel

- Introduced OAuth-based login flow with session management and CSRF protection.
- Added admin panel for managing events and gallery content with real-time editing functionality.
- Integrated Gitea API for saving files and updating repository content.
- Updated `.env.example` to include OAuth and Gitea-related configurations.
- Added example event and gallery JSON files for demonstration.

.env.example

@@ -0,0 +1,31 @@
+# Copy this file to .env.local for local development
+# Then run: npm run dev:local
+
+# Public base URL for your local dev server
+PUBLIC_BASE_URL=http://localhost:4321
+
+# OAuth (Gitea) settings for local development
+# Create an OAuth2 Application in your Gitea with Redirect URI:
+#   http://localhost:4321/api/auth/callback
+# Then paste the resulting Client ID/Secret below
+OAUTH_PROVIDER=gitea
+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+OAUTH_AUTHORIZE_URL=https://git.bookageek.ch/login/oauth/authorize
+OAUTH_TOKEN_URL=https://git.bookageek.ch/login/oauth/access_token
+OAUTH_USERINFO_URL=https://git.bookageek.ch/api/v1/user
+
+# Optional access control
+# OAUTH_ALLOWED_USERS=user1,user2
+# OAUTH_ALLOWED_ORG=your-org
+
+# Gitea API for committing content changes (service account PAT)
+GITEA_BASE=https://git.bookageek.ch
+GITEA_OWNER=
+GITEA_REPO=
+GITEA_TOKEN=
+GIT_BRANCH=main
+
+# Session and CSRF secrets (use random long strings in .env.local)
+SESSION_SECRET=
+CSRF_SECRET=

.gitignore

@@ -16,6 +16,7 @@ pnpm-debug.log*
 # environment variables
 .env
 .env.production
+.env.local
 
 # macOS-specific files
 .DS_Store

.woodpecker.yml

@@ -1,26 +1,16 @@
-pipeline:
-  build:
-    image: node:20-alpine
-    commands:
-      - npm ci
-      - npm run build
-    when:
-      branch: main
-      event: [push, pull_request]
+steps:
   deploy:
-    depends_on: [build]
-    image: flyio/flyctl:latest
-    secrets: [fly_api_token]
+    image: node:20
+    environment:
+      FLY_API_TOKEN:
+        from_secret: FLY_API_TOKEN
     commands:
-      - flyctl deploy --remote-only
-    when:
-      branch: main
-      event: push
+      - curl -L https://fly.io/install.sh | sh
+      - export PATH="$HOME/.fly/bin:$PATH"
+      - flyctl deploy --config fly.toml --app gallus-pub
 
-branches:
-  include: [main, dev]
-
-cache:
-  mount:
-    - node_modules
-    - .npm
+when:
+  branch:
+    - main
+  event:
+    - push

Dockerfile

@@ -3,23 +3,27 @@ FROM node:20-alpine AS build
 WORKDIR /app
 
 COPY package*.json ./
-RUN npm ci
+RUN npm install
 
-COPY ../backup/backup .
+COPY . .
 
 RUN npm run build
 
 FROM node:20-alpine AS production
 
+ENV NODE_ENV=production
 WORKDIR /app
 
-RUN npm install -g serve
+# Copy built app and minimal runtime files
+COPY --from=build /app/dist /app/dist
+COPY --from=build /app/package*.json /app/
 
-COPY --from=build /app/dist /app
+RUN npm pkg delete devDependencies || true
 
 EXPOSE 3000
 
-CMD ["serve", "-s", ".", "-l", "3000"]
+# Run Astro server entry (node adapter standalone)
+CMD ["node", "dist/server/entry.mjs"]
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost:3000/ || exit 1

README.md

@@ -1,47 +1,55 @@
-# Astro Starter Kit: Minimal
+# Gallus Pub Website
+
+This is the Gallus Pub website built with Astro. It includes an admin area at `/admin` for editing content (events, gallery, texts). Changes are committed back to the Git repository via the Gitea API which triggers your Woodpecker + Fly.io deployment pipeline.
+
+## Local development
+
+To run the site locally with OAuth login (Gitea):
+
+1. Copy the example env file and fill values:
+   ```bash
+   cp .env.example .env.local
+   ```
+   - Create a Gitea OAuth application with Redirect URI: `http://localhost:4321/api/auth/callback`.
+   - Set `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` from Gitea.
+   - Set `GITEA_OWNER`, `GITEA_REPO`, and a `GITEA_TOKEN` (PAT) with write access to the repo.
+   - Generate random secrets for sessions/CSRF (e.g. `openssl rand -hex 32`).
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Start dev server using your local env file:
+   ```bash
+   npm run dev:local
+   ```
+   The site runs at http://localhost:4321. Visit http://localhost:4321/admin to log in via Gitea OAuth.
+
+Notes:
+- If OAuth variables are missing or malformed, the auth endpoints return a clear 500 with guidance instead of crashing.
+- Production secrets are configured on Fly.io; `.env.local` is ignored by Git.
+
+## Project structure
 
-```sh
-npm create astro@latest -- --template minimal
 ```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
 /
-├── public/
+├── public/              # static assets
 ├── src/
-│   └── pages/
-│       └── index.astro
+│   ├── content/         # editable JSON content (events, gallery)
+│   ├── pages/           # Astro pages, includes /admin and API routes
+│   ├── components/      # UI components
+│   └── utils/           # session helpers
+├── .env.example         # template for local env
+├── fly.toml             # Fly.io config
+├── Dockerfile
 └── package.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+## Commands
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+- `npm install` – install deps
+- `npm run dev` – dev server without loading .env.local (expects env to be present in the shell)
+- `npm run dev:local` – dev server loading `.env.local` via dotenv-cli
+- `npm run build` – production build (SSR via @astrojs/node)
+- `npm run preview` – preview the production build

astro.config.mjs

@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  output: 'server',
+  adapter: node({ mode: 'standalone' })
+});

fly.toml

@@ -1,5 +1,5 @@
 app = "gallus-pub"
-primary_region = "fra" # Frankfurt region, change if needed
+primary_region = "fra"
 kill_signal = "SIGINT"
 kill_timeout = 5
 
@@ -26,7 +26,7 @@ kill_timeout = 5
   [[http_service.checks]]
     interval = "30s"
     timeout = "5s"
-    grace_period = "10s"
+    grace_period = "30s"
     method = "GET"
     path = "/"
     protocol = "http"

package.json

@@ -1,14 +1,19 @@
 {
-  "name": "",
+  "name": "gallus-pub",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
+    "dev:local": "dotenv -e .env.local -- astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.12.0"
+    "astro": "^5.12.8",
+    "@astrojs/node": "^9.0.0"
+  },
+  "devDependencies": {
+    "dotenv-cli": "^7.4.1"
   }
 }

src/components/Contact.astro

@@ -0,0 +1,42 @@
+---
+import Layout from "../components/Layout.astro";
+import "../styles/components/ContactForm.css";
+---
+
+<Layout>
+	<div class="contact-container">
+		<h1 class="contact-title">Kontakt</h1>
+		
+		<form class="contact-form">
+			<div class="form-group">
+				<label for="name">Name</label>
+				<input type="text" id="name" name="name" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="email">E-Mail</label>
+				<input type="email" id="email" name="email" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="subject">Betreff</label>
+				<input type="text" id="subject" name="subject" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="message">Nachricht</label>
+				<textarea id="message" name="message" rows="5" required></textarea>
+			</div>
+			
+			<button type="submit" class="submit-button">Senden</button>
+		</form>
+		
+		<div class="whatsapp-container">
+			<p>Oder kontaktiere uns direkt über WhatsApp:</p>
+			<a href="https://wa.me/41772322770" class="whatsapp-link" target="_blank" rel="noopener noreferrer">
+				<span class="whatsapp-icon">📱</span>
+				<span>WhatsApp Chat starten</span>
+			</a>
+		</div>
+	</div>
+</Layout>

src/components/Drinks.astro

@@ -1,35 +1,44 @@
 ---
-import "../../styles/components/Drinks.css"
+import "../styles/components/Drinks.css"
 
 const { id } = Astro.props;
 ---
 <section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
-    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
+    <p class="note">
+        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
+    </p>
+
+    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
 
     <h3 class="monats-hit">Monats Hit</h3>
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <span class="circle-label">Mate Vodka</span>
+            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
+    <p class="note">
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+    </p>
+
     <div class="circle-row">
-        <div class="circle" title="Bier">
-            <span class="circle-label">Bier</span>
+        <div class="circle whiskey-circle" title="Whiskey 1">
+            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Wein">
-            <span class="circle-label">Wein</span>
+        <div class="circle whiskey-circle" title="Whiskey 2">
+            <img src="/images/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Cocktails">
-            <span class="circle-label">Cocktails</span>
+        <div class="circle whiskey-circle" title="Whiskey 3">
+            <img src="/images/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
     </div>
-
-    <p class="note">
-        Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
-    </p>
 </section>

src/components/EventsGrid.astro

@@ -2,27 +2,30 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+
 interface Event {
-    image: string;
-  title: string;
-  date: Date;
-  description: string;
+	image: string;
+	title: string;
+	date: string;
+	description: string;
 }
-const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
-import '../../styles/components/EventsGrid.css';
+const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
+	events?: Event[];
+	id?: string;
+};
+import "../styles/components/EventsGrid.css";
 ---
 
+<h2 class="section-title">Events</h2>
 <section id={id} class="events-gird container">
-	<h2 class="section-title">Events</h2>
-
-	{events.map((event: Event)  => (
-
-            <HoverCard
-                    title={event.title}
-                    date={event.date}
-                    description={event.description}
-                    image={event.image}
-            />
-    ))}
-
+	{
+		events.map((event: Event) => (
+			<HoverCard
+				title={event.title}
+				date={event.date}
+				description={event.description}
+				image={event.image}
+			/>
+		))
+	}
 </section>

src/components/Footer.astro

@@ -6,10 +6,6 @@ const currentYear = new Date().getFullYear();
 
 <footer class="footer">
 	<div class="footer-content">
-		<div class="copyright">
-			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
-		</div>
-
 		<div class="footer-sections">
 			<div class="footer-section">
 				<h3>Öffnungszeiten</h3>
@@ -24,20 +20,22 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</p>
-				<p>Reservierungen via Whatsapp</p>
-				<p><a href="tel:0772322770">077 232 27 70</a></p>
+				<p>Email:</p>
+				<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
 			</div>
 
 			<div class="footer-section">
 				<h3>Raumreservationen</h3>
 				<p>Du planst einen Event?</p>
 				<p>Der "St.Gallerruum" im 2.OG</p>
-				<p>kann gemietet werden.</p>
-				<br/>
-				<p>Gerne öffnen wir auf Anfrage</p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
+				<p>Kann gemietet werden.</p>
+				<p>Reservierungen via Whatsapp</p>
+				<p><a href="tel:0772322770">077 232 27 70</a></p>
 			</div>
+
+		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
 		</div>
 	</div>
 </footer>

src/components/Header.astro

@@ -1,44 +1,81 @@
 ---
 // src/components/Header.astro
 const { url } = Astro;
-import "../../styles/components/Header.css"
+import "../styles/components/Header.css";
 ---
 
 <header class="header">
+	<!-- Desktop Layout -->
+	<div class="desktop-layout">
+		<div class="logo-container">
+			<a href="/">
+				<img src="/images/Logo.png" alt="Logo" class="logo" />
+			</a>
+		</div>
 
-	<div class="logo-container">
-		<a href="/">
-			<img src="/images/Logo.png" alt="Logo" class="logo">
-		</a>
-	</div>
-
-	<!-- Hauptnavigation: immer Home, About, Contact -->
-	<nav class="nav-main">
-
-		<div class="dropdown">
-
-			<a href="/" class="dropdbtn">Home</a>
-
-			<div class="dropdown-content">
-				<!-- Section navigation links -->
+		<nav class="nav-main">
+			<div class="desktop-menu">
 				<a href="/#hero">Home</a>
-				<a href="/#welcome">Willkommen</a>
 				<a href="/#events">Events</a>
 				<a href="/#gallery">Galerie</a>
 				<a href="/#drinks">Drinks</a>
-				
-				<!-- Page navigation links -->
-				<a href="/events">Events Page</a>
-				<a href="/gallery">Gallery Page</a>
-				<a href="/openings">Openings</a>
+				<a href="/#footer">Contact</a>
+				<!--<a href="/#about">About</a>
+				<a href="/#contact">Contact</a>-->
 			</div>
+		</nav>
+	</div>
 
+	<!-- Mobile Layout -->
+	<div class="mobile-layout">
+		<!-- Centered Logo -->
+		<div class="mobile-logo-container">
+			<a href="/">
+				<img src="/images/Logo.png" alt="Logo" class="logo" />
+			</a>
 		</div>
 
-		<a href="/about">About</a>
-		<a href="/contact">Contact</a>
-
-	</nav>
+		<!-- Burger Menu Below Logo -->
+		<div class="burger-menu">
+			<div class="burger-icon">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
 
+		<!-- Mobile Navigation Menu (Dropdown) -->
+		<div class="mobile-menu">
+			<a href="/#hero">Home</a>
+			<a href="/#events">Events</a>
+			<a href="/#gallery">Galerie</a>
+			<a href="/#drinks">Drinks</a>
+			<a href="/#footer">Contact</a>
+		</div>
+	</div>
 </header>
+
 <div class="header-spacer"></div>
+
+<script>
+	// Toggle mobile menu when burger icon is clicked
+	document.addEventListener('DOMContentLoaded', () => {
+		const burgerIcon = document.querySelector('.burger-icon');
+		const mobileMenu = document.querySelector('.mobile-menu');
+		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
+		
+		// Toggle menu when burger icon is clicked
+		burgerIcon.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu.classList.toggle('active');
+		});
+		
+		// Close menu when a navigation link is clicked
+		mobileMenuLinks.forEach(link => {
+			link.addEventListener('click', () => {
+				burgerIcon.classList.remove('active');
+				mobileMenu.classList.remove('active');
+			});
+		});
+	});
+</script>

src/components/Hero.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Hero.astro
-import "../../styles/components/Hero.css"
+import "../styles/components/Hero.css"
 
 const { id } = Astro.props;
 ---

src/components/HoverCard.astro

@@ -1,7 +1,6 @@
 ---
-// src/components/HoverCard.astro
-import "../../styles/components/HoverCard.css"
-const { title, description, image = "", date} = Astro.props;
+import "../styles/components/HoverCard.css";
+const {title, description, image = "", date} = Astro.props;
 ---
 
 <article class="hover-card">
@@ -9,13 +8,41 @@ const { title, description, image = "", date} = Astro.props;
 		<img class="card-image" src={image} alt={title} />
 	</div>
 
-	<h3 class="card-title">{title}</h3>
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
 		<div>
-			<p>{description}</p>
+			<p set:html={description} />
 		</div>
 	</div>
 </article>
 
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			card.addEventListener('click', (e) => {
+				// Only toggle on mobile devices
+				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
+					card.classList.toggle('active');
+				}
+			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+					card.classList.remove('active');
+				}
+			});
+		});
+	});
+</script>

src/components/ImageCarousel.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/ImageCarousel.astro
-import "../../styles/components/ImageCarousel.css";
+import "../styles/components/ImageCarousel.css";
 
 interface Image {
   src: string;

src/components/Layout.astro

@@ -2,6 +2,9 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
+import "../styles/components/Layout.css"
+import "../styles/variables.css"
+import "../styles/index.css"
 ---
 
 <!doctype html>
@@ -13,8 +16,6 @@ import Footer from "./Footer.astro";
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Gallus Pub</title>
-		<link rel="stylesheet" href="/styles/variables.css" />
-		<link rel="stylesheet" href="/styles/index.css" />
 	</head>
 
 	<body>

src/components/Welcome.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Welcome.astro
-import "../../styles/components/Welcome.css"
+import "../styles/components/Welcome.css"
 
 const { id } = Astro.props;
 ---
@@ -9,7 +9,8 @@ const { id } = Astro.props;
 
 	<div class="welcome-text">
 
-		<h2>Herzlich willkommen im Gallus Pub!</h2>
+		<h2>Herzlich willkommen im</h2>
+		<h2>Gallus Pub!</h2>
 
 		<p>
 			Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
@@ -51,7 +52,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome backgrount image" />
+		<img src="/images/Welcome.png" alt="Welcome background image" />
 	</div>
 
 </section>

src/content/events.json

@@ -0,0 +1,26 @@
+[
+  {
+    "image": "/images/karaoke.jpg",
+    "title": "Karaoke",
+    "date": "Mittwoch - Samstag",
+    "description": "Bei uns gibt es Karaoke Mi-Sa!! <br>\nSeid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>\nReserviere am besten gleich per Whatsapp <a href=\"tel:+41772322770\">077 232 27 70</a>"
+  },
+  {
+    "image": "/images/pub_quiz.jpg",
+    "title": "Pub Quiz",
+    "date": "Jeden Freitag",
+    "description": "Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>\nJede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>\nAuch Einzelpersonen sind herzlich willkommen! <br>\n*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF"
+  },
+  {
+    "image": "/images/crepes_sucette.jpg",
+    "title": "Crepes Sucette <br /> Live Music im Gallus Pub!",
+    "date": "Do, 04. September 2025",
+    "description": "<b>20:00 Uhr</b> <br>\n<a href=\"Metzgergasse 13, 9000 St. Gallen\">Metzgergasse 13, 9000 St. Gallen</a> <br>\nErlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>\nJetzt reservieren: <a href=\"tel:+41772322770\">077 232 27 70</a>"
+  },
+  {
+    "image": "/images/kevin_mcflannigan.jpeg",
+    "title": "Kevin McFlannigan <br> Live Music im Gallus Pub!",
+    "date": "Sa, 27. September 2025",
+    "description": "<b>ab 20:00 Uhr</b> <br>\nSinger & Songwriter Kevin McFlannigan <br>\nEintritt ist Frei / Hutkollekte <br>"
+  }
+]

src/content/gallery.json

@@ -0,0 +1,12 @@
+[
+  { "src": "/images/Logo.png", "alt": "Erstes Bild" },
+  { "src": "/images/Logo.png", "alt": "Zweites Bild" },
+  { "src": "/images/Logo.png", "alt": "Drittes Bild" },
+  { "src": "/images/Logo.png", "alt": "Viertes Bild" },
+  { "src": "/images/Logo.png", "alt": "Fünftes Bild" },
+  { "src": "/images/Logo.png", "alt": "Sechstes Bild" },
+  { "src": "/images/Logo.png", "alt": "Siebtes Bild" },
+  { "src": "/images/Logo.png", "alt": "Achtes Bild" },
+  { "src": "/images/Logo.png", "alt": "Neuntes Bild" },
+  { "src": "/images/Logo.png", "alt": "Zehntes Bild" }
+]

src/pages/Contact.astro

@@ -1,11 +0,0 @@
----
-import Layout from "../components/Layout.astro";
----
-
-<Layout>
-
-	<h1>Contact</h1>
-
-	<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p>
-	
-</Layout>

src/pages/admin/index.astro

@@ -0,0 +1,94 @@
+---
+import Layout from "../../components/Layout.astro";
+import eventsData from "../../content/events.json";
+import imagesData from "../../content/gallery.json";
+import { getSessionFromRequest } from "../../utils/session";
+
+const session = getSessionFromRequest(Astro.request);
+if (!session?.user) {
+  // Not logged in: redirect to OAuth login
+  return Astro.redirect("/api/auth/login");
+}
+const csrf = session.csrf;
+const events = eventsData;
+const images = imagesData;
+---
+
+<Layout>
+  <section>
+    <h1>Admin</h1>
+    <p>Eingeloggt als {session.user.login}</p>
+    <form id="editor">
+      <h2>Events (JSON)</h2>
+      <textarea id="events" name="events" rows="16" style="width:100%;font-family:monospace;">{JSON.stringify(events, null, 2)}</textarea>
+
+      <h2>Galerie (JSON)</h2>
+      <textarea id="images" name="images" rows="10" style="width:100%;font-family:monospace;">{JSON.stringify(images, null, 2)}</textarea>
+
+      <h2>Bilder hochladen</h2>
+      <input type="file" id="fileInput" multiple accept="image/*" />
+
+      <div style="margin-top:1rem;display:flex;gap:.5rem;">
+        <button id="saveBtn" type="button">Speichern</button>
+        <button id="logoutBtn" type="button">Logout</button>
+      </div>
+    </form>
+  </section>
+
+  <meta name="csrf" content={csrf} />
+  <script type="module">
+    const csrf = document.querySelector('meta[name="csrf"]').content;
+
+    async function uploadFiles(files){
+      const uploads = [];
+      for (const file of files){
+        const arrayBuffer = await file.arrayBuffer();
+        const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+        uploads.push({ path: `public/images/${file.name}`, content: base64 });
+      }
+      return uploads;
+    }
+
+    async function save(){
+      let events, images;
+      try{
+        events = JSON.parse(document.getElementById('events').value);
+        images = JSON.parse(document.getElementById('images').value);
+      }catch(e){
+        alert('JSON fehlerhaft: ' + e.message);
+        return;
+      }
+
+      const files = [
+        { path: 'src/content/events.json', content: JSON.stringify(events, null, 2) },
+        { path: 'src/content/gallery.json', content: JSON.stringify(images, null, 2) },
+      ];
+
+      const input = document.getElementById('fileInput');
+      if (input.files && input.files.length){
+        const imageFiles = await uploadFiles(input.files);
+        files.push(...imageFiles);
+      }
+
+      const res = await fetch('/api/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF': csrf },
+        body: JSON.stringify({ files, message: 'Admin-Inhalte aktualisiert' })
+      });
+      if (!res.ok){
+        const t = await res.text();
+        alert('Fehler beim Speichern: ' + t);
+        return;
+      }
+      alert('Gespeichert! Build wird gestartet.');
+      // optional: Seite neu laden
+      location.reload();
+    }
+
+    document.getElementById('saveBtn').addEventListener('click', save);
+    document.getElementById('logoutBtn').addEventListener('click', async () => {
+      await fetch('/api/auth/logout', { method: 'POST' });
+      location.href = '/';
+    });
+  </script>
+</Layout>

src/pages/api/auth/callback.ts

@@ -0,0 +1,116 @@
+import type { APIRoute } from "astro";
+import { createSessionCookie, sessionCookieHeader, randomToken } from "../../../utils/session";
+
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+  const cookie = request.headers.get("cookie") || "";
+  const stateCookie = cookie.match(/(?:^|; )oauth_state=([^;]+)/)?.[1];
+
+  if (!code || !state || !stateCookie || stateCookie !== state) {
+    return new Response("Invalid OAuth state", { status: 400 });
+  }
+
+  const clientId = process.env.OAUTH_CLIENT_ID;
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET;
+  const tokenUrlRaw = process.env.OAUTH_TOKEN_URL;
+  const userinfoUrl = process.env.OAUTH_USERINFO_URL;
+  if (!clientId || !clientSecret || !tokenUrlRaw || !userinfoUrl) {
+    return new Response("OAuth not fully configured. Please set OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_TOKEN_URL, OAUTH_USERINFO_URL.", { status: 500 });
+  }
+
+  // Compute redirect_uri consistent with login, robust against invalid PUBLIC_BASE_URL
+  let redirectUri: string;
+  try {
+    if (process.env.PUBLIC_BASE_URL) {
+      const base = new URL(process.env.PUBLIC_BASE_URL);
+      redirectUri = new URL("/api/auth/callback", base).toString();
+    } else {
+      const reqUrl = new URL(request.url);
+      redirectUri = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+    }
+  } catch {
+    const reqUrl = new URL(request.url);
+    redirectUri = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+  }
+
+  // Validate token URL
+  let tokenUrl: URL;
+  try {
+    tokenUrl = new URL(tokenUrlRaw);
+  } catch {
+    return new Response("Invalid OAUTH_TOKEN_URL", { status: 500 });
+  }
+
+  // Exchange code for token
+  const params = new URLSearchParams();
+  params.set("client_id", clientId);
+  params.set("client_secret", clientSecret);
+  params.set("code", code);
+  params.set("grant_type", "authorization_code");
+  params.set("redirect_uri", redirectUri);
+
+  const tokenRes = await fetch(tokenUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: params.toString(),
+  });
+
+  if (!tokenRes.ok) {
+    const t = await tokenRes.text();
+    return new Response(`OAuth token error: ${tokenRes.status} ${t}`, { status: 500 });
+  }
+
+  const tokenData = await tokenRes.json().catch(async () => {
+    // Some Gitea versions return application/x-www-form-urlencoded
+    const text = await tokenRes.text();
+    const usp = new URLSearchParams(text);
+    return Object.fromEntries(usp.entries());
+  });
+  const accessToken = tokenData.access_token || tokenData["access_token"];
+  if (!accessToken) {
+    return new Response("No access token", { status: 500 });
+  }
+
+  const userRes = await fetch(userinfoUrl, {
+    headers: { Authorization: `token ${accessToken}` },
+  });
+  if (!userRes.ok) {
+    const t = await userRes.text();
+    return new Response(`Userinfo error: ${userRes.status} ${t}`, { status: 500 });
+  }
+  const user = await userRes.json();
+
+  // Optional allowlist
+  const allowedUsers = (process.env.OAUTH_ALLOWED_USERS || "").split(/[\,\s]+/).filter(Boolean);
+  const allowedOrg = process.env.OAUTH_ALLOWED_ORG;
+  if (allowedUsers.length && !allowedUsers.includes(user.login)) {
+    return new Response("Forbidden", { status: 403 });
+  }
+  if (allowedOrg) {
+    // Best-effort org check
+    try {
+      const orgsRes = await fetch(process.env.GITEA_BASE + "/api/v1/user/orgs", {
+        headers: { Authorization: `token ${accessToken}` },
+      });
+      if (orgsRes.ok) {
+        const orgs = await orgsRes.json();
+        const inOrg = Array.isArray(orgs) && orgs.some((o: any) => o.username === allowedOrg || o.login === allowedOrg || o.name === allowedOrg);
+        if (!inOrg) return new Response("Forbidden (org)", { status: 403 });
+      }
+    } catch {}
+  }
+
+  const csrf = randomToken(16);
+  const sessionValue = createSessionCookie({
+    user: { id: user.id, login: user.login, name: user.full_name || user.username || user.login, email: user.email },
+    csrf,
+  });
+
+  const headers = new Headers();
+  headers.set("Set-Cookie", sessionCookieHeader(sessionValue));
+  headers.append("Set-Cookie", "oauth_state=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0");
+  headers.set("Location", "/admin");
+  return new Response(null, { status: 302, headers });
+};

src/pages/api/auth/login.ts

@@ -0,0 +1,53 @@
+import type { APIRoute } from "astro";
+import { randomToken, setTempCookie } from "../../../utils/session";
+
+export const GET: APIRoute = async ({ request }) => {
+  const clientId = process.env.OAUTH_CLIENT_ID;
+  const authorizeUrlRaw = process.env.OAUTH_AUTHORIZE_URL;
+  if (!clientId || !authorizeUrlRaw) {
+    return new Response(
+      "OAuth not configured. Please set OAUTH_CLIENT_ID and OAUTH_AUTHORIZE_URL (and related secrets) for local dev.",
+      { status: 500 }
+    );
+  }
+
+  // Determine callback URL
+  let finalRedirect: string;
+  try {
+    if (process.env.PUBLIC_BASE_URL) {
+      // Ensure PUBLIC_BASE_URL is an absolute URL
+      const base = new URL(process.env.PUBLIC_BASE_URL);
+      finalRedirect = new URL("/api/auth/callback", base).toString();
+    } else {
+      // Fallback to current request origin
+      const reqUrl = new URL(request.url);
+      finalRedirect = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+    }
+  } catch {
+    // As a last resort, use request URL
+    const reqUrl = new URL(request.url);
+    finalRedirect = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+  }
+
+  // Validate authorize URL
+  let authorizeUrl: URL;
+  try {
+    authorizeUrl = new URL(authorizeUrlRaw);
+  } catch {
+    return new Response("Invalid OAUTH_AUTHORIZE_URL", { status: 500 });
+  }
+
+  const state = randomToken(16);
+  authorizeUrl.searchParams.set("client_id", clientId);
+  authorizeUrl.searchParams.set("redirect_uri", finalRedirect);
+  authorizeUrl.searchParams.set("response_type", "code");
+  authorizeUrl.searchParams.set("state", state);
+
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: authorizeUrl.toString(),
+      "Set-Cookie": setTempCookie("oauth_state", state),
+    },
+  });
+};

src/pages/api/auth/logout.ts

@@ -0,0 +1,11 @@
+import type { APIRoute } from "astro";
+import { clearCookieHeader } from "../../../utils/session";
+
+export const POST: APIRoute = async () => {
+  return new Response(null, {
+    status: 204,
+    headers: {
+      "Set-Cookie": clearCookieHeader(),
+    },
+  });
+};

src/pages/api/save.ts

@@ -0,0 +1,97 @@
+import type { APIRoute } from "astro";
+import { getSessionFromRequest } from "../../utils/session";
+
+const GITEA_BASE = process.env.GITEA_BASE!;
+const GITEA_OWNER = process.env.GITEA_OWNER!;
+const GITEA_REPO = process.env.GITEA_REPO!;
+const GITEA_TOKEN = process.env.GITEA_TOKEN!;
+const DEFAULT_BRANCH = process.env.GIT_BRANCH || "main";
+
+function isAllowedPath(path: string) {
+  if (path === "src/content/events.json") return true;
+  if (path === "src/content/gallery.json") return true;
+  if (path.startsWith("public/images/")) {
+    return /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(path);
+  }
+  return false;
+}
+
+async function getShaIfExists(path: string): Promise<string | undefined> {
+  const url = `${GITEA_BASE}/api/v1/repos/${encodeURIComponent(GITEA_OWNER)}/${encodeURIComponent(GITEA_REPO)}/contents/${encodeURIComponent(path)}?ref=${encodeURIComponent(DEFAULT_BRANCH)}`;
+  const res = await fetch(url, {
+    headers: { Authorization: `token ${GITEA_TOKEN}` },
+  });
+  if (res.status === 404) return undefined;
+  if (!res.ok) throw new Error(`Gitea get sha error ${res.status}`);
+  const data = await res.json();
+  return data.sha;
+}
+
+export const POST: APIRoute = async ({ request }) => {
+  const session = getSessionFromRequest(request);
+  if (!session?.user) return new Response(JSON.stringify({ error: "unauthorized" }), { status: 401 });
+
+  // CSRF header required
+  const csrfHeader = request.headers.get("x-csrf") || request.headers.get("X-CSRF");
+  if (!csrfHeader || csrfHeader !== session.csrf) {
+    return new Response(JSON.stringify({ error: "invalid csrf" }), { status: 403 });
+  }
+
+  let payload: any;
+  try {
+    payload = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "invalid json" }), { status: 400 });
+  }
+  if (!payload || !Array.isArray(payload.files)) {
+    return new Response(JSON.stringify({ error: "missing files" }), { status: 400 });
+  }
+
+  const results: any[] = [];
+  for (const file of payload.files) {
+    const path = String(file.path || "");
+    if (!isAllowedPath(path)) {
+      return new Response(JSON.stringify({ error: `path not allowed: ${path}` }), { status: 400 });
+    }
+    let contentBase64: string;
+    if (path.startsWith("public/images/")) {
+      // Expect already base64 string of binary
+      contentBase64 = String(file.content || "");
+      // Remove possible data URL prefix
+      const match = contentBase64.match(/^data:[^;]+;base64,(.*)$/);
+      if (match) contentBase64 = match[1];
+    } else {
+      // Text file
+      contentBase64 = Buffer.from(String(file.content ?? ""), "utf-8").toString("base64");
+    }
+
+    const sha = await getShaIfExists(path).catch(() => undefined);
+    const url = `${GITEA_BASE}/api/v1/repos/${encodeURIComponent(GITEA_OWNER)}/${encodeURIComponent(GITEA_REPO)}/contents/${encodeURIComponent(path)}`;
+    const body: any = {
+      content: contentBase64,
+      message: payload.message || `Update ${path}`,
+      branch: DEFAULT_BRANCH,
+    };
+    if (sha) body.sha = sha;
+    if (session.user) {
+      body.author = { name: session.user.name || session.user.login, email: session.user.email || `${session.user.login}@users.noreply` };
+      body.committer = { name: session.user.name || session.user.login, email: session.user.email || `${session.user.login}@users.noreply` };
+    }
+
+    const res = await fetch(url, {
+      method: "PUT",
+      headers: {
+        Authorization: `token ${GITEA_TOKEN}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const t = await res.text();
+      return new Response(JSON.stringify({ error: `Gitea error for ${path}: ${res.status} ${t}` }), { status: 500 });
+    }
+    results.push(await res.json());
+  }
+
+  return new Response(JSON.stringify({ ok: true, results }), { status: 200, headers: { "Content-Type": "application/json" } });
+};

src/pages/index.astro

@@ -3,34 +3,18 @@
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
-import EventsGrid from '../components/EventsGrid.astro';
+import EventsGrid from "../components/EventsGrid.astro";
 import Drinks from "../components/Drinks.astro";
 import ImageCarousel from "../components/ImageCarousel.astro";
+import Contact from "../components/Contact.astro";
+import About from "../components/About.astro";
 
-const events = [
-  {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
-  {image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
-  {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
-  {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
-];
-
-const images = [
-	{ src: '/images/Logo.png', alt: 'Erstes Bild' },
-	{ src: '/images/Logo.png', alt: 'Zweites Bild' },
-	{ src: '/images/Logo.png', alt: 'Drittes Bild' },
-	{ src: '/images/Logo.png', alt: 'Viertes Bild' },
-	{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
-	{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
-	{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
-	{ src: '/images/Logo.png', alt: 'Achtes Bild' },
-	{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
-	{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
-];
-
+// Inhalte aus Dateien laden (editierbar über Admin)
+import events from "../content/events.json";
+import images from "../content/gallery.json";
 ---
 
 <Layout>
-
 	<Hero id="hero" />
 	<Welcome id="welcome" />
 	<EventsGrid id="events" events={events} />

src/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/styles/components/ContactForm.css

@@ -0,0 +1,125 @@
+.contact-container {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.contact-title {
+  margin-top: 70px;
+  padding-top: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2.5rem;
+  color: var(--color-text);
+}
+
+.contact-form {
+  background-color: rgba(33, 59, 40, 0.05);
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 1rem;
+  background-color: #fff;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #213b28;
+  box-shadow: 0 0 0 2px rgba(33, 59, 40, 0.2);
+}
+
+.submit-button {
+  background-color: #213b28;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-button:hover {
+  background-color: #2a4c35;
+}
+
+.whatsapp-container {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+.whatsapp-link {
+  display: inline-flex;
+  align-items: center;
+  background-color: #25D366;
+  color: white;
+  text-decoration: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+  margin-top: 0.5rem;
+}
+
+.whatsapp-link:hover {
+  background-color: #128C7E;
+}
+
+.whatsapp-icon {
+  font-size: 1.2rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .contact-form {
+    padding: 1.5rem;
+  }
+  
+  .contact-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .contact-form {
+    padding: 1rem;
+  }
+  
+  .contact-title {
+    font-size: 1.75rem;
+  }
+  
+  .submit-button,
+  .whatsapp-link {
+    width: 100%;
+    justify-content: center;
+  }
+}

src/styles/components/Drinks.css

@@ -1,5 +1,5 @@
 .Drinks {
-  font-family: var(--font-family-primary);
+  font-family: var(--font-family-primary), serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 6em;
-  width: 6em;
+  height: 9em;
+  width: 9em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;

src/styles/components/Footer.css

@@ -13,9 +13,9 @@
 
 .copyright {
     text-align: center;
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-sections {

src/styles/components/Header.css

@@ -0,0 +1,190 @@
+.header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #0e0c0c;
+	z-index: 1000;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(5px);
+	width: 100%;
+	border-bottom: 1px solid #444;
+}
+
+.header-spacer {
+	height: 70px;
+	/* Should match the header height */
+}
+
+/* Desktop Layout */
+.desktop-layout {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 2rem;
+	height: 70px;
+}
+
+.logo-container {
+	display: flex;
+	align-items: center;
+}
+
+.logo {
+	margin-left: 2em;
+	height: 4em;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo:hover {
+	transform: scale(1.05);
+}
+
+.nav-main {
+	display: flex;
+	align-items: center;
+}
+
+.nav-main a {
+	margin: 0 1rem;
+	color: white;
+	text-decoration: none;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.nav-main a:hover {
+	color: #ffa500;
+}
+
+/* Mobile Layout */
+.mobile-layout {
+	display: none;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+}
+
+.mobile-logo-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+
+.mobile-logo-container .logo {
+	margin: 0;
+	height: 3.5em;
+}
+
+/* Burger Menu Styles */
+.burger-menu {
+	display: flex;
+	justify-content: center;
+	cursor: pointer;
+	margin: 0.5rem 0;
+}
+
+.burger-icon {
+	width: 30px;
+	height: 24px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.burger-icon span {
+	display: block;
+	height: 3px;
+	width: 100%;
+	background-color: white;
+	border-radius: 3px;
+	transition: all 0.3s ease;
+}
+
+.burger-icon.active span:nth-child(1) {
+	transform: translateY(10.5px) rotate(45deg);
+}
+
+.burger-icon.active span:nth-child(2) {
+	opacity: 0;
+}
+
+.burger-icon.active span:nth-child(3) {
+	transform: translateY(-10.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+	display: none;
+	width: 100%;
+	background-color: #0e0c0c;
+	flex-direction: column;
+	align-items: center;
+	padding: 0;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	z-index: 999;
+}
+
+.mobile-menu.active {
+	max-height: 300px; /* Adjust based on content */
+	padding: 0.5rem 0;
+}
+
+.mobile-menu a {
+	margin: 0.5rem 0;
+	color: white;
+	text-decoration: none;
+	font-size: 1.2rem;
+	text-align: center;
+	width: 100%;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid #333;
+}
+
+.mobile-menu a:last-child {
+	border-bottom: none;
+}
+
+.mobile-menu a:hover {
+	color: #ffa500;
+}
+
+@media (max-width: 768px) {
+	.header-spacer {
+		height: 120px; /* Adjusted for the taller mobile header */
+	}
+
+	/* Hide desktop layout, show mobile layout */
+	.desktop-layout {
+		display: none;
+	}
+
+	.mobile-layout {
+		display: flex;
+	}
+
+	/* Show mobile menu when active */
+	.mobile-menu.active {
+		display: flex;
+	}
+}
+
+@media (max-width: 480px) {
+	.header-spacer {
+		height: 110px; /* Slightly smaller for very small screens */
+	}
+
+	.mobile-logo-container .logo {
+		height: 3em;
+	}
+
+	.burger-icon {
+		width: 25px;
+		height: 20px;
+	}
+}

src/styles/components/Hero.css

@@ -0,0 +1,65 @@
+.hero-overlay {
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	margin-top: 2em;
+}
+
+h1 {
+	padding-top: 2em;
+}
+
+.hero {
+	position: relative;
+	height: 70vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	margin-bottom: 2rem;
+}
+
+.hero-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	/* Background is set in the component */
+}
+
+.hero-content {
+	position: relative;
+	text-align: center;
+	z-index: 1;
+}
+
+.hero-content h1 {
+	font-size: 4rem;
+	font-weight: bold;
+}
+
+.hero-content p {
+	margin: 0.5rem 0 1rem 0;
+	font-size: 1.2rem;
+}
+
+.button {
+	margin-top: 2rem;
+	padding: 0.8rem 2rem;
+	background: linear-gradient(45deg, #ffa500, #ff7f00);
+	color: white;
+	border: none;
+	border-radius: 30px;
+	font-size: 1rem;
+	font-weight: bold;
+	text-decoration: none;
+	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+	transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.button:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}

src/styles/components/HoverCard.css

@@ -0,0 +1,105 @@
+.hover-card {
+	position: relative;
+	width: 400px;
+	height: 400px;
+	border-radius: var(--border-radius);
+	background-color: var(--color-accent-green);
+	box-shadow: var(--box-shadow);
+	transition: transform var(--transition-standard);
+	overflow: hidden;
+	margin: var(--margin-standard);
+	display: flex;
+	flex-direction: column;
+}
+
+.hover-card:hover {
+	transform: translateY(-5px);
+}
+
+.card_date {
+	padding: 0 15px 15px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-small);
+	text-align: center;
+	font-style: italic;
+	order: -1;
+}
+
+.image-container {
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.card-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: opacity 0.3s ease;
+}
+
+.hover-text {
+	font-size: var(--font-size-small-medium);
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-accent-green-transparent);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	opacity: 0;
+	transition: opacity var(--transition-standard);
+}
+
+.hover-text div {
+	color: var(--color-accent-beige);
+	text-align: center;
+	max-height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	padding-right: 5px;
+}
+
+.hover-text div::-webkit-scrollbar {
+	width: 5px;
+}
+
+.hover-text div::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+}
+
+.hover-text div::-webkit-scrollbar-thumb {
+	background: var(--color-accent-beige);
+	border-radius: 10px;
+}
+
+.hover-text div {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
+}
+
+.hover-card:hover .hover-text {
+	opacity: 1;
+}
+
+.hover-card:hover .card-image {
+	opacity: 0.1;
+}
+
+.hover-text p {
+	margin: 0;
+	padding: 0;
+}
+
+@media (max-width: 768px) {
+	.hover-card {
+		width: 100%;
+		max-width: 350px;
+	}
+}

src/styles/components/Layout.css

@@ -0,0 +1,15 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1;
+    padding: 0 1rem;
+}

src/styles/index.css

@@ -11,8 +11,9 @@ html {
 }
 
 body {
-	font-family: var(--font-family-primary);
-	background-color: var(--color-background);
+	font-family: var(--font-family-primary), serif;
+	background-color: var(--color-background, #000000);
+	background: #000000;
 	color: var(--color-text);
 	line-height: var(--line-height);
 }
@@ -23,3 +24,12 @@ body {
 	width: var(--container-width);
 	margin: 0 auto;
 }
+
+
+a {
+	color: #ffa500;
+}
+
+a:hover {
+	text-decoration: none;
+}

src/styles/variables.css

@@ -0,0 +1,34 @@
+:root {
+	/* Colors */
+	--color-background: #000000 !important;
+	--color-text: #f5f5f5;
+	--color-accent-green: #213b28;
+	--color-accent-beige: #ceb39b;
+	--color-accent-green-transparent: rgba(33, 59, 40, 0.95);
+	--color-shadow: rgba(0, 0, 0, 0.2);
+	--color-orange1: #ffa500;
+
+	/* Font Sizes */
+	--font-family-primary: 'Georgia', serif;
+	--font-size-small: 1rem;
+	--font-size-small-medium: 1.2rem;
+	--font-size-medium: 1.5rem;
+	--font-size-large: 2rem;
+	--line-height: 1.6;
+
+
+	--container-width: 100%;
+	--container-max-width: 1600px;
+	--padding-vertical: 2rem;
+	--padding-horizontal: 0;
+	--margin-standard: 1rem;
+	--gap-standard: 30px;
+
+	--border-radius: 8px;
+	--box-shadow: 0 4px 8px var(--color-shadow);
+	--transition-standard: 0.3s ease;
+
+
+	--breakpoint-mobile: 768px;
+	--breakpoint-desktop: 1600px;
+}

src/utils/session.ts

@@ -0,0 +1,74 @@
+import crypto from "node:crypto";
+
+export type SessionData = {
+  user?: {
+    id: number;
+    login: string;
+    name?: string;
+    email?: string;
+  };
+  csrf?: string;
+};
+
+const COOKIE_NAME = "gp_session";
+
+function b64url(input: Buffer | string) {
+  return Buffer.from(input)
+    .toString("base64")
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
+}
+
+function sign(payload: string, secret: string) {
+  return crypto.createHmac("sha256", secret).update(payload).digest("base64url");
+}
+
+export function createSessionCookie(data: SessionData, secret = process.env.SESSION_SECRET || "") {
+  const payload = b64url(JSON.stringify(data));
+  const sig = sign(payload, secret);
+  return `${payload}.${sig}`;
+}
+
+export function parseSessionCookie(cookieValue: string | undefined, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  if (!cookieValue) return undefined;
+  const [payload, sig] = cookieValue.split(".");
+  if (!payload || !sig) return undefined;
+  const expected = sign(payload, secret);
+  if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) return undefined;
+  try {
+    const json = Buffer.from(payload.replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf-8");
+    return JSON.parse(json);
+  } catch {
+    return undefined;
+  }
+}
+
+export function clearCookieHeader(name = COOKIE_NAME) {
+  return `${name}=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0`;
+}
+
+export function sessionCookieHeader(value: string, name = COOKIE_NAME) {
+  // 7 days
+  const maxAge = 60 * 60 * 24 * 7;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}
+
+export function getSessionFromRequest(req: Request, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  const cookie = req.headers.get("cookie") || "";
+  const match = cookie.match(/(?:^|; )gp_session=([^;]+)/);
+  if (!match) return undefined;
+  return parseSessionCookie(match[1], secret);
+}
+
+export function randomToken(bytes = 32) {
+  return crypto.randomBytes(bytes).toString("hex");
+}
+
+export const COOKIE_NAME_STATE = "oauth_state";
+
+export function setTempCookie(name: string, value: string) {
+  // short lived: 10 minutes
+  const maxAge = 60 * 10;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}

styles/components/Header.css

@@ -1,133 +0,0 @@
-.header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(26, 26, 26, 0.95);
-    z-index: 1000;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-}
-
-
-.header-spacer {
-    height: 70px; /* Should match the header height */
-}
-
-
-.logo-container {
-    display: flex;
-    align-items: center;
-}
-
-.logo {
-    margin-left: 2em;
-    height: 4em;
-    width: auto;
-    transition: transform 0.3s ease;
-}
-
-.logo:hover {
-    transform: scale(1.05);
-}
-
-.nav-main {
-    display: flex;
-    align-items: center;
-    margin-right: 377px;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 200px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-@media (max-width: 768px) {
-    .nav-container {
-        padding: 1rem;
-    }
-
-    .nav-links {
-        gap: 1rem;
-    }
-    
-    .nav-main {
-        margin-right: 20px;
-    }
-    
-    .logo {
-        margin-left: 1em;
-        height: 3em;
-    }
-    
-    .dropdown-content {
-        right: 0;
-    }
-}
-
-@media (max-width: 480px) {
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem;
-    }
-    
-    .logo {
-        margin-left: 0.5em;
-        height: 2.5em;
-    }
-    
-    .nav-main {
-        margin-right: 10px;
-    }
-    
-    .nav-main a,
-    .dropdbtn {
-        margin: 0 0.5rem;
-        font-size: 0.9rem;
-    }
-}

styles/components/Hero.css

@@ -1,128 +0,0 @@
-/* === Header & Nav === */
-.header {
-    background-color: #0e0c0c;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    border-bottom: 1px solid #444;
-}
-
-
-.hero-overlay {
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-top: 2em;
-}
-
-h1 {
-    padding-top: 2em;
-}
-
-.nav-main {
-    display: flex;
-    align-items: center;
-    margin-right: 377px;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 160px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-.hero {
-    position: relative;
-    height: 70vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    margin-bottom: 2rem;
-}
-
-.hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* Background is set in the component */
-}
-
-.hero-content {
-    position: relative;
-    text-align: center;
-    z-index: 1;
-}
-
-.hero-content h1 {
-    font-size: 4rem;
-    font-weight: bold;
-}
-
-.hero-content p {
-    margin: 0.5rem 0 1rem 0;
-    font-size: 1.2rem;
-}
-
-.button {
-    margin-top: 2rem;
-    padding: 0.8rem 2rem;
-    background: linear-gradient(45deg, #ffa500, #ff7f00);
-    color: white;
-    border: none;
-    border-radius: 30px;
-    font-size: 1rem;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}

styles/components/HoverCard.css

@@ -1,112 +0,0 @@
-.hover-card {
-  position: relative;
-  width: 350px;
-  height: 400px;
-  border-radius: var(--border-radius);
-  background-color: var(--color-accent-green);
-  box-shadow: var(--box-shadow);
-  transition: transform var(--transition-standard);
-  overflow: hidden;
-  margin: var(--margin-standard);
-  display: flex;
-  flex-direction: column;
-}
-
-.hover-card:hover {
-  transform: translateY(-5px);
-}
-
-.card-title {
-  padding: 15px 15px 5px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-medium);
-  text-align: center;
-  order: -2;
-}
-
-.card_date {
-  padding: 0 15px 15px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-small);
-  text-align: center;
-  font-style: italic;
-  order: -1;
-}
-
-.image-container {
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.card-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity 0.3s ease;
-}
-
-.hover-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-accent-green-transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  opacity: 0;
-  transition: opacity var(--transition-standard);
-}
-
-.hover-text div {
-  color: var(--color-accent-beige);
-  text-align: center;
-  max-height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  padding-right: 5px;
-}
-
-.hover-text div::-webkit-scrollbar {
-  width: 5px;
-}
-
-.hover-text div::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.hover-text div::-webkit-scrollbar-thumb {
-  background: var(--color-accent-beige);
-  border-radius: 10px;
-}
-
-.hover-text div {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
-}
-
-.hover-card:hover .hover-text {
-  opacity: 1;
-}
-
-.hover-card:hover .card-image {
-  opacity: 0.1;
-}
-
-.hover-text p {
-  margin: 0;
-  padding: 0;
-}
-
-@media (max-width: 768px) {
-  .hover-card {
-    width: 100%;
-    max-width: 350px;
-  }
-}

styles/variables.css

@@ -1,30 +0,0 @@
-:root {
-  /* Colors */
-  --color-background: #000;
-  --color-text: #f5f5f5;
-  --color-accent-green: #213b28;
-  --color-accent-beige: #ceb39b;
-  --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
-  --color-shadow: rgba(0, 0, 0, 0.2);
-
-  --font-family-primary: 'Georgia', serif;
-  --font-size-small: 1rem;
-  --font-size-medium: 1.5rem;
-  --font-size-large: 2rem;
-  --line-height: 1.6;
-
-  --container-width: 100%;
-  --container-max-width: 1600px;
-  --padding-vertical: 2rem;
-  --padding-horizontal: 0;
-  --margin-standard: 1rem;
-  --gap-standard: 30px;
-
-  --border-radius: 8px;
-  --box-shadow: 0 4px 8px var(--color-shadow);
-  --transition-standard: 0.3s ease;
-
-
-  --breakpoint-mobile: 768px;
-  --breakpoint-desktop: 1600px;
-}