add readme

2026-09-03 17:07:28 +02:00
parent e10519e808
commit 5deb3e0251
1 changed files with 155 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,155 @@
+# Duda17 - Social Media Webseite
+
+Produktions-Website, die alle Social-Media-Kanäle von **Duda17** (YouTube, TikTok, Twitch, Discord) auf einer einzigen Seite bündelt. Die Seite läuft als statische HTML/CSS/JS-Seite und kann lokal oder auf einem Server gehostet werden.
+
+---
+
+## Projektstruktur
+
+```
+social_webseite/
+├── index.html          # Hauptseite (HTML-Struktur + Navigation)
+├── style.css           # Alle Styles (Dark-Theme, Responsive)
+├── app.js              # Logik: YouTube-Embed, Twitch-Player, Navigation
+├── videos.js           # Automatisch generierte YouTube-Video-IDs
+├── fetch_videos.py     # Python-Skript: Holt Video-IDs via YouTube Data API v3
+├── start.bat           # Windows: Startet lokalen Server + öffnet Browser
+├── server.ps1          # PowerShell-HTTP-Server (lokal, Port 8080)
+└── .idea/              # JetBrains IDE-Konfiguration
+```
+
+---
+
+## Funktionen
+
+### Sticky Navigation
+- Erscheint sobald man > 300px gescrollt hat
+- Links zu allen Abschnitten: YouTube, TikTok, Twitch, Discord
+- Aktiver Abschnitt wird automatisch hervorgehoben
+- Brand-Logo links führt zurück nach oben
+
+### Back-to-Top Button
+- Schwebender Button unten rechts
+- Erscheint beim Scrollen, blendet sich bei Hero aus
+- Smooth-Scroll zurück zum Anfang
+
+### YouTube-Sektion
+- Zeigt die neuesten Videos als eingebettete Iframes
+- Video-IDs werden automatisch per `fetch_videos.py` aktualisiert
+- Grid-Layout mit responsiver Anpassung
+
+### TikTok-Sektion
+- Eingebettetes TikTok Creator-Widget
+- Zeigt Profil und aktuelle Videos
+
+### Twitch-Sektion
+- Eingebetteter Twitch Live-Player (Kanal: duda_xd)
+- Zeigt aktuellen Stream (falls aktiv)
+
+### Discord-Sektion
+- Profilkarte mit Direktlink zum Discord-Profil
+
+---
+
+## Lokaler Start
+
+### Voraussetzungen
+- Windows mit PowerShell
+- Oder ein beliebiger HTTP-Server (Python, Node.js, etc.)
+
+### Mit start.bat (Windows)
+```
+Doppelklick auf start.bat
+```
+- Startet einen PowerShell-HTTP-Server auf Port 8080
+- Öffnet automatisch `http://localhost:8080`
+- Fenster offen lassen! Beides schließen zum Beenden
+
+### Mit Python (beliebiges OS)
+```bash
+cd social_webseite
+python3 -m http.server 8080
+```
+Dann `http://localhost:8080` im Browser öffnen.
+
+### Wichtig
+Die Seite **muss** über HTTP/HTTPS laufen. Das direkte Öffnen als Datei (`file://`) blockiert die Video-Einbettung durch YouTube/TikTok/Twitch.
+
+---
+
+## YouTube-Videos aktualisieren
+
+Die Datei `videos.js` wird von `fetch_videos.py` automatisch generiert.
+
+### Einrichtung
+1. Einen YouTube Data API v3 Key erstellen (Google Cloud Console)
+2. In `fetch_videos.py` die Werte eintragen:
+   ```python
+   API_KEY = "DEIN_API_KEY"
+   CHANNEL_ID = "UC..."  # Deine Kanal-ID
+   ```
+3. Testen:
+   ```bash
+   python3 fetch_videos.py
+   ```
+4. Automatisch per Cron (täglich um 06:00):
+   ```
+   crontab -e
+   0 6 * * * cd /pfad/zur/webseite && /usr/bin/python3 fetch_videos.py
+   ```
+
+Der API-Key bleibt serverseitig und ist nie im Browser sichtbar.
+
+---
+
+## Technische Details
+
+| Komponente | Technologie |
+|---|---|
+| Struktur | HTML5 |
+| Styling | CSS3 (Custom Properties, Grid, Flexbox, Backdrop-Filter) |
+| Logik | Vanilla JavaScript (keine Abhängigkeiten) |
+| Fonts | Google Fonts (Inter) |
+| Server | PowerShell HttpListener / Python http.server |
+| API | YouTube Data API v3 (serverseitig) |
+
+### CSS-Variablen (Dark-Theme)
+```css
+--bg-primary:    #0a0a0a    /* Haupt-Hintergrund */
+--bg-secondary:  #111111    /* Alternierende Sektionen */
+--bg-card:       #1a1a1a    /* Karten/Hintergründe */
+--text-primary:  #ffffff    /* Haupttext */
+--text-secondary:#a0a0a0    /* Sekundärtext */
+--youtube-red:   #FF0000
+--tiktok-cyan:   #00f2ea
+--twitch-purple: #9146FF
+--discord-blurple:#5865F2
+```
+
+### Scroll-Verhalten
+- `scroll-behavior: smooth` auf `<html>` für sanfte Sprünge
+- `scroll-margin-top: 64px` auf Sektionen (Platz für sticky Nav)
+- Intersection-Logik in JS für aktiven Nav-Link
+
+---
+
+## Deployment
+
+### Statisches Hosting
+Die Seite besteht nur aus statischen Dateien. Einfach den Ordner `social_webseite` in ein Webroot kopieren:
+- **Netlify**: Drag-and-Drop oder Git-Deploy
+- **GitHub Pages**: Ordner als Branch deployen
+- **VPS/Webserver**: Nginx/Apache auf den Ordner zeigen lassen
+
+### fetch_videos.py auf dem Server
+- Cron-Job einrichten (siehe oben)
+- `OUT_DIR` auf den WebRoot-Pfad setzen:
+  ```python
+  OUT_DIR = "/var/www/html/social_webseite"
+  ```
+
+---
+
+## Lizenz
+
+&copy; 2026 Duda17 — Alle Rechte vorbehalten.