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
│   └── python/
│       └── send_mail.py              # Formulaire de contact CGI (JSON POST)

⚙️ Configuration rapide

1. Réseaux sociaux — un seul endroit

Dans assets/js/main.js, modifier window.OK_SOCIAL :

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 :

{
  "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).

{
  "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).

{
  "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 :

{
  "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.

🌐 Déploiement

Serveur : PHP requis pour 404.php, Python CGI requis pour send_mail.py
Contact : configurer l'adresse email destinataire dans assets/python/send_mail.py (TO_EMAIL)
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 / Python	Page 404 (PHP), Formulaire de contact (Python CGI)
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

8.3 KiB Raw Blame History