all updates + fix bug
This commit is contained in:
parent
78dc2e6e7f
commit
f17ca2527c
44 changed files with 1087 additions and 521 deletions
477
README.md
477
README.md
|
|
@ -1,291 +1,222 @@
|
|||
# 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
|
||||
Site vitrine officiel d'OmégaKube — plateforme de création d'expériences Role Play immersives : bots Discord personnalisés, maps Fortnite UEFN, graphisme et consulting.
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Architecture du projet
|
||||
## 🏗️ Architecture
|
||||
|
||||
```
|
||||
website/
|
||||
├── index.html # Page d'accueil principale
|
||||
├── assets/ # Ressources statiques
|
||||
├── index.html # Page d'accueil
|
||||
├── .htaccess # Config Apache (404, redirections)
|
||||
├── pages/
|
||||
│ ├── services.html # Nos services
|
||||
│ ├── realisations.html # Portfolio complet
|
||||
│ ├── faq.html # Questions fréquentes
|
||||
│ ├── mentions-legales.html
|
||||
│ ├── cgv.html
|
||||
│ └── 404.php # Page 404 (CSS/JS inline, fonctionne depuis n'importe quel chemin)
|
||||
├── components/
|
||||
│ ├── header.html # Navbar (data-include)
|
||||
│ ├── footer.html # Footer + réseaux sociaux (data-include)
|
||||
│ ├── background.html # Fond géométrique animé
|
||||
│ ├── contact.html # Formulaire de contact réutilisable
|
||||
│ └── favicons.html
|
||||
├── assets/
|
||||
│ ├── css/
|
||||
│ │ └── main.css # Feuille de styles globale (thème, animations, layout)
|
||||
│ │ ├── main.css # Styles globaux (thème dark/light, composants)
|
||||
│ │ ├── 404.css # Styles page 404
|
||||
│ │ └── legal.css # Styles pages légales
|
||||
│ ├── 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
|
||||
│ │ ├── main.js # Script partagé : thème, includes, social links, feather
|
||||
│ │ ├── home.js # Accueil : portfolio, team carousel, partners, easter egg
|
||||
│ │ └── pages/
|
||||
│ │ ├── realisations.js # Portfolio + modal projet + galerie
|
||||
│ │ ├── services.js # Onglets services
|
||||
│ │ ├── services-process.js # Animation timeline processus
|
||||
│ │ ├── legal.js # Pages légales
|
||||
│ │ └── 404.js # Easter egg page 404 (Game of Life)
|
||||
│ ├── data/
|
||||
│ │ ├── projects.json # ⭐ Projets (images, stats, tech, social)
|
||||
│ │ ├── team.json # ⭐ Membres de l'équipe
|
||||
│ │ ├── partners.json # ⭐ Partenaires
|
||||
│ │ ├── services.json # Détail des services
|
||||
│ │ └── faq.json # Questions / réponses FAQ
|
||||
│ ├── images/
|
||||
│ │ ├── projects/ # Images des projets
|
||||
│ │ │ ├── kuby/ # imgk-1.png, ...
|
||||
│ │ │ ├── victorias-vice-1/ # imgvv1-1.jpg, ...
|
||||
│ │ │ ├── vicy/
|
||||
│ │ │ ├── site-omega/
|
||||
│ │ │ └── branding-omega-kube/
|
||||
│ │ ├── team/ # Photos membres : {id_discord}.png
|
||||
│ │ ├── partners/ # Logos partenaires : {name}.png
|
||||
│ │ └── favicon/
|
||||
│ ├── fonts/ # OmegaLarge, OmegaSmall, Montserrat
|
||||
│ └── php/
|
||||
│ └── send_mail.php # Formulaire de contact (JSON POST)
|
||||
```
|
||||
|
||||
### Système de composants
|
||||
|
||||
Le projet utilise un **système de composants custom** basé sur `data-include`:
|
||||
|
||||
```html
|
||||
<!-- 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
|
||||
## ⚙️ Configuration rapide
|
||||
|
||||
### 1. Réseaux sociaux — un seul endroit
|
||||
|
||||
Dans `assets/js/main.js`, modifier l'objet `window.OK_SOCIAL` :
|
||||
|
||||
```js
|
||||
window.OK_SOCIAL = {
|
||||
discord: 'https://discord.gg/FwvNkvu5dy',
|
||||
fortnite: 'https://www.fortnite.com/@omega_kube_team'
|
||||
twitter: 'https://x.com/Omegakube',
|
||||
instagram: 'https://www.instagram.com/omegakube/',
|
||||
youtube: 'https://www.youtube.com/@OmegaKube',
|
||||
tiktok: 'https://www.tiktok.com/@omegakube',
|
||||
facebook: '',
|
||||
bluesky: '',
|
||||
email: 'contact@omegakube.fr'
|
||||
};
|
||||
```
|
||||
|
||||
Tous les liens du site (footer, contact, modals) se mettent à jour automatiquement.
|
||||
|
||||
---
|
||||
|
||||
### 2. Ajouter / modifier un projet
|
||||
|
||||
Éditer `assets/data/projects.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 6,
|
||||
"category": "bot", // "bot" | "map" | "graphisme"
|
||||
"title": "Nom du projet",
|
||||
"desc": "Description complète...",
|
||||
"gradient": "linear-gradient(135deg, #5E2040, #8b3a62)",
|
||||
"year": "2025",
|
||||
"duration": "2 mois",
|
||||
"images": "assets/images/projects/nom-du-projet/",
|
||||
"files": [
|
||||
"trailer.mp4", // vidéo locale
|
||||
"https://youtube.com/watch?v=VIDEO_ID", // URL YouTube complète
|
||||
"yt:VIDEO_ID", // shortcode YouTube
|
||||
"img-1.png",
|
||||
"img-2.jpg"
|
||||
],
|
||||
"features": ["Feature 1", "Feature 2"],
|
||||
"tech": [
|
||||
{ "name": "Python", "icon": "code" }
|
||||
],
|
||||
"stats": [
|
||||
{ "icon": "users", "value": "500+", "label": "Utilisateurs" }
|
||||
],
|
||||
"social": {
|
||||
"discord": "https://discord.gg/...",
|
||||
"twitter": "",
|
||||
"instagram": ""
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Déposer les images dans `assets/images/projects/nom-du-projet/`.
|
||||
|
||||
---
|
||||
|
||||
### 3. Ajouter un membre de l'équipe
|
||||
|
||||
Éditer `assets/data/team.json`. Photo optionnelle : `assets/images/team/{id_discord}.png`.
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "123456789", // ID Discord = nom du fichier photo
|
||||
"name": "Pseudo",
|
||||
"role": "Rôle",
|
||||
"avatar": "P", // Lettre fallback si pas de photo
|
||||
"bio": "...",
|
||||
"stats": [...],
|
||||
"skills": ["Skill 1"],
|
||||
"social": {
|
||||
"discord": "",
|
||||
"twitter": "",
|
||||
"github": ""
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Ajouter un partenaire
|
||||
|
||||
Éditer `assets/data/partners.json`. Logo optionnel : `assets/images/partners/{name}.png`.
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "nom-slug", // = nom du fichier logo
|
||||
"displayName": "Nom Affiché",
|
||||
"description": "Courte description",
|
||||
"longDesc": "Description complète pour la modal",
|
||||
"gradient": "linear-gradient(...)",
|
||||
"since": "2025",
|
||||
"services": ["Service rendu"],
|
||||
"stats": [
|
||||
{ "icon": "users", "value": "100+", "label": "Membres" }
|
||||
],
|
||||
"social": {
|
||||
"discord": "",
|
||||
"website": "",
|
||||
"twitter": ""
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. FAQ
|
||||
|
||||
Éditer `assets/data/faq.json` — ajouter des catégories ou questions :
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "ma-categorie",
|
||||
"icon": "help-circle", // icône Feather Icons
|
||||
"title": "Ma catégorie",
|
||||
"questions": [
|
||||
{ "q": "La question ?", "a": "La réponse." }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Déploiement
|
||||
|
||||
- **Serveur** : PHP requis uniquement pour `404.php` et `send_mail.php`
|
||||
- **Contact** : configurer l'adresse email dans `assets/php/send_mail.php` (`$to`)
|
||||
- **Apache** : le `.htaccess` gère la 404 et désactive le listing de dossiers
|
||||
- **Thème** : dark par défaut, toggle persisté en `localStorage`
|
||||
|
||||
---
|
||||
|
||||
## 🥚 Easter Eggs
|
||||
|
||||
- **PC** : taper le Konami Code `↑ ↑ ↓ ↓ ← → ← → B A`
|
||||
- **Mobile** : 10 taps rapides sur le logo navbar ou le logo footer
|
||||
- **Page 404** : 10 taps sur le "404" → Game of Life de Conway
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Stack technique
|
||||
|
||||
| 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**
|
||||
```bash
|
||||
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):**
|
||||
```bash
|
||||
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:
|
||||
|
||||
```css
|
||||
/* 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/`:
|
||||
```bash
|
||||
pages/ma-page.html
|
||||
```
|
||||
|
||||
2. **Inclure les composants** (header, footer):
|
||||
```html
|
||||
<div data-include="components/header.html"></div>
|
||||
<main>
|
||||
<!-- Contenu -->
|
||||
</main>
|
||||
<div data-include="components/footer.html"></div>
|
||||
```
|
||||
|
||||
3. **Ajouter le lien** dans le header:
|
||||
```html
|
||||
<!-- 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/`:
|
||||
```bash
|
||||
components/mon-composant.html
|
||||
```
|
||||
|
||||
2. **L'inclure** n'importe où:
|
||||
```html
|
||||
<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:
|
||||
```html
|
||||
<!-- 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
|
||||
<?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](https://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
|
||||
| HTML5 / CSS3 | Structure et styles, thème dark/light |
|
||||
| JavaScript ES6+ | Logique, composants, données JSON |
|
||||
| PHP | Formulaire de contact, page 404 |
|
||||
| Feather Icons | Icônes (CDN) |
|
||||
| Montserrat | Police secondaire |
|
||||
| OmegaLarge / OmegaSmall | Polices custom OmégaKube |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -305,6 +236,6 @@ Pour contribuer au projet:
|
|||
Consulter [pages/mentions-legales.html](pages/mentions-legales.html) et [pages/cgv.html](pages/cgv.html).
|
||||
|
||||
---
|
||||
**Version du site web**: 1.5.1.4
|
||||
**Dernière mise à jour**: Mars 2026
|
||||
**Version du site web**: 1.5.2.16
|
||||
**Dernière mise à jour**: Avril 2026
|
||||
**Mainteneur**: KIRITO_KMA / L'équipe OmégaKube
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue