OmégaKube — Site Web

Site vitrine officiel d'OmégaKube — plateforme de création d'expériences Role Play immersives avec bots Discord personnalisés et maps Fortnite.

📋 Vue d'ensemble du projet

Le projet OmégaKube Website est un site web moderne et responsive présentant les services de l'entreprise. Il s'agit d'une application web statique basée sur HTML, CSS et JavaScript vanilla, avec un système de composants réutilisables.

Services présentés

• Bots Discord personnalisés — Création de bots RP avancés
• Maps Fortnite immersives — Design d'expériences gaming uniques
• Expériences RP surMesure — Solutions complètes pour communautés gaming

---

🏗️ Architecture du projet

website/
├── index.html                 # Page d'accueil principale
├── assets/                    # Ressources statiques
│   ├── css/
│   │   └── main.css          # Feuille de styles globale (thème, animations, layout)
│   ├── js/
│   │   ├── main.js           # Script principal (chargement, thème, composants)
│   │   ├── home.js           # Logique spécifique à la page d'accueil
│   │   └── pages/            # Scripts pour pages spécifiques
│   ├── images/               # Images et assets visuels
│   ├── fonts/                # Polices personnalisées (OmegaLarge, OmegaSmall)
│   ├── data/                 # Données JSON (services, projets, etc.)
│   └── php/                  # Scripts PHP backend (formulaires, envois email)
├── components/               # Composants réutilisables (système d'include)
│   ├── header.html           # Navigation + logo
│   ├── footer.html           # Pied de page
│   ├── background.html       # Animation de fond géométrique
│   ├── favicons.html         # Favicon et meta tags
│   ├── index/                # Composants spécifiques à l'accueil
│   │   └── ... (hero, about, services, contact)
│   └── services/             # Composants de la page services
├── pages/                    # Pages du site
│   ├── services.html         # Détail des services
│   ├── realisations.html     # Portfolio/réalisations
│   ├── cgv.html              # Conditions Générales de Vente
│   ├── mentions-legales.html # Mentions légales
│   ├── 404.php               # Page erreur 404
│   └── test*.html            # Pages de test
├── .htaccess                 # Configuration serveur Apache
├── .git/                     # Versionning Git
└── README.md                 # Ce fichier

Système de composants

Le projet utilise un système de composants custom basé sur data-include:

<!-- Incluye un composant HTML -->
<div data-include="components/header.html"></div>
<!-- Se charge dynamiquement via JavaScript -->

Avantages:

• Pas de dépendance Build (HTML pur)
• Réutilisabilité des composants
• Maintenabilité accrue

---

🎨 Technologie & Stack

Technologie	Usage
HTML5	Structure sémantique
CSS3	Styling, animations, variables CSS
JavaScript (Vanilla)	Interactivité, système de composants
Feather Icons	Bibliothèque d'icônes légères
PHP	Backend pour formulaires/emails
Apache HTTP Server	Serveur web
Git	Contrôle de version

Système de thème

Design dark-first avec toggle light/dark:

• CSS Custom Properties pour les couleurs
• Thème stoké en data-theme sur <html>
• Variables principales:
  • --bg-deep, --bg-secondary, --bg-tertiary
  • --accent-primary, --accent-secondary
  • Colors du thème changent automatiquement

Polices personnalisées

• OmegaLarge — Titres et éléments grands
• OmegaSmall — Textes courants
• Montserrat-Bold et Montserrat-BoldItalic/ — Polices par defaut pour le moment
• Localisées dans assets/fonts/

---

🚀 Setup & Installation

Prérequis

• Serveur web (Apache, Nginx, PHP 7.4+. Ou tout simplement Wamp pour Windows ou Lamp pour Linux)
• Git pour le versioning
• Navigateur moderne (Chrome, Firefox, Safari, Edge)
• Aucune dépendance externe à installer

Installation locale

1. Cloner le projet

cd e:\votre _repertoire_de_dev
git clone https://gitlab.com/Omega_Kube/website.git
cd website

2. Configurer le serveur local

Option A - Avec PHP intégré (développement rapide):

php -S localhost:8000
# Accédez à http://localhost:8000

Option B - Avec Apache:

1. Placer le dossier dans votre htdocs ou www
2. Configurer le VirtualHost si nécessaire
3. S'assurer que le fichier .htaccess est présent et actif

Option C - Avec un serveur Live Server (VS Code):

