Wesley Dashboard Builder

Skill de création de dashboards et sites web complets pour Wesley-Agent.
Produit des fichiers HTML/CSS/JS prêts à déployer sur le VPS via tunnel Cloudflare.

Philosophie

Chaque dashboard = un produit marketing.

• - Home/Proof → preuve sociale → convertit en VIP
• Trading → crédibilité trader sérieux
• Signaux → valeur visible → justifie le prix
• Journal → engagement → fidélise

Lire les références dans l'ordre selon le besoin :

• - Architecture et API → INLINECODE0
• Design et CSS → INLINECODE1
• Médias (images/vidéos) → INLINECODE2
• Déploiement VPS → INLINECODE3

---

Structure standard d'un projet dashboard

CODEBLOCK0

---

Workflow de création

Étape 1 — Déterminer le type de dashboard

Type demandé	Fichiers à créer	Référence
Dashboard complet (4 écrans)	index + trading + signals + journal	Tout
Landing page / site vitrine

index.html uniquement | design-system.md | | Page signaux publique | signals.html | api-architecture.md | | Galerie preuve sociale | journal.html | media-integration.md | | Dashboard embarqué (iframe) | Composant autonome | design-system.md |

Étape 2 — Lire la référence design

→ references/design-system.md : variables CSS, typographie, composants, animations

Étape 3 — Générer les fichiers HTML

Chaque fichier HTML = autonome (CSS + JS inline, zéro dépendance locale).
Imports autorisés via CDN seulement :
CODEBLOCK1

Étape 4 — Connecter l'API

→ references/api-architecture.md : endpoints disponibles, fallback demo data

Étape 5 — Intégrer médias

→ references/media-integration.md : images, vidéos, upload Telegram, OG tags

Étape 6 — Déployer

→ references/deployment.md : copier sur VPS, lancer API, configurer tunnel

---

Écrans standard — description rapide

Écran 1 — Home / Proof (index.html)

• - Portfolio value live avec animation compteur
• P&L du jour en vert/rouge
• Statut agents (dots qui pulsent)
• Dernier signal posté
• Barre de progression vers objectif mensuel
• Uptime système
• Bouton screenshot pour partage Instagram/X

Écran 2 — Trading (trading.html)

• - Courbe equity (Chart.js, 7j/30j/all)
• Win rate en anneau (donut chart)
• Positions ouvertes : marché + odds + edge %
• Derniers trades : ✅ win / ❌ loss
• Métriques : Sharpe, drawdown, avg hold

Écran 3 — Signaux (signals.html)

• - Feed des derniers signaux (style Twitter)
• Score EDGE / Confiance / Marché / Heure
• Badge FREE vs 🔒 VIP
• CTA sticky en bas : "Rejoindre le canal VIP →"
• Auto-refresh toutes les 30s

Écran 4 — Journal / Proof (journal.html)

• - Upload photos depuis téléphone (drag & drop ou bouton)
• Galerie timeline : date + caption
• Milestones : "Semaine 1 : +$22 → Objectif : +$200"
• Lightbox pour voir les photos en grand
• Photos reçues via Telegram → affichées automatiquement

---

Règles de génération de code

1. 1. Tout inline — CSS dans <style>, JS dans <script>, jamais de fichiers séparés
2. Mobile-first — grid responsive, font-size fluide, touch-friendly
3. Fallback demo data — si API offline, données demo réalistes s'affichent
4. Navigation — barre bottom mobile (4 icônes) + sidebar desktop
5. Dark theme obligatoire — fond #020608 ou similaire (voir design-system.md)
6. Pas de framework — HTML/CSS/JS vanilla uniquement (sauf Chart.js CDN)
7. Meta OG — chaque page a ses balises pour le partage
8. CTA VIP — toujours présent sur signals.html et index.html

---

Checklist avant livraison

• - [ ] Fichiers autonomes (zéro dépendance locale)
• [ ] Test sur mobile (viewport 375px)
• [ ] Fallback demo data fonctionnel
• [ ] Navigation entre écrans opérationnelle
• [ ] API fetch avec timeout et error handling
• [ ] Upload photo fonctionne (FileReader API)
• [ ] Meta tags OG pour partage
• [ ] CTA VIP visible sur mobile
• [ ] Instructions déploiement fournies

---

Commandes de déploiement rapide

CODEBLOCK2