donnees_20260325_141958

📋 Fiche Descriptive : Dashboard « Onizuka Bio-Beauté »

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template dashboard_bio_beauty.html

Version 1.1.0 (Intégration SQLite/Matplotlib)

Date de création 25/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard de suivi de santé (HealthTech)

Objectif principal Visualiser l’évolution de l’hydratation et de l’élasticité cutanée.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template sert d’interface de restitution pour les données collectées par le module Python onizuka. Il affiche un score de beauté calculé, propose un coaching personnalisé (basé sur l’acide hyaluronique et le rétinol) et présente un graphique historique des 5 dernières analyses.

📌 Public cible (Persona)

👤 Utilisateurs « Skincare » : Particuliers suivant une routine de soin.

👤 Praticiens Bien-être : Pour un suivi rapide des indicateurs clients.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Framework CSS : Tailwind CSS (pour le layout réactif).

Visualisation : Intégration de l’image rapport_coaching_beauté.png générée dynamiquement.

Backend compatible : Python (Flask/Django) pour injecter les données SQLite.

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 hydratation_val int ✅ Oui Valeur actuelle en % (ex: 45).

2 elasticite_val int ✅ Oui Valeur actuelle en % (ex: 65).

3 conseils_liste array ✅ Oui Liste des chaînes de caractères de coaching.

4 graph_url str ✅ Oui Chemin vers le fichier .png généré par Matplotlib.

🧱 STRUCTURE DU FICHIER — DOM

dashboard_bio_beauty.html

🏗️ Header : Logo « Science General » + Date de la dernière analyse.

🏗️ Main :

🧱 Section Score : Affichage du score_beauté dans un cercle central.

🧱 Section Metrics : Deux colonnes (Hydratation / Élasticité) avec barres de progression.

🧱 Section Graphique : Conteneur pour l’image rapport_coaching_beauté.png.

🧱 Section Coaching : Card stylisée avec icône d’ampoule pour les conseils.

🏗️ Footer : Mentions légales et copyright.

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs (Thème Bio-Cosmétique)

CSS

:root {

–color-hydratation: #87CEEB; /* SkyBlue (via Python) */

–color-elasticity: #F08080; /* LightCoral (via Python) */

–color-bg-soft: #FFF9F9; /* Fond rosé très pâle */

–color-text-main: #2D3436; /* Gris charbon profond */

}

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Seuil Critique Hydratation < 50 Le texte de conseil s’affiche en rouge.

2 MAJ Graphique Lancer traiter_donnees() L’image du dashboard se rafraîchit sans cache.

3 Accessibilité Lecteur d’écran alt de l’image décrit les courbes du graphique.

📝 EXEMPLE D’INTÉGRATION (Jinja2)

HTML

Conseils d’Experts

{% for conseil in conseils_liste %}

• • {{ conseil }}

{% endfor %}