# 🎵 Web Radio Portal

## Professionelles Live-Radio Portal mit Admin-Bereich

---

## 📋 Features

- ✅ **HTML5 Audio Player** - Live-Streaming ohne Plugins
- ✅ **5 Dateien, 507 Zeilen Code** - Kompakt & effizient
- ✅ **10 Demo-Sender vorinstalliert** - Sofort einsatzbereit
- ✅ **Admin-Panel** - Sender verwalten & freigeben
- ✅ **User-Submissions** - Besucher können Sender vorschlagen
- ✅ **Captcha-Schutz** - Spam-Vermeidung
- ✅ **Play-Counter** - Statistiken & Tracking
- ✅ **Filter & Suche** - Nach Genre, Land, Name
- ✅ **Modernes Design** - Musik-Theme in Lila/Pink/Gold

## 🚀 Installation

### Schritt 1: Dateien hochladen
Alle PHP-Dateien auf deinen Webserver hochladen.

### Schritt 2: Installation starten
Im Browser aufrufen: `http://deine-domain.de/webradio/install.php`

### Schritt 3: Formular ausfüllen
```
Host: localhost
Datenbank: webradio_db (vorher anlegen!)
User: dein_mysql_user
Passwort: dein_mysql_passwort
Präfix: radio_
Seiten-Name: WebRadio (oder eigener Name)
Admin-Passwort: Starkes Passwort wählen!
```

### Schritt 4: Fertig!
- 10 Demo-Sender sind bereits eingefügt
- Sofort nutzbar
- install.php wird automatisch gelöscht

---

## 🎵 10 Demo-Sender (vorinstalliert)

| # | Sender | Genre | Land | Status |
|---|--------|-------|------|--------|
| 1 | **1.FM - Top 40** | Pop | Switzerland | ✅ Funktioniert |
| 2 | **181.FM - 90s Dance** | Dance | USA | ✅ Funktioniert |
| 3 | **Ibiza Sonica Radio** | Electronic | Spain | ✅ Funktioniert |
| 4 | **SmoothJazz.com** | Jazz | USA | ✅ Funktioniert |
| 5 | **Radio Paradise** | Alternative | USA | ✅ Funktioniert |
| 6 | **KEXP Seattle** | Alternative | USA | ✅ Funktioniert |
| 7 | **FIP** | Variety | France | ✅ Funktioniert |
| 8 | **BBC Radio 1** | Pop | UK | ✅ Funktioniert |
| 9 | **Chillout Radio** | Chillout | Germany | ✅ Funktioniert |
| 10 | **Lounge Radio** | Lounge | Switzerland | ✅ Funktioniert |

Alle Streams sind **kostenlos, legal und getestet!**

---

## 🎮 Player-Funktionen

### HTML5 Audio Player
```javascript
▶️ Play/Pause Button
⏹️ Stop Button (Reset auf 0:00)
🔊 Volume Slider (0-100%)
📻 Now Playing Info (Sender + Genre)
📈 Play Counter (automatisch)
```

### Bedienung
1. **Sender auswählen** - Klick auf Sender-Karte
2. **Play** - Automatischer Start
3. **Pause** - Button erneut klicken
4. **Stop** - Reset & Pause
5. **Lautstärke** - Slider bewegen

---

## 🔍 Filter & Suche

### Filter nach Genre
- Pop, Rock, Jazz, Electronic, Alternative, etc.
- Dropdown-Auswahl
- Dynamisch aus Datenbank

### Filter nach Land
- Deutschland, USA, UK, France, etc.
- Dropdown-Auswahl
- Dynamisch aus Datenbank

### Textsuche
- Durchsucht Sender-Name & Beschreibung
- Echtzeit-Filterung
- Kombinierbar mit Genre/Land

### Sortierung
- Nach Plays (meistgespielt oben)
- Dann alphabetisch

---

## ➕ Sender einreichen (submit.php)

### User können Sender vorschlagen:

**Formular-Felder:**
- Sender-Name * (Pflicht)
- Genre * (Pflicht)
- Land (Optional)
- Stream-URL * (Pflicht - Direct Link!)
- Website (Optional)
- Dein Name * (Pflicht)
- Deine E-Mail * (Pflicht)
- **Captcha * (Rechenaufgabe)**

### Ablauf:
1. User füllt Formular aus
2. Captcha-Prüfung (z.B. "7 + 3 = ?")
3. Eintrag in `submissions` (Status: pending)
4. Success-Message
5. Admin prüft in Admin-Panel
6. Admin gibt frei → Sender wird live

---

## 👨‍💼 Admin-Bereich

### Login: `admin-login.php`
- Passwort aus Installation
- Keine Username nötig
- Session-basiert

### Admin-Panel: `admin.php`

