Ajouts du readme pour colaboration sur le projet
This commit is contained in:
parent
9325ace066
commit
ede838d39b
2 changed files with 310 additions and 1 deletions
309
README.md
Normal file
309
README.md
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
# OmégaKube — Site Web
|
||||
|
||||
Site vitrine officiel d'OmégaKube — plateforme de création d'expériences Role Play immersives avec bots Discord personnalisés et maps Fortnite.
|
||||
|
||||
## 📋 Vue d'ensemble du projet
|
||||
|
||||
Le projet **OmégaKube Website** est un site web moderne et responsive présentant les services de l'entreprise. Il s'agit d'une application web statique basée sur HTML, CSS et JavaScript vanilla, avec un système de composants réutilisables.
|
||||
|
||||
### Services présentés
|
||||
- **Bots Discord personnalisés** — Création de bots RP avancés
|
||||
- **Maps Fortnite immersives** — Design d'expériences gaming uniques
|
||||
- **Expériences RP surMesure** — Solutions complètes pour communautés gaming
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Architecture du projet
|
||||
|
||||
```
|
||||
website/
|
||||
├── index.html # Page d'accueil principale
|
||||
├── assets/ # Ressources statiques
|
||||
│ ├── css/
|
||||
│ │ └── main.css # Feuille de styles globale (thème, animations, layout)
|
||||
│ ├── js/
|
||||
│ │ ├── main.js # Script principal (chargement, thème, composants)
|
||||
│ │ ├── home.js # Logique spécifique à la page d'accueil
|
||||
│ │ └── pages/ # Scripts pour pages spécifiques
|
||||
│ ├── images/ # Images et assets visuels
|
||||
│ ├── fonts/ # Polices personnalisées (OmegaLarge, OmegaSmall)
|
||||
│ ├── data/ # Données JSON (services, projets, etc.)
|
||||
│ └── php/ # Scripts PHP backend (formulaires, envois email)
|
||||
├── components/ # Composants réutilisables (système d'include)
|
||||
│ ├── header.html # Navigation + logo
|
||||
│ ├── footer.html # Pied de page
|
||||
│ ├── background.html # Animation de fond géométrique
|
||||
│ ├── favicons.html # Favicon et meta tags
|
||||
│ ├── index/ # Composants spécifiques à l'accueil
|
||||
│ │ └── ... (hero, about, services, contact)
|
||||
│ └── services/ # Composants de la page services
|
||||
├── pages/ # Pages du site
|
||||
│ ├── services.html # Détail des services
|
||||
│ ├── realisations.html # Portfolio/réalisations
|
||||
│ ├── cgv.html # Conditions Générales de Vente
|
||||
│ ├── mentions-legales.html # Mentions légales
|
||||
│ ├── 404.php # Page erreur 404
|
||||
│ └── test*.html # Pages de test
|
||||
├── .htaccess # Configuration serveur Apache
|
||||
├── .git/ # Versionning Git
|
||||
└── README.md # Ce fichier
|
||||
```
|
||||
|
||||
### Système de composants
|
||||
|
||||
Le projet utilise un **système de composants custom** basé sur `data-include`:
|
||||
|
||||
```html
|
||||
<!-- Incluye un composant HTML -->
|
||||
<div data-include="components/header.html"></div>
|
||||
<!-- Se charge dynamiquement via JavaScript -->
|
||||
```
|
||||
|
||||
**Avantages:**
|
||||
- Pas de dépendance Build (HTML pur)
|
||||
- Réutilisabilité des composants
|
||||
- Maintenabilité accrue
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Technologie & Stack
|
||||
|
||||
| Technologie | Usage |
|
||||
|---|---|
|
||||
| **HTML5** | Structure sémantique |
|
||||
| **CSS3** | Styling, animations, variables CSS |
|
||||
| **JavaScript (Vanilla)** | Interactivité, système de composants |
|
||||
| **Feather Icons** | Bibliothèque d'icônes légères |
|
||||
| **PHP** | Backend pour formulaires/emails |
|
||||
| **Apache HTTP Server** | Serveur web |
|
||||
| **Git** | Contrôle de version |
|
||||
|
||||
### Système de thème
|
||||
|
||||
Design **dark-first** avec toggle light/dark:
|
||||
- CSS Custom Properties pour les couleurs
|
||||
- Thème stoké en `data-theme` sur `<html>`
|
||||
- Variables principales:
|
||||
- `--bg-deep`, `--bg-secondary`, `--bg-tertiary`
|
||||
- `--accent-primary`, `--accent-secondary`
|
||||
- Colors du thème changent automatiquement
|
||||
|
||||
### Polices personnalisées
|
||||
|
||||
- **OmegaLarge** — Titres et éléments grands
|
||||
- **OmegaSmall** — Textes courants
|
||||
- Localisées dans `assets/fonts/`
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Setup & Installation
|
||||
|
||||
### Prérequis
|
||||
|
||||
- **Serveur web** (Apache, Nginx, PHP 7.4+. Ou tout simplement Wamp pour Windows ou Lamp pour Linux)
|
||||
- **Git** pour le versioning
|
||||
- **Navigateur moderne** (Chrome, Firefox, Safari, Edge)
|
||||
- Aucune dépendance externe à installer
|
||||
|
||||
### Installation locale
|
||||
|
||||
#### 1. **Cloner le projet**
|
||||
```bash
|
||||
cd e:\votre _repertoire_de_dev
|
||||
git clone https://gitlab.com/Omega_Kube/website.git
|
||||
cd website
|
||||
```
|
||||
|
||||
#### 2. **Configurer le serveur local**
|
||||
|
||||
**Option A - Avec PHP intégré (développement rapide):**
|
||||
```bash
|
||||
php -S localhost:8000
|
||||
# Accédez à http://localhost:8000
|
||||
```
|
||||
|
||||
**Option B - Avec Apache:**
|
||||
1. Placer le dossier dans votre `htdocs` ou `www`
|
||||
2. Configurer le VirtualHost si nécessaire
|
||||
3. S'assurer que le fichier `.htaccess` est présent et actif
|
||||
|
||||
**Option C - Avec un serveur Live Server (VS Code):**
|
||||
- Installer l'extension "Live Server"
|
||||
- Clic-droit → "Open with Live Server"
|
||||
|
||||
**Option D - Démarrer le serveur Wamp ou Lamp:**
|
||||
- Placer le dossier dans votre `www`
|
||||
- Crée un alias vers votre dossier de programation ou le déplacer dans votre `www`
|
||||
|
||||
#### 3. **Tester le projet**
|
||||
- Ouvrir http://localhost:8000 (ou votre serveur)
|
||||
- Vérifier que tous les composants se chargent
|
||||
- Tester le toggle dark/light
|
||||
- Vérifier les liens de navigation
|
||||
|
||||
---
|
||||
|
||||
## 📝 Guide de développement
|
||||
|
||||
### Structure des fichiers CSS
|
||||
|
||||
**`assets/css/main.css`** — Point d'entrée unique:
|
||||
|
||||
```css
|
||||
/* Variables & Thèmes */
|
||||
:root { --bg-deep: #1a0f1f; ... }
|
||||
|
||||
/* Layout & Composants */
|
||||
.hero { }
|
||||
.about { }
|
||||
.btn { }
|
||||
/* ... */
|
||||
|
||||
/* Animations & Responsive */
|
||||
@media (max-width: 768px) { }
|
||||
```
|
||||
|
||||
### Ajouter une nouvelle page
|
||||
|
||||
1. **Créer le fichier HTML** dans `pages/`:
|
||||
```bash
|
||||
pages/ma-page.html
|
||||
```
|
||||
|
||||
2. **Inclure les composants** (header, footer):
|
||||
```html
|
||||
<div data-include="components/header.html"></div>
|
||||
<main>
|
||||
<!-- Contenu -->
|
||||
</main>
|
||||
<div data-include="components/footer.html"></div>
|
||||
```
|
||||
|
||||
3. **Ajouter le lien** dans le header:
|
||||
```html
|
||||
<!-- components/header.html -->
|
||||
<li><a href="pages/ma-page.html">Ma Page</a></li>
|
||||
```
|
||||
|
||||
4. **Si JS nécessaire**, créer `assets/js/pages/ma-page.js`
|
||||
|
||||
### Ajouter un composant
|
||||
|
||||
1. **Créer le fichier** dans `components/`:
|
||||
```bash
|
||||
components/mon-composant.html
|
||||
```
|
||||
|
||||
2. **L'inclure** n'importe où:
|
||||
```html
|
||||
<div data-include="components/mon-composant.html"></div>
|
||||
```
|
||||
|
||||
### Modifier les styles globaux
|
||||
|
||||
- **Couleurs** → Modifier les variables CSS dans `assets/css/main.css` (section `:root`)
|
||||
- **Polices** → Uploader dans `assets/fonts/`, puis ajouter `@font-face`
|
||||
- **Animations** → Ajouter dans `assets/css/main.css` (respect du système de thème)
|
||||
|
||||
### Intégrer le backend PHP
|
||||
|
||||
**Exemple: Formulaire de contact**
|
||||
|
||||
1. **Créer le formulaire** dans un composant:
|
||||
```html
|
||||
<!-- components/contact-form.html -->
|
||||
<form method="POST" action="assets/php/send-message.php">
|
||||
<input type="email" name="email" required>
|
||||
<textarea name="message"></textarea>
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
2. **Créer le script PHP** (`assets/php/send-message.php`):
|
||||
```php
|
||||
<?php
|
||||
$to = "info@omegakube.com";
|
||||
$subject = $_POST['subject'] ?? "Message OmégaKube";
|
||||
$message = $_POST['message'];
|
||||
$headers = "From: " . $_POST['email'];
|
||||
|
||||
if (mail($to, $subject, $message, $headers)) {
|
||||
echo "Message envoyé !";
|
||||
} else {
|
||||
echo "Erreur lors de l'envoi";
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Maintenance & Dépannage
|
||||
|
||||
### Le site ne charge pas les composants
|
||||
|
||||
**Vérifications:**
|
||||
- [ ] Le fichier `assets/js/main.js` contient le code d'inclusion
|
||||
- [ ] Les chemins dans `data-include` sont corrects (relatifs à la racine)
|
||||
- [ ] Les fichiers HTML existent et n'ont pas d'erreur de syntaxe
|
||||
|
||||
### Les styles ne s'appliquent pas
|
||||
|
||||
- [ ] Vérifier que `assets/css/main.css` est lié dans le `<head>`
|
||||
- [ ] Rafraîchir le cache du navigateur (Ctrl+Shift+R ou Ctrl+F5)
|
||||
- [ ] Vérifier les media-queries pour le responsive
|
||||
|
||||
### Les icônes Feather ne s'affichent pas
|
||||
|
||||
- [ ] S'assurer que la CDN Feather Icons est incluse
|
||||
- [ ] Vérifier les noms d'icônes sur [feathericons.com](https://feathericons.com)
|
||||
|
||||
### Le toggle dark/light ne fonctionne pas
|
||||
|
||||
- [ ] Vérifier que `home.js` est chargé
|
||||
- [ ] S'assurer que les variables CSS sont correctement définies
|
||||
- [ ] Vérifier la balise `<html data-theme="dark">` ou `<html data-theme="light">`
|
||||
|
||||
---
|
||||
|
||||
## 📋 Checklist pour nouveaux développeurs
|
||||
|
||||
Avant de commencer:
|
||||
|
||||
- [ ] Cloner le projet en local
|
||||
- [ ] Lancer un serveur local (PHP , Live Server ou Wamp/Lamp)
|
||||
- [ ] Vérifier que le site s'affiche correctement
|
||||
- [ ] Consulter la structure des fichiers
|
||||
- [ ] Comprendre le système de composants `data-include`
|
||||
- [ ] Tester le dark/light mode
|
||||
- [ ] Vérifier les liens de navigation
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Ressources utiles
|
||||
|
||||
- **Feather Icons**: https://feathericons.com
|
||||
- **CSS Variables**: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
|
||||
- **Responsive Design**: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
|
||||
- **Git Guide**: https://git-scm.com/doc
|
||||
|
||||
---
|
||||
|
||||
## 👥 Contribution
|
||||
|
||||
Pour contribuer au projet:
|
||||
|
||||
1. Créer une branche feature (`git checkout -b feature/xyz`)
|
||||
2. Faire vos modifications
|
||||
3. Commiter avec des messages clairs (`git commit -m "Add xyz feature"`)
|
||||
4. Pusher et créer une Pull Request
|
||||
|
||||
---
|
||||
|
||||
## ⚖️ License & Mentions légales
|
||||
|
||||
Consulter [pages/mentions-legales.html](pages/mentions-legales.html) et [pages/cgv.html](pages/cgv.html).
|
||||
|
||||
---
|
||||
|
||||
**Dernière mise à jour**: Mars 2026
|
||||
**Mainteneur**: KIRITO_KMA / L'équipe OmégaKube
|
||||
Loading…
Add table
Add a link
Reference in a new issue