4.4 KiB
4.4 KiB
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.pyaktualisiert - 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)
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
- Einen YouTube Data API v3 Key erstellen (Google Cloud Console)
- In
fetch_videos.pydie Werte eintragen:API_KEY = "DEIN_API_KEY" CHANNEL_ID = "UC..." # Deine Kanal-ID - Testen:
python3 fetch_videos.py - 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)
--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: smoothauf<html>für sanfte Sprüngescroll-margin-top: 64pxauf 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_DIRauf den WebRoot-Pfad setzen:OUT_DIR = "/var/www/html/social_webseite"
Lizenz
© 2026 Duda17 — Alle Rechte vorbehalten.