Aller au contenu principal

Page d'accueil

Page d'accueil publique de MyElectricalData présentant le service aux visiteurs non authentifiés. Point d'entrée principal de l'application en mode serveur.

Features​

FeatureStatutMode
Header glassmorphism au scrollFAITServeur
Typing effect sur le titre H1FAITServeur
Particules connectées (Canvas)FAITServeur
Compteurs animés au scrollFAITServeur
Timeline interactive 5 étapesFAITServeur
Cards fonctionnalités avec brillanceFAITServeur
Section client auto-hébergéFAITServeur
Section donation avec modaleFAITServeur
CTA conditionnel selon authFAITServeur
Dark mode completFAITServeur
Responsive mobile/desktopFAITServeur
Easter egg Konami CodeFAITServeur

Raccourcis clavier​

ToucheAction
↑↑↓↓←→←→BA (Konami Code)Transforme les particules en cœurs/bisous

Fichiers​

TypeFichier
Pageapps/web/src/pages/Landing.tsx
Composantsapps/web/src/components/DonationModal.tsx
Storesapps/web/src/stores/themeStore.ts
Hooksapps/web/src/hooks/useAuth.ts
Routeapps/web/src/App.tsx (ligne 170)

Interface utilisateur​

Sections de la page​

SectionDescription
HeaderFixe, glassmorphism, apparaît après 100px de scroll
HeroTitre animé, particules Canvas, CTA principal
Stats3 compteurs animés (99%, 100%, 5/s)
Pourquoi MyElectricalDataExplication OAuth2.0 Enedis
Comment ça marcheTimeline 5 étapes avec alerte "deux comptes"
Fonctionnalités5 cards avec effet brillance au hover
Données protégées2 cards (cache multi-niveaux, chiffrement)
Client auto-hébergé3 intégrations (HA, MQTT, InfluxDB) + avantages
Soutenez le projetExplication modèle gratuit + bouton donation
CTA FinalGradient animé + bouton inscription
FooterMinimaliste

Header (Glassmorphism)​

Apparaît après 100px de scroll avec backdrop-blur-md.

Éléments :

ÉlémentDesktopMobile
Logo/logo-full.png/logo.svg
GitHubIcône + texteIcône seule
DonationIcône + texteIcône seule
Theme toggleSun/MoonSun/Moon
Auth button"Se connecter""Connexion"

Hero Section​

Fond animé :

  • ConnectedParticles : 60 particules Canvas avec lignes de connexion
  • Distance max connexion : 150px
  • Cercles décoratifs avec blur et pulse

Texte :

  • Typing effect : 50ms par caractère
  • Badge : "100% Gratuit & Open Source" avec bounce
  • Scroll indicator : ChevronDown animé

Compteurs animés​

CompteurValeurSuffixNote au hover
Disponibilité99%"*Quand Enedis n'est pas en vacances"
Sécurisé100%-
Requêtes max5/s-

Timeline (Comment ça marche)​

ÉtapeIcôneTitreDescription
1KeyCréation compte MyElectricalDataObtention client_id/client_secret
2ExternalLinkCréation compte EnedisLien vers mon-compte-particulier.enedis.fr
3ShieldConsentement EnedisAutorisation OAuth2 sur enedis.fr
4ZapAccès aux donnéesUtilisation API
5BarChart3Profitez du serviceInterface web ou client local

Layout responsive :

  • Mobile : Numéros en haut, cartes centrées
  • Desktop : Timeline alternée gauche/droite avec ligne centrale

Cards Fonctionnalités​

IcôneTitreDescription
LockSécurité maximaleChiffrement avec clé API personnelle
ZapCache intelligentRespect quotas Enedis (5 req/s)
BarChart3Données complètesConso, prod, puissance, contrat, adresse
RefreshCwGestion OAuth2.0Auth complète + gestion auto tokens
ContainerDéploiement simplifiéDocker + Helm Chart Kubernetes

Effets hover :

  • Brillance : gradient horizontal traversant
  • Shadow : MD → 2XL
  • Lift : translateY(-8px)
  • Icône : scale(1.1) + rotate(6deg)

Intégrations Client Local​

IntégrationIcôneCouleurDescription
Home AssistantHomeBlueTableaux de bord domotique
MQTTRadioPurpleProtocole universel (Jeedom, Domoticz)
InfluxDBLineChartOrangeMétriques + Grafana

Composants personnalisés​

useInView Hook​

const [ref, isInView] = useInView({ threshold: 0.1 });
  • Utilise IntersectionObserver
  • Trigger une seule fois
  • Threshold : 10% visible

AnimatedCounter​

<AnimatedCounter end={99} suffix="%" duration={2000} />
PropTypeDéfautDescription
endnumber-Valeur finale
durationnumber2000Durée animation (ms)
suffixstring""Texte après le nombre

ConnectedParticles​

Canvas animé avec 60 particules connectées.

ParamètreValeur
Particules60
Distance max150px
Vitesse0.5
Rayon3-6px
Opacity canvas0.4

Easter egg Konami Code :

  • Séquence : ↑↑↓↓←→←→BA (A ou Q pour AZERTY)
  • Toggle : particules → cœurs/bisous 💋
  • 30% bisous, 70% cœurs

Animations CSS​

AnimationKeyframesUsage
fade-in-upopacity 0→1, translateY 30px→0Sections au scroll
fade-inopacity 0→1Éléments apparition
blinkopacity 1→0→1 (step-end)Curseur typing
bounce-subtletranslateY 0→-5px→0Badge "Open Source"

Comportement conditionnel​

Selon état d'authentification​

ÉlémentNon authentifiéAuthentifié
Header"Se connecter" → /login"Dashboard" → /dashboard
Hero CTA"Démarrer" + "Se connecter""Accéder au dashboard"
CTA Final"Créer mon compte gratuitement""Accéder au dashboard"

Selon le mode d'exécution​

ModeComportement
ServeurAffiche la Landing page
ClientRedirige vers /dashboard

Responsive​

BreakpointHeader logoStats gridTimelineCards features
MobileIcône seule1 colonneVertical1 colonne
sm (640px)Logo complet1 colonneVertical2 colonnes
md (768px)Logo complet3 colonnesHorizontal2 colonnes
lg (1024px)Logo complet3 colonnesHorizontal2 colonnes

Performance​

OptimisationImplémentation
IntersectionObserverAnimations déclenchées au scroll uniquement
requestAnimationFrameCompteurs à 60fps
CSS transformsGPU accelerated
Cleanup observersDans useEffect return
Particules limitées60 max

Liens externes​

LienURL
GitHubhttps://github.com/MyElectricalData/myelectricaldata_new
Compte Enedishttps://mon-compte-particulier.enedis.fr

Notes techniques​

  • Pas de Layout.tsx : Header et sections custom intégrés
  • Smooth scroll : Activé globalement via document.documentElement.style.scrollBehavior
  • Header apparition : window.scrollY > 100
  • Sections animées : 5 refs avec useInView (ref1 à ref5)
  • DonationModal : Composant séparé avec état showDonationModal
  • isReady state : Évite le clignotement des boutons auth au montage