**Dashboard:**
- 📊 Statistiken (Sender, Wartende, Plays)

**Sender hinzufügen:**
- Schnellformular
- Direkt freigeschaltet
- Alle Felder optional außer Name, Genre, URL

**Vorschläge verwalten:**
- Liste aller Pending-Submissions
- ✓ Freigeben-Button
- ✗ Löschen-Button
- Submitter-Info sichtbar

**Alle Sender:**
- Komplette Sender-Liste
- Sortiert nach Name
- Löschen-Button
- Play-Counter sichtbar

---

## 🔒 Captcha-System

### Funktionsweise:
```php
// Generieren (submit.php)
$num1 = rand(1, 10);
$num2 = rand(1, 10);
$_SESSION['captcha'] = $num1 + $num2;
// Anzeige: "7 + 3 = ?"

// Prüfen
if(intval($answer) === $_SESSION['captcha']) {
// Korrekt
}
```

### Vorteile:
- ✅ Kein Google reCAPTCHA nötig
- ✅ DSGVO-konform
- ✅ Einfach & effektiv
- ✅ Barrierefrei

---

## 🎨 Design & Farben

### Farbschema:
```css
Primärfarben:
- Dunkelviolett: #1e1b4b
- Lila: #7c3aed
- Pink: #ec4899
- Gold: #fbbf24

Hintergründe:
- Schwarz-Blau: #0a0a0a
- Grau-Lila: #1e293b

Akzente:
- Gradient: linear-gradient(135deg, #7c3aed, #ec4899)
- Glassmorphism: backdrop-filter: blur(10px)
```

### Responsive Design:
- Desktop: 320px Grid-Karten
- Mobile: Single Column
- Player-Bar: Flex-Wrap
- Touch-optimiert

---

## 🔗 Stream-URLs finden

### Wichtig:
**Nur Direct-Links funktionieren!**

### Format-Beispiele:
```
✅ https://stream.example.com/radio.mp3
✅ http://icecast.server.com:8000/stream
✅ https://radio.example.com/live.aac

❌ https://example.com (Website, kein Stream)
❌ https://youtube.com/... (kein Direct-Link)
```

### Unterstützte Formate:
- **MP3** - Am weitesten verbreitet
- **AAC** - Bessere Qualität
- **OGG** - Open Source
- **HLS** (.m3u8) - Streaming Protocol

### Quellen für Stream-URLs:

#### 1. Radio-Browser Database
**https://www.radio-browser.info**
- Kostenlose API
- 30.000+ Sender weltweit
- Direct-Links verfügbar
- JSON-API

#### 2. Sender-Website
- Rechtsklick → Seitenquelltext
- Suche nach: `.mp3`, `.aac`, `stream`, `icecast`
- Developer Tools (F12) → Network-Tab beim Abspielen

#### 3. TuneIn Directory
**https://tunein.com**
- Stream-Info im Seitenquelltext
- Browser-Plugin "Stream Detector"

#### 4. Shoutcast Directory
**https://directory.shoutcast.com**
- Genre-basierte Suche
- Stream-URLs direkt sichtbar

---

## 📊 Statistiken & Tracking

### Play-Counter:
```php
// Bei jedem Abspielen
UPDATE radio_stations
SET plays = plays + 1
WHERE id = ?
```

### Auswertungen (möglich):
- Meistgespielte Sender
- Beliebteste Genres
- Zeitliche Verläufe
- User-Präferenzen

---

## 🛠️ Anpassungen

### 1. Farben ändern
In jeder PHP-Datei im `<style>`-Block:
```css
/* Hauptfarbe ändern */
#7c3aed → deine Farbe
#ec4899 → deine Farbe
```

### 2. Player-Position
```css
/* Sticky Player (bleibt beim Scrollen) */
.player-bar {
position: sticky;
top: 0;
z-index: 1000;
}
```

### 3. Mehr Demo-Sender
In `install.php` → `$demoStations` Array erweitern

### 4. Automatische Freigabe
In `install.php` → Zeile 85:
```php
// Status: pending (Prüfung nötig)
status ENUM('pending','approved','rejected')

// Status: approved (Auto-Freigabe)
status ENUM('pending','approved','rejected') DEFAULT 'approved'
```

---

## 🔧 Erweiterte Features (Optional)

### 1. Favoriten-System
```sql
CREATE TABLE radio_favorites (
user_id INT,
station_id INT
);
```

### 2. Bewertungen
```sql
CREATE TABLE radio_ratings (
station_id INT,
rating INT,
ip_address VARCHAR(45)
);
```

### 3. Playlist-Funktion
```javascript
// Mehrere Sender in Warteschlange
const playlist = [station1, station2, ...];
// Auto-Play nächster Sender
```

