258 lines
8.3 KiB
Markdown
258 lines
8.3 KiB
Markdown
# OmégaKube — Site Web
|
|
|
|
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
|
|
|
|
```
|
|
website/
|
|
├── 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, chemin-indépendant)
|
|
├── 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
|
|
│ └── index/
|
|
│ ├── hero.html
|
|
│ ├── apropos.html
|
|
│ └── services.html
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ ├── main.css # Styles globaux (thème dark/light, composants)
|
|
│ │ ├── 404.css # Styles page 404
|
|
│ │ └── legal.css # Styles pages légales
|
|
│ ├── js/
|
|
│ │ ├── main.js # ⭐ Config globale, thème, includes, social links
|
|
│ │ ├── home.js # Accueil : portfolio, team carousel, partners, easter egg
|
|
│ │ └── pages/
|
|
│ │ ├── realisations.js # Portfolio + modal projet + galerie images/vidéo
|
|
│ │ ├── 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, vidéos, stats, tech, social)
|
|
│ │ ├── team.json # ⭐ Membres de l'équipe
|
|
│ │ ├── partners.json # ⭐ Partenaires
|
|
│ │ ├── services.json # Détail des services et tarifs
|
|
│ │ └── faq.json # Questions / réponses FAQ
|
|
│ ├── images/
|
|
│ │ ├── projects/ # Images et vidéos des projets
|
|
│ │ │ ├── kuby/
|
|
│ │ │ ├── victorias-vice-1/ # Inclut TrailerOfficielVV1.mp4
|
|
│ │ │ ├── vicy/
|
|
│ │ │ ├── site-omega/
|
|
│ │ │ └── branding-omega-kube/
|
|
│ │ ├── team/ # Photos membres : {id_discord}.png ou .jpg
|
|
│ │ ├── partners/ # Logos partenaires — champ "logo" dans partners.json
|
|
│ │ ├── social/ # Icônes réseaux gaming (fortnite.svg, epicgames.svg)
|
|
│ │ └── favicon/
|
|
│ ├── fonts/ # OmegaLarge, OmegaSmall, Montserrat
|
|
│ └── php/
|
|
│ └── send_mail.php # Formulaire de contact (JSON POST)
|
|
```
|
|
|
|
---
|
|
|
|
## ⚙️ Configuration rapide
|
|
|
|
### 1. Réseaux sociaux — un seul endroit
|
|
|
|
Dans `assets/js/main.js`, modifier `window.OK_SOCIAL` :
|
|
|
|
```js
|
|
window.OK_SOCIAL = {
|
|
discord: 'https://discord.gg/FwvNkvu5dy',
|
|
fortnite: 'https://www.fortnite.com/@omega_kube_team',
|
|
epicgames: '', // laisser vide pour masquer le lien
|
|
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. Les entrées vides `''` sont masquées automatiquement.
|
|
|
|
Les icônes gaming (Fortnite, Epic Games) sont des SVG locaux dans `assets/images/social/` — ils s'adaptent automatiquement au thème dark/light.
|
|
|
|
---
|
|
|
|
### 2. Ajouter / modifier un projet
|
|
|
|
Éditer `assets/data/projects.json` :
|
|
|
|
```json
|
|
{
|
|
"id": 6,
|
|
"category": "bot",
|
|
"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 (avec bouton mute)
|
|
"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 fichiers dans `assets/images/projects/nom-du-projet/`. Les noms doivent correspondre exactement au champ `files`.
|
|
|
|
**Catégories valides** : `"bot"` | `"map"` | `"graphisme"`
|
|
|
|
---
|
|
|
|
### 3. Ajouter un membre de l'équipe
|
|
|
|
Éditer `assets/data/team.json`. Photo optionnelle : `assets/images/team/{id_discord}.png` ou `.jpg` (fallback automatique).
|
|
|
|
```json
|
|
{
|
|
"id": "123456789",
|
|
"name": "Pseudo",
|
|
"role": "Rôle",
|
|
"avatar": "P",
|
|
"bio": "...",
|
|
"stats": [
|
|
{ "value": "3", "label": "Ans d'exp." }
|
|
],
|
|
"skills": ["Skill 1", "Skill 2"],
|
|
"social": {
|
|
"discord": "",
|
|
"twitter": "",
|
|
"github": "",
|
|
"instagram": "",
|
|
"youtube": "",
|
|
"tiktok": ""
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 4. Ajouter un partenaire
|
|
|
|
Éditer `assets/data/partners.json`. Le champ `logo` doit pointer vers le fichier image avec la **bonne extension** (`.png` ou `.jpg`).
|
|
|
|
```json
|
|
{
|
|
"name": "nom-slug",
|
|
"displayName": "Nom Affiché",
|
|
"description": "Courte description (carousel)",
|
|
"longDesc": "Description complète (modal)",
|
|
"gradient": "linear-gradient(...)",
|
|
"logo": "assets/images/partners/nom-slug.png",
|
|
"since": "2025",
|
|
"services": ["Service rendu"],
|
|
"stats": [
|
|
{ "icon": "users", "value": "100+", "label": "Membres" }
|
|
],
|
|
"social": {
|
|
"discord": "",
|
|
"website": "",
|
|
"twitter": "",
|
|
"youtube": "",
|
|
"instagram": ""
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 5. FAQ
|
|
|
|
Éditer `assets/data/faq.json` :
|
|
|
|
```json
|
|
{
|
|
"id": "ma-categorie",
|
|
"icon": "help-circle",
|
|
"title": "Ma catégorie",
|
|
"questions": [
|
|
{ "q": "La question ?", "a": "La réponse." }
|
|
]
|
|
}
|
|
```
|
|
|
|
Les icônes sont issues de [Feather Icons](https://feathericons.com/).
|
|
|
|
---
|
|
|
|
## 🌐 Déploiement
|
|
|
|
- **Serveur** : PHP requis uniquement pour `404.php` et `send_mail.php`
|
|
- **Contact** : configurer l'adresse email destinataire 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`
|
|
- **WAMP local** : utiliser `http://localhost/nom-du-dossier/` — les chemins assets sont relatifs
|
|
|
|
---
|
|
|
|
## 🎨 Thème dark/light
|
|
|
|
Le site supporte deux thèmes via l'attribut `data-theme` sur `<html>` :
|
|
|
|
- `data-theme="dark"` (défaut)
|
|
- `data-theme="light"`
|
|
|
|
Toutes les couleurs sont des variables CSS définies dans `main.css`. Les textes sur images (cartes portfolio, bento projets phares) restent toujours blancs grâce à des gradients sombres en bas, que ce soit en dark ou light.
|
|
|
|
---
|
|
|
|
## 🥚 Easter Eggs
|
|
|
|
- **PC** : Konami Code `↑ ↑ ↓ ↓ ← → ← → B A`
|
|
- **Mobile** : 10 taps rapides sur le logo navbar ou footer
|
|
- **Page 404** : 10 taps sur le "404" → Game of Life de Conway
|
|
|
|
---
|
|
|
|
## 🛠️ Stack technique
|
|
|
|
| Technologie | Usage |
|
|
|---|---|
|
|
| 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 UI (CDN) |
|
|
| Simple Icons | Icônes réseaux sociaux gaming (SVG locaux) |
|
|
| Montserrat | Police secondaire |
|
|
| OmegaLarge / OmegaSmall | Polices custom OmégaKube |
|
|
|
|
---
|
|
|
|
**Version** : 1.6.0
|
|
**Dernière mise à jour** : Avril 2026
|
|
**Mainteneur** : KIRITO_KMA / L'équipe OmégaKube
|