update last version of the website
This commit is contained in:
commit
abc54697fd
131 changed files with 11253 additions and 0 deletions
258
README.md
Normal file
258
README.md
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
# 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` :
|
||||
|
||||
```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 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue