donnees_20260325_140544

49,00 

Visualiser et enregistrer les clients du salon de tatouage

UGS : donnees_20260325_140544 Catégorie :

Fiche Descriptive Complète : « Onizuka Tattoo CRM »

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template dashboard_clients_tattoo.html

Version 1.0.0

Date de création 25/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard / Liste de données

Objectif principal Visualiser et enregistrer les clients du salon de tatouage

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template permet de gérer une base de données de clients pour un salon de tatouage. Il affiche une liste dynamique de clients (nom, âge, motif préféré) et propose un formulaire pour ajouter de nouveaux profils à la simulation.

📌 Public cible (Persona)

👤 Gérant de salon : Pour suivre ses clients et leurs préférences.

👤 Tatoueur : Pour consulter rapidement le « tatouage préféré » d’un client avant un rendez-on.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard : HTML5 / CSS3

Framework CSS : Tailwind CSS (Utility-first)

Framework JS : Vanilla JS (pour la manipulation du DOM)

Responsive : ✅ Oui — Optimisé pour tablettes et desktop.

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 client_name str ✅ Oui Nom généré (ex: ‘abcde’)

2 client_age int ✅ Oui Âge entre 18 et 65 ans

3 tattoo_choice str ✅ Oui Dragon, fleur, ancre ou libellule

4 total_clients int ✅ Oui Compteur total (ex: 10)

🧱 STRUCTURE DU FICHIER — DOM

index.html

🏗️

: Logo « Onizuka Tattoo » avec icône de dragon.

🏗️

:

Section Statistiques : Badge affichant le « Nombre de clients simulés ».

Section Formulaire : Champs Nom, Âge (slider 18-65), et Select « Motif ».

Section Listing : Grille de cartes (.card) représentant chaque client.

🏗️

: Copyright et lien vers le fichier fichier.txt.

🎨 CHARTE GRAPHIQUE

CSS

:root {

–color-primary: #111827; /* Noir profond (Encre) */

–color-secondary: #DC2626; /* Rouge (Accent traditionnel) */

–color-background: #F3F4F6; /* Gris très clair */

–color-surface: #FFFFFF; /* Blanc pur pour les cartes */

}

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Ajout client Cliquer sur « Enregistrer » La carte s’ajoute dynamiquement à la liste

2 Limite d’âge Tenter de mettre 17 ans Le validateur HTML5 bloque la soumission

3 Icônes Vérifier le motif « Dragon » L’icône fa-dragon doit s’afficher

📝 EXEMPLE D’INTÉGRATION (Jinja2)

HTML

{% for client in clients %}

{{ client.nom|upper }}

Âge : {{ client.age }} ans

{{ client.tatouage_préféré }}

{% endfor %}

📌 INSTRUCTIONS SPÉCIALES

⚠️ Accessibilité : Utiliser des icônes descriptives pour les types de tatouages (ex: aria-label= »Motif Dragon »).

⚠️ Design : Appliquer une police typée « mains levée » (Permanent Marker) uniquement sur les titres pour garder la lisibilité sur les données.

Avis

Il n’y a pas encore d’avis.

Soyez le premier à laisser votre avis sur “donnees_20260325_140544”

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *