From 9aacebf1a36dada993cd0614b4a01baba5ef05e7 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Mon, 27 Nov 2023 10:35:17 +0100
Subject: [PATCH] add header and main tag
---
public/index.html | 524 ++++++++++++++++++++++++----------------------
1 file changed, 269 insertions(+), 255 deletions(-)
diff --git a/public/index.html b/public/index.html
index 835511f..170e1d4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,289 +51,303 @@
/>
</head>
<body>
- <nav>
- <a class="main-logo" href="/">
- <img src="./assets/ecolyo-icon.svg" alt="Ecolyo logo" />
- Ecolyo
- </a>
- <div class="links">
- <a class="navlink" href="#how-it-works">Comment ça marche ?</a>
- <a class="navlink" href="#security">La sécurité</a>
- <a class="navlink" href="#cloud">J'ai déjà un compte</a>
- <a class="navlink yellow" href="#create-account">Se créer un compte</a>
- </div>
- </nav>
- <section class="main-cta">
- <div class="content-txt">
- <h1 class="text-36-white">
- Ecolyo vous aide à suivre et agir sur vos consommations d'énergie et
- d'eau
- </h1>
- <h2 class="text-18-white yellow">
- Ecolyo est un service gratuit disponible sur smartphone et ordinateur
- </h2>
- <ul class="text-18-white">
- <li>
- Retrouvez au même endroit vos consommations d'électricité, de gaz et
- d'eau
- </li>
- <li>Suivez l'évolution de vos consommations dans le temps</li>
- <li>
- Avec les défis personnalisés, Ecolyo vous accompagne dans la
- réduction de vos consommations d'énergie et d'eau
- </li>
- </ul>
- <a
- href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
- target="_blank"
- class="button robots-nocontent"
- >
- <img src="assets/ecolyo-shadow.svg" alt="ecolyo-icon" />
- Se créer un compte
+ <header>
+ <nav>
+ <a class="main-logo" href="/">
+ <img src="./assets/ecolyo-icon.svg" alt="Ecolyo logo" />
+ Ecolyo
</a>
- </div>
- <!-- Use object tag instead of img to not have a blurry svg on IOS -->
- <object
- id="illu"
- class="illu"
- type="image/svg+xml"
- data="assets/illu-landing.svg"
- tabindex="-1"
- role="img"
- aria-hidden="true"
- >
- Illustration Ecolyo
- </object>
- <img
- id="mgl-logo"
- class="mglLogo"
- alt="Logo Métropole Grand Lyon"
- src="assets/legal/mglLogo.svg"
- role="img"
- />
- </section>
-
- <section class="explanation" id="how-it-works">
- <h2 class="text-36-white">Comment ça marche ?</h2>
- <p class="text-18-white pt-2">
- Ecolyo vous permet de centraliser le suivi de vos consommations en
- fonction de votre installation <br />en utilisant votre ou vos
- compteur(s) communiquant(s).
- </p>
- <p class="text-26-white-bold pt-2">
- Pour en profiter, il vous suffit d'être équipé <br />de l'un de ces
- compteurs communicants :
- </p>
- <div class="compteurs" role="list">
- <div class="bloc elec-color" role="listitem">
- <object
- class="compteur-img"
- type="image/svg+xml"
- data="./assets/compteurs/Linky.svg"
- tabindex="-1"
- aria-hidden="true"
+ <div class="links">
+ <a class="navlink" href="#how-it-works">Comment ça marche ?</a>
+ <a class="navlink" href="#security">La sécurité</a>
+ <a class="navlink" href="#cloud">J'ai déjà un compte</a>
+ <a class="navlink yellow" href="#create-account"
+ >Se créer un compte</a
>
- Compteur Linky
- </object>
- <h3>Linky</h3>
- <p class="text-18-white">pour l’électricité</p>
- <div class="provider-logo">
- <img alt="enedis-logo" src="./assets/enedis-logo.png" />
- </div>
</div>
- <span>ou</span>
- <div class="bloc water-color" role="listitem">
- <object
- class="compteur-img"
- type="image/svg+xml"
- data="./assets/compteurs/Teleo.svg"
- tabindex="-1"
- aria-hidden="true"
+ </nav>
+ </header>
+ <main>
+ <section class="main-cta">
+ <div class="content-txt">
+ <h1 class="text-36-white">
+ Ecolyo vous aide à suivre et agir sur vos consommations d'énergie et
+ d'eau
+ </h1>
+ <h2 class="text-18-white yellow">
+ Ecolyo est un service gratuit disponible sur smartphone et
+ ordinateur
+ </h2>
+ <ul class="text-18-white">
+ <li>
+ Retrouvez au même endroit vos consommations d'électricité, de gaz
+ et d'eau
+ </li>
+ <li>Suivez l'évolution de vos consommations dans le temps</li>
+ <li>
+ Avec les défis personnalisés, Ecolyo vous accompagne dans la
+ réduction de vos consommations d'énergie et d'eau
+ </li>
+ </ul>
+ <a
+ href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
+ target="_blank"
+ class="button robots-nocontent"
>
- Compteur Téléo
- </object>
- <h3>Téléo</h3>
- <p class="text-18-white">pour l'eau</p>
- <div class="provider-logo">
- <img alt="Logo EPGL" src="assets/epgl-logo.png" />
- </div>
+ <img src="assets/ecolyo-shadow.svg" alt="ecolyo-icon" />
+ Se créer un compte
+ </a>
</div>
- <span>ou</span>
- <div class="bloc gaz-color" role="listitem">
- <object
- class="compteur-img"
- type="image/svg+xml"
- data="./assets/compteurs/Gazpar.svg"
- tabindex="-1"
- aria-hidden="true"
- >
- Compteur Gazpar
- </object>
+ <!-- Use object tag instead of img to not have a blurry svg on IOS -->
+ <object
+ id="illu"
+ class="illu"
+ type="image/svg+xml"
+ data="assets/illu-landing.svg"
+ tabindex="-1"
+ role="img"
+ aria-hidden="true"
+ >
+ Illustration Ecolyo
+ </object>
+ <img
+ id="mgl-logo"
+ class="mglLogo"
+ alt="Logo Métropole Grand Lyon"
+ src="assets/legal/mglLogo.svg"
+ role="img"
+ />
+ </section>
- <h3>Gazpar</h3>
- <p class="text-18-white">pour le gaz</p>
- <div class="provider-logo">
- <img alt="grdf-logo" src="assets/grdf-logo.png" />
+ <section class="explanation" id="how-it-works">
+ <h2 class="text-36-white">Comment ça marche ?</h2>
+ <p class="text-18-white pt-2">
+ Ecolyo vous permet de centraliser le suivi de vos consommations en
+ fonction de votre installation <br />en utilisant votre ou vos
+ compteur(s) communiquant(s).
+ </p>
+ <p class="text-26-white-bold pt-2">
+ Pour en profiter, il vous suffit d'être équipé <br />de l'un de ces
+ compteurs communicants :
+ </p>
+ <div class="compteurs" role="list">
+ <div class="bloc elec-color" role="listitem">
+ <object
+ class="compteur-img"
+ type="image/svg+xml"
+ data="./assets/compteurs/Linky.svg"
+ tabindex="-1"
+ aria-hidden="true"
+ >
+ Compteur Linky
+ </object>
+ <h3>Linky</h3>
+ <p class="text-18-white">pour l’électricité</p>
+ <div class="provider-logo">
+ <img alt="enedis-logo" src="./assets/enedis-logo.png" />
+ </div>
</div>
- </div>
- </div>
- <div class="fluid-pipes">
- <img src="assets/fluid-icons-pipes.svg" alt="" aria-hidden="true" />
- </div>
- </section>
- <section class="security" id="security">
- <div class="container">
- <div class="container-cloud">
- <p class="xl-text">
- Pour utiliser Ecolyo il vous faut créer <br />un
- <a
- href="https://www.grandlyon.com/services/self-data-cloud-personnel"
- target="_blank"
- alt="Cloud personnel Ma Bulle"
+ <span>ou</span>
+ <div class="bloc water-color" role="listitem">
+ <object
+ class="compteur-img"
+ type="image/svg+xml"
+ data="./assets/compteurs/Teleo.svg"
+ tabindex="-1"
+ aria-hidden="true"
>
- Cloud personnel Ma Bulle
- </a>
- ...
- </p>
- <div class="container-img">
- <img
- src="assets/cloud-shield.svg"
- alt="logo cloud Ma Bulle"
- role="img"
- />
+ Compteur Téléo
+ </object>
+ <h3>Téléo</h3>
+ <p class="text-18-white">pour l'eau</p>
+ <div class="provider-logo">
+ <img alt="Logo EPGL" src="assets/epgl-logo.png" />
+ </div>
</div>
- <p class="xl-text">
- ... un service gratuit de la Métropole de Lyon, pour sécuriser vos
- données afin que personne n'y ait accès à part vous.
- </p>
- <p class="xs-text">
- Pour utiliser Ecolyo, il vous faut créer un
- <a
- href="https://www.grandlyon.com/services/self-data-cloud-personnel"
- alt="Cloud personnel Ma Bulle"
+ <span>ou</span>
+ <div class="bloc gaz-color" role="listitem">
+ <object
+ class="compteur-img"
+ type="image/svg+xml"
+ data="./assets/compteurs/Gazpar.svg"
+ tabindex="-1"
+ aria-hidden="true"
>
- Cloud personnel Ma Bulle
- </a>
- un service gratuit de la Métropole de Lyon, pour sécuriser vos
- données afin que personne n'y ait accès à part vous.
- </p>
+ Compteur Gazpar
+ </object>
+
+ <h3>Gazpar</h3>
+ <p class="text-18-white">pour le gaz</p>
+ <div class="provider-logo">
+ <img alt="grdf-logo" src="assets/grdf-logo.png" />
+ </div>
+ </div>
</div>
- </div>
- </section>
- <section class="views-app">
- <div class="content">
<div class="fluid-pipes">
- <img src="assets/fluid-pipes-yellow.svg" alt="" aria-hidden="true" />
+ <img src="assets/fluid-icons-pipes.svg" alt="" aria-hidden="true" />
</div>
- <div class="screens-container">
- <div class="screen consumption">
- <img
- src="assets/screen-1.svg"
- alt="écran d'un smartphone représentant un diagramme à barre"
- />
- <p><span>Visualiser</span> vos consommations</p>
+ </section>
+ <section class="security" id="security">
+ <div class="container">
+ <div class="container-cloud">
+ <p class="xl-text">
+ Pour utiliser Ecolyo il vous faut créer <br />un
+ <a
+ href="https://www.grandlyon.com/services/self-data-cloud-personnel"
+ target="_blank"
+ alt="Cloud personnel Ma Bulle"
+ >
+ Cloud personnel Ma Bulle
+ </a>
+ ...
+ </p>
+ <div class="container-img">
+ <img
+ src="assets/cloud-shield.svg"
+ alt="logo cloud Ma Bulle"
+ role="img"
+ />
+ </div>
+ <p class="xl-text">
+ ... un service gratuit de la Métropole de Lyon, pour sécuriser vos
+ données afin que personne n'y ait accès à part vous.
+ </p>
+ <p class="xs-text">
+ Pour utiliser Ecolyo, il vous faut créer un
+ <a
+ href="https://www.grandlyon.com/services/self-data-cloud-personnel"
+ alt="Cloud personnel Ma Bulle"
+ >
+ Cloud personnel Ma Bulle
+ </a>
+ un service gratuit de la Métropole de Lyon, pour sécuriser vos
+ données afin que personne n'y ait accès à part vous.
+ </p>
</div>
- <div class="screen challenge">
+ </div>
+ </section>
+ <section class="views-app">
+ <div class="content">
+ <div class="fluid-pipes">
<img
- src="assets/screen-2.svg"
- alt="écran d'un smartphone représentant une illustration des défis"
+ src="assets/fluid-pipes-yellow.svg"
+ alt=""
+ aria-hidden="true"
/>
- <p><span>Participer</span> à des défis ludiques</p>
</div>
- <div class="screen ecogesture">
- <img
- src="assets/screen-3.svg"
- alt="écran d'un smartphone représentant une illustration d'un chat avec un parapluie"
- />
- <p><span>Consulter</span> des écogestes utiles</p>
+ <div class="screens-container">
+ <div class="screen consumption">
+ <img
+ src="assets/screen-1.svg"
+ alt="écran d'un smartphone représentant un diagramme à barre"
+ />
+ <p><span>Visualiser</span> vos consommations</p>
+ </div>
+ <div class="screen challenge">
+ <img
+ src="assets/screen-2.svg"
+ alt="écran d'un smartphone représentant une illustration des défis"
+ />
+ <p><span>Participer</span> à des défis ludiques</p>
+ </div>
+ <div class="screen ecogesture">
+ <img
+ src="assets/screen-3.svg"
+ alt="écran d'un smartphone représentant une illustration d'un chat avec un parapluie"
+ />
+ <p><span>Consulter</span> des écogestes utiles</p>
+ </div>
</div>
</div>
- </div>
- </section>
- <section class="create-account" id="create-account">
- <h2 class="text-26-white">Se créer un compte en deux étapes !</h2>
- <div class="containerSteps">
- <div class="step">
- <div class="flex">
- <div class="number water-color">1</div>
- <div class="text">
- <h3 class="header">Créer votre cloud personnel Ma Bulle</h3>
- <p class="content">
- Afin de préserver la confidentialité et la sécurité de vos
- données de consommation, vous devez créer un cloud personnel Ma
- Bulle dans lequel vous seul pourrez accéder à vos données.
- </p>
+ </section>
+ <section class="create-account" id="create-account">
+ <h2 class="text-26-white">Se créer un compte en deux étapes !</h2>
+ <div class="containerSteps">
+ <div class="step">
+ <div class="flex">
+ <div class="number water-color">1</div>
+ <div class="text">
+ <h3 class="header">Créer votre cloud personnel Ma Bulle</h3>
+ <p class="content">
+ Afin de préserver la confidentialité et la sécurité de vos
+ données de consommation, vous devez créer un cloud personnel
+ Ma Bulle dans lequel vous seul pourrez accéder à vos données.
+ </p>
+ </div>
</div>
+ <img
+ src="assets/steps/step1.svg"
+ class="steppicture"
+ alt="Connecter vos compteurs"
+ />
</div>
- <img
- src="assets/steps/step1.svg"
- class="steppicture"
- alt="Connecter vos compteurs"
- />
- </div>
- <div class="step">
- <div class="flex">
- <div class="number elec-color">2</div>
- <div class="text">
- <h3 class="header">Connecter vos compteurs à Ecolyo</h3>
- <p class="content">
- Muni d'une facture, et après avoir donné votre accord, vous
- pouvez connecter vos compteurs à Ecolyo. Plus besoin ensuite d'y
- toucher, les données sont mises à jour quotidiennement !
- </p>
+ <div class="step">
+ <div class="flex">
+ <div class="number elec-color">2</div>
+ <div class="text">
+ <h3 class="header">Connecter vos compteurs à Ecolyo</h3>
+ <p class="content">
+ Muni d'une facture, et après avoir donné votre accord, vous
+ pouvez connecter vos compteurs à Ecolyo. Plus besoin ensuite
+ d'y toucher, les données sont mises à jour
+ quotidiennement !
+ </p>
+ </div>
</div>
+ <img
+ src="assets/steps/step2.svg"
+ class="steppicture"
+ alt="Donner vos consentements"
+ />
</div>
- <img
- src="assets/steps/step2.svg"
- class="steppicture"
- alt="Donner vos consentements"
- />
</div>
- </div>
- <a
- href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
- target="_blank"
- class="createAccountButton"
- >
- Se créer un compte
- </a>
- </section>
-
- <section class="cloud-gl" id="cloud">
- <div class="text-content">
- <img src="assets/cloud-ma-bulle.svg" alt="logo cloud ma bulle" />
- <h2>J'ai déjà un compte</h2>
- <p class="text-18-white">
- Vous avez déjà un compte mais ne savez plus comment y accéder ? <br />
- Pas de panique, pour retrouver l'accès à votre espace Ma Bulle au sein
- duquel vous retrouverez Ecolyo, cliquez sur le bouton ci-dessous
- </p>
<a
- href="https://manager.cozygrandlyon.cloud/v2/grdlyon/login"
+ href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
- class="button robots-nocontent"
+ class="createAccountButton"
>
- Accéder à Ma Bulle
+ Se créer un compte
</a>
- </div>
- </section>
- <section class="flyer">
- <div class="background"></div>
- <div class="content">
- <h2>Envie de parler d’Ecolyo autour de vous ?</h2>
- <p>
- N’hésitez pas à parler d’Ecolyo à vos proches en téléchargeant le
- flyer. <br />Il vous suffit de cliquer sur le bouton juste en dessous
- !
- </p>
- <a
- href="assets/flyerEcolyoWeb2023.pdf"
- download="flyerEcolyoWeb2023.pdf"
- class="button robots-nocontent"
- >Télécharger le flyer</a
- >
- </div>
- </section>
+ </section>
+
+ <section class="cloud-gl" id="cloud">
+ <div class="text-content">
+ <img src="assets/cloud-ma-bulle.svg" alt="logo cloud ma bulle" />
+ <h2>J'ai déjà un compte</h2>
+ <p class="text-18-white">
+ Vous avez déjà un compte mais ne savez plus comment y accéder ?
+ <br />
+ Pas de panique, pour retrouver l'accès à votre espace Ma Bulle au
+ sein duquel vous retrouverez Ecolyo, cliquez sur le bouton
+ ci-dessous
+ </p>
+ <a
+ href="https://manager.cozygrandlyon.cloud/v2/grdlyon/login"
+ target="_blank"
+ class="button robots-nocontent"
+ >
+ Accéder à Ma Bulle
+ </a>
+ </div>
+ </section>
+ <section class="flyer">
+ <div class="background"></div>
+ <div class="content">
+ <h2>Envie de parler d’Ecolyo autour de vous ?</h2>
+ <p>
+ N’hésitez pas à parler d’Ecolyo à vos proches en téléchargeant le
+ flyer. <br />Il vous suffit de cliquer sur le bouton juste en
+ dessous !
+ </p>
+ <a
+ href="assets/flyerEcolyoWeb2023.pdf"
+ download="flyerEcolyoWeb2023.pdf"
+ class="button robots-nocontent"
+ >Télécharger le flyer</a
+ >
+ </div>
+ </section>
+ </main>
<footer>
<div class="logos-footer">
<img class="gl" src="assets/legal/mglLogo.svg" alt="logo grandlyon" />
--
GitLab