• Installer l'extension "Live Server"
• Clic-droit → "Open with Live Server"

Option D - Démarrer le serveur Wamp ou Lamp:

• Placer le dossier dans votre www
• Crée un alias vers votre dossier de programation ou le déplacer dans votre www

3. Tester le projet

• Ouvrir http://localhost:8000 (ou votre serveur)
• Vérifier que tous les composants se chargent
• Tester le toggle dark/light
• Vérifier les liens de navigation

---

📝 Guide de développement

Structure des fichiers CSS

assets/css/main.css — Point d'entrée unique:

/* Variables & Thèmes */
:root { --bg-deep: #1a0f1f; ... }

/* Layout & Composants */
.hero { }
.about { }
.btn { }
/* ... */

/* Animations & Responsive */
@media (max-width: 768px) { }

Ajouter une nouvelle page

1. Créer le fichier HTML dans pages/:

pages/ma-page.html

2. Inclure les composants (header, footer):

<div data-include="components/header.html"></div>
<main>
  <!-- Contenu -->
</main>
<div data-include="components/footer.html"></div>

3. Ajouter le lien dans le header:

<!-- components/header.html -->
<li><a href="pages/ma-page.html">Ma Page</a></li>

4. Si JS nécessaire, créer assets/js/pages/ma-page.js

Ajouter un composant

1. Créer le fichier dans components/:

components/mon-composant.html

2. L'inclure n'importe où:

<div data-include="components/mon-composant.html"></div>

Modifier les styles globaux

• Couleurs → Modifier les variables CSS dans assets/css/main.css (section :root)
• Polices → Uploader dans assets/fonts/, puis ajouter @font-face
• Animations → Ajouter dans assets/css/main.css (respect du système de thème)

Intégrer le backend PHP

Exemple: Formulaire de contact

1. Créer le formulaire dans un composant:

<!-- components/contact-form.html -->
<form method="POST" action="assets/php/send-message.php">
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Envoyer</button>
</form>

2. Créer le script PHP (assets/php/send-message.php):

<?php
$to = "info@omegakube.com";
$subject = $_POST['subject'] ?? "Message OmégaKube";
$message = $_POST['message'];
$headers = "From: " . $_POST['email'];

if (mail($to, $subject, $message, $headers)) {
    echo "Message envoyé !";
} else {
    echo "Erreur lors de l'envoi";
}
?>

---

🔧 Maintenance & Dépannage

Le site ne charge pas les composants

Vérifications:

• Le fichier assets/js/main.js contient le code d'inclusion
• Les chemins dans data-include sont corrects (relatifs à la racine)
• Les fichiers HTML existent et n'ont pas d'erreur de syntaxe

Les styles ne s'appliquent pas

• Vérifier que assets/css/main.css est lié dans le <head>
• Rafraîchir le cache du navigateur (Ctrl+Shift+R ou Ctrl+F5)
• Vérifier les media-queries pour le responsive

Les icônes Feather ne s'affichent pas

• S'assurer que la CDN Feather Icons est incluse
• Vérifier les noms d'icônes sur feathericons.com

Le toggle dark/light ne fonctionne pas

• Vérifier que home.js est chargé
• S'assurer que les variables CSS sont correctement définies
• Vérifier la balise <html data-theme="dark"> ou <html data-theme="light">

---

📋 Checklist pour nouveaux développeurs

Avant de commencer:

• Cloner le projet en local
• Lancer un serveur local (PHP , Live Server ou Wamp/Lamp)
• Vérifier que le site s'affiche correctement
• Consulter la structure des fichiers
• Comprendre le système de composants data-include
• Tester le dark/light mode
• Vérifier les liens de navigation

---

🔗 Ressources utiles

• Feather Icons: https://feathericons.com
• CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
• Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
• Git Guide: https://git-scm.com/doc

---

👥 Contribution

Pour contribuer au projet:

1. Créer une branche feature (git checkout -b feature/xyz)
2. Faire vos modifications
3. Commiter avec des messages clairs (git commit -m "Add xyz feature")
4. Pusher et créer une Pull Request

---

⚖️ License & Mentions légales

Consulter pages/mentions-legales.html et pages/cgv.html.

---

Version du site web: 1.5.1.4 Dernière mise à jour: Mars 2026 Mainteneur: KIRITO_KMA / L'équipe OmégaKube