HexaHost-Web-Prod/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 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                     # BSL-1.1 Lizenz
└── README.md                   # Diese Datei

🔗 Integration mit dem Frontend

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

# Vom main Branch die Produktionsdateien kopieren
cd HexaHost-Backend
git checkout main
cp -r assets config includes ../HexaHost-Frontend/public/
git checkout develop

Oder mit einem Befehl:

# Aus dem Projekt-Root-Verzeichnis
cd HexaHost-Backend && git checkout main && cp -r assets config includes ../HexaHost-Frontend/public/ && git checkout develop

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
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 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:

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

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

$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:

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

: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:

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

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

3. Debug-Modus aktivieren

$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 (optimierte Dateien direkt im Root)
└── develop   → Entwicklungs-Code (lesbarer Source + Build-System)

Branch	Inhalt	Verwendung
main	Optimierte assets/, config/, includes/ im Root	Für Produktion: direkt kopieren
develop	Lesbare Quellen + dist/ Build-Output	Für Entwicklung

Struktur im main Branch

HexaHost-Backend/ (main)
├── assets/           ← Minifiziertes CSS, obfusciertes JS
│   ├── css/
│   └── js/
├── config/           ← PHP-Konfiguration
├── includes/         ← PHP-Templates
├── README.md
└── LICENSE

Workflow

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

# Release (automatisch mit deploy script)
npm run deploy             # Build + Copy to main + Push

Manueller Release

git checkout develop
npm run build
git add dist/ && git commit -m "build: ..."
git checkout main
git checkout develop -- dist/
# Dateien von dist/ ins Root verschieben
mv dist/assets dist/config dist/includes .
rm -rf dist/
git add -A && git commit -m "deploy: Update"
git push origin main
git checkout develop

🔨 Build-System

Installation

npm install

Build-Befehle

npm run build       # Alles bauen (JS + CSS + PHP)
npm run build:js    # Nur JavaScript obfuscieren
npm run build:css   # Nur CSS minifizieren
npm run deploy      # Build + Deploy zu main Branch
npm run clean       # dist/ Ordner löschen

Build-Ausgabe (dist/)

Nach dem Build enthält der dist/ Ordner im develop Branch:

dist/
├── assets/
│   ├── css/
│   │   └── style.css       # Minifiziert (-25%)
│   └── js/
│       ├── main.js         # Obfusciert (Code-Schutz)
│       ├── 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

Deploy-Prozess

Das npm run deploy Script:

1. Prüft ob du auf develop bist
2. Führt npm run build aus
3. Wechselt zu main
4. Kopiert dist/ Inhalte direkt ins Root
5. Committed und pusht zu origin/main
6. Wechselt zurück zu develop

📋 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

Dieses Projekt ist unter der Business Source License 1.1 (BSL) lizenziert.

Was bedeutet das?

Erlaubt	Nicht erlaubt (ohne kommerzielle Lizenz)
✅ Code ansehen & lernen	❌ Kommerzieller Einsatz
✅ Privater, nicht-kommerzieller Gebrauch	❌ Nutzung für SaaS/Hosting-Dienste
✅ Modifikationen für persönliche Zwecke	❌ Unternehmensnutzung
✅ Akademische/Bildungszwecke	❌ Weiterverkauf oder Sublizenzierung

Änderungsdatum: Am 16. Januar 2030 wird der Code automatisch unter der GPL v3 verfügbar.

Kommerzielle Lizenz: Für kommerzielle Nutzung kontaktieren Sie bitte kontakt@hexahost.de

Siehe LICENSE für den vollständigen Lizenztext.

---

HexaHost.de - Zuverlässiges Hosting aus Niederbayern 🚀