HexaHost-Frontend/README.md

# HexaHost.de - Frontend

Eine moderne und umfangreiche Website für das Hosting-Unternehmen HexaHost.de aus Niederbayern.

> ℹ️ **Hinweis:** Dieses Projekt benötigt das [HexaHost-Backend](https://git.hexahost.dev/smueller/HexaHost-Backend) Repository für die vollständige Funktionalität. Das Backend enthält wiederverwendbare PHP-Templates, JavaScript-Module, CSS-Styles und Konfigurationsdateien.

## 🚀 Features

- **Moderne Glasmorphism-Optik** mit lila/violetten Farbschema
- **Responsive Design** für alle Geräte
- **Vollständige Produktpräsentation** für alle Hosting-Lösungen
- **Interaktive Kontaktformulare** mit E-Mail-Versand
- **SEO-optimiert** mit Meta-Tags, Sitemap und robots.txt
- **Accessibility-Features** für bessere Nutzbarkeit
- **Cookie-Consent-Banner** DSGVO-konform
- **Rechtliche Seiten** (Impressum, Datenschutz, AGB)

## 📦 Produkte

### Virtual Private Container (VPC)
- Effiziente LXC-Container auf Proxmox-Basis
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 4,99€/Monat

### Virtual Private Server (VPS)
- Vollwertige KVM-Virtualisierung 
- Alle Betriebssysteme unterstützt
- 4 verschiedene Pakete (Basic bis Enterprise)
- Ab 9,99€/Monat

### Mail Gateway
- Professioneller E-Mail-Schutz
- Spam-, Viren- und Phishing-Filter
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 2,99€/Monat

### Webhosting
- Klassisches Hosting mit PHP, MySQL & SSL
- WordPress-ready mit cPanel
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 1,99€/Monat

## 🛠️ Technologie-Stack

- **PHP 8.x** - Backend-Verarbeitung
- **HTML5** - Semantisches Markup
- **CSS3** - Moderne Styles mit Custom Properties
- **Vanilla JavaScript** - Keine Framework-Dependencies
- **Native PHP mail()** - E-Mail-Versand ohne externe Abhängigkeiten
- **Glassmorphism Design** - Moderne Glaseffekte
- **CSS Grid & Flexbox** - Responsive Layouts
- **Inter Font** - Moderne Typografie

## 📁 Projektstruktur

```
HexaHost-Frontend/
├── public/                         # Webroot
│   ├── index.php                   # Startseite
│   ├── vpc.php                     # Virtual Private Container
│   ├── vps.php                     # Virtual Private Server
│   ├── mail-gateway.php            # Mail Gateway
│   ├── webhosting.php              # Webhosting
│   ├── about.php                   # Über mich
│   ├── contact.php                 # Kontaktseite
│   ├── contact-handler.php         # Kontaktformular-Backend
│   ├── impressum.php               # Impressum
│   ├── datenschutz.php             # Datenschutzerklärung
│   ├── agb.php                     # Allgemeine Geschäftsbedingungen
│   ├── 404.php                     # Fehlerseite 404
│   ├── 500.php                     # Fehlerseite 500
│   ├── robots.txt                  # SEO Robots
│   ├── sitemap.xml                 # SEO Sitemap
│   ├── favicon.svg                 # Website Icon
│   ├── .htaccess                   # Apache Konfiguration
│   ├── config/                     # ⬅ vom Backend
│   │   ├── config.php              # Allgemeine Konfiguration
│   │   └── mail-config.php         # E-Mail-Konfiguration
│   ├── includes/                   # ⬅ vom Backend
│   │   ├── header.php              # Header-Template
│   │   ├── footer.php              # Footer-Template
│   │   └── functions.php           # Hilfsfunktionen
│   └── assets/                     # ⬅ vom Backend
│       ├── css/
│       │   └── style.css           # Hauptstyles
│       └── js/
│           ├── main.js             # Haupt-JavaScript
│           ├── contact.js          # Kontaktformular-Logik
│           └── cookie-consent.js   # Cookie-Banner
├── docs/                           # Dokumentation
│   ├── KONTAKTFORMULAR-STATUS.md
│   ├── README-EMAIL-SETUP.md
│   ├── README-OPTIMIZATION.md
│   └── README-STRUCTURE.md
├── scripts/
│   └── test-email.php              # E-Mail-Test-Script
├── .github/
│   └── ISSUE_TEMPLATE/             # GitHub Issue Templates
├── .gitignore                      # Git Ignore Rules
└── README.md                       # Diese Datei
```

> 📌 Die mit `⬅ vom Backend` markierten Ordner werden aus dem [HexaHost-Backend](../HexaHost-Backend) Repository kopiert.

## 🎨 Design-System

### Farben
- **Background**: `#0d0821` (Dunkelviolett/Navy)
- **Primary**: `#ff51f9` (Neonpink)
- **Accent 1**: `#a348ff` (Lila)
- **Accent 2**: `#3978ff` (Blau)

### Typografie
- **Logo Font**: Russo One
- **Slogan Font**: Source Sans Pro
- **Body Font**: Inter
- **Weights**: 300, 400, 500, 600, 700

### Effekte
- **Glassmorphism**: `backdrop-filter: blur(10px)`
- **Transitions**: `0.3s ease-in-out`
- **Border Radius**: `0.75rem - 1.5rem`
- **Neon Effects**: Neonpink und Lila-Gradienten

## 🚀 Installation & Verwendung

### Voraussetzungen
- PHP 8.0 oder höher
- Apache mit mod_rewrite (für .htaccess)
- [HexaHost-Backend](../HexaHost-Backend) Repository

### Installation

1. **Repositories klonen**
   ```bash
   git clone <frontend-repository-url> HexaHost-Frontend
   git clone <backend-repository-url> HexaHost-Backend
   ```

2. **Backend-Dateien integrieren**
   ```bash
   # Aus dem Projekt-Root-Verzeichnis
   cp -r HexaHost-Backend/assets/* HexaHost-Frontend/public/assets/
   cp -r HexaHost-Backend/config/* HexaHost-Frontend/public/config/
   cp -r HexaHost-Backend/includes/* HexaHost-Frontend/public/includes/
   ```

3. **Konfiguration anpassen**
   ```bash
   # mail-config.php mit SMTP-Daten bearbeiten
   nano config/mail-config.php
   ```

4. **Lokaler Development Server**
   ```bash
   php -S localhost:8000 -t public
   ```

5. **Website öffnen**
   ```
   http://localhost:8000
   ```

### Produktion
Für den Produktivbetrieb `public/` als Webroot konfigurieren.

### Production-Build & Veröffentlichung

| Branch | Zweck |
|--------|--------|
| **`dev`** | Entwicklung (lesbarer Code, Kommentare) |
| **`ci`** | Integration (du mergst `dev` hierher) |
| **`main`** | Release/Produktion (obfuskiert, gehashte Assets — nur per Pipeline) |

**Ablauf: `dev` → `ci` → `main`**

1. Auf **`dev`** entwickeln und pushen
2. **`dev` nach `ci` mergen** (manuell, z. B. in Gitea oder lokal)
3. **`ci` pushen** → startet `.gitea/workflows/obfuscate-main.yml`
4. Pipeline obfuskiert im Runner-Workspace und publiziert nach **`main`**

```powershell
# Nach fertigen Änderungen auf dev:
git checkout ci
git pull origin ci
git merge dev
git push origin ci
```

Bei jedem Push auf **`ci`**:

1. Checkout von `ci` im temporären Runner-Workspace
2. Obfuscation-Build (`scripts/obfuscate_release.py --hash-assets`)
3. Ergebnis nach `main` pushen (Bot-Commit mit `[skip ci]`)

**Nicht** `dev` oder `ci` direkt nach `main` mergen. Der Branch **`ci` bleibt lesbar** — Obfuscation wird nur nach `main` publiziert.

`ci`-Branch einmalig anlegen (falls noch nicht vorhanden): `git checkout -b ci dev && git push -u origin ci`

Der Build führt aus:

- Entfernen von Kommentaren (inkl. Block-Kommentaren) in PHP/JS/CSS
- Minify + Obfuscate für JavaScript
- Minify für CSS
- Kein Source-Map-Output
- Hashing von JS/CSS-Dateinamen + automatische Referenz-Anpassung

Lokal testen (nur in Kopie, nicht committen):

```bash
python scripts/obfuscate_release.py --root . --hash-assets
```

## 🔗 Backend-Integration

Das Backend-Repository enthält folgende wiederverwendbare Komponenten:

| Komponente | Pfad | Beschreibung |
|------------|------|--------------|
| **CSS** | `assets/css/style.css` | Haupt-Stylesheet mit Design-System |
| **JavaScript** | `assets/js/*.js` | Navigation, Kontaktformular, Cookie-Banner |
| **PHP-Templates** | `includes/*.php` | Header, Footer, Hilfsfunktionen |
| **Konfiguration** | `config/*.php` | SMTP, E-Mail, Sicherheit |

Detaillierte Informationen zu den Backend-Komponenten finden Sie in der [Backend-README](../HexaHost-Backend/README.md).

## 📧 E-Mail-Konfiguration

Die E-Mail-Funktionalität nutzt die native PHP-`mail()`-Funktion. In `public/config/mail-config.php` müssen mindestens Absender und Empfänger gesetzt werden:

```php
define('SMTP_FROM_EMAIL', 'kontakt@hexahost.de');
define('SMTP_TO_EMAIL', 'info@hexahost.de');
```

Siehe `docs/README-EMAIL-SETUP.md` für detaillierte Anweisungen.

## 📱 Responsive Breakpoints

- **Desktop**: > 768px
- **Tablet**: 768px - 480px
- **Mobile**: < 480px

## ✨ Features im Detail

### Navigation
- Sticky Header mit Glaseffekt
- Dropdown-Menü für Produkte
- Mobile Navigation Toggle
- Smooth Scrolling

### Produktseiten
- Detaillierte Paketvergleiche
- Technische Spezifikationen
- Anwendungsbereiche
- Call-to-Action Buttons

### Kontaktformular
- Server-seitige Validierung
- E-Mail-Versand via native PHP mail()
- CSRF-Schutz
- Auto-Fill basierend auf URL-Parametern
- FAQ-Sektion mit Accordion

### Rechtliche Seiten
- Vollständiges Impressum
- DSGVO-konforme Datenschutzerklärung
- Allgemeine Geschäftsbedingungen
- Cookie-Consent-Banner

### Fehlerseiten
- Individuelle 404-Seite
- Individuelle 500-Seite

## 🔧 Anpassungen

### Farben ändern
CSS Custom Properties in `:root` anpassen (in `assets/css/style.css` vom Backend):
```css
:root {
    --background-color: #0d0821;
    --primary-color: #ff51f9;
    --accent-color-1: #a348ff;
    --accent-color-2: #3978ff;
    /* ... weitere Farben */
}
```

### Inhalte anpassen
Texte und Preise direkt in den PHP-Dateien im `public/`-Verzeichnis ändern.

### Neue Pakete hinzufügen
Paket-Cards in den entsprechenden Produktseiten duplizieren und anpassen.

## 📈 SEO & Performance

- **Meta Tags** für alle Seiten
- **Structured Data** ready
- **Optimierte Bilder** (SVG Icons)
- **Lazy Loading** für Bilder
- **Minifizierte Assets** (optional)
- **robots.txt** und **sitemap.xml**

## 🌐 Browser-Unterstützung

- Chrome/Edge 88+
- Firefox 78+
- Safari 14+
- Mobile Browser (iOS Safari, Chrome Mobile)

## 📄 Lizenz

Alle Rechte vorbehalten HexaHost.de

## 🤝 Beitragen

Für Verbesserungsvorschläge oder Bug-Reports bitte ein Issue erstellen.

---

**HexaHost.de** - Zuverlässiges Hosting aus Niederbayern 🚀