HexaHost-Backend/README.md

# HexaHost.de - Backend

Shared Backend-Komponenten für die HexaHost.de Website. Dieses Repository enthält wiederverwendbare PHP-Templates, JavaScript-Module, CSS-Styles und Konfigurationsdateien.

> ⚠️ **Wichtig:** Dieses Repository ist abhängig vom [HexaHost-Frontend](../HexaHost-Frontend) und muss in dessen `public/`-Verzeichnis integriert werden, um zu funktionieren.

## 📦 Inhalt

```
HexaHost-Backend/
├── assets/
│   ├── css/
│   │   └── style.css           # Haupt-Stylesheet
│   └── js/
│       ├── main.js             # Haupt-JavaScript
│       ├── contact.js          # Kontaktformular-Logik
│       └── cookie-consent.js   # DSGVO-konformes Cookie-Banner
├── config/
│   ├── config.php              # SMTP & Debug-Konfiguration
│   └── mail-config.php         # E-Mail-Einstellungen
├── includes/
│   ├── header.php              # HTML-Header-Template
│   ├── footer.php              # HTML-Footer-Template
│   └── functions.php           # PHP-Hilfsfunktionen
├── LICENSE                     # LGPL-2.1 Lizenz
└── README.md                   # Diese Datei
```

## 🔗 Integration mit dem Frontend

Die Backend-Dateien müssen in das Frontend-Repository integriert werden:

```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/
```

### Zielstruktur im Frontend

```
HexaHost-Frontend/
└── public/
    ├── assets/
    │   ├── css/
    │   │   └── style.css       ← von Backend
    │   └── js/
    │       ├── main.js         ← von Backend
    │       ├── contact.js      ← von Backend
    │       └── cookie-consent.js ← von Backend
    ├── config/
    │   ├── config.php          ← von Backend
    │   └── mail-config.php     ← von Backend
    └── includes/
        ├── header.php          ← von Backend
        ├── footer.php          ← von Backend
        └── functions.php       ← von Backend
```

## 🛠️ Komponenten

### PHP-Templates (`includes/`)

#### `header.php`
HTML5-Header mit:
- Meta-Tags für SEO & Social Media
- Performance-Optimierungen (DNS Prefetch, Preconnect, Preload)
- Google Fonts (Inter, Russo One, Source Sans Pro)
- Responsive Navigation mit Dropdown-Menüs
- Aktive Seitenmarkierung

**Verwendung:**
```php
<?php
include 'includes/functions.php';
includeHeader(
    'Seitentitel',
    'Meta-Beschreibung',
    'current-page-id',
    ['assets/js/additional-script.js']
);
?>
```

#### `footer.php`
HTML5-Footer mit:
- Mehrspaltigem Footer-Layout
- Produkt-Links
- Rechtliche Links (Impressum, Datenschutz, AGB)
- Cookie-Consent-Banner (DSGVO-konform)
- Script-Einbindung

**Verwendung:**
```php
<?php includeFooter(); ?>
```

#### `functions.php`
PHP-Hilfsfunktionen:
- `includeHeader()` - Header mit Konfiguration einbinden
- `includeFooter()` - Footer einbinden
- `generateBreadcrumbs()` - Breadcrumb-Navigation generieren
- `generateCSRFToken()` - CSRF-Token für Formulare
- Sichere Session-Konfiguration

### JavaScript-Module (`assets/js/`)

#### `main.js`
Haupt-JavaScript mit:
- Mobile Navigation Toggle
- Smooth Scrolling
- Intersection Observer Animationen
- Parallax-Effekt für Hero-Sektion
- Glassmorphism Card-Effekte
- Toast-Notification-System
- Lazy Loading für Bilder
- FAQ-Accordion
- Dark Mode Support (vorbereitet)

**Globale API:**
```javascript
// Notification anzeigen
window.HexaHost.showNotification('Nachricht', 'success'); // 'success', 'error', 'info'
```

#### `contact.js`
Kontaktformular-Funktionalität:
- AJAX-Formularübermittlung
- Client-seitige Validierung
- Telefonnummer-Formatierung
- Auto-Fill via URL-Parameter (`?package=vpc-starter`)
- Accessibility-Verbesserungen

**URL-Parameter:**
```
contact.php?package=vpc-starter    → Vorbefüllte Anfrage für VPC Starter
contact.php?product=webhosting    → Allgemeine Webhosting-Anfrage
```

#### `cookie-consent.js`
DSGVO-konformes Cookie-Banner:
- Drei Consent-Stufen (Essential, Analytics, Marketing)
- Granulare Einstellungen
- Cookie-Speicherung (365 Tage)
- Custom Events für Third-Party-Integration

**Globale API:**
```javascript
// Consent zurücksetzen
window.CookieConsent.resetConsent();

// Event-Listener für Consent-Änderungen
window.addEventListener('cookieConsentUpdated', (e) => {
    console.log(e.detail); // { essential: true, analytics: false, marketing: false }
});
```

### Konfiguration (`config/`)

#### `config.php`
SMTP-Konfiguration mit:
- Server-Einstellungen (Host, Port, Verschlüsselung)
- Absender/Empfänger-Einstellungen
- Rate-Limiting & Spam-Schutz
- DNS-Konfiguration (SPF, DMARC)
- Debug-Modus

