smueller/HexaHost-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
62d0076799c3af01369e8464a725a3f234648d07
HexaHost-Frontend/README.md

9.1 KiB
Raw Blame History

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

Installation

  1. Repositories klonen

    git clone <frontend-repository-url> HexaHost-Frontend
git clone <backend-repository-url> HexaHost-Backend

  2. Backend-Dateien integrieren

    # 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

    # mail-config.php mit SMTP-Daten bearbeiten
nano config/mail-config.php

  4. Lokaler Development Server

    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

Der Quellcode bleibt auf dev, der veröffentlichte Stand liegt auf main (ohne Kommentare, obfuskiertes JS).

Voraussetzungen: Node.js 18+ (inkl. npm), PHP 8+ CLI, Git

# Windows
.\scripts\run-build.ps1
.\scripts\publish-to-main.ps1 -Push

# Linux / macOS
chmod +x scripts/*.sh
./scripts/run-build.sh
./scripts/publish-to-main.sh --push

Details: scripts/build/README.md

🔗 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.

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

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

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

Reference in New Issue View Git Blame Copy Permalink