## PAGE SPLASH DHTML

### Type de splash choisi

- [ ] **Page vignette-détail**  
      Quand on clique sur une vignette, une section détail apparaît ou se remplit
      
- [X] **Liste d'items avec révélation**  
      Boutons "en savoir plus" ou interactions qui dévoilent du contenu
      
- [ ] **Site déroulant interactif**  
      À mesure qu'on scrolle, des objets s'animent, apparaissent, disparaissent
      
- [ ] **Animation HTML5 complexe**  
      Orchestration de plusieurs animations CSS et effets d'apparition/disparition

### Description de ma page splash

**URL de la page:** `s0und.space/web-interactif-2026-zzxnull/soundspace/splash.php`

**Données affichées:** Les musiques contenues dans les playlists, qui sont dans la base de données.
<!-- (ex: équipe, personnages, galerie photos, FAQ, etc.) -->

**Interactions prévues:** Révéler plus d'informations à propos des playlists et leur contenu.
<!-- (décrire comment l'utilisateur va interagir avec la page) -->

**Effets visuels:** Apparition du haut vers le bas, avec une transition de l'opacité et un mouvement vers le haut.
<!-- (décrire les animations, transitions, apparitions prévues) -->


<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
---
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

## AUTOCOMPLETE

### Champ de recherche

**Placeholder du champ:** Rechercher une playliste...
<!-- (ex: "Rechercher un produit...", "Trouver une formation...", etc.) -->

**Données recherchées:** Playliste
<!-- (ex: noms de produits, titres de films, noms de personnages, etc.) -->

### Suggestions

**Nombre de suggestions affichées:** `10` 
<!-- (ex: 5, 10, etc.) -->

**Format d'affichage des suggestions:** Image + Type + Longeur
<!-- (ex: nom seulement, nom + image, nom + catégorie, etc.) -->

**ID de la liste de suggestions:** `#zone-recherche`

**Classe CSS d'une suggestion:** `.suggestion`

**Classe CSS d'une suggestion survolée:** `.suggestion:hover`

### Structure de données

**Nom de la table:** `playlist`

**Champ recherché:**
- `playlist.titre`

### Comportement après clic sur suggestion

- [X] **Suggestion directe:** mène directement à la page détail de l'item  
      URL de la page détail: `s0und.space/web-interactif-2026-zzxnull/soundspace/detail-playlist?id=[ID]`

- [ ] **Suggestion vers recherche:** affiche une page liste de résultats  
      URL de la page liste: `_________________`

<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
---
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

## MARQUE-PAGE / LIKE

### Choix visuels

**Symbole choisi:** coeur
<!-- (ex: cœur, étoile, signet, pouce levé, etc.) -->

**État NON-CHOISI:**
- Classe CSS: `.bouton-bookmark et .bouton-bookmark-mini`
- Apparence: cœur vide <!-- (ex: cœur vide gris, étoile contour noir, etc.) -->

**État CHOISI:**
- Classe CSS: `.bouton-bookmark.active et .bouton-bookmark-mini.active`
- Apparence: cœur plein <!-- (ex: cœur plein rouge, étoile jaune, etc.) -->

### Pages

**URL de la page avec les items likables:**  
`[VEDETTE DANS INDEX] https://s0und.space/web-interactif-2026-zzxnull/soundspace/`
`[DETAIL] https://s0und.space/web-interactif-2026-zzxnull/soundspace/detail-playlist.php?id=1`

**URL de la page affichant la liste des favoris:**  
- `https://s0und.space/web-interactif-2026-zzxnull/soundspace/bookmark.php`

<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
---
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

## NOTATION PAR ÉTOILES

### Affichage visuel

**Classe CSS étoile VIDE:** `.etoile et .etoile-mini`

**Classe CSS étoile PLEINE:** `.etoile.active et .etoile-mini.active`

### Stratégie d'enregistrement

- [X] **Enregistrer chaque vote individuellement**  
      (permet de recalculer la moyenne, de voir l'historique, de modifier son vote)
      
- [ ] **Enregistrer seulement le total et la moyenne**  
      (plus simple, mais impossible de modifier un vote ou voir l'historique)

### Structure de données

**Nom de la table:** `note`

**Champs de la table:**
- `idPlaylist`
- `ip` ip de l'envoie
- `note`

<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
---
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

## COMMENTAIRES

### Formulaire de commentaire

**ID du textarea:** `.message-commentaire`

**ID du bouton d'envoi:** `.bouton-commenter`

### Affichage des commentaires

**Ordre d'affichage:**
- [X] Nouveaux commentaires en HAUT (ordre chronologique inversé)
- [ ] Nouveaux commentaires en BAS (ordre chronologique)

**ID de la zone d'affichage des commentaires:** `.liste-commentaires`

**Classe CSS d'un commentaire:** `.commentaire`

### Rafraîchissement automatique

**Intervalle de vérification:** `5` secondes (ex: 5, 10, 15)

**Stratégie de récupération:**
- [X] Recharger TOUS les commentaires à chaque intervalle
- [ ] Recharger seulement les NOUVEAUX commentaires depuis le dernier ID

### Structure de données

**Nom de la table:** `commentaire`

**Champs de la table:**
- `id` (ex: id_commentaire)
- `id_playlist` (ex: id_item commenté)
- `nom_utilisateur` (ex: id_utilisateur ou nom_auteur)
- `messgae` (ex: message)
- `date` (ex: date_publication)