Interface utilisateur pastel pour application de course à pied avec mascotte paresseux

{ "type": "Modèle d'interface utilisateur d'application mobile de fitness", "style": "Une application au design pastel épuré et moderne, avec des surfaces beiges douces et blanches chaudes rehaussées de vert sauge délicat, des cartes et des boutons arrondis, des ombres subtiles, des icônes minimalistes et fines, une identité de marque conviviale et ludique avec une mascotte paresseux, et un fond à pois marron foncé de style Dribbble.", "theme": "Application de suivi de course", "layout": { "device_count": 3, "arrangement": "Trois écrans de smartphone allongés côte à côte, espacés uniformément, vue de face.", "background": "Marron très foncé avec un motif de grille à points discret et uniforme.", "screens": [ { "position": "Côté gauche", "screen_type": "Tableau de bord d'accueil", "header": { "greeting": "Bonjour les coureurs ! 👋", "left_icon": "none", "right_icon": "Cloche de notification" }, "hero_card": { "headline": "Prêt pour une merveilleuse journée ?", "subcard_text_line_1": "Chaque pas en avant est une victoire.", "subcard_text_line_2": "Donnons du sens à chaque instant. 🌱", "illustration": "Un adorable paresseux, portant un bandeau couleur crème et un survêtement vert menthe, se tient à droite de la carte et fait coucou." }, "sections": [ { "title": "Cette semaine", "position": "Haut-milieu", "count": 3, "labels": [ "Nombre de courses", "distance", "temps" ], "values": [ "3", "12,6 km", "1 heure 45 minutes" ], "presentation": "Une seule carte de statistiques aux coins arrondis contenant trois colonnes de contenu de largeur égale et une icône circulaire vert clair." }, { "title": "Prochain objectif", "position": "Milieu à bas", "count": 1, "labels": [ "20 kilomètres ce mois-ci" ], "values": [ "63%" ], "presentation": "Carte de progression aux coins arrondis avec une barre de progression verte et une petite illustration d'un paresseux qui fait coucou sur la droite." }, { "title": "Activités récentes", "position": "bas", "count": 1, "labels": [ "Activités récentes" ], "presentation": "Le bord supérieur de l'autre carte arrondie est visible, mais il est masqué par la barre de navigation inférieure." } ], "bottom_nav": { "count": 4, "labels": [ "front page", "running", "schedule", "Personal information" ], "active": "front page" } }, { "position": "middle", "screen_type": "Résumé de la course", "header": { "left_icon": "Flèche de retour", "center_text": "Bravo !", "subtext": "Tu l'as fait ! C'est l'heure de fêter ça ! 🎉", "right_icon": "share" }, "hero_illustration": "Un adorable paresseux, portant un bandeau, un survêtement vert menthe et une médaille d'or, lève les bras en signe de victoire.", "stats_row": { "count": 3, "labels": [ "distance", "time", "pace" ], "values": [ "5.00 km", "32:15", "6:27" ], "presentation": "Trois capsules statistiques aux coins arrondis" }, "achievement_card": { "count": 1, "title": "Un nouveau record personnel ! 🌟", "subtitle": "Vous avez été 1 minute et 12 secondes plus rapide que la dernière fois que vous avez parcouru 5 kilomètres.", "icon": "Petit badge de médaille d'or" }, "table_section": { "title": "Segmentation", "count": 2, "columns": [ "kilomètre", "allure", "temps" ], "rows": [ [ "1", "6:35", "6:35" ], [ "2", "6:23", "12:58" ] ], "presentation": "Fiches blanches arrondies avec des lignes de séparation claires" } }, { "position": "côté droit", "screen_type": "Fixer des objectifs de course", "header": { "left_icon": "Fermer la croix", "center_text": "C'est parti !", "subtext": "Tu peux le faire. On va y aller doucement." 🦥", "right_icon": "Régler les vitesses" }, "goal_visual": { "type": "Sélecteur de progression circulaire", "top_label": "Sélectionner l'objectif", "main_value": "5.00", "unit": "kilomètre", "ring": "Arc vert sauge gras sur un anneau beige clair", "illustration": "Un petit paresseux s'étirant dans le coin supérieur droit du cercle" }, "goal_options": { "count": 4, "labels": [ "2 kilomètres", "5 kilomètres", "10 kilomètres", "Semi-marathon" ], "active": "5 kilomètres" }, "primary_cta": { "label": "Commencer à courir", "style": "Gros bouton arrondi vert sauge" }, "secondary_action": { "label": "Suivi uniquement", "icon": "Marqueur de localisation" }, "bottom_nav": { "count": 4, "labels": [ "page d'accueil", "course", "programme", "Informations personnelles" ], "actif": "en cours d'exécution" } } ] } }