# 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 `` 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 © 2026 Duda17 — Alle Rechte vorbehalten.