# 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](https://github.com/theoneandonlymace/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 ``` #### `footer.php` HTML5-Footer mit: - Mehrspaltigem Footer-Layout - Produkt-Links - Rechtliche Links (Impressum, Datenschutz, AGB) - Cookie-Consent-Banner (DSGVO-konform) - Script-Einbindung **Verwendung:** ```php ``` #### `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 🚀