# 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 `` : - `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