156 lines
4.4 KiB
Markdown
156 lines
4.4 KiB
Markdown
# 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
|
|
|
|
© 2026 Duda17 — Alle Rechte vorbehalten.
|