### 4. Song-Metadata
```php
// Aktueller Song via API
// Icecast: /status-json.xsl
// Shoutcast: /stats?json=1
```

### 5. Schedule/Sendungsplan
```sql
CREATE TABLE radio_schedule (
station_id INT,
day_of_week INT,
time_start TIME,
show_name VARCHAR(255)
);
```

---

## 🐛 Troubleshooting

### Problem: Stream lädt nicht
**Ursache:** Stream-URL falsch oder offline
**Lösung:**
- URL im Browser direkt testen
- Anderen Stream versuchen
- Server-Logs prüfen

### Problem: Kein Ton
**Ursache:** Browser blockiert Autoplay
**Lösung:**
- User muss Play-Button klicken
- Autoplay funktioniert nur nach User-Interaktion

### Problem: Cross-Origin Error
**Ursache:** CORS-Policy des Streams
**Lösung:**
- Proxy-Script verwenden
- Oder Stream-Anbieter kontaktieren

### Problem: Captcha wird nicht angezeigt
**Ursache:** Session nicht gestartet
**Lösung:**
```php
// Oberste Zeile in submit.php
session_start();
```

---

## 📱 Browser-Kompatibilität

| Browser | Desktop | Mobile | Formate |
|---------|---------|--------|---------|
| **Chrome** | ✅ | ✅ | MP3, AAC, OGG |
| **Firefox** | ✅ | ✅ | MP3, AAC, OGG |
| **Safari** | ✅ | ✅ | MP3, AAC, HLS |
| **Edge** | ✅ | ✅ | MP3, AAC, OGG |
| **Opera** | ✅ | ✅ | MP3, AAC, OGG |

**HLS (.m3u8):**
- Safari: Native Unterstützung
- Andere: Benötigen HLS.js Library

---

## ⚡ Performance-Tipps

### 1. CDN für Bilder
```php
// Logo-URLs via CDN hosten
logo_url = 'https://cdn.example.com/logos/...'
```

### 2. Caching
```php
// Browser-Caching aktivieren
header('Cache-Control: public, max-age=3600');
```

### 3. Lazy Loading
```javascript
// Sender-Karten erst bei Sichtbarkeit laden
observer = new IntersectionObserver(...)
```

### 4. Database-Indizes
```sql
-- Bereits in install.php enthalten!
CREATE INDEX idx_genre ON radio_stations(genre);
CREATE INDEX idx_country ON radio_stations(country);
```

---

## 🔐 Sicherheit

### Implementiert:
- ✅ PDO Prepared Statements (SQL-Injection)
- ✅ htmlspecialchars() (XSS)
- ✅ Session-basierte Auth
- ✅ Password Hashing (Bcrypt)
- ✅ Captcha-Schutz
- ✅ Input-Validierung

### Empfehlungen:
- HTTPS verwenden (SSL-Zertifikat)
- Admin-Passwort regelmäßig ändern
- Backups erstellen
- Error-Logging aktivieren

---

## 📦 Backup & Migration

### Backup erstellen:
```bash
# Dateien
tar -czf webradio-backup.tar.gz webradio/

# Datenbank
mysqldump -u user -p webradio_db > backup.sql
```

### Restore:
```bash
# Dateien
tar -xzf webradio-backup.tar.gz

# Datenbank
mysql -u user -p webradio_db < backup.sql
```

### Migration auf neuen Server:
1. Backup erstellen (siehe oben)
2. Dateien auf neuen Server kopieren
3. Datenbank importieren
4. `config.php` anpassen (DB-Credentials)
5. Testen!

---

## 📄 Lizenz & Credits

### Verwendete Technologien:
- PHP 7.4+
- MySQL 5.7+
- HTML5 Audio API
- Vanilla JavaScript (kein jQuery!)
- CSS3 (Gradients, Flexbox, Grid)

### Demo-Streams:
Alle verwendeten Radio-Streams sind:
- Kostenlos verfügbar
- Legal streambar
- Von öffentlichen Quellen

### Credits:
- Design inspiriert von modernen Musik-Apps
- Stream-URLs von Radio-Browser.info
- Icons aus Unicode Emoji-Set

---

## 🤝 Support & Kontakt

### Bei Problemen:
1. README.md durchlesen
2. Troubleshooting-Sektion checken
3. PHP-Fehler-Log prüfen
4. Browser-Console öffnen (F12)

### Feature-Requests:
Ideen für neue Features? Gerne!

---

## 📈 Changelog

### Version 1.0 (Januar 2025)
- ✅ Initiale Version
- ✅ 10 Demo-Sender
- ✅ Admin-Panel
- ✅ User-Submissions
- ✅ Captcha-Schutz
- ✅ Filter & Suche
- ✅ Play-Counter

---

**Viel Erfolg mit deinem Web Radio Portal! 🎵**