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 → references/api-architecture.md
Design et CSS → references/design-system.md
Médias (images/vidéos) → references/media-integration.md
Déploiement VPS → references/deployment.md

Structure standard d'un projet dashboard

workspace/projects/MON-DASHBOARD/
├── index.html          ← écran 1 (Home / Proof)
├── trading.html        ← écran 2 (Performance & trades)
├── signals.html        ← écran 3 (Feed signaux live + CTA VIP)
├── journal.html        ← écran 4 (Photos / Timeline / Milestones)
├── assets/
│   ├── logo.png
│   └── og-image.png    ← pour partage réseaux sociaux
└── api_server.py       ← si dashboard_api.py pas encore lancé

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 :

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

É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

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

# Copier les fichiers sur le VPS
scp -r ./MON-DASHBOARD/ root@72.62.30.28:/docker/openclaw-yyvg/data/.openclaw/workspace/projects/

# Lancer l'API Wesley sur port 8766
docker exec -d openclaw-yyvg-openclaw-1 python3 /data/.openclaw/workspace/api/dashboard_api.py --port 8766

# Vérifier que ça tourne
curl http://72.62.30.28:8766/health

# Ouvrir le dashboard (tunnel Cloudflare doit être actif)
# URL : https://truth-demonstrate-restore-calgary.trycloudflare.com