dvcrn 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