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 0000000..72b1850 Binary files /dev/null and b/tabatago-swift/TabataGo.xcodeproj/project.xcworkspace/xcuserdata/20015659.xcuserdatad/UserInterfaceState.xcuserstate differ