**Wichtige Einstellungen:**
```php
$smtp_config = [
    'smtp_host' => 'smtp.example.com',
    'smtp_port' => 587,
    'smtp_username' => 'user@example.com',
    'smtp_password' => 'password',
    'smtp_encryption' => 'tls',
    'from_email' => 'kontakt@hexahost.de',
    'to_email' => 'info@hexahost.de',
    'max_requests_per_hour' => 5,
];
```

#### `mail-config.php`
Erweiterte E-Mail-Konfiguration:
- CSRF-Schutz
- Rate-Limiting
- Spam-Schutz
- E-Mail-Validierung (Whitelist/Blacklist)
- Logging-Funktionen

**Konstanten:**
```php
SMTP_HOST, SMTP_PORT, SMTP_USERNAME, SMTP_PASSWORD
SMTP_FROM_EMAIL, SMTP_TO_EMAIL
ENABLE_CSRF_PROTECTION, ENABLE_RATE_LIMITING
MAX_REQUESTS_PER_HOUR, MAX_MESSAGE_LENGTH
```

## 🎨 CSS-Features

Das Stylesheet (`assets/css/style.css`) enthält:

### Design-System
- **Farben:** Dunkelviolett/Navy Background mit Neonpink-Akzenten
- **Typografie:** Inter (Body), Russo One (Logo), Source Sans Pro (Slogan)
- **Effekte:** Glassmorphism, Neon-Glows, Smooth Transitions

### CSS Custom Properties
```css
:root {
    --background-color: #0d0821;
    --primary-color: #ff51f9;
    --accent-color-1: #a348ff;
    --accent-color-2: #3978ff;
    --text-color: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
}
```

### Responsive Breakpoints
- Desktop: > 768px
- Tablet: 768px - 480px
- Mobile: < 480px

## 🔧 Konfiguration

### 1. SMTP-Einstellungen anpassen

Bearbeiten Sie `config/config.php` oder `config/mail-config.php`:

```php
// Gmail
'smtp_host' => 'smtp.gmail.com',
'smtp_port' => 587,

// Outlook
'smtp_host' => 'smtp-mail.outlook.com',
'smtp_port' => 587,

// Eigener Server
'smtp_host' => 'mail.ihre-domain.de',
'smtp_port' => 587,
```

### 2. Empfänger-Adresse ändern

```php
'to_email' => 'ihre-email@beispiel.de',
```

### 3. Debug-Modus aktivieren

```php
$debug_config = [
    'debug_mode' => true,
    'log_errors' => true,
];
```

## 🔒 Sicherheitsfeatures

- **CSRF-Schutz:** Automatische Token-Generierung für Formulare
- **Session-Sicherheit:** HttpOnly, Secure, SameSite Cookies
- **Rate-Limiting:** Schutz vor Spam (max. 10 Anfragen/Stunde)
- **Honeypot-Feld:** Bot-Erkennung
- **E-Mail-Validierung:** Format, Blacklist, optionale Whitelist
- **XSS-Schutz:** `htmlspecialchars()` für alle Ausgaben

## 🌿 Branch-Strategie

```
Branches:
├── main      → Produktions-Code (mit obfuscated dist/)
└── develop   → Entwicklungs-Code (lesbarer Source)
```

| Branch | Inhalt | Verwendung |
|--------|--------|------------|
| `main` | Lesbare Quellen + `dist/` Ordner | Für Produktion: Dateien aus `dist/` verwenden |
| `develop` | Nur lesbare Quellen + Build-System | Für Entwicklung |

### Workflow

```bash
# Entwicklung
git checkout develop
# ... Code ändern ...
npm run build              # dist/ neu generieren
git add .
git commit -m "feat: ..."

# Release
git checkout main
git merge develop
npm run build              # dist/ aktualisieren
git add dist/
git commit -m "build: Update production files"
```

## 🔨 Build-System

### Installation

```bash
npm install
```

### Build-Befehle

```bash
npm run build       # Alles bauen (JS + CSS + PHP)
npm run build:js    # Nur JavaScript obfuscieren
npm run build:css   # Nur CSS minifizieren
npm run clean       # dist/ Ordner löschen
```

### Ausgabe

Nach dem Build enthält der `dist/` Ordner:

```
dist/
├── assets/
│   ├── css/
│   │   └── style.css       # Minifiziert
│   └── js/
│       ├── main.js         # Obfusciert
│       ├── contact.js      # Obfusciert
│       └── cookie-consent.js # Obfusciert
├── config/
│   ├── config.php          # Kopiert
│   └── mail-config.php     # Kopiert
└── includes/
    ├── header.php          # Kopiert
    ├── footer.php          # Kopiert
    └── functions.php       # Kopiert
```

## 📋 Voraussetzungen

- **Node.js 18+** (für Build-System)
- PHP 8.0 oder höher
- PHP Extensions: `session`, `json`, `filter`
- Für E-Mail-Versand: PHPMailer (via Composer im Frontend)

## 📄 Lizenz

GNU Lesser General Public License v2.1 (LGPL-2.1)

---

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