Splatstudio — Tableau de Bord Romantique / Mise en Relation

Compétence Web — Rencontres

Produire un tableau de bord grand public sur un seul écran, qui évoque une chronique de rencontres du dimanche dans un journal, rendue sous forme de logiciel. Typographie éditoriale, un seul accent discret, beaucoup d’espace négatif, pas de carte de swipe ni de clichés de rencontre.

Flux de travail

1. Lire le DESIGN.md actif (injecté ci-dessus). S’appuyer sur une police serif pour les chiffres des indicateurs — ces écrans vivent ou meurent par leurs chiffres.
2. Choisir une voix de marque — ironique, observatrice, légèrement littéraire. Générer un contenu réel et spécifique. Exemples : « les personnes qui répondraient dans la journée », « gérable. deux sont maintenant amis. », « votre plus grand atout de compatibilité. »
3. Disposition, dans l’ordre :
   • Ticker supérieur — bande horizontale sur une seule ligne en haut, dans un style sans-serif discret : tagline à gauche, « PROCHAIN PALIER À 2 080 MUTUALS » à droite, en capitales mono avec espacement des lettres. Fine règle en dessous.
   • Rail gauche — barre latérale de 220–260 px. Marque de la plateforme en serif italique en haut. Carte utilisateur (avatar / pseudo / ratio / palier). Trois groupes de navigation : « AUJOURD’HUI » (spécimen, boîte de réception, file d’attente, notifications), « VOUS » (vos statistiques, mutuels et communautés, bloqués, paramètres), « ARCHIVES » (éditions passées, matchs expirés). L’élément actif reçoit une couleur d’accent et un point d’accent.
   • Contenu principal :
     • Grille KPI — 3 colonnes × 3 lignes (ou 9 cellules). Chaque cellule : étiquette en mono petites capitales, un grand chiffre serif (utiliser l’accent ou un vert doux pour le positif, rouge doux pour l’attention), une note en italique d’une ligne. Des spécificités plausibles — « 1 842 ↑ 41 cette sem · croissance saine. », « 14 % au-dessus de la médiane de votre cohorte. », « 4 / ex dans votre cercle · gérable. deux sont maintenant amis. »
     • Panneau histogramme — « mutuels — 30 derniers jours ». Barres hautes et fines noires, les deux derniers jours surlignés en accent. Légende au-dessus avec « ↑ TENDANCE HAUSSIÈRE · +3 PROCHES MUTUELS CE MOIS-CI · DEUX VIA LE MÊME OFFSITE » en mono.
     • Panneau de tendance — « taux de match — 12 dernières semaines ». Une ligne de texte en dessous (« MONTÉE RÉGULIÈRE DE 8 % → 14 %. ATTRIBUABLE À UNE COMMUNAUTÉ REJOINTE… »). Règle de pied.
4. Écrire un seul document HTML :
   • <!doctype html> jusqu’à </html>, CSS en ligne.
   • Fond blanc cassé crémeux, corps en serif, étiquettes en mono.
   • Utiliser font-feature-settings: 'tnum' sur les chiffres des indicateurs.
   • Graphique à barres SVG avec ~30 barres, hauteurs variées.
   • data-od-id sur ticker, barre latérale, grille KPI, graphique, tendance.
5. Auto-vérification :
   • Se lit comme sobre, éditorial, légèrement drôle — pas érotique.
   • Un seul accent utilisé à 3–4 endroits max (un KPI, deux barres surlignées, un état actif de navigation).
   • Pas de carte de swipe, pas de cœurs, pas d’emoji flamme.

Contrat de sortie

Émettre entre les balises <artifact> :

<artifact identifier="dating-slug" type="text/html" title="Tableau de Bord — Rencontres">
<!doctype html>
<html>...</html>
</artifact>

Une phrase avant l’artifact, rien après.