# ASA - Site Web Corporate

Site web professionnel pour l'entreprise de chimie et cosmétique ASA (ASADERMA & ASACHIMIE).

## 📋 Description

Site single-page avec :
- Design luxueux et élégant (noir, or, crème)
- Animation de particules chimiques
- Formulaire de contact avec sauvegarde en base de données SQLite
- Interface d'administration protégée

## 🛠️ Stack Technique

- **Frontend** : HTML5, CSS3, JavaScript (Vanilla)
- **Backend** : PHP
- **Base de données** : SQLite
- **Design** : Glassmorphism, animations, responsive

## 📁 Structure des Fichiers

```
asachimie/
├── index.html      # Page principale
├── style.css      # Styles CSS
├── script.js      # JavaScript frontend
├── submit.php     # Traitement du formulaire
├── admin.php      # Interface d'administration
├── init_db.php    # Initialisation de la base de données
├── database.db    # Base de données SQLite (créée automatiquement)
├── SPEC.md        # Spécifications du projet
└── README.md      # Ce fichier
```

## 🚀 Installation et Lancement

### Option 1 : XAMPP (Recommandé pour Windows)

1. **Installer XAMPP** si ce n'est pas déjà fait
   - Télécharger depuis : https://www.apachefriends.org/

2. **Copier les fichiers**
   - Copier le dossier `asachimie` dans `C:\xampp\htdocs\`

3. **Démarrer Apache**
   - Ouvrir le panneau de contrôle XAMPP
   - Cliquer sur "Start" à côté d'Apache

4. **Accéder au site**
   - Site principal : http://localhost/asachimie/
   - Admin : http://localhost/asachimie/admin.php

### Option 2 : Serveur PHP intégré

Si vous avez PHP installé :

```bash
cd C:\xampp\htdocs\asachimie
php -S localhost:8000
```

Puis ouvrir http://localhost:8000

## 📝 Configuration

### Identifiants Admin

- **Utilisateur** : `admin`
- **Mot de passe** : `asaadmin2025`

### Base de données

La base de données `database.db` est créée automatiquement lors de la première soumission de formulaire.

Pour une initialisation manuelle :
```bash
php init_db.php
```

## 🎨 Fonctionnalités

### Page d'accueil (index.html)

1. **Hero Section**
   - Logo "ASA" avec animation
   - Animation de particules chimiques en arrière-plan
   - Bouton CTA vers la section contact

2. **Section ASADERMA**
   - 3 cartes : Cosmétique, Parapharmacie, Dermocosmétique

3. **Section ASACHIMIE**
   - 4 cartes : La Formulation, Les Formations, Les Préparations, Les Consultations

4. **Formulaire de Contact**
   - Nom complet (obligatoire)
   - Téléphone (obligatoire)
   - Service souhaité (dropdown)
   - Message (optionnel)
   - Soumission AJAX sans rechargement

5. **Footer**
   - Marque ASADERMA | ASACHIMIE
   - Copyright 2025

### Interface Admin (admin.php)

- Connexion sécurisée par session
- Tableau listant toutes les soumissions
- Suppression d'entrées
- Export en CSV

## 🔧 Dépannage

### Erreur 403 ou 404

Vérifiez que :
- Apache est bien démarré dans XAMPP
- Les fichiers sont dans le bon répertoire (`C:\xampp\htdocs\asachimie\`)

### La base de données ne se crée pas

Vérifiez les permissions du dossier :
- Le dossier doit être accessible en écriture

### Les styles ne s'affichent pas

Vérifiez que les fichiers `style.css` et `script.js` sont bien dans le même répertoire que `index.html`

## 📱 Responsive Design

Le site est entièrement responsive et s'adapte :
- Mobile (< 768px)
- Tablet (768px - 1024px)
- Desktop (> 1024px)

## 🎯 Compatibilité Navigateurs

- Chrome / Edge / Firefox (versions récentes)
- Safari (versions récentes)
- Mobile Safari / Chrome Android

---

*Développé avec ❤️ pour ASA*