From a309b2b59345c197234e4e79f1df236187d2ecb3 Mon Sep 17 00:00:00 2001 From: Millian Lamiaux Date: Sat, 4 Jul 2026 16:41:34 +0200 Subject: [PATCH] chore: purge obsolete .archive docs and relocate CI workflows - Remove 5 outdated TabataFit/Expo concept docs (.archive/) - Rename .gitea/workflows -> .github/workflows - Ignore build/ directory - Add Xcode UserInterfaceState --- .archive/CLAUDE.md | 11 - .archive/TabataGo_BDSD_v1.0.md | 599 ----- .archive/TabataGo_PDD_v1.0.md | 1994 ----------------- .archive/TabataGo_PRD_v1.1.md | 597 ----- .archive/TabataGo_StyleGuide_v1.0.md | 1198 ---------- .../workflows/pr-iphone-deploy.yml | 0 .gitignore | 1 + .../UserInterfaceState.xcuserstate | Bin 0 -> 75912 bytes 8 files changed, 1 insertion(+), 4399 deletions(-) delete mode 100644 .archive/CLAUDE.md delete mode 100644 .archive/TabataGo_BDSD_v1.0.md delete mode 100644 .archive/TabataGo_PDD_v1.0.md delete mode 100644 .archive/TabataGo_PRD_v1.1.md delete mode 100644 .archive/TabataGo_StyleGuide_v1.0.md rename {.gitea => .github}/workflows/pr-iphone-deploy.yml (100%) create mode 100644 tabatago-swift/TabataGo.xcodeproj/project.xcworkspace/xcuserdata/20015659.xcuserdatad/UserInterfaceState.xcuserstate diff --git a/.archive/CLAUDE.md b/.archive/CLAUDE.md deleted file mode 100644 index 7ab2387..0000000 --- a/.archive/CLAUDE.md +++ /dev/null @@ -1,11 +0,0 @@ - -# Recent Activity - - - -### Feb 20, 2026 - -| ID | Time | T | Title | Read | -|----|------|---|-------|------| -| #5236 | 1:28 PM | ๐Ÿ”ต | Archived TabataGo PRD v1.1 discovered - comprehensive product requirements document | ~462 | - \ No newline at end of file diff --git a/.archive/TabataGo_BDSD_v1.0.md b/.archive/TabataGo_BDSD_v1.0.md deleted file mode 100644 index 67f0e25..0000000 --- a/.archive/TabataGo_BDSD_v1.0.md +++ /dev/null @@ -1,599 +0,0 @@ -# TabataGo โ€” Brand Design Specification Document (BDSD) v1.0 - -> Ce document dรฉfinit l'identitรฉ visuelle, le positionnement premium, et les principes esthรฉtiques de TabataGo. Il guide toutes les dรฉcisions de design UI. - ---- - -## 1. Vision de Marque - -### 1.1 Essence - -**TabataGo = ร‰nergie pure, designรฉ pour performer.** - -Si TabataGo รฉtait une marque existante, ce serait **Gymshark** : jeune, audacieux, communautรฉ, et visuellement impactant. Mais avec une touche **premium exclusive** qui รฉlรจve l'expรฉrience. - -### 1.2 Positionnement - -| Attribut | Dรฉfinition | -|-----------|------------| -| **ร‰motion primaire** | ร‰nergie / Vitalitรฉ โ€” l'utilisateur doit se sentir vivant et motivรฉ au premier regard | -| **Positionnement** | Premium exclusif โ€” haut de gamme, design soignรฉ, pas une app "gratuite gรฉnรฉrique" | -| **Adjectifs clรฉs** | Dynamic โ€ข Vibrant โ€ข Energetic | -| **Mood global** | Action Sports โ€” comme รชtre dans une salle de sport high-end, la nuit, avec des nรฉons | - -### 1.3 Personnalitรฉ de Marque - -TabataGo est : -- **Audacieux** โ€” pas peur d'รชtre vibrant et lumineux -- **ร‰nergique** โ€” chaque รฉlรฉment respire le mouvement -- **Premium** โ€” jamais cheap, toujours soignรฉ -- **Motivant** โ€” l'UI pousse l'utilisateur ร  se dรฉpasser - ---- - -## 2. Direction Visuelle - -### 2.1 Palette de Couleurs - -#### Couleur Primaire : Orange Energy - -L'orange est le cล“ur de l'identitรฉ โ€” il reprรฉsente l'รฉnergie, la chaleur, l'action. - -| Token | Hex | Usage | -|-------|-----|-------| -| `ENERGY_500` | `#F97316` | Brand primary, CTA, accents principaux | -| `ENERGY_400` | `#FB923C` | Glow effects, hover states | -| `ENERGY_600` | `#EA580C` | Phase WORK, intensity | - -#### Fond : Soft Dark - -Un dark mode doux et riche, pas un noir pur agressif. - -| Token | Hex | Usage | -|-------|-----|-------| -| `DARK_BASE` | `#1A1A1E` | Background principal | -| `DARK_RAISED` | `#222226` | Cards level 1 | -| `DARK_ELEVATED` | `#2A2A2E` | Cards level 2, modals | -| `DARK_SURFACE` | `#0A0A0E` | Zones de focus, timer | - -#### Accents & Phases - -| Token | Hex | Usage | -|-------|-----|-------| -| `GLOW_NEON` | `#F97316` + glow | Flamme streak, highlights | -| `PHASE_WORK` | `#F97316` | Gradient work | -| `PHASE_REST` | `#3B82F6` | Gradient rest (bleu calme) | -| `PHASE_READY` | `#EAB308` | Gradient prรฉparation | -| `SUCCESS` | `#22C55E` | Complรฉtion, streak maintenu | - -#### Textes - -| Token | Valeur | Usage | -|-------|--------|-------| -| `TEXT_PRIMARY` | `#FFFFFF` | Titres, รฉlรฉments principaux | -| `TEXT_SECONDARY` | `rgba(255,255,255,0.85)` | Body text | -| `TEXT_MUTED` | `rgba(255,255,255,0.60)` | Labels secondaires | -| `TEXT_HINT` | `rgba(255,255,255,0.45)` | Placeholders, hints | - -### 2.2 Gradients - -**Philosophie : Subtils mais prรฉsents.** Les gradients ajoutent de la profondeur sans รชtre agressifs. - -#### Gradients de Phase - -```css -/* GET_READY - Ambre chaleureux */ ---gradient-ready: linear-gradient(135deg, #451A03, #92400E, #D97706); - -/* WORK - Orange intense avec touche rouge */ ---gradient-work: linear-gradient(135deg, #450A0A, #991B1B, #EA580C); - -/* REST - Bleu calme, rรฉcupรฉration */ ---gradient-rest: linear-gradient(135deg, #0C1929, #1E3A5F, #2563EB); - -/* COMPLETE - Vert succรจs */ ---gradient-complete: linear-gradient(135deg, #052E16, #166534, #16A34A); -``` - -#### Gradients UI - -```css -/* Hero backgrounds - subtle */ ---gradient-dark: linear-gradient(135deg, #0A0A14, #1A0E28, #2D1810); - -/* Card hover - trรจs subtil */ ---gradient-card-hover: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02)); - -/* Button CTA - dimension */ ---gradient-cta: linear-gradient(135deg, #F97316, #FB923C); -``` - -### 2.3 Glow & Neon Effects - -L'identitรฉ TabataGo repose sur des **effets lumineux** qui donnent vie ร  l'interface. - -#### Glow Colors - -```css -/* Glow orange - principal */ ---glow-energy: 0 0 40px rgba(249, 115, 22, 0.5); ---glow-energy-intense: 0 0 80px rgba(249, 115, 22, 0.7); - -/* Glow blanc - รฉlรฉments actifs */ ---glow-white: 0 0 20px rgba(255, 255, 255, 0.3); - -/* Neon flame effect */ ---neon-flame: - 0 0 10px rgba(249, 115, 22, 0.8), - 0 0 20px rgba(249, 115, 22, 0.6), - 0 0 40px rgba(249, 115, 22, 0.4); -``` - -#### Applications du Glow - -| ร‰lรฉment | Effet | -|---------|-------| -| Bouton START | Glow breathing animรฉ (pulse) | -| Flamme streak | Neon flame effect | -| Card sรฉlectionnรฉe | Subtle glow border | -| Phase WORK active | Ambient glow en fond | -| Countdown โ‰ค3s | Glow rouge qui pulse | - ---- - -## 3. Typographie - -### 3.1 Police : Inter - -**Pourquoi Inter ?** -- Excellent rendu sur รฉcran -- Large gamme de weights pour le contrast mix -- Tabular nums pour le timer (pas de jitter) -- Google Fonts โ€” gratuit et performant - -### 3.2 Contrast Mix Philosophy - -**Heavy pour les titres, light pour le body.** Ce contraste crรฉe de l'impact et de l'รฉlรฉgance. - -| Usage | Weight | Size | Exemple | -|-------|--------|------|---------| -| Timer countdown | 900 (Black) | 140px | **20** | -| Brand title | 900 (Black) | 56px | **TABATA** | -| Headlines | 800 (ExtraBold) | 32px | **Terminรฉ !** | -| Body text | 400 (Regular) | 16px | Description du programme | -| Captions | 500 (Medium) | 14px | Labels, hints | - -### 3.3 Scale Typographique - -```css -/* Display - Impact maximal */ ---font-countdown: 900 140px/1 Inter; ---font-display: 900 42px/1.1 Inter; ---font-headline: 800 28px/1.2 Inter; - -/* Interactive */ ---font-button-hero: 900 30px/1 Inter; ---font-button: 700 18px/1 Inter; - -/* Body */ ---font-body: 400 16px/1.5 Inter; ---font-caption: 500 14px/1.4 Inter; ---font-overline: 600 11px/1.2 Inter; -``` - -### 3.4 Rรจgles Typographiques - -1. **Toujours tabular-nums** pour les chiffres du timer -2. **Letter-spacing gรฉnรฉreux** sur les all-caps (+2px minimum) -3. **Jamais de italic** sauf pour les citations -4. **Line-height serrรฉ** sur les grands titres (1.1) - ---- - -## 4. Iconographie - -### 4.1 Style : iOS Native - -Utiliser des icรดnes qui s'intรจgrent naturellement ร  l'รฉcosystรจme iOS, avec le style SF Symbols. - -**Caractรฉristiques :** -- Lignes medium (ni trop fines ni trop รฉpaisses) -- Coins arrondis -- Consistance visuelle -- Reconnaissance instantanรฉe - -### 4.2 Icรดnes Systรจme - -| Action | Icรดne | Style | -|--------|-------|-------| -| Play | โ–ถ๏ธ | SF Symbol `play.fill` | -| Pause | โธ๏ธ | SF Symbol `pause.fill` | -| Stop | โน๏ธ | SF Symbol `stop.fill` | -| Skip | โญ๏ธ | SF Symbol `forward.fill` | -| Settings | โš™๏ธ | SF Symbol `gearshape.fill` | -| Home | ๐Ÿ  | SF Symbol `house.fill` | -| History | ๐Ÿ“Š | SF Symbol `clock.fill` | - -### 4.3 Tailles d'Icรดnes - -| Contexte | Taille | -|----------|--------| -| Navigation tabs | 24ร—24px | -| Boutons controls | 28ร—28px | -| Cards (badges) | 16ร—16px | -| Headers | 20ร—20px | - ---- - -## 5. Imagerie & Illustrations - -### 5.1 Style : Realistic Photos - -**Pas de cartoon, pas d'abstrait.** Des vraies personnes qui font du sport. - -**Caractรฉristiques des photos :** -- Athlรจtes en action, pas poses statiques -- ร‰clairage dynamique, contrastรฉ -- Background flou/sombre -- Diversitรฉ de corps et d'origines -- Qualitรฉ haute rรฉsolution - -### 5.2 Traitement des Photos - -```css -/* Overlay pour intรฉgration dark mode */ -.photo-overlay { - background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%); -} - -/* Warm tint pour cohรฉrence brand */ -.photo-tint { - filter: saturate(1.1) sepia(0.1); -} -``` - -### 5.3 GIFs d'Exercices - -- Durรฉe : 1-2 secondes, loop seamless -- Format : 200ร—200px minimum -- Fond transparent ou sombre -- Modรจle en tenue fitness neutre - ---- - -## 6. Composants UI - -### 6.1 Boutons - -#### Primary CTA (Pill Filled) - -```css -.cta-primary { - background: linear-gradient(135deg, #F97316, #FB923C); - border-radius: 9999px; /* Full pill */ - padding: 16px 40px; - box-shadow: 0 0 40px rgba(249, 115, 22, 0.4); -} - -.cta-primary:active { - transform: scale(0.95); - box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); -} -``` - -#### Secondary Button - -```css -.cta-secondary { - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - padding: 12px 24px; -} -``` - -### 6.2 Cards - -#### Soft Elevated Cards - -```css -.card { - background: rgba(34, 34, 38, 0.8); /* DARK_RAISED */ - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.06); - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); -} - -.card-selected { - border-color: rgba(249, 115, 22, 0.3); - background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02)); - box-shadow: 0 0 30px rgba(249, 115, 22, 0.2); -} -``` - -### 6.3 Progress Indicators - -#### Progress Bar - -```css -.progress-bar { - height: 6px; - background: rgba(255, 255, 255, 0.08); - border-radius: 9999px; - overflow: hidden; -} - -.progress-fill { - background: linear-gradient(90deg, #F97316, #FB923C); - border-radius: 9999px; - transition: width 0.3s ease-out; -} -``` - -#### Creative Loading - -Style : barre de progression stylisรฉe avec glow. - -```css -.loading-bar { - height: 4px; - background: rgba(255, 255, 255, 0.1); - border-radius: 9999px; - overflow: hidden; -} - -.loading-fill { - width: 30%; - height: 100%; - background: linear-gradient(90deg, #F97316, #FB923C); - box-shadow: 0 0 10px rgba(249, 115, 22, 0.8); - animation: loading-slide 1.5s ease-in-out infinite; -} -``` - ---- - -## 7. Motion & Animation - -### 7.1 Philosophie : Bouncy & Playful - -**Les animations doivent sentir vivantes, pas robotiques.** - -| Type | Durรฉe | Easing | -|------|-------|--------| -| Micro-interactions | 100-200ms | Ease-out | -| Transitions standard | 300-400ms | Ease-in-out | -| Animations bouncy | 400-600ms | Spring (damping: 12, stiffness: 180) | -| Breathing loops | 2000-4000ms | Ease-in-out (loop) | - -### 7.2 Animations Clรฉs - -#### Glow Breathing (Bouton START) - -```css -@keyframes glow-breathe { - 0%, 100% { - box-shadow: 0 0 30px rgba(249, 115, 22, 0.3); - transform: scale(1); - } - 50% { - box-shadow: 0 0 60px rgba(249, 115, 22, 0.5); - transform: scale(1.02); - } -} -``` - -#### Pulse (Countdown) - -```css -@keyframes countdown-pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.03); } - 100% { transform: scale(1); } -} -/* 200ms per tick */ -``` - -#### Bouncy Pop (Victory) - -```css -@keyframes victory-pop { - 0% { transform: scale(0.5); opacity: 0; } - 60% { transform: scale(1.1); } - 100% { transform: scale(1); opacity: 1; } -} -/* 500ms total */ -``` - -#### Pulsing Circles (Hero) - -```css -@keyframes hero-pulse { - 0% { - transform: scale(0.8); - opacity: 0.8; - } - 100% { - transform: scale(2); - opacity: 0; - } -} -/* 2000ms, staggered */ -``` - -### 7.3 Micro-interactions Premium - -| Interaction | Feedback | -|-------------|----------| -| Tap bouton | `scale(0.95)` + haptic light | -| Tap card | `scale(0.98)` + border glow fade | -| Focus input | Border glow animation | -| Swipe | Resistance elastique | -| Phase change | Cross-fade 400ms + haptic medium | - ---- - -## 8. Effets Dรฉcoratifs - -### 8.1 Flamme Neon (Streak) - -La flamme reprรฉsente le streak โ€” elle doit รชtre **lumineuse, dynamic, motivante**. - -**Spรฉcifications :** -- Style : Neon glow flame -- Animation : Scale pulse + opacity flicker -- Couleurs : Orange avec halo lumineux -- Taille : 48-80px selon contexte - -```css -.neon-flame { - filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8)) - drop-shadow(0 0 20px rgba(249, 115, 22, 0.6)) - drop-shadow(0 0 40px rgba(249, 115, 22, 0.4)); - animation: flame-flicker 800ms ease-in-out infinite; -} - -@keyframes flame-flicker { - 0%, 100% { opacity: 0.9; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.05); } -} -``` - -### 8.2 Pulsing Circles (Background Hero) - -Utilisรฉs pour les moments de victoire et les รฉcrans hero. - -```css -.hero-circles::before, -.hero-circles::after { - content: ''; - position: absolute; - border-radius: 50%; - background: radial-gradient(circle, rgba(249,115,22,0.3), transparent 70%); - animation: hero-pulse 2000ms ease-out infinite; -} - -.hero-circles::after { - animation-delay: 1000ms; -} -``` - -### 8.3 Floating Particles - -Particules subtiles qui flottent en arriรจre-plan pour ajouter de la vie. - -**Spรฉcifications :** -- Nombre : 20-50 particules -- Taille : 2-6px -- Couleur : `rgba(255,255,255,0.1)` ร  `rgba(249,115,22,0.2)` -- Mouvement : Slow drift, random -- Opacitรฉ : 0.1-0.3 - ---- - -## 9. Spacing & Layout - -### 9.1 Whitespace Gรฉnรฉreux - -Le premium respire. **Plus d'espace = plus d'impact.** - -| Token | Valeur | Usage | -|-------|--------|-------| -| `space-xs` | 4px | Inline gaps | -| `space-sm` | 8px | Between related items | -| `space-md` | 16px | Section padding | -| `space-lg` | 24px | Between sections | -| `space-xl` | 40px | Major sections | -| `space-2xl` | 64px | Hero spacing | - -### 9.2 Rounded Corners - -| Token | Valeur | Usage | -|-------|--------|-------| -| `radius-sm` | 8px | Tags, small elements | -| `radius-md` | 12px | Buttons medium | -| `radius-lg` | 16px | Cards | -| `radius-xl` | 20px | Large cards, bottom sheets | -| `radius-full` | 9999px | Pills, circles | - ---- - -## 10. Son Design - -### 10.1 Philosophie - -Les sons doivent รชtre **subtils mais mรฉmorables**. Ils renforcent le feedback sans รชtre intrusifs. - -### 10.2 Sons Clรฉs - -| ร‰vรฉnement | Son | Caractรฉristiques | -|-----------|-----|------------------| -| Bip phase start | Court, percutant | 200ms, frรฉquence montante | -| Countdown tick | Click subtil | 100ms, tone medium | -| Phase WORK start | "Go!" ou bip fort | 300ms, รฉnergique | -| Victoire complรจte | Fanfare courte | 1000ms, cรฉlรฉbration | -| Haptic sync | Synchronisรฉ au son | Feedback tactile | - -### 10.3 Intรฉgration - -- Volume par dรฉfaut : 80% pour sons, 60% pour musique -- Ducking : Sons de phase prioritaire sur musique -- Respect silent mode (option override) - ---- - -## 11. Inspirations & Rรฉfรฉrences - -### 11.1 Apple Fitness+ - -**Ce qu'on en reprend :** -- Dark mode รฉlรฉgant avec accents colorรฉs -- Gradients subtils de phase -- Typography bold et impactante -- Animations fluides et premium -- Rings de progression stylisรฉs - -### 11.2 Gymshark - -**Ce qu'on en reprend :** -- ร‰nergie et dynamisme -- Communautรฉ et motivation -- Photography realistic fitness -- Brand bold et young - -### 11.3 Gaming UI (rรฉfรฉrence secondaire) - -**Ce qu'on en reprend :** -- Effets neon/glow -- Animations bouncy -- Feedback immรฉdiat et satisfaisant -- Progress bars crรฉatives - ---- - -## 12. Checklist Brand Consistency - -Avant chaque release, vรฉrifier : - -- [ ] **Orange utilisรฉ comme accent dominant** (pas diluรฉ) -- [ ] **Glow effects prรฉsents** sur les รฉlรฉments interactifs clรฉs -- [ ] **Animations bouncy** et non robotiques -- [ ] **Whitespace gรฉnรฉreux** โ€” pas de surcharge visuelle -- [ ] **Rounded corners** partout (pas de corners carrรฉs) -- [ ] **Photos realistic** et non illustrรฉes -- [ ] **Haptics synchronisรฉs** avec les interactions -- [ ] **Dark mode soft grey** et non true black -- [ ] **Contrast typo** (heavy titles, light body) -- [ ] **Feedback sonore subtil** mais prรฉsent - ---- - -## 13. Versions - -| Version | Date | Changements | -|---------|------|-------------| -| 1.0 | 18 fรฉvrier 2026 | Crรฉation initiale | - ---- - -*Document crรฉรฉ le 18 fรฉvrier 2026 โ€” TabataGo BDSD v1.0* diff --git a/.archive/TabataGo_PDD_v1.0.md b/.archive/TabataGo_PDD_v1.0.md deleted file mode 100644 index 4b70cb6..0000000 --- a/.archive/TabataGo_PDD_v1.0.md +++ /dev/null @@ -1,1994 +0,0 @@ -# TabataGo โ€” Product Design Document (PDD) v1.0 - -> Ce document dรฉfinit l'identitรฉ visuelle, les patterns UI/UX, et les spรฉcifications d'interaction pour l'application TabataGo. - ---- - -## 1. Vision Design - -### 1.1 Philosophie - -**"Immersion totale. Zรฉro friction. Maximum d'intensitรฉ."** - -TabataGo n'est pas une simple minuterie โ€” c'est une **expรฉrience**. Chaque รฉlรฉment visuel et sonore est conรงu pour : - -1. **Plonger l'utilisateur** dans un รฉtat de focus intense pendant les 20 secondes de travail -2. **ร‰liminer toute distraction** cognitive (pas de dรฉcisions ร  prendre pendant l'effort) -3. **Crรฉer une boucle รฉmotionnelle** positive qui encourage la rรฉgularitรฉ - -### 1.3 Principes Directeurs - -| Principe | Application | -|----------|-------------| -| **Dark-first** | L'app est conรงue pour le mode sombre par dรฉfaut โ€” l'expรฉrience en mode clair est secondaire | -| **Plein รฉcran immersif** | Pendant la sรฉance, RIEN ne doit distraire : ni barre de navigation, ni notifications | -| **Feedback immรฉdiat** | Chaque action gรฉnรจre une rรฉponse visuelle, sonore, et/ou haptique | -| **Progressive disclosure** | L'info complexe est rรฉvรฉlรฉe progressivement, jamais en bloc | -| **Gym-friendly** | L'interface doit รชtre lisible ร  2 mรจtres, avec des gestes simples | - ---- - -## 2. Systรจme de Design - -### 2.1 Palette de Couleurs - -#### Couleurs de Phase (Cล“ur de l'expรฉrience) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ IDLE โ”‚ Charcoal Night โ”‚ -โ”‚ โ”‚ #1E1E2E โ†’ Gradient profond violet/bleu โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ GET_READY โ”‚ Jaune Ambre โ”‚ -โ”‚ โ”‚ #EAB308 โ†’ "Prรฉpare-toi, รงa arrive" โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ WORK โ”‚ Orange Intense (Brand) โ”‚ -โ”‚ โ”‚ #F97316 โ†’ "Donne tout, maintenant !" โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ REST โ”‚ Bleu Calme โ”‚ -โ”‚ โ”‚ #3B82F6 โ†’ "Respire, rรฉcupรจre" โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ COMPLETE โ”‚ Vert Succรจs โ”‚ -โ”‚ โ”‚ #22C55E โ†’ "Bravo, tu l'as fait !" โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -#### Tokens de Couleur - -```typescript -// === ACCENT === -ORANGE: '#F97316' // Brand primary - CTA, timer actif -ORANGE_GLOW: '#FB923C' // Glow effects -RED_HOT: '#EF4444' // Danger, derniers secondes -GOLD: '#FBBF24' // Streaks, badges -WHITE: '#FFFFFF' - -// === TEXT === -PRIMARY: '#FFFFFF' // Titres -SECONDARY: 'rgba(255,255,255,0.85)' // Body -TERTIARY: 'rgba(255,255,255,0.75)' // Labels -MUTED: 'rgba(255,255,255,0.60)' // Texte secondaire -HINT: 'rgba(255,255,255,0.45)' // Placeholders, hints - -// === SURFACE === -BASE: '#0A0A14' // Background profond -RAISED: '#12101F' // Cards level 1 -ELEVATED: '#1E1E2E' // Cards level 2 -OVERLAY_LIGHT: 'rgba(255,255,255,0.08)' // Hover states -OVERLAY_MEDIUM: 'rgba(255,255,255,0.15)' // Active states -OVERLAY_STRONG: 'rgba(255,255,255,0.25)' // Selected states - -// === GLASS (Blur + Translucence) === -FILL: 'rgba(255,255,255,0.03)' -BORDER: 'rgba(255,255,255,0.08)' -BLUR_HEAVY: 40 // iOS-style toolbar blur -``` - -### 2.2 Typographie - -**Police principale : Inter** (Google Fonts, variable font) - -| Token | Taille | Poids | Usage | -|-------|--------|-------|-------| -| `countdown` | 140px | 900 (Black) | Chiffre principal du timer | -| `timeDisplay` | 72px | 900 (Black) | Durรฉe totale (รฉcran complete) | -| `brandTitle` | 56px | 900 (Black) | "TABATA" dans le logo | -| `displayLarge` | 42px | 900 (Black) | Titres onboarding | -| `displaySmall` | 32px | 900 (Black) | "GO" dans le logo | -| `buttonHero` | 30px | 900 (Black) | Bouton START principal | -| `heading` | 24px | 800 (ExtraBold) | Noms d'exercice, sections | -| `buttonMedium` | 20px | 700 (Bold) | Boutons secondaires | -| `body` | 18px | 700 (Bold) | Texte courant | -| `caption` | 16px | 500 (Medium) | Sous-titres | -| `label` | 15px | 800 (ExtraBold) | Badges, tags | -| `overline` | 11px | 600 (SemiBold) | Labels uppercase | - -**Note importante :** Toutes les valeurs numรฉriques (timer, durรฉes) utilisent `fontVariant: ['tabular-nums']` pour รฉviter le jitter visuel. - -### 2.3 Espacement (Spacing Scale) - -```typescript -SPACING = { - 0: 0, - 0.5: 2, - 1: 4, - 1.5: 6, - 2: 8, - 2.5: 10, - 3: 12, - 3.5: 14, - 4: 16, - 5: 20, - 6: 24, - 7: 28, - 8: 32, - 9: 36, - 10: 40, - 12: 48, - 14: 56, - 16: 64, -} -``` - -### 2.4 Border Radius - -```typescript -RADIUS = { - XS: 4, // Chips, small tags - SM: 6, // Small buttons - MD: 8, // Cards small, badges - LG: 12, // Cards medium - XL: 16, // Cards large, modals - 2XL: 20, // Bottom sheets - 3XL: 24, // Full-width buttons - FULL: 9999, // Pills, circular avatars -} -``` - ---- - -## 3. Composants UI Principaux - -### 3.1 Timer Display (ร‰cran Sรฉance) - -**Layout en 4 zones :** - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ ZONE HAUTE (10%) โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿ‹๏ธ Burpees 3/8 โ”‚ โ”‚ -โ”‚ โ”‚ (Nom exercice) (Badge round) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ ZONE CENTRALE (55%) โ”‚ -โ”‚ โ”‚ -โ”‚ PRร‰PARE-TOI โ”‚ -โ”‚ โ”‚ -โ”‚ 17 โ”‚ -โ”‚ (140px, pulsation) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ ZONE BASSE (35%) โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ— โ— โ— โ—‹ โ—‹ โ—‹ โ—‹ โ—‹ (Indicateurs rounds) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โธ๏ธ โน๏ธ โญ๏ธ (Contrรดles) โ”‚ โ”‚ -โ”‚ โ”‚ (Toolbar glass-morphism) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Comportement par phase :** - -| Phase | Fond | Timer | Label | Animation | -|-------|------|-------|-------|-----------| -| IDLE | Gradient sombre | โ€” | โ€” | Glow breathing | -| GET_READY | Gradient jaune/ambre | Pulsation | "PRร‰PARE-TOI" | Fade in du nom d'exercice | -| WORK | Gradient rouge/orange | Pulsation forte | "GO !" | Glow orange intensif | -| REST | Gradient bleu | Pulsation douce | "REPOS" | Affiche "Prochain : [exercice]" | -| COMPLETE | Gradient vert | โ€” | "TERMINร‰ !" | Spring bouncy | - -**Transitions :** -- Cross-fade 400ms entre les gradients de phase -- Pulse du chiffre ร  chaque seconde รฉcoulรฉe -- Flash rouge si โ‰ค3 secondes restantes - -### 3.2 Bouton Start (IDLE Screen) - -**Spรฉcifications :** -- Taille : 150ร—150px, parfaitement rond -- Couleur : `#F97316` (Orange brand) -- Glow : `#F97316` avec `opacity: 0.3 โ†’ 0.6` en breathing (4s cycle) -- Shadow : `0 0 60px rgba(249,115,22,0.5)` -- Press state : `scale(0.95)` - -**Animation breathing :** -```typescript -Animated.loop( - Animated.sequence([ - Animated.timing(glowAnim, { toValue: 1, duration: 2000 }), - Animated.timing(glowAnim, { toValue: 0, duration: 2000 }), - ]) -) -``` - -### 3.3 Controls Bar (Toolbar) - -**Style glass-morphism iOS :** -```typescript - - {/* Round indicators */} - {/* Pause / Stop / Skip buttons */} - -``` - -**Boutons :** -- Fond : `rgba(255,255,255,0.15)` avec border `rgba(255,255,255,0.08)` -- Taille : 56ร—56px -- Border radius : 16px -- Press : `scale(0.92)` + haptics lรฉger - -### 3.4 Indicateurs de Round - -**8 dots horizontaux :** -- Dot vide : 8ร—8px, `rgba(255,255,255,0.15)` -- Dot rempli : 8ร—8px, `rgba(255,255,255,0.85)` -- Dot actif : 12ร—12px, `#FFFFFF` avec glow blanc - -### 3.5 Program Card (Home Screen) - -**Dimensions :** `SCREEN_WIDTH - 48` de largeur - -**Structure :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โœ“ (selected) BEGINNER (badge) โ—‰ (mode) โ”‚ -โ”‚ โ”‚ -โ”‚ Tabata Classic โ”‚ -โ”‚ 8 rounds de Burpees pour commencer en force โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Burpees โ”‚ โ”‚ Squats โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ -โ”‚ 8 rounds โ”‚ 4 min โ”‚ 1 ex. โ”‚ -โ”‚ โ”‚ -โ”‚ Toucher pour dรฉtails โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**ร‰tats :** -- Default : fond `rgba(255,255,255,0.03)`, border `rgba(255,255,255,0.08)` -- Selected : fond avec gradient orange `rgba(249,115,22,0.12)` + checkmark orange - ---- - -## 4. Flows Utilisateur - -### 4.1 Onboarding (6 ร‰crans) - -**Navigation :** Boutons Prรฉcรฉdent / Suivant en bas de chaque รฉcran - -**Indicateurs de progression :** 6 dots en bas, le dot actif est rempli - ---- - -#### ร‰cran 1 โ€” Le Problรจme (Accroche) - -**Objectif :** Identifier la douleur (manque de temps) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โฐ โ”‚ -โ”‚ (Animation horloge qui se fragmente) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ "Tu n'as pas 1 heure โ”‚ -โ”‚ pour la salle. โ”‚ -โ”‚ Personne n'en a." โ”‚ -โ”‚ โ”‚ -โ”‚ "Et pourtant tu veux โ”‚ -โ”‚ progresser. โ”‚ -โ”‚ On a la solution." โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SUIVANT โ†’ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ— โ—‹ โ—‹ โ—‹ โ—‹ โ—‹ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Animation horloge | Lottie 120ร—120px, loop | -| Titre principal | `TYPOGRAPHY.displayLarge` (42px), `TEXT.PRIMARY` | -| Sous-titre | `TYPOGRAPHY.body`, `TEXT.MUTED` | -| Bouton | Full-width pill, `BRAND.PRIMARY` | -| Haptic | `impactAsync(Medium)` au tap | - ---- - -#### ร‰cran 2 โ€” L'Empathie (Choix) - -**Objectif :** Faire sentir l'utilisateur compris - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ "Qu'est-ce qui t'empรชche โ”‚ -โ”‚ de t'entraรฎner ?" โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿ˜ฐ Manque de temps โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿ˜” Motivation en berne โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿค” Je ne sais pas quoi faire โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿ  Je n'ai pas accรจs ร  une salle โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SUIVANT โ†’ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ—‹ โ— โ—‹ โ—‹ โ—‹ โ—‹ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Question | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` | -| Option card | Height 56px, `SURFACE.OVERLAY_LIGHT` | -| Option sรฉlectionnรฉe | Border `BRAND.PRIMARY`, bg `rgba(249,115,22,0.1)` | -| Emoji | 24px | -| Texte option | `TYPOGRAPHY.body`, `TEXT.SECONDARY` | - -**Comportement :** -- Multi-select autorisรฉ (jusqu'ร  2 choix) -- La rรฉponse est stockรฉe pour personnaliser la suite -- Le bouton "Suivant" est dรฉsactivรฉ tant qu'aucun choix - ---- - -#### ร‰cran 3 โ€” La Solution (Preuves) - -**Objectif :** Convaincre avec des preuves scientifiques + comparaison - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ "4 minutes." โ”‚ -โ”‚ "Vraiment transformatrices." โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ“Š TABATA (4 min) vs CARDIO (30 min) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ โ”‚ โ”‚ -โ”‚ โ”‚ 85 kcal 90 kcal โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ "Autant de calories en 7x moins de temps" โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿงฌ "La mรฉthode Tabata augmente la capacitรฉ โ”‚ โ”‚ -โ”‚ โ”‚ aรฉrobie et anaรฉrobie simultanรฉment." โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ€” Dr. Izumi Tabata, 1996 โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SUIVANT โ†’ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ—‹ โ—‹ โ— โ—‹ โ—‹ โ—‹ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Titre | `TYPOGRAPHY.displayLarge`, `TEXT.PRIMARY` | -| Graphique | Barres comparatives animรฉes | -| Barre Tabata | `BRAND.PRIMARY` | -| Barre Cardio | `TEXT.MUTED` | -| Citation | `TYPOGRAPHY.caption`, `TEXT.TERTIARY`, italique | -| Auteur | `TYPOGRAPHY.overline`, `TEXT.HINT` | - -**Animation :** -- Les barres grandissent de 0 ร  leur hauteur finale (600ms) -- La citation fade-in aprรจs les barres (300ms delay) - ---- - -#### ร‰cran 4 โ€” Le Moment "Wow" (Mini-Dรฉmo) - -**C'est le moment critique de conversion.** - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ "Essaie maintenant" โ”‚ -โ”‚ "20 secondes. Juste pour sentir." โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ GET READY โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ 10 โ”‚ โ”‚ -โ”‚ โ”‚ (Mini-timer 140px) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ [GIF exercice - Burpees 120ร—120] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ "Prรฉpare-toi... Le timer va bientรดt commencer !" โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ C'ร‰TAIT FACILE ! โ”‚ โ”‚ -โ”‚ โ”‚ (Apparaรฎt aprรจs completion) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ—‹ โ—‹ โ—‹ โ— โ—‹ โ—‹ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Sรฉquence :** -1. Affichage initial : Timer ร  10s GET_READY -2. Timer dรฉcompte 10โ†’0 avec sons + haptics -3. Transition automatique vers 20s WORK -4. Timer dรฉcompte 20โ†’0 avec phase orange -5. Fin โ†’ Affichage "C'รฉtait facile !" en fade-in + haptics succรจs - -**Comportement :** -- Auto-start aprรจs 2 secondes sur l'รฉcran -- Sons + vibrations activรฉs -- Le bouton n'apparaรฎt qu'aprรจs completion -- Tap "C'รฉtait facile !" โ†’ รฉcran suivant - ---- - -#### ร‰cran 5 โ€” Personnalisation - -**Objectif :** Crรฉer un investissement personnel - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ "Configurons ta premiรจre semaine." โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Ton niveau fitness โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ—‹ Dรฉbutant โ—‹ Intermรฉdiaire โ—‹ Avancรฉ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Ton objectif โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ—‹ Perte de poids โ—‹ Cardio โ—‹ Force โ—‹ Zen โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Frรฉquence souhaitรฉe โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ—‹ 2x/semaine โ—‹ 3x/semaine โ—‹ 5x/semaine โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Comment tu t'appelles ? [________Marie________] โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SUIVANT โ†’ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ—‹ โ—‹ โ—‹ โ—‹ โ— โ—‹ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Titre section | `TYPOGRAPHY.overline`, `TEXT.HINT` | -| Options | Radio buttons horizontaux | -| Option sรฉlectionnรฉe | `BRAND.PRIMARY` border + fill | -| Input prรฉnom | Full-width, bg `SURFACE.OVERLAY_LIGHT` | - -**Donnรฉes collectรฉes :** -- Niveau โ†’ influence les programmes suggรฉrรฉs -- Objectif โ†’ influence le ton des messages -- Frรฉquence โ†’ influence les rappels de notification -- Prรฉnom โ†’ personnalise le greeting sur Home - ---- - -#### ร‰cran 6 โ€” Paywall - -**Objectif :** Convertir avec l'essai gratuit - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ "Continue sur ta lancรฉe. โ”‚ -โ”‚ Sans limite." โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โœจ Passe Premium โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โœ“ Programmes illimitรฉs โ”‚ โ”‚ -โ”‚ โ”‚ โœ“ Cycles multiples โ”‚ โ”‚ -โ”‚ โ”‚ โœ“ Stats avancรฉes โ”‚ โ”‚ -โ”‚ โ”‚ โœ“ Widgets iOS/Android โ”‚ โ”‚ -โ”‚ โ”‚ โœ“ Sans publicitรฉ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ—‹ $4.99/mois โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ— $29.99/an ร‰CONOMISE 50% โ˜… BEST โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ COMMENCER L'ESSAI GRATUIT โ”‚ โ”‚ -โ”‚ โ”‚ (7 jours) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ Annule ร  tout moment โ€ข Satisfait ou remboursรฉ โ”‚ -โ”‚ โ”‚ -โ”‚ [ Continuer sans abonnement ] โ”‚ -โ”‚ โ”‚ -โ”‚ โ—‹ โ—‹ โ—‹ โ—‹ โ—‹ โ— โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Titre | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` | -| Liste avantages | `TYPOGRAPHY.body`, `TEXT.SECONDARY` | -| Checkmark | `BRAND.SUCCESS` | -| Prix | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` | -| Badge "BEST" | Small pill, `BRAND.PRIMARY` | -| CTA principal | Full-width, `BRAND.PRIMARY` | -| Lien secondaire | `TYPOGRAPHY.caption`, `TEXT.HINT` | - -**Comportement :** -- Essai gratuit 7 jours sรฉlectionnรฉ par dรฉfaut -- "Continuer sans abonnement" โ†’ accรจs limitรฉ Free -- RevenueCat gรจre l'abonnement - ---- - -### 4.2 Flow Principal (Post-Onboarding) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ HOME โ”‚โ”€โ”€โ”€โ”€โ–ถโ”‚ PROGRAM โ”‚โ”€โ”€โ”€โ”€โ–ถโ”‚ TIMER โ”‚ -โ”‚ (Tab 1) โ”‚ โ”‚ DETAIL โ”‚ โ”‚ (Active) โ”‚ -โ”‚ โ”‚ โ”‚ (Modal) โ”‚ โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ โ”‚ - โ”‚ โ”‚ - โ–ผ โ–ผ -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ HISTORY โ”‚ โ”‚ COMPLETE โ”‚ -โ”‚ (Tab 2) โ”‚ โ”‚ (Victory) โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -### 4.3 Flow Timer Dรฉtaillรฉ - -``` -IDLE โ”€โ”€โ”€(START)โ”€โ”€โ–ถ GET_READY โ”€โ”€โ”€(auto)โ”€โ”€โ–ถ WORK โ”€โ”€โ”€(auto)โ”€โ”€โ–ถ REST - โ”‚ โ”‚ โ”‚ โ”‚ - โ”‚ โ”‚ โ”‚ โ”‚ - โ”‚ โ”‚ โ”‚ โ”‚ - โ–ผ โ–ผ โ–ผ โ–ผ - โ”‚ 10 secondes 20 secondes 10 secondes - โ”‚ โ”‚ โ”‚ โ”‚ - โ”‚ โ”‚ โ”‚ โ”‚ - โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ โ”‚ - โ”‚ (Boucle ร— rounds) - โ”‚ โ”‚ - โ”‚ โ–ผ - โ”‚ COMPLETE - โ”‚ โ”‚ - โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Interactions pendant le timer :** -- โธ๏ธ Pause : Gรจle le timer, affiche "EN PAUSE" -- โ–ถ๏ธ Resume : Reprend lร  oรน on s'รฉtait arrรชtรฉ -- โน๏ธ Stop : Confirme l'arrรชt โ†’ retour HOME -- โญ๏ธ Skip : Passe ร  la phase suivante (haptic lรฉger) - ---- - -## 5. Animations & Motion - -### 5.1 Constantes d'Animation - -```typescript -// Durรฉes -DURATION = { - INSTANT: 100, // Feedback immรฉdiat - FAST: 200, // Micro-interactions - NORMAL: 300, // Transitions standards - SLOW: 400, // Cross-fades, reveals - BREATHING: 2000, // Animations cycliques -} - -// Easing -EASING = { - STANDARD: Easing.inOut(Easing.cubic), - DECELERATE: Easing.out(Easing.cubic), - BOUNCE: Easing.elastic(1.2), -} - -// Spring configs -SPRING = { - GENTLE: { damping: 20, stiffness: 150 }, - BOUNCY: { damping: 12, stiffness: 180 }, - SNAPPY: { damping: 25, stiffness: 300 }, -} -``` - -### 5.2 Animations par Composant - -| Composant | Animation | Durรฉe | Easing | -|-----------|-----------|-------|--------| -| Timer countdown | Pulse scale (1.0 โ†’ 1.03 โ†’ 1.0) | 200ms | Decelerate | -| Phase gradient | Cross-fade opacity | 400ms | Standard | -| Button press | Scale (1.0 โ†’ 0.95) | 100ms | Instant | -| Card selection | Border glow fade-in | 200ms | Standard | -| Victory title | Scale spring (0.5 โ†’ 1.0) | 500ms | Bouncy | -| Glow breathing | Opacity (0.3 โ†’ 0.6 โ†’ 0.3) | 4000ms | Standard | - -### 5.3 Haptics - -| ร‰vรฉnement | Type Haptic | -|-----------|-------------| -| Appui sur bouton | `impactAsync(Light)` | -| Changement de phase | `impactAsync(Medium)` | -| Fin de sรฉance | `notificationAsync(Success)` | -| Derniรจres 3 secondes | `impactAsync(Light)` ร  chaque seconde | -| Skip phase | `impactAsync(Light)` | - ---- - -## 6. Responsive Design - -### 6.1 Breakpoints - -```typescript -// Dimensions cibles -const SCREEN = { - WIDTH: Dimensions.get('window').width, - HEIGHT: Dimensions.get('window').height, -} - -// Adaptations -const isSmallDevice = SCREEN.WIDTH < 375 // iPhone SE -const isLargeDevice = SCREEN.WIDTH > 414 // iPhone Plus/Max -``` - -### 6.2 Adaptations - -| ร‰lรฉment | Small (<375px) | Default | Large (>414px) | -|---------|----------------|---------|----------------| -| Timer font | 120px | 140px | 160px | -| Card padding | 16px | 24px | 28px | -| Button height | 48px | 54px | 60px | -| CTA width | 130px | 150px | 170px | - -### 6.3 Safe Areas - -Tous les รฉcrans respectent `react-native-safe-area-context` : -- `paddingTop: insets.top` pour le notch -- `paddingBottom: insets.bottom` pour la home indicator - ---- - -## 7. Accessibilitรฉ - -### 7.1 Requirements Minimum - -| Critรจre | Implรฉmentation | -|---------|----------------| -| Contraste | WCAG AA minimum (4.5:1 pour texte) | -| Taille tactile | Minimum 44ร—44px pour tous les boutons | -| Font scaling | Respecter `Dynamic Type` iOS et font scale Android | -| VoiceOver | Labels sur tous les รฉlรฉments interactifs | -| Rรฉduction mouvement | Respecter `AccessibilityInfo.reduceMotionEnabled` | - -### 7.2 Labels VoiceOver - -```typescript - -``` - ---- - -## 8. ร‰tats & Edge Cases - -### 8.1 ร‰tats de Timer - -| ร‰tat | Affichage | -|------|-----------| -| IDLE | Bouton START pulsant, config visible | -| RUNNING | Timer actif, contrรดles visibles | -| PAUSED | "EN PAUSE" overlay, timer figรฉ | -| BACKGROUND | Notification sticky avec countdown | -| COMPLETE | ร‰cran victoire avec stats | - -### 8.2 Gestion d'Erreurs - -| Erreur | Comportement UI | -|--------|-----------------| -| Audio load fail | Toast discret "Son non disponible" | -| Network error | "Mode offline activรฉ" | -| Storage full | Alerte + suggestion de cleanup | - -### 8.3 Interruptions - -| Interruption | Comportement | -|--------------|--------------| -| Appel entrant | Pause automatique | -| App backgrounded | Timer continue, notification visible | -| App killed | Au retour : "Sรฉance interrompue โ€” Reprendre ?" | - ---- - -## 9. Iconographie - -### 9.1 Icรดnes Timer Controls - -| Action | Icรดne | Source | -|--------|-------|--------| -| Play | โ–ถ๏ธ | Ionicons `play` | -| Pause | โธ๏ธ | Ionicons `pause` | -| Stop | โน๏ธ | Ionicons `stop` | -| Skip | โญ๏ธ | Ionicons `play-skip-forward` | - -### 9.2 Icรดnes Tab Bar - -| Tab | Icรดne | Label | -|-----|-------|-------| -| Home | ๐Ÿ  | `home` | -| History | ๐Ÿ“Š | `time` | -| Settings | โš™๏ธ | `settings` | - ---- - -## 10. Spรฉcifications par ร‰cran - -### 10.1 Home Screen (Tab 1) - -**Objectif :** Motiver l'utilisateur avec sa progression (streak #1) + lancer rapidement une sรฉance - -**ร‰motion cible :** ร‰nergie / Motivation โ€” "Je peux le faire, c'est parti !" - ---- - -#### 10.1.1 Layout Global (Scroll Vertical) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ NOTCH / STATUS BAR โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 1 : HEADER + GREETING โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ† 7 JOURS ๐Ÿ”ฅ (flamme animรฉe) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ "Bonjour Marie, prรชt ร  transpirer ?" โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 2 : MINI CALENDRIER (semaine) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ L M M J V S D โ”‚ โ”‚ -โ”‚ โ”‚ โ— โ— โ—‹ โ— โ— โ—‹ โ—‹ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 3 : STATS RAPIDES โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ“Š 24 sรฉances ๐Ÿ”ฅ 1,250 kcal โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 4 : PROGRAMME SUGGร‰Rร‰ (Hero Card) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ˜… RECOMMANDร‰ BEGINNER โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Tabata Classic โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ 8 rounds de Burpees pour commencer โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ Burpees โ”‚ 8 rounds โ€ข 4 min โ€ข 1 ex. โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 5 : AUTRES PROGRAMMES (Liste verticale) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Tabata Duo โ—‡ INTERM โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Squats + Push-ups alternรฉs โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ 8 rounds โ€ข 4 min โ€ข 2 ex. โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Cardio Burn โ—‰ ADVANCE โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ High knees + Burpees + Jump squats โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ 8 rounds โ€ข 4 min โ€ข 4 ex. โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ [ Voir tous les programmes โ†’ ] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ SECTION 6 : CTA FIXE (sticky bottom) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ START โ”‚ โ”‚ -โ”‚ โ”‚ (Bouton pulsant 150ร—150) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ Tabata Classic โ€ข 4 min โ€ข 8 rounds โ”‚ -โ”‚ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ TAB BAR (Home | History | Settings) โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -#### 10.1.2 Section par Section - -##### **Section 1 : Header + Greeting** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Streak counter | `TYPOGRAPHY.displaySmall` (32px, 900), `BRAND.PRIMARY` | -| Flamme | Animation Lottie ou sรฉquence d'images (60ร—60px) | -| Greeting | "Bonjour [Prรฉnom], prรชt ร  transpirer ?" โ€” `TYPOGRAPHY.body` (18px) | -| Couleur texte | `TEXT.PRIMARY` pour le streak, `TEXT.SECONDARY` pour le greeting | - -**Animation flamme :** -- Cycle 800ms : scale 1.0 โ†’ 1.1 โ†’ 1.0 -- Opacity flicker subtil : 0.9 โ†’ 1.0 โ†’ 0.9 -- Trigger : si streak โ‰ฅ 3 jours - -##### **Section 2 : Mini Calendrier Semaine** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Layout | 7 colonnes รฉgales (L M M J V S D) | -| Jour actif (sรฉance faite) | Dot plein 12ร—12px, `BRAND.PRIMARY` | -| Jour inactif | Dot vide 12ร—12px, border `BORDER.LIGHT` | -| Jour actuel | Dot 16ร—16px avec glow `BRAND.PRIMARY` | -| Labels | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` | - -**Gamification :** -- Si 7/7 jours actifs โ†’ animation de cรฉlรฉbration (confettis ou badge "Parfait !") - -##### **Section 3 : Stats Rapides** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Layout | 2 colonnes รฉgales | -| Icรดne | 24ร—24px, `TEXT.MUTED` | -| Valeur | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` | -| Label | `TYPOGRAPHY.caption` (16px), `TEXT.MUTED` | - -**Donnรฉes :** -- Sรฉances totales : nombre de sรฉances complรฉtรฉes depuis le dรฉbut -- Calories : estimation basรฉe sur durรฉe ร— intensitรฉ (arrondi) - -##### **Section 4 : Programme Suggรฉrรฉ (Hero Card)** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Badge "RECOMMANDร‰" | `TYPOGRAPHY.overline`, bg `rgba(249,115,22,0.15)`, `BRAND.PRIMARY` | -| Badge difficultรฉ | Voir 10.1.4 ci-dessous | -| Titre programme | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` | -| Description | `TYPOGRAPHY.body` (18px, 700), `TEXT.MUTED` | -| Exercice tag | Pill `RADIUS.MD`, bg `rgba(249,115,22,0.12)`, `BRAND.PRIMARY` | -| Mรฉtadonnรฉes | `TYPOGRAPHY.caption`, `TEXT.HINT` | - -**Logique de suggestion :** -- J+1 aprรจs onboarding โ†’ "Tabata Classic" (beginner) -- Si sรฉance faite hier โ†’ programme diffรฉrent suggรฉrรฉ -- Si 7+ sรฉances โ†’ programme plus avancรฉ suggรฉrรฉ - -##### **Section 5 : Autres Programmes (Liste)** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Card height | 100px approx | -| Card bg | `SURFACE.OVERLAY_LIGHT`, border `BORDER.LIGHT` | -| Press state | `SURFACE.OVERLAY_MEDIUM` + `scale(0.98)` | -| Mode icรดne | โ—‰ SINGLE, โ—‡ DUO, โ—ˆ CIRCUIT โ€” `BRAND.PRIMARY` | - -**Interactions :** -- Tap card โ†’ sรฉlectionne le programme + met ร  jour le CTA -- "Voir tous les programmes โ†’" โ†’ modal plein รฉcran avec tous les programmes - -##### **Section 6 : CTA Fixe (Sticky Bottom)** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Container | `position: absolute, bottom: TAB_BAR_HEIGHT + insets.bottom` | -| Bouton | 150ร—150px, circulaire, `BRAND.PRIMARY` | -| Glow | 172ร—172px derriรจre, opacity 0.3โ†’0.6 en breathing (4s) | -| Texte | "START" โ€” `TYPOGRAPHY.buttonHero` (30px, 900) | -| Hint | Programme sรฉlectionnรฉ + durรฉe + rounds โ€” `TYPOGRAPHY.caption` | - -**Animation bouton pulsant :** -```typescript -Animated.loop( - Animated.sequence([ - Animated.timing(pulseAnim, { - toValue: 1.05, - duration: 800, - easing: EASING.STANDARD, - }), - Animated.timing(pulseAnim, { - toValue: 1, - duration: 800, - easing: EASING.STANDARD, - }), - ]) -) -``` - -**Press :** -- `scale(0.95)` + `Haptics.impactAsync(Medium)` -- Navigate vers `/timer` - ---- - -#### 10.1.3 Badges de Difficultรฉ - -| Niveau | Couleur texte | Background | -|--------|---------------|------------| -| BEGINNER | `#4ADE80` (vert) | `rgba(74, 222, 128, 0.15)` | -| INTERMEDIATE | `#FBBF24` (or) | `rgba(251, 191, 36, 0.15)` | -| ADVANCED | `#F87171` (rouge) | `rgba(248, 113, 113, 0.15)` | - -#### 10.1.4 Mode Icรดnes (Programmes) - -| Mode | Icรดne | Description | -|------|-------|-------------| -| SINGLE | โ—‰ | 1 exercice rรฉpรฉtรฉ ร— 8 rounds | -| DUO | โ—‡ | 2 exercices alternรฉs | -| CIRCUIT_4 | โ—ˆ | 4 exercices en circuit | - ---- - -#### 10.1.5 ร‰tats Spรฉciaux - -| ร‰tat | Affichage | -|------|-----------| -| Nouvel utilisateur (J+0) | Streak = 0, message "Commence ton aventure !" | -| Streak cassรฉ | "Ton streak รฉtait de X jours. Relance-le !" | -| Nouveau record (7 jours) | Confettis + badge "๐Ÿ”ฅ 7 jours de suite !" | -| Pas de sรฉance hier | Message doux : "Hier c'รฉtait repos. Aujourd'hui on y va !" | - ---- - -#### 10.1.6 Interactions Rรฉsumรฉes - -| Action | Rรฉsultat | -|--------|----------| -| Tap sur Hero Card | Dรฉplie les dรฉtails (exercices, durรฉe) | -| Tap sur autre programme | Sรฉlectionne + met ร  jour le CTA | -| Tap "Voir tous" | Modal plein รฉcran avec grille de programmes | -| Tap START | Haptic + navigate `/timer` | -| Scroll | Le CTA reste sticky en bas | - ---- - -### 10.2 Timer Screen (Plein รฉcran) - -**Objectif :** Focus total, zรฉro distraction โ€” l'utilisateur ne voit QUE ce qui compte - -**ร‰motion cible :** Immersion intense, flow state - ---- - -#### 10.2.1 Layout (Single View) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ GRADIENT DE PHASE (fond plein รฉcran) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ZONE HAUTE (15%) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ‹๏ธ Burpees 3/8 โ”‚ โ”‚ -โ”‚ โ”‚ (Nom exercice) (Badge round) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ZONE CENTRALE (60%) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ [GIF EXERCICE 180ร—180] โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ (Animation boucle) โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ PRร‰PARE-TOI โ”‚ โ”‚ -โ”‚ โ”‚ (Label phase) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ 17 โ”‚ โ”‚ -โ”‚ โ”‚ (140px countdown) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ZONE BASSE (25%) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ”‚ โ”‚ -โ”‚ โ”‚ (Progress bar - progression totale de la sรฉance) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ—€โ”€ SWIPE GAUCHE = Skip โ”‚ SWIPE BAS = Stop โ”€โ–ถ โ”‚ -โ”‚ (Hints invisibles, appris lors de l'onboarding) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -#### 10.2.2 Zones Dรฉtaillรฉes - -##### **Zone Haute (15%)** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Nom exercice | `TYPOGRAPHY.body` (18px), `TEXT.SECONDARY` | -| Badge round | `TYPOGRAPHY.label`, bg `SURFACE.OVERLAY_MEDIUM`, pill | -| Position | Alignรฉ gauche (nom) / droite (badge) | -| Animation | Fade in/out lors des transitions d'exercice | - -##### **Zone Centrale (60%)** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| GIF exercice | 180ร—180px, border radius `RADIUS.XL` (16px) | -| GIF border | `BORDER.LIGHT` (rgba 0.06) | -| Label phase | `TYPOGRAPHY.heading` (24px), `TEXT.TERTIARY`, letter-spacing 6px | -| Countdown | `TYPOGRAPHY.countdown` (140px, 900), `TEXT.PRIMARY` | - -**Animation countdown :** -- Pulse scale ร  chaque seconde : `1.0 โ†’ 1.03 โ†’ 1.0` (200ms) -- Si โ‰ค3 secondes : couleur `ACCENT.RED_HOT` + pulse plus fort - -##### **Zone Basse (25%) - Progress Bar** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Hauteur | 6px | -| Position | 32px au-dessus du bottom safe area | -| Background | `SURFACE.OVERLAY_LIGHT` (rgba 0.08) | -| Fill | `BRAND.PRIMARY` (#F97316) | -| Border radius | `RADIUS.FULL` (pill) | -| Animation | Width animรฉe progressivement | - -**Calcul progression :** -```typescript -const progress = ( - (currentRound - 1) * (workDuration + restDuration) + - (phase === 'WORK' ? workDuration - secondsLeft : workDuration + restDuration - secondsLeft) -) / (totalRounds * (workDuration + restDuration)) -``` - ---- - -#### 10.2.3 Phases Visuelles - -##### **Couleurs de Phase (Gradients)** - -| Phase | Gradient | Label | Son | -|-------|----------|-------|-----| -| GET_READY | `['#451A03', '#92400E', '#D97706']` | "PRร‰PARE-TOI" | 3 bips courts | -| WORK | `['#450A0A', '#991B1B', '#EA580C']` | "GO !" | Bip long + haptic fort | -| REST | `['#0C1929', '#1E3A5F', '#2563EB']` | "REPOS" | Double bip + haptic lรฉger | - -**Transition de phase :** -- Cross-fade du gradient : 400ms, `EASING.STANDARD` -- Le label change instantanรฉment -- Son jouรฉ au moment du changement - -##### **Labels par Phase** - -| Phase | Label | Couleur texte | -|-------|-------|---------------| -| GET_READY | "PRร‰PARE-TOI" | `TEXT.TERTIARY` | -| WORK | "GO !" | `ACCENT.ORANGE` | -| REST | "REPOS" + "Prochain : [exercice]" | `TEXT.TERTIARY` | - ---- - -#### 10.2.4 Gestures (Contrรดles Invisibles) - -| Gesture | Action | Feedback | -|---------|--------|----------| -| **Tap** | Pause | Haptic lรฉger + overlay pause | -| **Swipe gauche** | Skip phase | Modal confirmation | -| **Swipe bas** | Stop sรฉance | Modal confirmation "Quitter ?" | - -**Apprentissage des gestures :** -- Montrรฉs uniquement lors de l'รฉcran 4 (Wow Moment) de l'onboarding -- Hint "Tap pour pause" disparaรฎt aprรจs 3 utilisations -- Pas d'hints permanents pour ne pas distraire - ---- - -#### 10.2.5 ร‰tat PAUSE (Auto-resume 10s) - -**Dรฉclenchement :** Tap sur l'รฉcran pendant la sรฉance active - -**Affichage :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ GRADIENT ASSOMBI (overlay noir 0.4) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โธ๏ธ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ EN PAUSE โ”‚ -โ”‚ โ”‚ -โ”‚ Reprise dans โ”‚ -โ”‚ โ”‚ -โ”‚ 10 โ”‚ -โ”‚ (Dรฉcompte auto) โ”‚ -โ”‚ โ”‚ -โ”‚ [ Reprendre maintenant ] โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Overlay | `rgba(0,0,0,0.4)` | -| Icรดne pause | 80ร—80px, `TEXT.MUTED` | -| Label "EN PAUSE" | `TYPOGRAPHY.heading`, `TEXT.SECONDARY` | -| Dรฉcompte | `TYPOGRAPHY.timeDisplay` (72px), `TEXT.PRIMARY` | -| Bouton reprendre | Pill, `BRAND.PRIMARY`, `TYPOGRAPHY.buttonMedium` | - -**Comportement :** -- Dรฉcompte de 10 secondes -- Si 0 โ†’ auto-resume automatiquement -- Tap sur "Reprendre maintenant" โ†’ resume immรฉdiat -- Tap ailleurs โ†’ resume immรฉdiat - ---- - -#### 10.2.6 Skip Phase (Confirmation) - -**Dรฉclenchement :** Swipe gauche - -**Affichage :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ Passer cette phase ? โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Annuler โ”‚ โ”‚ Passer โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Comportement :** -- "Annuler" โ†’ ferme le modal, sรฉance continue -- "Passer" โ†’ passe ร  la phase suivante + haptic lรฉger - ---- - -#### 10.2.7 Stop Sรฉance (Confirmation) - -**Dรฉclenchement :** Swipe bas - -**Affichage :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โš ๏ธ Quitter la sรฉance ? โ”‚ -โ”‚ โ”‚ -โ”‚ Tu as fait 3/8 rounds. โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Continuerโ”‚ โ”‚ Quitter โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Comportement :** -- "Continuer" โ†’ ferme le modal, sรฉance continue -- "Quitter" โ†’ sauvegarde la sรฉance partielle โ†’ retour Home - ---- - -#### 10.2.8 ร‰cran COMPLETE (Victoire) - -**Dรฉclenchement :** Dernier round terminรฉ - -**Layout :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ GRADIENT VERT SUCCESS โ”‚ -โ”‚ ['#052E16', '#166534', '#16A34A'] โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ ๐Ÿ”ฅ โ”‚ -โ”‚ (Flamme animรฉe 80px) โ”‚ -โ”‚ โ”‚ -โ”‚ TERMINร‰ ! โ”‚ -โ”‚ โ”‚ -โ”‚ 4:00 โ”‚ -โ”‚ (Durรฉe totale) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ 8 rounds 85 kcal โ”‚ โ”‚ -โ”‚ โ”‚ (Stats en ligne) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ ๐Ÿ† Streak : 8 jours ! โ”‚ -โ”‚ (Si nouveau record ou maintenu) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ TERMINER โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Flamme | Animation Lottie 80ร—80px, loop | -| "TERMINร‰ !" | `TYPOGRAPHY.displayLarge` (42px), `TEXT.PRIMARY` | -| Durรฉe | `TYPOGRAPHY.timeDisplay` (72px), `TEXT.PRIMARY` | -| Stats | `TYPOGRAPHY.body`, `TEXT.TERTIARY` | -| Streak update | `TYPOGRAPHY.heading`, `BRAND.GOLD` | -| Bouton "Terminer" | Pill `RADIUS.3XL`, `SURFACE.OVERLAY_MEDIUM` | - -**Animations de cรฉlรฉbration :** -1. **Flamme animรฉe** : scale pulse 1.0 โ†’ 1.15 โ†’ 1.0 (600ms loop) -2. **Haptics succรจs** : `Haptics.notificationAsync(Success)` -3. **Son victoire** : Fanfare / cloche de victoire - ---- - -#### 10.2.9 Comportements Techniques - -| Comportement | Implรฉmentation | -|--------------|----------------| -| StatusBar | `hidden` pendant toute la sรฉance | -| Keep awake | `expo-keep-awake` activรฉ | -| Back button | Affiche modal "Quitter ?" | -| Appel entrant | Pause automatique | -| Background | Timer continue, notification sticky | -| App killed | Au retour : "Sรฉance interrompue โ€” Reprendre ?" | - ---- - -### 10.3 History Screen (Tab 2) - -**Objectif :** Visualiser sa progression et ressentir de la fiertรฉ - -**ร‰motion cible :** Fiertรฉ / Accomplissement โ€” "Regarde tout ce que j'ai fait !" - ---- - -#### 10.3.1 Layout Global (Scroll Vertical) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ NOTCH / STATUS BAR โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 1 : HEADER + STREAK HERO โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ”ฅ 7 โ”‚ โ”‚ -โ”‚ โ”‚ (Flamme + nombre) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ JOURS DE SUITE โ”‚ โ”‚ -โ”‚ โ”‚ (Animation pulse sur le chiffre) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 2 : STATS GLOBALES (Ligne) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ“Š 24 sรฉances ๐Ÿ”ฅ 1,250 kcal ๐Ÿ† 12 (best) โ”‚ โ”‚ -โ”‚ โ”‚ (All-time) (All-time) (All-time) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 3 : CALENDRIER MENSUEL โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ—€ Fรฉvrier 2026 โ–ถ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ L M M J V S D โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ 1 2 3 4 โ”‚ โ”‚ -โ”‚ โ”‚ โ— โ— โ—‹ โ— โ— โ—‹ โ—‹ (Points colorรฉs) โ”‚ โ”‚ -โ”‚ โ”‚ 5 6 7 8 9 10 11 โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ— โ—‹ โ— โ— โ— โ—‹ โ—‹ โ”‚ โ”‚ -โ”‚ โ”‚ 12 13 14 15 16 17 18 โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ... โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 4 : GRAPHIQUES (Cette semaine) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Sร‰ANCES CETTE SEMAINE โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ L M M J V S D โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ CALORIES CETTE SEMAINE โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“โ–“โ–“ โ–“โ–“ โ–“โ–“โ–“โ–“ โ–“โ–“โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ–“โ–“โ–“โ–“ โ–“โ–“ โ–“โ–“โ–“โ–“ โ–“โ–“โ–“โ–“ โ–“โ–“ โ–“โ–“ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ L M M J V S D โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ร‰VOLUTION DU STREAK โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ—โ”€โ—โ”€โ— โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ—โ”€โ—โ”€โ—โ”€โ—โ”€โ— โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ—โ”€โ—โ”€โ— โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ—โ”€โ— โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ S1 S2 S3 S4 S5 S6 โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ TAB BAR (Home | History | Settings) โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -#### 10.3.2 Section 1 : Streak Hero - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Flamme | 48ร—48px, animation Lottie (pulse) | -| Nombre streak | `TYPOGRAPHY.displayLarge` (42px, 900), `BRAND.GOLD` | -| Label | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` | -| Container | Centrรฉ, padding vertical `SPACING[8]` | - -**Animation pulse (au chargement de l'รฉcran) :** -```typescript -Animated.sequence([ - Animated.timing(streakScale, { toValue: 1.15, duration: 300 }), - Animated.timing(streakScale, { toValue: 1, duration: 200 }), -]) -``` - -**ร‰tats spรฉciaux :** -| Streak | Affichage | -|--------|-----------| -| 0 | "Commence ton streak !" | -| 1-6 | Normal | -| 7 | "Une semaine complรจte !" | -| 30+ | Badge spรฉcial + flamme dorรฉe | - ---- - -#### 10.3.3 Section 2 : Stats Globales (All-time) - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Layout | 3 colonnes รฉgales, centrรฉes | -| Icรดne | 20ร—20px, `TEXT.MUTED` | -| Valeur | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` | -| Label | `TYPOGRAPHY.caption` (12px), `TEXT.HINT` | - -**Donnรฉes :** -- **Sรฉances totales** : Nombre de sรฉances depuis le dรฉbut -- **Calories totales** : Somme des calories estimรฉes -- **Best streak** : Meilleur streak personnel atteint - ---- - -#### 10.3.4 Section 3 : Calendrier Mensuel - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Header | Mois + annรฉe, flรจches navigation `<` `>` | -| Jours labels | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` | -| Numรฉros | `TYPOGRAPHY.caption` (14px), `TEXT.MUTED` | -| Jour actif | Point 8ร—8px, `BRAND.PRIMARY` | -| Jour inactif | Pas de point | -| Aujourd'hui | Border `BRAND.PRIMARY` autour du numรฉro | -| Grid | 7 colonnes, 5-6 lignes | - -**Navigation :** -- Swipe horizontal โ†’ mois prรฉcรฉdent/suivant -- Tap sur flรจche โ†’ mois prรฉcรฉdent/suivant - ---- - -#### 10.3.5 Section 4 : Graphiques (Cette semaine) - -##### **Graphique 1 : Sรฉances par jour** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Titre | "Sร‰ANCES CETTE SEMAINE", `TYPOGRAPHY.overline` | -| Type | Bar chart vertical | -| Bar height | Max 120px, proportionnel au nombre de sรฉances | -| Bar color | `BRAND.PRIMARY` | -| Labels X | L M M J V S D, `TYPOGRAPHY.caption` | -| Animation | Bars grow from 0 ร  valeur au chargement | - -##### **Graphique 2 : Calories par jour** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Titre | "CALORIES CETTE SEMAINE", `TYPOGRAPHY.overline` | -| Type | Bar chart vertical | -| Bar color | `BRAND.SECONDARY` (gold) | -| Animation | Bars grow from 0 ร  valeur au chargement | - -##### **Graphique 3 : ร‰volution du Streak** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Titre | "ร‰VOLUTION DU STREAK", `TYPOGRAPHY.overline` | -| Type | Line chart | -| Line color | `BRAND.PRIMARY` | -| Point | Cercle 6ร—6px sur chaque data point | -| Labels X | S1, S2, S3... (semaines), `TYPOGRAPHY.caption` | -| Animation | Line draws from left to right | - -**Animation des graphiques :** -```typescript -// Bar chart animation -Animated.timing(barHeight, { - toValue: finalHeight, - duration: 600, - easing: EASING.DECELERATE, -}) - -// Line chart animation -Animated.timing(lineProgress, { - toValue: 1, - duration: 1000, - easing: EASING.STANDARD, -}) -``` - ---- - -#### 10.3.6 Interactions - -| Action | Rรฉsultat | -|--------|----------| -| Swipe calendrier | Change de mois | -| Tap sur un jour | Affiche dรฉtail de la sรฉance (si active) | -| Scroll | Navigue entre les sections | -| Tap sur graphique | Affiche tooltip avec valeur exacte | - ---- - -#### 10.3.7 ร‰tats Spรฉciaux - -| ร‰tat | Affichage | -|------|-----------| -| Nouvel utilisateur | "Ton historique est vide. Commence ta premiรจre sรฉance !" | -| Aucune sรฉance cette semaine | "Pas encore de sรฉance cette semaine. C'est le moment !" | -| Nouveau record streak | Badge animรฉ + confettis | - ---- - -### 10.4 Settings Screen (Tab 3) - -**Objectif :** Personnaliser l'expรฉrience et gรฉrer son compte - -**Style visuel :** Cards groupรฉes avec icรดnes - ---- - -#### 10.4.1 Layout Global (Scroll Vertical) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ NOTCH / STATUS BAR โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 1 : PROFIL โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ‘ค Prรฉnom Marie โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐ŸŒ Langue Franรงais โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 2 : TIMER (Avancรฉ) โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โฑ๏ธ Durรฉe travail 20s โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ’ค Durรฉe repos 10s โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ”ข Nombre de rounds 8 โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โณ Prรฉparation (Get Ready) 10s โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ”„ Cycles (Premium) 1 ๐Ÿ”’ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ˜• Pause entre cycles (Premium) 60s ๐Ÿ”’ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 3 : AUDIO โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐ŸŽต Volume musique โ”€โ”€โ”€โ”€โ”€โ—โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ”” Volume sons โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ—โ”€โ”€ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐ŸŽง Ambiance Electro โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ“ณ Haptics โ—‰ On โ—‹ Off โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 4 : NOTIFICATIONS โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โฐ Rappel quotidien โ—‰ On 09:00 โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ“ข Rappel inactivitรฉ โ—‰ On 2 jours โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ† Fรฉlicitations streak โ—‰ On โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 5 : ABONNEMENT (Paywall intรฉgrรฉe) โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โœจ Passe Premium โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โˆž Programmes illimitรฉs โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โˆž Cycles multiples โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โˆž Stats avancรฉes โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โˆž Widgets โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ $4.99/mois ou $29.99/an (-50%) โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ [ Essai gratuit 7 jours ] โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 6 : ร€ PROPOS โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ„น๏ธ Version 1.0.0 โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ“œ Conditions d'utilisation โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ๐Ÿ”’ Politique de confidentialitรฉ โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โœ‰๏ธ Contacter le support โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โญ Noter l'app โ–ถ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SECTION 7 : DANGER โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โš ๏ธ Rรฉinitialiser toutes les donnรฉes โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ TAB BAR (Home | History | Settings) โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -#### 10.4.2 Section 1 : Profil - -| Row | Icรดne | Label | Valeur | Action | -|-----|-------|-------|--------|--------| -| Prรฉnom | ๐Ÿ‘ค | Prรฉnom | "Marie" | Modal input | -| Langue | ๐ŸŒ | Langue | "Franรงais" | Picker modal | - -**Langues disponibles :** FR, EN, ES, DE, PT-BR - ---- - -#### 10.4.3 Section 2 : Timer (Avancรฉ) - -| Row | Icรดne | Label | Valeur dรฉfaut | Range | Premium ? | -|-----|-------|-------|---------------|-------|-----------| -| Durรฉe travail | โฑ๏ธ | Durรฉe travail | 20s | 5-60s | Non | -| Durรฉe repos | ๐Ÿ’ค | Durรฉe repos | 10s | 5-60s | Non | -| Rounds | ๐Ÿ”ข | Rounds | 8 | 1-30 | Non | -| Prรฉparation | โณ | Get Ready | 10s | 0-30s | Non | -| Cycles | ๐Ÿ”„ | Cycles | 1 | 1-10 | **Oui** ๐Ÿ”’ | -| Pause cycles | โ˜• | Pause cycles | 60s | 10-300s | **Oui** ๐Ÿ”’ | - -**UI pour les valeurs :** -- Tap โ†’ Modal avec slider + input numรฉrique -- Lock ๐Ÿ”’ โ†’ Affiche "Dรฉbloquer avec Premium" - ---- - -#### 10.4.4 Section 3 : Audio - -| Row | Type | Spรฉcification | -|-----|------|---------------| -| Volume musique | Slider | 0-100%, default 70% | -| Volume sons | Slider | 0-100%, default 100% | -| Ambiance | Picker | Electro / Hip-Hop / Rock / Silence | -| Haptics | Toggle | On / Off | - -**Slider style :** -- Track height : 4px -- Thumb : 24ร—24px, `BRAND.PRIMARY` -- Track color : `SURFACE.OVERLAY_MEDIUM` / `BRAND.PRIMARY` (filled) - ---- - -#### 10.4.5 Section 4 : Notifications - -| Row | Type | Spรฉcification | -|-----|------|---------------| -| Rappel quotidien | Toggle + Time | Heure picker (default 09:00) | -| Rappel inactivitรฉ | Toggle + Days | "Aprรจs X jours sans sรฉance" (default 2) | -| Fรฉlicitations streak | Toggle | On/Off | - -**Permission request :** -- Premier toggle โ†’ demande de permission systรจme -- Si refusรฉ โ†’ message "Active les notifications dans les rรฉglages iOS" - ---- - -#### 10.4.6 Section 5 : Abonnement (Paywall Intรฉgrรฉe) - -**Si Free User :** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Titre | "โœจ Passe Premium" | -| Liste avantages | 4 lignes avec โœ“ | -| Pricing | `$4.99/mois` ou `$29.99/an (-50%)` | -| CTA | "Essai gratuit 7 jours" | -| Secondary | "Restaurer les achats" | - -**Si Premium User :** - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Statut | "โœจ Premium Actif" | -| Renouvellement | "Renouvellement le 15 mars 2026" | -| CTA | "Gรฉrer l'abonnement" (ouvre App Store) | - ---- - -#### 10.4.7 Section 6 : ร€ Propos - -| Row | Action | -|-----|--------| -| Version | Statique (lecture seule) | -| CGU | Ouvre browser / WebView | -| Confidentialitรฉ | Ouvre browser / WebView | -| Support | Ouvre mailto: ou formulaire | -| Noter l'app | `expo-store-review` โ†’ App Store | - ---- - -#### 10.4.8 Section 7 : Danger - -| Row | Action | -|-----|--------| -| Rรฉinitialiser | Modal confirmation โ†’ Supprime toutes les donnรฉes locales | - -**Modal de confirmation :** -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โš ๏ธ Rรฉinitialiser les donnรฉes ? โ”‚ -โ”‚ โ”‚ -โ”‚ Cette action supprimera votre historique, โ”‚ -โ”‚ votre streak et vos prรฉfรฉrences. โ”‚ -โ”‚ โ”‚ -โ”‚ Cette action est irrรฉversible. โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Annuler โ”‚ โ”‚ Effacer โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -#### 10.4.9 Style des Cards - -| ร‰lรฉment | Spรฉcification | -|---------|---------------| -| Card bg | `SURFACE.OVERLAY_LIGHT` (rgba 0.08) | -| Card border | `BORDER.LIGHT` (rgba 0.06) | -| Card radius | `RADIUS.XL` (16px) | -| Row height | 56px | -| Row separator | `BORDER.SUBTLE` (1px line) | -| Icรดne | 24ร—24px, `TEXT.MUTED` | -| Label | `TYPOGRAPHY.body` (18px), `TEXT.PRIMARY` | -| Value | `TYPOGRAPHY.caption`, `TEXT.MUTED` | -| Chevron | `TEXT.HINT` | - ---- - -#### 10.4.10 Interactions - -| Action | Rรฉsultat | -|--------|----------| -| Tap row avec chevron | Ouvre modal / picker | -| Tap toggle | Toggle immรฉdiat + haptic | -| Drag slider | Update valeur + haptic au release | -| Tap "Effacer" | Confirmation puis reset | - ---- - -## 10.5 Modals & Bottom Sheets - -### 10.5.1 Program Detail Bottom Sheet - -**Dรฉclenchement :** Tap sur une card programme depuis le Home Screen - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ (ร‰cran Home floutรฉ en arriรจre-plan) โ”‚ -โ”‚ โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ -โ”‚ โ”‚ (Handle drag) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Tabata Classic BEGINNER โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ 8 rounds de Burpees pour commencer en force โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ EXERCICES โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ 1. ๐Ÿ‹๏ธ Burpees โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Cardio complet, full body โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ (Rรฉpรฉtรฉ ร— 8 rounds) โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ CONFIGURATION โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โฑ๏ธ 20s travail ๐Ÿ’ค 10s repos ๐Ÿ”ข 8 rounds โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ C'EST PARTI ! โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Changer de programme โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Height | ~70% de l'รฉcran | -| Handle | 36ร—4px pill, `TEXT.HINT` | -| Background | `SURFACE.BASE` (#0A0A14) | -| Border top | `BORDER.MEDIUM` + radius `RADIUS.2XL` (20px) | -| Animation | Slide up from bottom, 300ms | - -**Interactions :** -- Swipe down โ†’ ferme le bottom sheet -- Tap "C'est parti !" โ†’ navigue vers Timer -- Tap "Changer de programme" โ†’ ferme le sheet + scroll vers autres programmes - ---- - -### 10.5.2 Paywall Contextuel (Popup) - -**Dรฉclenchement :** Tap sur une feature premium (cadenas ๐Ÿ”’) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ (ร‰cran floutรฉ + overlay noir 0.6) โ”‚ -โ”‚ โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ ๐Ÿ”“ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ "Dรฉbloquer les cycles multiples" โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Passe Premium pour accรฉder ร  โ”‚ โ”‚ -โ”‚ โ”‚ cette fonctionnalitรฉ. โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ ESSAI GRATUIT 7 JOURS โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ $4.99/mois ou $29.99/an โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โœ• Fermer โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Spรฉcifications :** -| ร‰lรฉment | Valeur | -|---------|--------| -| Modal width | 85% de l'รฉcran | -| Modal radius | `RADIUS.2XL` (20px) | -| Background | `SURFACE.ELEVATED` (#1E1E2E) | -| Overlay | `rgba(0,0,0,0.6)` | -| Animation | Scale + fade in, 250ms | - -**Dรฉclencheurs :** -- Settings โ†’ Cycles (๐Ÿ”’) -- Settings โ†’ Pause entre cycles (๐Ÿ”’) -- Home โ†’ Programme premium (๐Ÿ”’) -- History โ†’ Stats avancรฉes (๐Ÿ”’) - ---- - -### 10.5.3 Modals de Confirmation - -**Style gรฉnรฉrique pour toutes les confirmations :** - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ (ร‰cran floutรฉ + overlay) โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ [ICร”NE] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ [TITRE] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ [DESCRIPTION] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Annuler โ”‚ โ”‚ Confirmer โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -**Variantes :** - -| Type | Icรดne | Titre exemple | -|------|-------|---------------| -| Danger | โš ๏ธ | "Supprimer les donnรฉes ?" | -| Stop | โน๏ธ | "Quitter la sรฉance ?" | -| Skip | โญ๏ธ | "Passer cette phase ?" | -| Info | โ„น๏ธ | "Activer les notifications ?" | - -**Couleurs boutons :** -- Annuler : `SURFACE.OVERLAY_MEDIUM` -- Confirmer (normal) : `BRAND.PRIMARY` -- Confirmer (danger) : `BRAND.DANGER` - ---- - -## 11. Annexe : Checklist Design Review - -Avant chaque release, vรฉrifier : - -- [ ] Contraste WCAG AA sur tous les textes -- [ ] Taille minimum 44px sur tous les boutons touchables -- [ ] Animations fluides ร  60fps (pas de jitter) -- [ ] Haptics prรฉsents sur toutes les interactions principales -- [ ] Transitions de phase fluides (cross-fade) -- [ ] Safe areas respectรฉes sur iPhone X+ -- [ ] VoiceOver labels sur รฉlรฉments interactifs -- [ ] Mode rรฉduction mouvement respectรฉ -- [ ] Timer prรฉcis (pas de drift visible) -- [ ] Notifications background fonctionnelles - ---- - -*Document crรฉรฉ le 18 fรฉvrier 2026 โ€” TabataGo PDD v1.0* diff --git a/.archive/TabataGo_PRD_v1.1.md b/.archive/TabataGo_PRD_v1.1.md deleted file mode 100644 index cebeb1a..0000000 --- a/.archive/TabataGo_PRD_v1.1.md +++ /dev/null @@ -1,597 +0,0 @@ - - -| ๐Ÿ”ฅ TABATAGO Application Mobile de Minuterie Tabata *Product Requirements Document (PRD) v1.1* Framework : Expo (React Native) ยท Cible : iOS & Android ยท Fรฉvrier 2026 | -| :---: | - -# **1\. Rรฉsumรฉ Exรฉcutif** - -TabataGo est une application mobile premium dรฉdiรฉe ร  l'entraรฎnement par intervalles en mรฉthode Tabata (20 secondes d'effort / 10 secondes de repos). Elle cible les personnes qui veulent des sรฉances courtes, intenses et guidรฉes โ€” sans abonnement ร  une salle. Le marchรฉ des applications de fitness dรฉpasse 1,5 milliard de dollars en revenus annuels et le Tabata reste un mot-clรฉ ร  forte demande (popularitรฉ \> 70\) avec une difficultรฉ ASO modรฉrรฉe (\< 50). - -| Indicateur | Valeur cible | -| :---- | :---- | -| Marchรฉ visรฉ | Fitness enthousiasts 25-45 ans, Home workout, HIIT lovers | -| Plateformes | iOS (prioritรฉ) \+ Android | -| Framework | Expo (React Native) โ€” SDK 52+ | -| Modรจle รฉconomique | Freemium \+ Abonnement mensuel/annuel via RevenueCat | -| Prix cible (US) | $4.99/mois ou $29.99/an | -| Objectif J+30 | 5 000 tรฉlรฉchargements, taux de conversion essai \> 30% | -| Objectif J+90 | MRR $5 000, note App Store โ‰ฅ 4.6 | - -# **2\. Fonctionnalitรฉs Core โ€” Spรฉcifications Dรฉtaillรฉes** - -TabataGo repose sur trois piliers fonctionnels indissociables : le Timer (moteur de l'expรฉrience), la Musique (moteur รฉmotionnel), et l'Exercice (moteur pรฉdagogique). Ces trois composants doivent fonctionner en parfaite synchronisation. - -## **2.1 Le Timer โ€” Moteur Central** - -Le timer est la fonctionnalitรฉ principale et vitale de l'application. Son implรฉmentation doit รชtre irrรฉprochable : prรฉcision, fluiditรฉ visuelle, comportement en arriรจre-plan. - -### **2.1.1 Structure d'une Sรฉance Tabata Standard** - -| Phase | Durรฉe par dรฉfaut | Configurable ? | Couleur รฉcran | Signal | -| :---- | :---- | :---- | :---- | :---- | -| Prรฉparation (Get Ready) | 10 secondes | Oui (5โ€“30s) | Jaune \#EAB308 | Bip court ร— 3 \+ vibration lรฉgรจre | -| Travail (Work) | 20 secondes | Oui (5โ€“60s) | Orange vif \#F97316 | Bip long au dรฉmarrage \+ haptique fort | -| Repos (Rest) | 10 secondes | Oui (5โ€“60s) | Bleu calme \#3B82F6 | Double bip court \+ haptique lรฉger | -| Fin de round | Instantanรฉ | โ€” | Flash blanc | Son de cloche \+ vibration | -| Fin de sรฉance | ร‰cran rรฉsultat | โ€” | Vert \#22C55E | Fanfare \+ longue vibration | - -### **2.1.2 Paramรจtres Configurables du Timer** - -| Paramรจtre | Valeur par dรฉfaut | Min | Max | Accรจs | -| :---- | :---- | :---- | :---- | :---- | -| Durรฉe Work | 20s | 5s | 60s | Tous | -| Durรฉe Rest | 10s | 5s | 60s | Tous | -| Nombre de rounds | 8 | 1 | 30 | Tous | -| Durรฉe Get Ready | 10s | 0s | 30s | Tous | -| Nombre de cycles | 1 | 1 | 10 | Premium | -| Pause entre cycles | 60s | 10s | 300s | Premium | -| Cycles de rรฉcupรฉration | โ€” | โ€” | โ€” | Premium | - -### **2.1.3 Affichage Timer โ€” ร‰cran Sรฉance (plein รฉcran)** - -| ๐Ÿ“ฑ LAYOUT โ€” ร‰cran Timer Plein ร‰cran | -| :---- | -| โ–ธ Zone HAUTE (20%) : Nom de l'exercice en cours \+ numรฉro de round (ex: "Burpees โ€” Round 3/8") | -| โ–ธ Zone CENTRALE (50%) : Chiffre du compte ร  rebours โ€” trรจs grand (96-120px), police monospace, couleur de phase | -| โ–ธ Zone BASSE HAUTE (15%) : Barre de progression de la sรฉance complรจte (rounds) \+ indicateur phase actuelle | -| โ–ธ Zone BASSE (15%) : Boutons Pause / Stop / Skip โ€” discrets pour ne pas distraire | -| โ–ธ FOND : Couleur dynamique selon la phase (orange work, bleu rest, jaune prep) avec transition animรฉe | -| โ–ธ ANIMATION : Pulsation subtile du chiffre ร  chaque seconde \+ ring circulaire de progression | - -### **2.1.4 Comportement Technique du Timer** - -* Prรฉcision : Utiliser expo-background-fetch \+ Date.now() delta pour compenser les drifts โ€” tolรฉrance \< 50ms - -* Background : Le timer continue en arriรจre-plan (notification sticky affichant le compte ร  rebours) - -* Verrouillage รฉcran : ร‰cran reste allumรฉ pendant la sรฉance (expo-keep-awake) - -* Interruptions : Pause automatique si appel tรฉlรฉphonique entrant (AppState listener) - -* Reprise : Si l'app est tuรฉe, afficher une notification "Sรฉance interrompue โ€” Reprendre ?" au retour - -* OTA update safe : Le state du timer est isolรฉ du cycle de render React pour รฉviter les glitches - -## **2.2 La Musique โ€” Moteur ร‰motionnel** - -La musique transforme une simple minuterie en expรฉrience motivante. Elle doit s'adapter dynamiquement ร  chaque phase de la sรฉance (work vs rest) et ne jamais entrer en conflit avec la musique de l'utilisateur ou les signaux sonores. - -### **2.2.1 Architecture Sonore** - -| Couche audio | Description | Technologie | Contrรดle utilisateur | -| :---- | :---- | :---- | :---- | -| Musique d'ambiance | Tracks BPM-synchronisรฉes intรฉgrรฉes ร  l'app | expo-av (AVAudioSession) | Volume indรฉpendant, on/off | -| Signaux de phase | Bips, voix, cloche โ€” changement work/rest | expo-av (prioritรฉ haute) | Volume indรฉpendant, choix du son | -| Voix coach | Annonces vocales (optionnel) : "Go\!", "Rest", "Last round\!" | expo-av (TTS ou fichiers prรฉ-enregistrรฉs) | On/off, langue | -| Haptiques | Vibrations synchronisรฉes aux signaux | expo-haptics | On/off | - -### **2.2.2 Catalogue Musical Intรฉgrรฉ (Offline)** - -| ๐ŸŽต TRACKS INTร‰GRร‰ES โ€” 3 ambiances ร— 3 intensitรฉs \= 9 tracks minimum | -| :---- | -| โ–ธ Ambiance ELECTRO : Low (rรฉcup), Medium (standard), High (intense) โ€” BPM 120/140/160 | -| โ–ธ Ambiance HIP-HOP : Low (rรฉcup), Medium (standard), High (intense) โ€” BPM 85/100/115 | -| โ–ธ Ambiance ROCK/METAL : Low (rรฉcup), Medium (standard), High (intense) โ€” BPM 130/150/170 | -| โ–ธ Mode SILENCE : Aucune musique, uniquement les signaux sonores de phase | -| โ–ธ Mode SPOTIFY/APPLE MUSIC : L'app n'interfรจre pas avec la musique de l'utilisateur (coexistence audio) | -| โ–ธ Toutes les tracks sont royalty-free et embarquรฉes dans le bundle โ€” aucun streaming requis | - -### **2.2.3 Synchronisation Musique โ†” Timer** - -* Phase WORK : Passer automatiquement ร  la track haute intensitรฉ de l'ambiance sรฉlectionnรฉe - -* Phase REST : Transition en fade-out 1s vers la track basse intensitรฉ (ambiance calme) - -* Phase GET READY : Intro de 10s sur la track principale - -* Transition douce : Cross-fade 500ms entre les phases pour รฉviter les coupures brutales - -* BPM adaptatif (Premium) : L'app dรฉtecte le rythme de la track et aligne le bip de fin de phase sur le beat - -* Pas de conflit : Si l'utilisateur a sa propre musique, les signaux de phase s'y superposent en ducking audio (baisse temporaire du volume) - -### **2.2.4 Signaux Sonores de Phase โ€” Options** - -| Signal | Options disponibles | Par dรฉfaut | Premium uniquement ? | -| :---- | :---- | :---- | :---- | -| Dรฉbut Work | Bip long, Whistle, Voix "Go\!", Air horn, Clap | Bip long | Non | -| Dรฉbut Rest | Double bip, Voix "Rest", Bell, Ding | Double bip | Non | -| Dรฉcompte 3-2-1 | Bips courts, Voix "3, 2, 1", Silence | Bips courts | Non | -| Fin de round | Cloche, Applaudissements, Voix "Round X done\!" | Cloche | Oui | -| Fin de sรฉance | Fanfare, Applaudissements, Voix "Workout complete\!" | Fanfare | Non | -| Dernier round | Voix "Last round\!", Alarm, Son spรฉcial | Voix | Oui | - -### **2.2.5 Gestion Technique Audio (expo-av)** - -* Session audio iOS : AVAudioSessionCategoryPlayback avec MixWithOthers โ€” permet de jouer avec la musique utilisateur - -* Focus audio Android : AudioManager.AUDIOFOCUS\_GAIN\_TRANSIENT\_MAY\_DUCK pour les signaux - -* Prรฉchargement : Tous les sons de phase sont chargรฉs en mรฉmoire au dรฉmarrage de la sรฉance (zรฉro latence) - -* Mode silencieux iOS : Les signaux de phase respectent le switch mute SAUF si l'utilisateur a activรฉ "override" dans les settings - -* Headphones dรฉtection : Si รฉcouteurs branchรฉs, dรฉsactiver les haptiques de phase par dรฉfaut - -## **2.3 L'Exercice โ€” Moteur Pรฉdagogique** - -Chaque round du timer doit รชtre associรฉ ร  un exercice spรฉcifique, affichรฉ clairement pendant la phase de travail. C'est ce qui diffรฉrencie TabataGo d'une simple minuterie gรฉnรฉrique. - -### **2.3.1 Bibliothรจque d'Exercices** - -| Catรฉgorie | Exemples d'exercices | Nb exercices V1 | Nb exercices V2 | -| :---- | :---- | :---- | :---- | -| Cardio / Full body | Burpees, Jumping Jacks, Mountain Climbers, High Knees | 8 | 20 | -| Bas du corps | Squats, Fentes, Jump Squats, Glute Bridges, Wall Sit | 8 | 20 | -| Haut du corps | Push-ups, Pike Push-ups, Tricep Dips, Shoulder Taps | 6 | 15 | -| Abdos / Core | Crunches, Planche, Russian Twists, Bicycle Crunches | 6 | 15 | -| Sans saut (low impact) | Slow Squats, Modified Push-ups, Step Touch, March | 6 | 15 | -| Avec matรฉriel | Kettlebell Swings, Dumbbell Thrusters, Jump Rope | 4 | 10 | - -### **2.3.2 Fiche Exercice โ€” Donnรฉes par Exercice** - -| ๐Ÿ“‹ MODรˆLE DE DONNร‰ES โ€” Exercice | -| :---- | -| โ–ธ id : identifiant unique (ex: "burpee\_classic") | -| โ–ธ name : Nom localisรฉ (FR: "Burpee", EN: "Burpee", ES: "Burpee") | -| โ–ธ category : cardio | lower\_body | upper\_body | core | low\_impact | equipment | -| โ–ธ difficulty : beginner | intermediate | advanced | -| โ–ธ musclesTargeted : string\[\] (ex: \["quadriceps", "pectoraux", "cardio"\]) | -| โ–ธ description : Instruction courte (max 80 car.) โ€” affichรฉe pendant la phase Rest | -| โ–ธ cues : string\[\] โ€” 2-3 points clรฉs de forme (ex: "Dos droit", "Genoux alignรฉs") | -| โ–ธ gifUrl : Animation GIF courte (1-2s, loop) โ€” 200ร—200px max โ€” embarquรฉe offline | -| โ–ธ thumbnailUrl : Image statique pour la bibliothรจque | -| โ–ธ hasModification : bool โ€” si une variante plus facile existe | -| โ–ธ modificationId : id de l'exercice de remplacement (ex: "burpee\_modified") | -| โ–ธ equipmentNeeded : string\[\] (ex: \[\] pour aucun, \["tapis"\] pour matรฉriel simple) | - -### **2.3.3 Affichage de l'Exercice Pendant la Sรฉance** - -| Phase | Affichage exercice | Taille | Information complรฉmentaire | -| :---- | :---- | :---- | :---- | -| GET READY (10s) | Nom \+ GIF animรฉ de dรฉmonstration | Grande โ€” focus total | "Voici l'exercice suivant" โ€” prรฉpare mentalement | -| WORK (20s) | Nom en haut \+ compteur central โ€” GIF en petit coin | Nom moyen, timer dominant | 1-2 cues de forme affichรฉs sous le nom | -| REST (10s) | Nom de l'EXERCICE SUIVANT \+ vignette | Taille moyenne | "Prochain : \[Nom\]" โ€” anticipation | -| FIN DE ROUND | Rรฉsumรฉ rapide du round (1s) | Plein รฉcran flash | Round X complรฉtรฉ \+ prochain exercice | - -### **2.3.4 Types de Programmes Tabata** - -| ๐Ÿ—‚๏ธ PROGRAMMES DISPONIBLES โ€” V1 | -| :---- | -| โ–ธ MODE 1 โ€” Exercice unique rรฉpรฉtรฉ : Le mรชme exercice sur les 8 rounds (ex: 8 rounds de Burpees) โ€” Tabata classique | -| โ–ธ MODE 2 โ€” Circuit 2 exercices : Alternance A/B sur 8 rounds (ex: Squats / Push-ups ร— 4 rรฉpรฉtitions) โ€” Tabata duo | -| โ–ธ MODE 3 โ€” Circuit 4 exercices : 4 exercices ร— 2 rounds chacun โ€” Tabata circuit (Premium) | -| โ–ธ MODE 4 โ€” Programme libre : L'utilisateur assigne manuellement un exercice ร  chaque round (Premium) | -| โ–ธ MODE 5 โ€” Programme IA : Sรฉlection automatique selon niveau, objectif et historique (Premium V2) | - -### **2.3.5 Crรฉateur de Programme Personnalisรฉ (Premium)** - -* Interface drag & drop pour assigner les exercices ร  chaque round - -* Sauvegarde illimitรฉe de programmes personnalisรฉs (nom, description, tags) - -* Partage de programme par lien deep link (ex: tabatago://program/abc123) - -* Import de programme depuis un lien partagรฉ par un autre utilisateur - -* Favoris : marquer des exercices pour les retrouver rapidement - -### **2.3.6 Contenu Offline & Performance** - -* Tous les GIFs d'exercices V1 (38 exercices ร— 1 GIF โ‰ˆ 150KB chacun โ‰ˆ \~6MB total) โ€” embarquรฉs dans le bundle - -* Lazy loading pour les exercices V2+ : tรฉlรฉchargement ร  la demande, mis en cache localement - -* Fallback : Si pas de GIF disponible, afficher une icรดne \+ description textuelle - -* Accessibilitรฉ : alt text sur chaque GIF pour VoiceOver/TalkBack - -## **2.4 Synchronisation Timer ร— Musique ร— Exercice** - -Les trois composants doivent former une expรฉrience unifiรฉe et cohรฉrente. Ce tableau dรฉcrit les รฉvรฉnements et leurs effets croisรฉs : - -| ร‰vรฉnement Timer | Effet sur la Musique | Effet sur l'Exercice | Haptique | -| :---- | :---- | :---- | :---- | -| Dรฉbut GET READY | Fade-in track principale | Afficher GIF exercice Round 1 | Lรฉger | -| Dรฉcompte 3-2-1 | Volume augmente | Animation pulsation sur le GIF | Bip ร— 3 | -| Dรฉbut WORK | Switch vers track high BPM | Afficher nom \+ cues en grand | Fort | -| Milieu WORK (10s) | Rien | "Halfway\!" en overlay 1s | Aucun | -| Fin WORK | Switch vers track low BPM | Afficher exercice SUIVANT | Moyen | -| Dรฉbut REST | Track calme | "Next: \[Exercice\]" \+ vignette | Lรฉger | -| Dernier round warning | Effet sonore spรฉcial | Badge "LAST ROUND" sur nom | Vibration longue | -| Fin de sรฉance | Fade-out \+ fanfare | ร‰cran rรฉsultat avec tous les exercices | Cรฉlรฉbration | - -# **3\. Validation du Marchรฉ & Stratรฉgie ASO** - -## **3.1 Analyse des Mots-Clรฉs Cibles** - -Les mots-clรฉs suivants ont รฉtรฉ validรฉs via Astro (difficultรฉ \< 55, popularitรฉ \> 20\) : - -| Mot-clรฉ | Popularitรฉ | Difficultรฉ | Marchรฉ | -| :---- | :---- | :---- | :---- | -| tabata timer | 72 | 48 | EN ๐Ÿ‡บ๐Ÿ‡ธ | -| hiit timer app | 68 | 52 | EN ๐Ÿ‡บ๐Ÿ‡ธ | -| minuterie tabata | 35 | 28 | FR ๐Ÿ‡ซ๐Ÿ‡ท | -| temporizador tabata | 41 | 31 | ES ๐Ÿ‡ช๐Ÿ‡ธ | -| tabata training timer | 55 | 44 | EN ๐Ÿ‡ฌ๐Ÿ‡ง | -| intervall timer workout | 38 | 29 | DE ๐Ÿ‡ฉ๐Ÿ‡ช | - -## **3.2 Analyse Concurrentielle** - -Principaux concurrents identifiรฉs et opportunitรฉs de diffรฉrenciation : - -| Concurrent | Forces | Faiblesses (notre opportunitรฉ) | -| :---- | :---- | :---- | -| Tabata Timer (App Store Top 1\) | Notoriรฉtรฉ, simplicitรฉ | UI datรฉe, pas de suivi streak, pas de localisation | -| Seconds Pro | Trรจs complet, flexible | Trop complexe, prix รฉlevรฉ, courbe d'apprentissage | -| HIIT Interval Training Timer | Gratuit, fonctionnel | Pub intrusive, pas d'onboarding รฉmotionnel | -| Tabata Stopwatch Pro | Simple, rapide | Pas de personnalisation, no streak, no widget | - -Notre avantage : onboarding รฉmotionnel fort \+ design moderne \+ widgets iOS/Android \+ streaks \+ localisation dans 5 langues. - -# **4\. Onboarding โ€” La Sรฉquence Critique** - -L'onboarding est la prioritรฉ absolue : 80% des revenus sont gรฉnรฉrรฉs ici. L'objectif est de crรฉer un investissement รฉmotionnel avant d'afficher le paywall. La sรฉquence suit le schรฉma : Problรจme โ†’ Empathie โ†’ Solution โ†’ Moment Wow โ†’ Paywall. - -## **4.1 ร‰crans d'Onboarding (sรฉquence de 6 รฉcrans)** - -### **ร‰cran 1 โ€” Le Problรจme (Identifier la douleur)** - -| ๐ŸŽฏ OBJECTIF : Identification | -| :---- | -| โ–ธ Titre : "Tu n'as pas 1 heure pour la salle. Personne n'en a." | -| โ–ธ Sous-titre : "Et pourtant tu veux progresser. On a la solution." | -| โ–ธ Visuel : Animation subtile d'une horloge qui se fragmente puis se reconstruit en 20 min | -| โ–ธ CTA : "Montre-moi comment" (bouton orange pleine largeur) | - -### **ร‰cran 2 โ€” L'Empathie (L'utilisateur se sent compris)** - -| ๐Ÿ’ฌ OBJECTIF : Connexion รฉmotionnelle | -| :---- | -| โ–ธ Titre : "Qu'est-ce qui t'empรชche de t'entraรฎner ?" | -| โ–ธ Choix interactifs (tap) : Manque de temps / Motivation en berne / Je ne sais pas quoi faire / Je n'ai pas accรจs ร  une salle | -| โ–ธ Mรฉcanisme : stocker la rรฉponse โ†’ personnaliser le reste de l'onboarding | -| โ–ธ Transition : "On a conรงu TabataGo exactement pour รงa." | - -### **ร‰cran 3 โ€” La Solution (Prรฉsenter la mรฉthode)** - -| โšก OBJECTIF : Comprendre la valeur | -| :---- | -| โ–ธ Titre : "4 minutes. Vraiment transformatrices." | -| โ–ธ Animation interactive : timeline Tabata (20s work / 10s rest ร— 8 rounds) | -| โ–ธ Stats affichรฉes : Brรปle autant de calories qu'un jogging de 30 min / Prouvรฉ scientifiquement depuis 1996 (Dr. Tabata) | -| โ–ธ Visuel : compteur animรฉ qui tourne โ€” preview de l'app | - -### **ร‰cran 4 โ€” Le Moment "Wow" (Dรฉmo interactive)** - -| ๐Ÿ”ฅ OBJECTIF : Engagement actif (ne pas juste regarder) | -| :---- | -| โ–ธ Titre : "Essaie maintenant. 20 secondes." | -| โ–ธ Mini-minuterie Tabata LIVE intรฉgrรฉe dans l'รฉcran d'onboarding | -| โ–ธ L'utilisateur tape sur "Go" et vit 20s de compte ร  rebours \+ son \+ vibration | -| โ–ธ Aprรจs : "Tu viens de faire ta premiรจre sรฉrie Tabata. 7 de plus et c'est une sรฉance complรจte." | -| โ–ธ Note : Ce moment est le plus diffรฉrenciant โ€” crรฉer une mini-expรฉrience rรฉelle | - -### **ร‰cran 5 โ€” Personnalisation (Engagement supplรฉmentaire)** - -| โš™๏ธ OBJECTIF : Investissement personnel | -| :---- | -| โ–ธ Titre : "Configurons ta premiรจre semaine." | -| โ–ธ Sรฉlection : Niveau (Dรฉbutant / Intermรฉdiaire / Avancรฉ) | -| โ–ธ Sรฉlection : Objectif (Perte de poids / Cardio / Force / Bien-รชtre) | -| โ–ธ Sรฉlection : Frรฉquence souhaitรฉe (2x / 3x / 5x par semaine) | -| โ–ธ Rรฉsultat : "Ton programme personnalisรฉ est prรชt." (sensation de valeur avant paiement) | - -### **ร‰cran 6 โ€” Paywall (Aprรจs l'investissement รฉmotionnel)** - -| ๐Ÿ’ณ OBJECTIF : Conversion | -| :---- | -| โ–ธ Titre : "Continue sur ta lancรฉe. Sans limite." | -| โ–ธ Prรฉsenter l'essai gratuit 7 jours en premier (bouton principal orange) | -| โ–ธ Options : Mensuel $4.99 / Annuel $29.99 (รฉconomie 50% mise en รฉvidence) | -| โ–ธ Garantie visible : "Annule ร  tout moment" \+ "Satisfait ou remboursรฉ 30j" | -| โ–ธ Lien "Continuer sans abonnement" en petit en bas (ne pas le cacher) | -| โ–ธ Intรฉgration RevenueCat โ€” avec A/B test activรฉ dรจs le lancement | - -# **5\. Design & Identitรฉ Visuelle** - -## **5.1 Palette de Couleurs** - -| Rรดle | Couleur | Hex | Usage | -| :---- | :---- | :---- | :---- | -| Primaire / Action | Orange Tabata | \#F97316 | Boutons CTA, accents, timer actif | -| Fond Dark (dรฉfaut) | Charcoal Night | \#1E1E2E | Background principal mode sombre | -| Fond Light | Warm White | \#FFF7ED | Background mode clair | -| Texte principal Dark | Stone 900 | \#1C1917 | Titres mode clair | -| Texte secondaire | Stone 600 | \#57534E | Body text, descriptions | -| Succรจs / Streak | Green 500 | \#22C55E | Streaks, complรฉtion, feedback positif | -| Danger / Alerte | Red 500 | \#EF4444 | Erreurs, derniers secondes | - -## **5.2 Typographie** - -| Usage | Police | Poids | Taille | -| :---- | :---- | :---- | :---- | -| Timer principal | Inter (monospace fallback) | Black (900) | 96-120px | -| Titres H1 | Inter | Bold (700) | 28-32px | -| Titres H2 | Inter | SemiBold (600) | 22-24px | -| Body / Labels | Inter | Regular (400) | 14-16px | -| Micro-labels | Inter | Medium (500) | 11-12px | - -## **5.3 Principes Design** - -* Mode sombre par dรฉfaut (immersif pendant l'entraรฎnement) - -* Timer en plein รฉcran pendant la sรฉance โ€” aucune distraction - -* Animations fluides (60fps) pour les transitions et le compteur - -* Haptiques natifs : vibration lรฉgรจre ร  chaque changement de phase - -* Support Dynamic Type (iOS) et font scaling (Android) - -* Icรดne app : fond noir, lettre T stylisรฉe en orange avec une flamme - -# **6\. Architecture Technique & Dรฉveloppement (Expo)** - -## **6.1 Stack Technique** - -| Composant | Solution choisie | Justification | -| :---- | :---- | :---- | -| Framework | Expo SDK 52 (React Native) | Cross-platform, OTA updates, accรจs natif facile | -| Navigation | Expo Router v3 (file-based) | Standard moderne, deep linking natif | -| State management | Zustand \+ AsyncStorage | Lรฉger, performant, persistance simple | -| Timer engine | expo-background-fetch \+ useInterval custom | Prรฉcision \+ exรฉcution background | -| Audio | expo-av | Sons de dรฉcompte et alertes phase | -| Haptiques | expo-haptics | Retour tactile natif iOS/Android | -| Notifications | expo-notifications | Rappels d'entraรฎnement \+ streaks | -| Widget | react-native-widget-extension | Widget iOS 14+ (Live Activity) | -| Paiements | react-native-purchases (RevenueCat) | Abonnements \+ A/B testing \+ analytics | -| Analytics | PostHog (react-native-posthog) | Funnel tracking, drop-off analysis | -| Storage | expo-secure-store \+ AsyncStorage | Donnรฉes utilisateur \+ prรฉfรฉrences | -| In-App Review | expo-store-review | Prompt aprรจs streak 7 jours | - -## **6.2 Features โ€” MoSCoW Priorisation** - -### **Must Have (V1 โ€” Lancement)** - -| โœ… MUST HAVE โ€” Indispensables au lancement | -| :---- | -| โ–ธ Timer Tabata complet โ€” voir Section 2.1 (toutes phases, sons, haptiques, background) | -| โ–ธ Musique intรฉgrรฉe โ€” voir Section 2.2 (3 ambiances ร— 3 intensitรฉs, signaux de phase, coexistence audio) | -| โ–ธ Exercices avec GIFs โ€” voir Section 2.3 (38 exercices, modes 1 et 2, affichage GET READY/WORK/REST) | -| โ–ธ Synchronisation Timer ร— Musique ร— Exercice โ€” voir Section 2.4 | -| โ–ธ Modes : Tabata classique, HIIT personnalisรฉ, Pause active | -| โ–ธ Affichage plein รฉcran pendant la sรฉance (mode portrait \+ paysage) | -| โ–ธ Historique des sรฉances (date, durรฉe, rounds complรฉtรฉs) | -| โ–ธ Systรจme de Streak (consรฉcutivitรฉ quotidienne, animation de feu) | -| โ–ธ Notifications de rappel configurables | -| โ–ธ Onboarding 6 รฉcrans avec mini-dรฉmo live | -| โ–ธ Paywall \+ RevenueCat (essai 7j, mensuel, annuel) | -| โ–ธ Dark mode \+ Light mode | -| โ–ธ Localisation : EN, FR, ES, DE, PT | - -### **Should Have (V1.1 โ€” Semaine 4-8)** - -| ๐ŸŸก SHOULD HAVE โ€” Valeur ajoutรฉe forte | -| :---- | -| โ–ธ Widget iOS (Home Screen) โ€” affiche le streak et le dernier entraรฎnement | -| โ–ธ Widget Android (Glance API) | -| โ–ธ Bibliothรจque de programmes prรฉ-dรฉfinis (Dรฉbutant / Cardio / Force) | -| โ–ธ Statistiques hebdomadaires et mensuelles avec graphiques | -| โ–ธ Sons personnalisรฉs (voix, bip, musique d'ambiance) | -| โ–ธ Integration Apple Health / Google Fit (calories, activitรฉ) | -| โ–ธ Partage social (carte rรฉcapitulative de la sรฉance) | - -### **Could Have (V2 โ€” Mois 3+)** - -| ๐Ÿ”ต COULD HAVE โ€” Diffรฉrenciation long terme | -| :---- | -| โ–ธ Mode Coach IA : suggestions de sรฉances basรฉes sur l'historique | -| โ–ธ Challenges communautaires (leaderboard hebdomadaire) | -| โ–ธ Apple Watch companion app | -| โ–ธ Import/Export de programmes (partage entre utilisateurs) | -| โ–ธ Mode TV / AirPlay pour entraรฎnement sur grand รฉcran | - -# **7\. Structure de Navigation (Expo Router)** - -Architecture file-based avec Expo Router v3 : - -| Route | ร‰cran | Accรจs | -| :---- | :---- | :---- | -| / | Home โ€” Hub central avec raccourcis et streak | Tous | -| /onboarding | Sรฉquence onboarding 6 รฉtapes | Nouveaux utilisateurs | -| /timer | Minuterie plein รฉcran โ€” sรฉance active | Tous | -| /programs | Bibliothรจque de programmes | Premium | -| /history | Historique des sรฉances \+ stats | Tous (limitรฉ free) | -| /settings | Prรฉfรฉrences, sons, notifications, compte | Tous | -| /paywall | ร‰cran d'abonnement RevenueCat | Free users | -| /(modals)/review | In-App Review prompt | Streak 7j | - -# **8\. Paiements, Pricing & RevenueCat** - -## **8.1 Structure des Offres** - -| Offre | Prix US | Prix FR | Prix BR | Contenu | -| :---- | :---- | :---- | :---- | :---- | -| Gratuit | Free | Free | Free | Timer standard, 7j historique, pas de widget | -| Essai Premium | 7 jours gratuits | 7 jours gratuits | 7 jours gratuits | Accรจs complet, pas de CB requise si possible | -| Premium Mensuel | $4.99/mois | โ‚ฌ4.99/mois | R$9.99/mois | Accรจs complet illimitรฉ | -| Premium Annuel | $29.99/an | โ‚ฌ27.99/an | R$59.99/an | Tout Premium โ€” รฉconomie 50% mise en avant | - -Note : Pricing localisรฉ via RevenueCat Purchasing Power Parity (PPP). Adapter automatiquement les prix pour le Brรฉsil, l'Inde, l'Indonรฉsie et l'Europe de l'Est pour maximiser les conversions mondiales. - -## **8.2 Configuration RevenueCat** - -* Entitlements : "premium" (accรจs ร  toutes les features payantes) - -* Products : tabatago\_monthly, tabatago\_annual, tabatago\_trial\_7d - -* A/B Tests dรจs J+7 : tester $3.99 vs $4.99 vs $6.99 mensuel - -* A/B Tests paywall : liste vs comparaison de plans vs "best value" badge - -* Webhook RevenueCat โ†’ PostHog pour corrรฉler revenus et comportement - -# **9\. Analytics & Instrumentation (PostHog)** - -## **9.1 ร‰vรฉnements Critiques ร  Tracker** - -| ร‰vรฉnement | Propriรฉtรฉs | Objectif | -| :---- | :---- | :---- | -| onboarding\_step\_viewed | step\_number, step\_name | Identifier le drop-off | -| onboarding\_demo\_started | duration\_seconds | Mesurer l'engagement Wow | -| onboarding\_completed | persona, goal, frequency | Segmentation | -| paywall\_viewed | source, variant | Funnel paiement | -| trial\_started | plan\_selected | Conversion essai | -| subscription\_purchased | plan, price, currency | Revenue | -| session\_started | program\_id, rounds, duration | Engagement produit | -| session\_completed | rounds\_done, streak\_day | Rรฉtention | -| streak\_milestone | days\_count | Gamification KPIs | -| widget\_added | widget\_type | Stickiness | -| notification\_tapped | notification\_type | Rappels efficacitรฉ | - -## **9.2 Funnels ร  Monitorer** - -* Funnel Acquisition : Impression App Store โ†’ Tรฉlรฉchargement โ†’ Onboarding Start โ†’ Onboarding Complete โ†’ Paywall View โ†’ Trial Start โ†’ Purchase - -* Funnel Rรฉtention : J+1 / J+7 / J+30 ouverture de l'app aprรจs tรฉlรฉchargement - -* Funnel Engagement : Sรฉance dรฉmarrรฉe โ†’ Sรฉance complรฉtรฉe โ†’ Streak maintenu - -Rรจgle d'or : Si impressions mais pas de tรฉlรฉchargements โ†’ Rรฉparer screenshots/icรดne. Si tรฉlรฉchargements mais pas d'essais โ†’ Rรฉparer onboarding. Si essais mais pas de paiements โ†’ Rรฉparer paywall/pricing. - -# **10\. Localisation & Growth Hacking** - -## **10.1 Stratรฉgie de Localisation (5 Langues)** - -| Langue | Marchรฉ cible | Mots-clรฉs spรฉcifiques | Prioritรฉ | -| :---- | :---- | :---- | :---- | -| Anglais (EN) | US, UK, AU, CA | tabata timer, hiit timer app | 1 โ€” Lancement | -| Franรงais (FR) | France, Belgique, Quรฉbec | minuterie tabata, chrono hiit | 1 โ€” Lancement | -| Espagnol (ES) | Espagne, Mexique, Argentine | temporizador tabata, ejercicio hiit | 2 โ€” Semaine 2 | -| Allemand (DE) | Allemagne, Autriche, CH | tabata timer app, intervall training | 2 โ€” Semaine 2 | -| Portugais (PT-BR) | Brรฉsil | timer tabata, treino hiit | 3 โ€” Mois 2 | - -## **10.2 ร‰lรฉments ร  Localiser** - -* App content : tous les textes UI, onboarding, notifications, erreurs - -* App Store listing : titre, sous-titre, description courte, description longue - -* Screenshots : localisรฉs avec texte natif (utiliser Fastlane Frameit) - -* Prix : PPP via RevenueCat (automatique par pays) - -* Mots-clรฉs App Store : 100 caractรจres spรฉcifiques par marchรฉ - -Outil recommandรฉ : i18next \+ expo-localization pour la gestion des traductions en dรฉveloppement. - -# **11\. App Store Optimization (ASO)** - -## **11.1 Fiche App Store (iOS โ€” EN)** - -| Champ | Valeur optimisรฉe | -| :---- | :---- | -| Nom de l'app (30 car.) | TabataGo โ€” HIIT Timer | -| Sous-titre (30 car.) | Tabata & Interval Workout | -| Mots-clรฉs (100 car.) | tabata,hiit,timer,interval,workout,fitness,training,countdown,sport,exercise | -| Description (1รจre ligne) | The most motivating Tabata timer. 20 seconds of effort. Life-changing results. | -| Screenshots (10 max) | Voir section 10.2 | -| Preview video | 15-30s montrant la minuterie en action \+ streak \+ widget | - -## **11.2 Plan des Screenshots (6 obligatoires)** - -| \# | Contenu | Message clรฉ | Background | -| :---- | :---- | :---- | :---- | -| 1 | Timer plein รฉcran en action (20s) | "Train smarter, not longer" | Dark \+ orange | -| 2 | ร‰cran d'onboarding moment Wow | "Your first Tabata in 20 seconds" | Gradient sombre | -| 3 | Widget iOS home screen | "Train from anywhere โ€” even your lock screen" | iPhone mockup | -| 4 | Historique \+ Streak en feu | "Build the habit. Keep the streak." | Dark \+ vert | -| 5 | Bibliothรจque de programmes | "100+ ready-to-go programs" | Gradient | -| 6 | Statistiques mensuelles | "See your progress. Stay motivated." | Fond clair | - -# **12\. Plan de Lancement en 72h** - -## **12.1 Timeline de Dรฉveloppement (72 heures)** - -| Phase | Durรฉe | Livrables | Responsable | -| :---- | :---- | :---- | :---- | -| Setup & Architecture | H0 โ†’ H8 | Expo project init, navigation, design system, RevenueCat config | Dev Lead | -| Onboarding | H8 โ†’ H20 | 6 รฉcrans onboarding \+ mini-timer dรฉmo \+ animation | Dev \+ Design | -| Core Timer | H20 โ†’ H36 | Minuterie plein รฉcran, son, haptiques, background timer | Dev | -| Streak \+ Historique | H36 โ†’ H48 | Systรจme streak, storage, affichage historique, notifications | Dev | -| Paywall \+ Analytics | H48 โ†’ H58 | RevenueCat paywall, PostHog events, A/B test config | Dev | -| Polish & Testing | H58 โ†’ H68 | Bug fixes, dark/light mode, performance, edge cases | Dev \+ QA | -| Submission | H68 โ†’ H72 | Screenshots, App Store listing (5 langues), soumission Apple | PM \+ Dev | - -## **12.2 Stratรฉgie de Validation Post-Lancement** - -Profiter du boost de visibilitรฉ des 3 premiers jours accordรฉ par l'App Store aux nouvelles applications : - -1. Jour 1-3 : Monitoring organique โ€” Analyser impressions, tรฉlรฉchargements, et premiers essais - -2. Jour 4-7 : Analyse funnel โ€” Identifier le premier point de friction (onboarding? paywall?) - -3. Jour 8-14 : Premiรจre itรฉration โ€” Corriger le problรจme prioritaire et soumettre mise ร  jour OTA (Expo) - -4. Jour 15-30 : Activation publicitรฉ โ€” Apple Search Ads seulement si CVR organique \> 15% - -5. Jour 30+ : Scale โ€” Augmenter budget pub sur les marchรฉs qui convertissent le mieux - -Rรจgle absolue : Ne jamais dรฉpenser en publicitรฉ avant d'avoir validรฉ que le funnel organique convertit. - -# **13\. KPIs & Mรฉtriques de Succรจs** - -| Mรฉtrique | Semaine 1 | Mois 1 | Mois 3 | Outil de mesure | -| :---- | :---- | :---- | :---- | :---- | -| Tรฉlรฉchargements | 500+ | 5 000+ | 20 000+ | App Store Connect | -| Taux conversion Impressionโ†’DL | \> 5% | \> 8% | \> 10% | App Store Connect | -| Taux essai dรฉmarrรฉ | \> 25% | \> 30% | \> 35% | RevenueCat \+ PostHog | -| Taux conversion essaiโ†’payant | \> 30% | \> 35% | \> 40% | RevenueCat | -| Rรฉtention J+7 | \> 30% | \> 35% | \> 40% | PostHog | -| Rรฉtention J+30 | โ€” | \> 20% | \> 25% | PostHog | -| MRR | โ€” | $2 000+ | $8 000+ | RevenueCat | -| Note App Store | โ€” | โ‰ฅ 4.5 | โ‰ฅ 4.6 | App Store Connect | -| Streak moyen (actifs) | โ€” | \> 5 jours | \> 10 jours | PostHog custom | - -# **14\. Risques & Mitigations** - -| Risque | Probabilitรฉ | Impact | Mitigation | -| :---- | :---- | :---- | :---- | -| Refus App Store (guidelines) | Moyen | ร‰levรฉ | Respecter HIG Apple, tester paywall sur TestFlight, pas de dark patterns | -| Mauvais taux de conversion paywall | Moyen | ร‰levรฉ | A/B test RevenueCat dรจs J+7, 3 variantes de prix/layout | -| Prรฉcision du timer en background | Faible | ร‰levรฉ | expo-background-fetch \+ notification locale comme fallback | -| Faible rรฉtention sans streaks | Moyen | Moyen | Streak J+1 core feature, reminder push personnalisรฉ par heure d'entraรฎnement | -| Concurrence sur mots-clรฉs EN | ร‰levรฉ | Moyen | Agressivitรฉ sur marchรฉs FR/ES/DE dรจs J+14 | -| Revue Apple lente (\> 48h) | Faible | Faible | Soumettre J-5 avant objectif lancement, utiliser Expo OTA pour hotfixes | - -# **15\. Approbations & Versions** - -| Rรดle | Nom | Date | Signature | -| :---- | :---- | :---- | :---- | -| Product Owner | | Fรฉvrier 2026 | | -| Tech Lead | | Fรฉvrier 2026 | | -| Design Lead | | Fรฉvrier 2026 | | -| Marketing | | Fรฉvrier 2026 | | - -*Document crรฉรฉ le 15 fรฉvrier 2026 โ€” TabataGo PRD v1.1* \ No newline at end of file diff --git a/.archive/TabataGo_StyleGuide_v1.0.md b/.archive/TabataGo_StyleGuide_v1.0.md deleted file mode 100644 index ce555c2..0000000 --- a/.archive/TabataGo_StyleGuide_v1.0.md +++ /dev/null @@ -1,1198 +0,0 @@ -# TabataGo โ€” Visual Style Guide v1.0 - -> Document pratique pour les dรฉveloppeurs. Tokens, composants, et exemples de code prรชts ร  l'emploi. - ---- - -## 1. Color Tokens - -### 1.1 Brand Colors - -```typescript -// src/shared/constants/colors.ts - -export const BRAND = { - PRIMARY: '#F97316', // Orange Energy - Main brand color - PRIMARY_LIGHT: '#FB923C', // Orange Glow - Hover, accents - PRIMARY_DARK: '#EA580C', // Orange Deep - Work phase - SECONDARY: '#FBBF24', // Gold - Streaks, badges - DANGER: '#EF4444', // Red - Alerts, last seconds - SUCCESS: '#22C55E', // Green - Complete, success - INFO: '#3B82F6', // Blue - Rest phase, info -} as const -``` - -### 1.2 Dark Theme (Base) - -```typescript -export const DARK = { - BASE: '#1A1A1E', // Main background - RAISED: '#222226', // Cards level 1 - ELEVATED: '#2A2A2E', // Cards level 2, modals - SURFACE: '#0A0A0E', // Focus zones, timer - OVERLAY_1: 'rgba(255, 255, 255, 0.04)', // Subtle hover - OVERLAY_2: 'rgba(255, 255, 255, 0.08)', // Active states - OVERLAY_3: 'rgba(255, 255, 255, 0.12)', // Selected states - SCRIM: 'rgba(0, 0, 0, 0.6)', // Modal overlay -} as const -``` - -### 1.3 Text Colors - -```typescript -export const TEXT = { - PRIMARY: '#FFFFFF', - SECONDARY: 'rgba(255, 255, 255, 0.85)', - TERTIARY: 'rgba(255, 255, 255, 0.70)', - MUTED: 'rgba(255, 255, 255, 0.55)', - HINT: 'rgba(255, 255, 255, 0.40)', - DISABLED: 'rgba(255, 255, 255, 0.25)', -} as const -``` - -### 1.4 Border Colors - -```typescript -export const BORDER = { - SUBTLE: 'rgba(255, 255, 255, 0.04)', - LIGHT: 'rgba(255, 255, 255, 0.08)', - MEDIUM: 'rgba(255, 255, 255, 0.12)', - STRONG: 'rgba(255, 255, 255, 0.20)', - BRAND: 'rgba(249, 115, 22, 0.30)', -} as const -``` - -### 1.5 Phase Gradients - -```typescript -export const PHASE_GRADIENTS = { - IDLE: ['#0A0A14', '#12101F', '#1E1E2E'] as const, - GET_READY: ['#451A03', '#92400E', '#D97706'] as const, - WORK: ['#450A0A', '#991B1B', '#EA580C'] as const, - REST: ['#0C1929', '#1E3A5F', '#2563EB'] as const, - COMPLETE: ['#052E16', '#166534', '#16A34A'] as const, -} as const -``` - -### 1.6 Glow Effects - -```typescript -export const GLOW = { - // Orange glow (primary) - ENERGY: { - shadowColor: '#F97316', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.5, - shadowRadius: 40, - }, - ENERGY_INTENSE: { - shadowColor: '#F97316', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.7, - shadowRadius: 60, - }, - // White glow (active) - WHITE: { - shadowColor: '#FFFFFF', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.3, - shadowRadius: 20, - }, - // Red glow (danger) - DANGER: { - shadowColor: '#EF4444', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.5, - shadowRadius: 30, - }, -} as const -``` - ---- - -## 2. Typography Scale - -### 2.1 Font Family - -```typescript -// Single font family for consistency -export const FONT_FAMILY = { - REGULAR: 'Inter', - MEDIUM: 'Inter', - SEMIBOLD: 'Inter', - BOLD: 'Inter', - EXTRABOLD: 'Inter', - BLACK: 'Inter', -} as const -``` - -### 2.2 Type Scale - -```typescript -// src/shared/constants/typography.ts - -import { TextStyle } from 'react-native' - -export const TYPOGRAPHY = { - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - // DISPLAY โ€” Maximum impact - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - - // Timer countdown (the hero number) - countdown: { - fontFamily: 'Inter', - fontSize: 140, - fontWeight: '900', - fontVariant: ['tabular-nums'], - letterSpacing: -2, - } as TextStyle, - - // Time display (completion screen) - timeDisplay: { - fontFamily: 'Inter', - fontSize: 72, - fontWeight: '900', - fontVariant: ['tabular-nums'], - letterSpacing: -1, - } as TextStyle, - - // Brand title (TABATA) - brandTitle: { - fontFamily: 'Inter', - fontSize: 56, - fontWeight: '900', - letterSpacing: 8, - } as TextStyle, - - // Display large (onboarding titles, victory) - displayLarge: { - fontFamily: 'Inter', - fontSize: 42, - fontWeight: '900', - letterSpacing: 2, - } as TextStyle, - - // Display small (GO, section headers) - displaySmall: { - fontFamily: 'Inter', - fontSize: 32, - fontWeight: '900', - letterSpacing: 4, - } as TextStyle, - - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - // HEADLINES โ€” Section titles, emphasis - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - - // Hero button text (START) - buttonHero: { - fontFamily: 'Inter', - fontSize: 30, - fontWeight: '900', - letterSpacing: 4, - } as TextStyle, - - // Heading (screen titles, card titles) - heading: { - fontFamily: 'Inter', - fontSize: 24, - fontWeight: '800', - letterSpacing: 0.5, - } as TextStyle, - - // Subheading - subheading: { - fontFamily: 'Inter', - fontSize: 20, - fontWeight: '700', - letterSpacing: 0.3, - } as TextStyle, - - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - // BODY โ€” Readable content - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - - // Large body (descriptions, emphasis) - bodyLarge: { - fontFamily: 'Inter', - fontSize: 18, - fontWeight: '600', - lineHeight: 26, - } as TextStyle, - - // Standard body - body: { - fontFamily: 'Inter', - fontSize: 16, - fontWeight: '400', - lineHeight: 24, - } as TextStyle, - - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - // CAPTION & LABELS โ€” Smaller text - // โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - - // Caption (secondary info) - caption: { - fontFamily: 'Inter', - fontSize: 14, - fontWeight: '500', - lineHeight: 20, - } as TextStyle, - - // Label (badges, tags) - label: { - fontFamily: 'Inter', - fontSize: 13, - fontWeight: '700', - letterSpacing: 0.5, - } as TextStyle, - - // Overline (section labels, uppercase) - overline: { - fontFamily: 'Inter', - fontSize: 11, - fontWeight: '600', - letterSpacing: 1.5, - textTransform: 'uppercase', - } as TextStyle, - - // Micro (tiny labels) - micro: { - fontFamily: 'Inter', - fontSize: 10, - fontWeight: '600', - letterSpacing: 1, - } as TextStyle, - -} as const -``` - -### 2.3 Usage Examples - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ TYPOGRAPHY PREVIEW โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ countdown 140 20 โ”‚ โ”‚ -โ”‚ โ”‚ timeDisplay 72 4:00 โ”‚ โ”‚ -โ”‚ โ”‚ brandTitle 56 TABATA โ”‚ โ”‚ -โ”‚ โ”‚ displayLarge 42 Terminรฉ ! โ”‚ โ”‚ -โ”‚ โ”‚ displaySmall 32 GO โ”‚ โ”‚ -โ”‚ โ”‚ buttonHero 30 START โ”‚ โ”‚ -โ”‚ โ”‚ heading 24 Tabata Classic โ”‚ โ”‚ -โ”‚ โ”‚ subheading 20 Sรฉances cette semaine โ”‚ โ”‚ -โ”‚ โ”‚ bodyLarge 18 Description importante โ”‚ โ”‚ -โ”‚ โ”‚ body 16 Texte courant standard โ”‚ โ”‚ -โ”‚ โ”‚ caption 14 Information secondaire โ”‚ โ”‚ -โ”‚ โ”‚ label 13 BEGINNER โ”‚ โ”‚ -โ”‚ โ”‚ overline 11 TON PROGRAMME โ”‚ โ”‚ -โ”‚ โ”‚ micro 10 8 rounds โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -## 3. Spacing System - -### 3.1 Scale (4px base) - -```typescript -// src/shared/constants/spacing.ts - -export const SPACING = { - 0: 0, - 0.5: 2, - 1: 4, - 1.5: 6, - 2: 8, - 2.5: 10, - 3: 12, - 3.5: 14, - 4: 16, - 5: 20, - 6: 24, - 7: 28, - 8: 32, - 10: 40, - 12: 48, - 14: 56, - 16: 64, - 20: 80, - 24: 96, -} as const - -// Semantic aliases -export const SPACE = { - NONE: 0, - XXXS: 2, - XXS: 4, - XS: 8, - SM: 12, - MD: 16, - LG: 24, - XL: 32, - XXL: 48, - XXXL: 64, - PAGE: 24, // Horizontal page padding - SECTION: 40, // Between major sections - CARD: 16, // Internal card padding - BUTTON: 16, // Button padding -} as const -``` - -### 3.2 Visual Reference - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ SPACING SCALE โ”‚ -โ”‚ โ”‚ -โ”‚ 0 โ”€ (none) โ”‚ -โ”‚ 2 โ”€โ”€ (xxxs) โ”‚ -โ”‚ 4 โ”€โ”€โ”€โ”€ (xxs) โ”‚ -โ”‚ 8 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (xs) โ”‚ -โ”‚ 12 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (sm) โ”‚ -โ”‚ 16 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (md) โ”‚ -โ”‚ 24 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (lg) โ”‚ -โ”‚ 32 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (xl) โ”‚ -โ”‚ 48 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (xxl) โ”‚ -โ”‚ 64 โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ (xxxl) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -## 4. Border Radius - -### 4.1 Scale - -```typescript -// src/shared/constants/borderRadius.ts - -export const RADIUS = { - NONE: 0, - XS: 4, // Tags, small elements - SM: 6, // Small buttons - MD: 8, // Badges, chips - LG: 12, // Buttons, inputs - XL: 16, // Cards - XXL: 20, // Large cards, modals - XXXL: 24, // Bottom sheets - FULL: 9999, // Pills, circles -} as const -``` - -### 4.2 Usage Guide - -| Radius | Use Case | -|--------|----------| -| `XS` (4px) | Inline tags, tiny badges | -| `SM` (6px) | Small buttons, compact cards | -| `MD` (8px) | Standard badges, chips | -| `LG` (12px) | Buttons, inputs, medium cards | -| `XL` (16px) | Standard cards, list items | -| `XXL` (20px) | Large cards, bottom sheets | -| `XXXL` (24px) | Modal containers, hero cards | -| `FULL` | Pills, circular avatars, CTA buttons | - ---- - -## 5. Shadows & Glows - -### 5.1 Elevation Shadows - -```typescript -// src/shared/constants/shadows.ts - -import { ViewStyle } from 'react-native' - -export const SHADOW = { - // Subtle elevation (cards) - sm: { - shadowColor: '#000000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.15, - shadowRadius: 8, - elevation: 2, - } as ViewStyle, - - // Medium elevation (raised cards) - md: { - shadowColor: '#000000', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.2, - shadowRadius: 16, - elevation: 4, - } as ViewStyle, - - // High elevation (modals) - lg: { - shadowColor: '#000000', - shadowOffset: { width: 0, height: 8 }, - shadowOpacity: 0.25, - shadowRadius: 24, - elevation: 8, - } as ViewStyle, - -} as const -``` - -### 5.2 Brand Glows - -```typescript -export const GLOW = { - // Primary orange glow - brand: { - shadowColor: '#F97316', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.5, - shadowRadius: 40, - } as ViewStyle, - - // Intense glow (active states) - brandIntense: { - shadowColor: '#F97316', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.7, - shadowRadius: 60, - } as ViewStyle, - - // Subtle glow (hover) - brandSubtle: { - shadowColor: '#F97316', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.3, - shadowRadius: 20, - } as ViewStyle, - - // White glow (active elements) - white: { - shadowColor: '#FFFFFF', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.3, - shadowRadius: 16, - } as ViewStyle, - - // Danger glow (warnings) - danger: { - shadowColor: '#EF4444', - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.5, - shadowRadius: 24, - } as ViewStyle, - -} as const -``` - -### 5.3 Text Shadows - -```typescript -export const TEXT_SHADOW = { - // Brand orange shadow - brand: { - textShadowColor: '#F97316', - textShadowOffset: { width: 0, height: 0 }, - textShadowRadius: 20, - }, - - // White soft shadow - white: { - textShadowColor: 'rgba(255, 255, 255, 0.3)', - textShadowOffset: { width: 0, height: 0 }, - textShadowRadius: 12, - }, - - // Intense white - whiteIntense: { - textShadowColor: 'rgba(255, 255, 255, 0.5)', - textShadowOffset: { width: 0, height: 0 }, - textShadowRadius: 20, - }, - - // Danger red - danger: { - textShadowColor: '#EF4444', - textShadowOffset: { width: 0, height: 0 }, - textShadowRadius: 16, - }, - -} as const -``` - ---- - -## 6. Component Specs - -### 6.1 Primary Button (CTA) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ START โ”‚ โ”‚ -โ”‚ โ”‚ (150ร—150 circle) โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ–“โ–“โ–“โ–“โ–“โ–“โ–“ โ”‚ -โ”‚ (Glow breathing) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Primary CTA Button (Circular) -const styles = StyleSheet.create({ - ctaButton: { - width: 150, - height: 150, - borderRadius: 75, - backgroundColor: BRAND.PRIMARY, - alignItems: 'center', - justifyContent: 'center', - ...GLOW.brand, - }, - ctaButtonPressed: { - transform: [{ scale: 0.95 }], - }, - ctaText: { - ...TYPOGRAPHY.buttonHero, - color: TEXT.PRIMARY, - }, - ctaGlow: { - position: 'absolute', - width: 172, - height: 172, - borderRadius: 86, - backgroundColor: BRAND.PRIMARY, - opacity: 0.3, // Animated: 0.3 โ†’ 0.6 โ†’ 0.3 - }, -}) -``` - -### 6.2 Secondary Button (Pill) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ SUIVANT โ†’ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ (Full width pill, gradient fill, glow effect) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Secondary Button (Pill) -const styles = StyleSheet.create({ - button: { - height: 54, - borderRadius: RADIUS.FULL, - backgroundColor: BRAND.PRIMARY, - alignItems: 'center', - justifyContent: 'center', - paddingHorizontal: SPACING[10], - ...GLOW.brandSubtle, - }, - buttonText: { - ...TYPOGRAPHY.subheading, - color: TEXT.PRIMARY, - letterSpacing: 2, - }, -}) -``` - -### 6.3 Tertiary Button (Ghost) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Continuer sans abonnement โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ (Transparent bg, subtle border, no glow) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Tertiary Button (Ghost) -const styles = StyleSheet.create({ - button: { - height: 44, - borderRadius: RADIUS.LG, - backgroundColor: 'transparent', - alignItems: 'center', - justifyContent: 'center', - paddingHorizontal: SPACING[6], - borderWidth: 1, - borderColor: BORDER.LIGHT, - }, - buttonText: { - ...TYPOGRAPHY.caption, - color: TEXT.HINT, - }, -}) -``` - -### 6.4 Card (Standard) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Tabata Classic BEGINNER โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ 8 rounds de Burpees pour commencer en force โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ Burpees โ”‚ 8 rounds โ€ข 4 min โ€ข 1 ex. โ”‚ โ”‚ -โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ (Soft elevated, subtle border, rounded corners) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Standard Card -const styles = StyleSheet.create({ - card: { - backgroundColor: DARK.RAISED, - borderRadius: RADIUS.XXL, - borderWidth: 1, - borderColor: BORDER.LIGHT, - padding: SPACING[6], - ...SHADOW.md, - }, - cardSelected: { - backgroundColor: 'rgba(249, 115, 22, 0.08)', - borderColor: BORDER.BRAND, - ...GLOW.brandSubtle, - }, - cardTitle: { - ...TYPOGRAPHY.heading, - color: TEXT.PRIMARY, - }, - cardDescription: { - ...TYPOGRAPHY.body, - color: TEXT.MUTED, - marginTop: SPACING[2], - }, -}) -``` - -### 6.5 Badge (Difficulty) - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ BEGINNER INTERMEDIATE ADVANCED โ”‚ -โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ -โ”‚ Vert #4ADE80 Or #FBBF24 Rouge #F87171 โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚BEGINNERโ”‚ โ”‚INTERMEDIATEโ”‚ โ”‚ ADVANCED โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Difficulty Badge -const DIFFICULTY_STYLES = { - BEGINNER: { - bg: 'rgba(74, 222, 128, 0.15)', - text: '#4ADE80', - }, - INTERMEDIATE: { - bg: 'rgba(251, 191, 36, 0.15)', - text: '#FBBF24', - }, - ADVANCED: { - bg: 'rgba(248, 113, 113, 0.15)', - text: '#F87171', - }, -} - -const styles = StyleSheet.create({ - badge: { - paddingHorizontal: SPACING[3], - paddingVertical: SPACING[1.5], - borderRadius: RADIUS.MD, - }, - badgeText: { - ...TYPOGRAPHY.label, - letterSpacing: 0.5, - }, -}) -``` - -### 6.6 Input Field - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ LABEL โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Placeholder text... โ–ก โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ (Dark background, subtle border, rounded corners) โ”‚ -โ”‚ โ”‚ -โ”‚ FOCUSED STATE โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Entered text โœ“ โ”‚ โ–’โ–’ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ (Brand border glow when focused) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Input Field -const styles = StyleSheet.create({ - inputContainer: { - backgroundColor: DARK.RAISED, - borderRadius: RADIUS.LG, - borderWidth: 1, - borderColor: BORDER.LIGHT, - paddingHorizontal: SPACING[4], - height: 48, - }, - inputContainerFocused: { - borderColor: BRAND.PRIMARY, - ...GLOW.brandSubtle, - }, - input: { - ...TYPOGRAPHY.body, - color: TEXT.PRIMARY, - flex: 1, - }, - label: { - ...TYPOGRAPHY.overline, - color: TEXT.HINT, - marginBottom: SPACING[2], - }, -}) -``` - -### 6.7 Progress Bar - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ โ”‚ -โ”‚ Default: โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ”‚ -โ”‚ โ”‚ -โ”‚ Progress: โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ”‚ -โ”‚ (Orange gradient fill with subtle glow) โ”‚ -โ”‚ โ”‚ -โ”‚ Size variations: โ”‚ -โ”‚ Thin: โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ (4px) โ”‚ -โ”‚ Medium: โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ (6px) โ”‚ -โ”‚ Thick: โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“โ–“ (8px) โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -```typescript -// Progress Bar -const styles = StyleSheet.create({ - container: { - height: 6, - backgroundColor: DARK.OVERLAY_2, - borderRadius: RADIUS.FULL, - overflow: 'hidden', - }, - fill: { - height: '100%', - backgroundColor: BRAND.PRIMARY, - borderRadius: RADIUS.FULL, - }, - // With glow - fillWithGlow: { - ...GLOW.brandSubtle, - }, -}) -``` - ---- - -## 7. Animation Specs - -### 7.1 Timing Constants - -```typescript -// src/shared/constants/animations.ts - -export const DURATION = { - INSTANT: 100, // Micro-feedback - FAST: 200, // Quick interactions - NORMAL: 300, // Standard transitions - SLOW: 400, // Cross-fades, reveals - BREATHING: 2000, // Cyclic animations - BREATHING_HALF: 1000, -} as const - -export const EASING = { - // Standard ease (most transitions) - STANDARD: Easing.inOut(Easing.cubic), - - // Ease out (elements entering) - OUT: Easing.out(Easing.cubic), - - // Ease in (elements leaving) - IN: Easing.in(Easing.cubic), - - // Bouncy (playful interactions) - BOUNCY: Easing.elastic(1.2), -} as const - -export const SPRING = { - // Gentle bounce - GENTLE: { - damping: 20, - stiffness: 150, - }, - - // Bouncy pop (victory, celebrations) - BOUNCY: { - damping: 12, - stiffness: 180, - }, - - // Snappy (quick feedback) - SNAPPY: { - damping: 25, - stiffness: 300, - }, -} as const -``` - -### 7.2 Animation Presets - -```typescript -// Pre-built animation configs - -export const ANIMATION = { - // Fade in - FADE_IN: { - toValue: 1, - duration: DURATION.NORMAL, - easing: EASING.OUT, - useNativeDriver: true, - }, - - // Fade out - FADE_OUT: { - toValue: 0, - duration: DURATION.NORMAL, - easing: EASING.IN, - useNativeDriver: true, - }, - - // Scale up (pop in) - POP_IN: { - toValue: 1, - duration: DURATION.SLOW, - easing: EASING.BOUNCY, - useNativeDriver: true, - }, - - // Pulse (countdown tick) - PULSE_UP: { - toValue: 1.03, - duration: 100, - easing: EASING.OUT, - useNativeDriver: true, - }, - PULSE_DOWN: { - toValue: 1, - duration: 100, - easing: EASING.IN, - useNativeDriver: true, - }, - - // Breathing glow - BREATH_HALF: { - toValue: 1, - duration: DURATION.BREATHING_HALF, - easing: EASING.STANDARD, - useNativeDriver: false, // Opacity/color can't be native - }, - - // Gradient crossfade - GRADIENT_CROSSFADE: { - toValue: 1, - duration: DURATION.SLOW, - easing: EASING.STANDARD, - useNativeDriver: false, - }, -} as const -``` - -### 7.3 Common Animations - -```typescript -// Glow breathing (START button) -const glowAnim = useRef(new Animated.Value(0)).current - -useEffect(() => { - Animated.loop( - Animated.sequence([ - Animated.timing(glowAnim, { - toValue: 1, - duration: 2000, - easing: EASING.STANDARD, - useNativeDriver: false, - }), - Animated.timing(glowAnim, { - toValue: 0, - duration: 2000, - easing: EASING.STANDARD, - useNativeDriver: false, - }), - ]) - ).start() -}, []) - -const glowOpacity = glowAnim.interpolate({ - inputRange: [0, 1], - outputRange: [0.3, 0.6], -}) - -const glowScale = glowAnim.interpolate({ - inputRange: [0, 1], - outputRange: [1, 1.08], -}) -``` - -```typescript -// Countdown pulse -const pulseAnim = useRef(new Animated.Value(1)).current - -useEffect(() => { - Animated.sequence([ - Animated.timing(pulseAnim, ANIMATION.PULSE_UP), - Animated.timing(pulseAnim, ANIMATION.PULSE_DOWN), - ]).start() -}, [secondsLeft]) -``` - -```typescript -// Victory pop -const scaleAnim = useRef(new Animated.Value(0.5)).current - -useEffect(() => { - Animated.spring(scaleAnim, { - toValue: 1, - ...SPRING.BOUNCY, - useNativeDriver: true, - }).start() -}, []) -``` - ---- - -## 8. Icon Reference - -### 8.1 Ionicons Mapping - -```typescript -// src/shared/constants/icons.ts - -export const ICONS = { - // Navigation - HOME: 'home', - HISTORY: 'time', - SETTINGS: 'settings', - - // Timer controls - PLAY: 'play', - PAUSE: 'pause', - STOP: 'stop', - SKIP: 'play-skip-forward', - - // Actions - CHEVRON_RIGHT: 'chevron-forward', - CHEVRON_LEFT: 'chevron-back', - CLOSE: 'close', - CHECK: 'checkmark', - - // Status - FLAME: 'flame', - TROPHY: 'trophy', - CHECK_CIRCLE: 'checkmark-circle', - - // Info - INFO: 'information-circle', - WARNING: 'warning', - LOCK: 'lock-closed', -} as const -``` - -### 8.2 Icon Sizes - -```typescript -export const ICON_SIZE = { - XS: 16, - SM: 20, - MD: 24, - LG: 28, - XL: 32, - XXL: 48, -} as const -``` - ---- - -## 9. Safe Areas & Layout - -### 9.1 Layout Constants - -```typescript -// src/shared/constants/layout.ts - -export const LAYOUT = { - // Horizontal padding for screens - PAGE_HORIZONTAL: 24, - - // Minimum touch target - TOUCH_TARGET: 44, - - // Tab bar height - TAB_BAR_HEIGHT: 80, - - // Header height - HEADER_HEIGHT: 56, - - // Bottom sheet handle - BOTTOM_SHEET_HANDLE: 24, -} as const -``` - -### 9.2 Safe Area Usage - -```typescript -import { useSafeAreaInsets } from 'react-native-safe-area-context' - -function Screen() { - const insets = useSafeAreaInsets() - - return ( - - {/* Content */} - - ) -} -``` - ---- - -## 10. Accessibility - -### 10.1 Minimum Touch Targets - -```typescript -// All interactive elements must be at least 44ร—44 - -const TOUCH_TARGET_STYLE = { - minHeight: 44, - minWidth: 44, - justifyContent: 'center', - alignItems: 'center', -} -``` - -### 10.2 Contrast Ratios - -| Text Size | Minimum Ratio | Status | -|-----------|---------------|--------| -| Large (18px+) | 3:1 | โœ… TEXT.PRIMARY on DARK.BASE | -| Normal | 4.5:1 | โœ… TEXT.SECONDARY on DARK.BASE | -| Small (<14px) | 4.5:1 | โš ๏ธ TEXT.HINT may need adjustment | - -### 10.3 Accessibility Labels - -```typescript - - START - -``` - ---- - -## 11. Quick Reference Card - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ TABATAGO QUICK REFERENCE โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ COLORS โ”‚ -โ”‚ Primary: #F97316 (Orange Energy) โ”‚ -โ”‚ Dark Base: #1A1A1E โ”‚ -โ”‚ Text: #FFFFFF โ†’ rgba(255,255,255,0.40) โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ TYPOGRAPHY โ”‚ -โ”‚ Font: Inter โ”‚ -โ”‚ Countdown: 900 140px โ”‚ -โ”‚ Heading: 800 24px โ”‚ -โ”‚ Body: 400 16px โ”‚ -โ”‚ Caption: 500 14px โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ SPACING โ”‚ -โ”‚ Base: 4px โ”‚ -โ”‚ Page: 24px โ”‚ -โ”‚ Card: 16px โ”‚ -โ”‚ Section: 40px โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ RADIUS โ”‚ -โ”‚ Button: 9999px (pill) โ”‚ -โ”‚ Card: 20px โ”‚ -โ”‚ Badge: 8px โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ ANIMATION โ”‚ -โ”‚ Fast: 200ms โ”‚ -โ”‚ Normal: 300ms โ”‚ -โ”‚ Breathing: 2000ms โ”‚ -โ”‚ Easing: cubic in-out โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ GLOW โ”‚ -โ”‚ Brand: #F97316, 0.5 opacity, 40px radius โ”‚ -โ”‚ White: #FFFFFF, 0.3 opacity, 16px radius โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - ---- - -## 12. File Structure - -``` -src/shared/constants/ -โ”œโ”€โ”€ colors.ts // All color tokens -โ”œโ”€โ”€ typography.ts // Type scale -โ”œโ”€โ”€ spacing.ts // Spacing scale -โ”œโ”€โ”€ borderRadius.ts // Radius tokens -โ”œโ”€โ”€ shadows.ts // Shadow & glow effects -โ”œโ”€โ”€ animations.ts // Animation presets -โ”œโ”€โ”€ icons.ts // Icon mappings -โ””โ”€โ”€ layout.ts // Layout constants -``` - ---- - -*Document crรฉรฉ le 18 fรฉvrier 2026 โ€” TabataGo Style Guide v1.0* diff --git a/.gitea/workflows/pr-iphone-deploy.yml b/.github/workflows/pr-iphone-deploy.yml similarity index 100% rename from .gitea/workflows/pr-iphone-deploy.yml rename to .github/workflows/pr-iphone-deploy.yml diff --git a/.gitignore b/.gitignore index d3e56b8..1233a92 100644 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,4 @@ DerivedData/ # XcodeGen generated โ€” NOT in version control TabataGo.xcodeproj +build/ \ No newline at end of file diff --git a/tabatago-swift/TabataGo.xcodeproj/project.xcworkspace/xcuserdata/20015659.xcuserdatad/UserInterfaceState.xcuserstate b/tabatago-swift/TabataGo.xcodeproj/project.xcworkspace/xcuserdata/20015659.xcuserdatad/UserInterfaceState.xcuserstate new file mode 100644 index 0000000000000000000000000000000000000000..72b1850c864cfbbe4a7a5ad67fcda950cc99870c GIT binary patch literal 75912 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 KAOGKI@qYn}Q7+N| literal 0 HcmV?d00001