Newer
Older
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="assets/ecolyo-icon.svg" />
<title>Ecolyo｜Suivez et maîtrisez vos consos d'énergie et d'eau</title>
<!-- Open Graph general -->
<meta
content="Ecolyo｜Suivez et maîtrisez vos consos d'énergie et d'eau"
/>
<meta
content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
/>
<meta property="og:url" content="https://ecolyo.com" />
<meta property="og:type" content="website" />
<!-- 1024x512 -->
itemprop="image"
content="https://ecolyo.com/assets/socials/1024x512.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Illustration Ecolyo" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="512" />
<meta property="og:image:type" content="image/png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://ecolyo.com/assets/socials/1200x630.png"
name="twitter:title"
content="Ecolyo｜Suivez et maîtrisez vos consos d'énergie et d'eau "
<header>
<nav>
<a class="main-logo" href="/">
<img src="./assets/ecolyo-icon.svg" alt="Ecolyo logo" />
Ecolyo
<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
</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"
<img src="assets/ecolyo-shadow.svg" alt="ecolyo-icon" />
Se créer un compte
</a>
<!-- 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>
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<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>
<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"
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>
<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>
<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 class="fluid-pipes">
<img src="assets/fluid-icons-pipes.svg" alt="" aria-hidden="true" />
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
</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>
</section>
<section class="views-app">
<div class="content">
<div class="fluid-pipes">
src="assets/fluid-pipes-yellow.svg"
alt=""
aria-hidden="true"
<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>
</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>
<img
src="assets/steps/step1.svg"
class="steppicture"
alt="Connecter vos compteurs"
/>
<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>
<img
src="assets/steps/step2.svg"
class="steppicture"
alt="Donner vos consentements"
/>
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
</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>
<div class="logos-footer">
<img class="gl" src="assets/legal/mglLogo.svg" alt="logo grandlyon" />
<img
class="gouv"
src="assets/legal/Gouvernement.svg"
alt="logo gouvernement"
/>
<img
class="tiga"
src="assets/legal/BDT.svg"
alt="logo banque des territoires"
/>
<img class="territory" src="assets/legal/2030TI.svg" alt="logo tiga" />
src="assets/legal/logo-eu-funding.svg"
alt="logo EU funding"
<div class="contact">
<span>Il vous reste des questions ?</span>
<a
class="footerLink"
href="https://support.grandlyon.com/ecolyo/"
target="_blank"
>
<div class="legal-notice">
<a class="footerLink" href="mentions-legales.html">Mentions légales</a>
<a class="footerLink" href="accessibilite.html">Accessibilité</a>
<a href="https://www.grandlyon.com/" target="_blank">
<img src="assets/legal/info.svg" alt="" role="presentation" />
Un site de la Métropole de Lyon
</a>
//smooth scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
let item = document.querySelector(this.getAttribute('href'));
});
});
});
//Hide menu on scroll down
let scrollUp = true;
let hideDistance = 200;
let vh;
let scrollHeightSent = false;
const setDeviceWidth = () => {
vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
};
const setDeviceHeight = () => {
vh = Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight
);
};
window.addEventListener('scroll', (event) => {
if (vw < 1200) {
if (scrollY > hideDistance) {
scrollUp = this.oldScroll > this.scrollY;
if (scrollUp === false) {
// Send scroll event to matomo if user has scrolled 50% of page, then disable event
if (scrollY > vh / 2 && !scrollHeightSent) {
scrollHeightSent = true;
_paq.push(['trackEvent', 'Scroll_depth', '50%']);
<script src="./matomo.js" defer></script>