website/README.md

# 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