ElyctraHub

# Introduction

ElyctraHub (anciennement NexusHub) est un portail web auto-hébergé écrit en PHP vanilla. Il sert de hub central pour accéder à tous les projets du développeur : jeux, portfolio, streaming privé, hébergement et contact.

L'interface adopte une esthétique dark cyber avec fond grille, effets aurora animés, et une palette centrée sur le cyan électrique #00D2FF. Aucun framework JS n'est requis côté client — tout repose sur du vanilla JavaScript.

Prérequis

# Architecture

Le projet suit une architecture MVC légère sans framework. Les pages PHP incluent directement config.php et icons.php, la logique métier est dans api/, l'administration dans admin/.

Structure des fichiers

Flux de données

Le client demande une page PHP → PHP lit la BDD via PDO → HTML généré → assets statiques chargés → JS vanilla gère les interactions sans rechargement.

# Flux requête contact
Browser ──POST──► /api/contact.php
         FormData: name, email, subject, message
         ↓
  PHP valide + insère dans contact_messages
         ↓
  JSON response: { "ok": true, "message": "..." }
         ↓
Browser affiche alerte success/errorFLUX

# Installation

git clone https://github.com/skykiller099/ELYCTRAHUB.git
cd ELYCTRAHUBSHELL

<?php
// Base de données
define('DB_HOST', 'localhost');
define('DB_NAME', 'elyctrahub');
define('DB_USER', 'ton_user');
define('DB_PASS', 'ton_mot_de_passe');

// Admin — généré par setup.php
define('ADMIN_PASSWORD_HASH', '$2y$12$...');PHP

# Configuration

Variables disponibles dans config.php

Génération du hash bcrypt

<?php
// Génère un hash bcrypt cost=12
$hash = password_hash('mon_mot_de_passe', PASSWORD_BCRYPT, ['cost' => 12]);
echo $hash; // Copie dans ADMIN_PASSWORD_HASHPHP

# Services

ElyctraHub expose 6 services configurables via le panel admin ou directement en base de données.

Statuts possibles

Les statuts sont modifiables en temps réel depuis le panel admin sans rechargement de page (AJAX).

# GameVault

GameVault héberge des jeux créés de zéro. Les jeux sont servis via une URL dédiée (games.example.com par défaut, configurable en admin).

Configuration

# Portfolio

Stack exposée

# ElyctraStream

# NexusCloud

# Docs

Ce service pointe vers la documentation de l'écosystème. URL configurable depuis le panel admin.

# Contact

Le formulaire de contact utilise un endpoint PHP AJAX. Aucun service tiers d'emailing n'est nécessaire — les messages sont stockés en base de données.

Champs du formulaire

# API REST

ElyctraHub expose deux familles d'endpoints : les endpoints publics pour l'interaction utilisateur, et les endpoints admin (authentifiés par session).

Endpoints publics

// Succès
{
  "ok": true,
  "message": "Message envoyé avec succès !"
}

// Erreur
{
  "ok": false,
  "message": "Tous les champs sont requis."
}JSON

Endpoints admin (session requise)

Format de réponse admin générique

{
  "ok": true | false,
  "message": "Description de l'opération"
}JSON

# Panel Admin

Le panel admin est accessible via /admin/. Il est protégé par une authentification PHP basée sur bcrypt + sessions serveur.

Authentification

Le middleware auth.php doit être inclus en tête de chaque page admin :

<?php
require_once __DIR__ . '/auth.php';
// auth.php redirige vers login.php si pas de session validePHP

Fonctionnalités du dashboard

• Modifier le statut de chaque service (online / maintenance / down / private) — mise à jour AJAX sans rechargement
• Modifier l'URL d'un service directement depuis le tableau — sauvegarde automatique
• Ajouter une note admin sur un service (visible uniquement en dashboard)
• Consulter les messages de contact avec indicateur "non lu"
• Marquer les messages comme lus au clic

Toast de notification

Toute action admin déclenche un toast bas-droite via la fonction showToast(msg, type) définie dans app.js :

showToast('✓ Statut mis à jour', 'success');
showToast('✗ Erreur réseau', 'error');JS

Sessions admin

Les sessions sont stockées dans la table admin_sessions. La déconnexion via /admin/logout.php supprime la ligne en BDD et détruit la session PHP.

# Design System

L'interface repose sur un système de tokens CSS entièrement personnalisable via les CSS variables définies dans :root.

Palette de couleurs

Typographie

Effets de fond

Deux effets se superposent sur fond #080b10 :

• Aurora orbs — deux sphères floues animées (cyan + violet) avec filter: blur(120px)
• Grid background — grille de lignes rgba(0,210,255,0.03) en 40×40px

/* Aurora — structure HTML requise */
<div class="aurora">
  <div class="aurora-orb"></div>
  <div class="aurora-orb"></div>
</div>
<div class="grid-bg"></div>HTML

Composant icon()

La fonction PHP icon($name, $attrs = '') définie dans icons.php retourne des SVG inline depuis la bibliothèque Feather Icons :

<?php
// Usage simple
echo icon('mail');

// Avec attributs personnalisés
echo icon('mail', 'width="18" height="18" stroke-width="2"');
?>PHP

Animations JavaScript

Utilisation du terminal hero

// Les lignes tapées dans l'animation hero :
const lines = [
  '$ elyctra --status',
  '> All systems operational',
  '> 6 services running',
  '> uptime: 99.98%',
  '_'
];JS

# Base de données

3 tables MySQL créées par setup.php :

Table services

CREATE TABLE services (
  id         INT AUTO_INCREMENT PRIMARY KEY,
  `key`      VARCHAR(50)  UNIQUE NOT NULL,  -- clé identifiant unique
  label      VARCHAR(100) NOT NULL,          -- nom affiché
  `desc`     TEXT,                              -- description courte
  url        VARCHAR(500),                      -- lien du service
  icon       VARCHAR(50),                       -- nom icône Feather
  status     ENUM('online','maintenance','down','private')
                    DEFAULT 'online',
  `order`    INT DEFAULT 0,                    -- ordre d'affichage
  note       TEXT,                              -- note admin (privée)
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
               ON UPDATE CURRENT_TIMESTAMP
);SQL

Table admin_sessions

CREATE TABLE admin_sessions (
  id         VARCHAR(128) PRIMARY KEY,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);SQL

Table contact_messages

CREATE TABLE contact_messages (
  id         INT AUTO_INCREMENT PRIMARY KEY,
  name       VARCHAR(200),
  email      VARCHAR(200),
  subject    VARCHAR(300),
  message    TEXT,
  read_at    DATETIME DEFAULT NULL,  -- NULL = non lu
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);SQL

# Déploiement

Apache (recommandé)

Le fichier .htaccess inclus gère les redirections. Active mod_rewrite :

a2enmod rewrite
systemctl restart apache2SHELL

Nginx

server {
  listen 443 ssl;
  server_name elyctrahub.example.com;
  root /var/www/ELYCTRAHUB;
  index index.php;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
    fastcgi_pass unix:/run/php/php8.1-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    include fastcgi_params;
  }

  # Bloquer l'accès à config.php
  location ~ ^/config\.php$ { deny all; }
  location ~ ^/setup\.php$  { deny all; }
}NGINX

Variables d'environnement (optionnel)

Pour éviter de mettre les credentials en clair dans config.php, utilise $_ENV via .env + une bibliothèque comme vlucas/phpdotenv :

define('DB_PASS', $_ENV['DB_PASS'] ?? 'fallback');PHP

# Sécurité

Checklist sécurité

# Changelog