nannyai_terminal_v2_6_0

Fiche Descriptive Complète : NannyAI Terminal

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template nannyai_terminal_v2_6_0.html

Version 2.6.0

Date de création 16/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard de surveillance (Style Rétro/Terminal)

Objectif principal Monitorer les flux de données d’une nurserie connectée

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template simule une interface de terminal informatique rétro (style CRT/Cyberpunk) pour la gestion d’une nurserie. Il permet de visualiser en temps réel les constantes vitales des enfants, de recevoir des conseils d’une IA (Nanny_Bot) et de consulter un journal de bord système. L’interface est immersive grâce à des effets de balayage (scanlines) et des animations de clignotement.

📌 Public cible (Persona)

👤 Auxiliaires de puériculture (Profil : « Auxiliaire_Pro_07 »)

👤 Administrateurs système de crèches connectées

👤 Développeurs cherchant une esthétique « command line interface » (CLI) pour un dashboard

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique

Framework CSS : Aucun (CSS Pur / Custom Properties)

Framework JS : Aucun (Interface statique avec hooks visuels)

Responsive : ✅ Oui (Grid adaptative 2 colonnes -> 1 colonne)

Design : Dark Mode natif (Matrix-style)

📦 Dépendances / Assets

Police : Fira Code, Courier New (Monospace pour l’aspect code)

Effets visuels : Pseudo-éléments ::before pour l’effet de balayage cathodique.

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 sector_id str ✅ Identifiant du secteur (ex: NURSERIE_01)

2 children_data array ✅ Liste des enfants (ID, Statut, Repas)

3 ai_logs array ✅ Suggestions générées par l’IA

4 system_events array ✅ Historique horodaté des actions

🧱 STRUCTURE DU FICHIER — DOM

nannyai_terminal_v2_6_0.html

📌 : Définition des variables CSS (–term-green, –term-alert) et de l’animation de clignotement.

📌

🏗️ .terminal-window (Conteneur principal avec effet Scanline)

Header : Statut système et titre H1.

Grid :

section.card : Tableau de suivi vital (Table HTML).

section.card : Panneau de conseils IA (Nanny_Bot_Advisor).

section.card (Full width) : Journal de bord système.

Footer (.input-area) : Simulation de ligne de commande avec curseur animé.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Variables CSS)

CSS

:root {

–term-green: #00ff41; /* Couleur phosphore classique */

–term-bg: #0a0a0a; /* Noir profond */

–term-dim: #003b00; /* Vert sombre pour les contrastes */

–term-alert: #ff3333; /* Alertes critiques (Fièvre) */

–term-warn: #ffcc00; /* Avertissements (Sieste agitée) */

}

📐 Mise en Page — Layout

Layout : CSS Grid avec gap: 20px.

Effets : Animation @keyframes blink pour le curseur et les alertes.

Responsive : Breakpoint à 768px faisant passer la grille en mode vertical.

♿ ACCESSIBILITÉ & SEO

Contrastes : Très élevé (Vert fluo sur noir), conforme aux besoins d’accessibilité visuelle en environnement sombre.

Sémantique : Utilisation de

Scanline : L’effet visuel est en pointer-events: none pour ne pas gêner l’interaction utilisateur.

🧪 TESTS & VALIDATION

# Cas de test Résultat attendu Statut

1 Responsive Mobile Passage en 1 seule colonne sous 768px ✅

2 Animation Curseur Le carré vert doit clignoter toutes les 0.8s ✅

3 Effet Scanline Overlay subtil présent sur toute la fenêtre ✅

4 Lisibilité Table Alignement gauche des colonnes maintenu ✅

📝 EXEMPLE D’UTILISATION CLI

Dans la barre d’entrée simulée, l’utilisateur peut interagir avec des commandes type :

ajouter_repas –enfant « Léo_B » –quantite « 210ml » –type « Lait_2 »

📌 Fiche générée par — Agent IA Refoia Jeremy Tech

🔖 Usage : Documentation interne — NannyAI Project