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" />
ECOLYO est l’application gratuite développée par la Métropole de Lyon qui permet de maîtriser ses consommations d’énergie et d’eau grâce à des défis ludiques.
content="Électricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
/>
<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"
content="Électricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
<div class="logo-container">
<a class="main-logo" href="/">
<img src="./assets/ecolyo-icon.svg" alt="" />
Ecolyo
</a>
<div class="separator"></div>
<a href="https://www.grandlyon.com/" target="_blank">
<img src="./assets/legal/mglLogo.svg" alt="" />
</a>
</div>
<a class="navlink" href="#service">Le service</a>
<a class="navlink" href="#create-account">Mode d'emploi</a>
<a class="navlink" href="#about-us">Autour d'Ecolyo</a>
</div>
<!--Externals links-->
<div class="links">
<a
class="external-link login"
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
>Se connecter
<img src="assets/launch.svg" alt="" />
</a>
<a
class="external-link sign-in"
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
>Se créer un compte <img src="assets/launch-black.svg" alt=""
/></a>
<section class="main-cta" id="service">
<div class="yellow-blur"></div>
<div class="left">
<h1 class="text-60-white">
Suivez vos consommations <br />
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
</h1>
<h2 class="text-20-white">
Ecolyo est une application gratuite développée par la
<strong>Métropole de Lyon</strong> qui permet de suivre, mais
également de maîtriser vos consommations d’énergie et d’eau grâce
à des défis ludiques et des astuces personnalisées.
</h2>
<div class="button-container-cta">
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-up robots-nocontent"
>
Créer un compte
<img src="assets/launch-black.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-in robots-nocontent"
>
Connectez vous !
<img src="assets/launch.svg" alt="" />
</a>
</div>
</div>
</div>
<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"
<section id="how-it-works">
<h2 class="text-45-white">
Comment analyser ses consommations avec Ecolyo ?
</h2>
<p class="text-22-white pt-2">
Ecolyo vous permet de suivre vos consommations d’électricité, d’eau et
de gaz au jour près. <br />
<p class="text-24-white-bold pt-2" id="text-before-compteurs">
Pour cela, il vous suffit d'être équipé de l'un ou de plusieurs
compteurs communicants :
</p>
<div class="compteurs" role="list">
<div class="bloc elec-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
tabindex="-1"
aria-hidden="true"
>
Compteur Linky
</object>
<h3>Linky</h3>
<p class="text-22-white">pour l’électricité</p>
<img alt="enedis-logo" src="assets/partners/enedis-logo.svg" />
<span class="compteurs-ou">ou</span>
<div class="bloc water-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
Compteur Téléo
</object>
<h3>Téléo</h3>
<p class="text-22-white">pour l'eau</p>
<img alt="Logo EPGL" src="assets/partners/epgl-logo.svg" />
<span class="compteurs-ou">ou</span>
<div class="bloc gaz-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Gazpar.svg"
Compteur Gazpar
</object>
<h3>Gazpar</h3>
<p class="text-22-white">pour le gaz</p>
<img alt="grdf-logo" src="assets/partners/grdf-logo.svg" />
<picture>
<source
media="(max-width: 1200px)"
srcset="assets/fluid-icons-pipes-mobile.svg"
/>
<img src="assets/fluid-icons-pipes.svg" alt="" aria-hidden="true" />
</picture>
<div class="security">
<div class="container">
<img src="assets/cozy-metropole-de-lyon-shield.svg" alt="" />
<p class="security-text">
Parce que nous tenons à votre confidentialité, Ecolyo utilise
<br />
<a
href="https://www.grandlyon.com/services/self-data-cloud-personnel"
Cozy Métropole de Lyon</a
>, un cloud 100% personnel permettant de sécuriser toutes vos
données !
<div class="views-app">
<div class="multi-pipes">
src="assets/fluid-pipes-yellow.svg"
alt=""
aria-hidden="true"
<div class="screens-container">
<div class="screen consumption">
<p><span>Suivez</span> vos consommations</p>
<p><span>Relevez</span>des défis ludiques</p>
<p class="no-margin-padding-bottom">
<span>Découvrez</span> des astuces efficaces
</p>
<section id="create-account">
<h2 class="text-40-white">Créez-vous un compte en deux étapes !</h2>
<div class="step">
<div class="flex">
<div class="number">1.</div>
<div class="text">
<h3 class="header">Créez votre compte Cozy Métropole de Lyon</h3>
<p class="content">
Véritable coffre-fort de la donnée personnelle, Cozy Métropole
de Lyon<br />
est un espace sécurisé auquel vous (et seulement vous) avez
accès.<br />
Avec lui, vos données de consommation sont gardées bien au chaud
(et en sécurité) !
</p>
<img src="assets/steps/step1.svg" class="steppicture" alt="" />
</div>
<div class="step">
<div class="flex">
<div class="number">2.</div>
<div class="text">
<p class="content">
Facture à la main, et après avoir donné votre accord, nous vous
<br />
guiderons tout au long du parcours pour connecter vos compteurs.
<br />
Ensuite, nul besoin d’y toucher : vos données seront
automatiquement
<br />
mises à jour.
</p>
<img src="assets/steps/step2.svg" class="steppicture" alt="" />
<div class="steps-buttons-container">
<a
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
target="_blank"
class="createAccountButton sign-up"
>
Créez-vous un compte !
<img src="assets/launch-black.svg" alt="" />
</a>
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
J'ai déjà un compte
<img src="assets/launch.svg" alt="" />
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
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<section id="about-us">
<h2 class="text-40-white">On parle de nous !</h2>
<p>Retrouvez les articles parlant d’Ecolyo sur ces plateformes :</p>
<div class="carousel-container">
<button class="carousel-prev">
<img src="assets/Arrow.svg" class="arrow-left" alt="" />
</button>
<div class="carousel-and-dots">
<div class="carousel">
<div class="carousel-slide">
<a
href="https://www.alec-lyon.org/ecolyo-mes-consommations-denergie-et-deau-a-portee-de-main/"
target="_blank"
>
<img
src="assets/logos/alec-logo.svg"
alt="Agence Locale de l'Energie et du Climat (ALEC)"
/>
</a>
<a
href="https://www.eaudugrandlyon.com/voir-actualite.aspx?ida=145"
target="_blank"
>
<img
src="assets/logos/epgl-logo.svg"
alt="Eau publique du Grand Lyon (EPGL)"
/>
</a>
<a
href="https://www.grandlyon.com/services/habitat-et-logement/consommer-moins-denergie-chez-soi"
target="_blank"
>
<img
src="assets/legal/mglLogo.svg"
alt="Métropole du Grand Lyon"
/>
</a>
<a
href="https://wiki.resilience-territoire.ademe.fr/wiki/Service_de_suivi_des_consommations_%C3%A9lectricit%C3%A9,_gaz_et_eau"
target="_blank"
>
<img
src="assets/logos/ademe-logo.svg"
alt="Appel à projet ADEME"
/>
</a>
<a
href="https://met.grandlyon.com/ecolyo-prenez-le-controle-sur-vos-consommations-denergie/"
target="_blank"
>
<img
src="assets/logos/met-logo.svg"
alt="Le Magasine de la Métropole de Lyon"
/>
</a>
<!-- <a
href="https://www.sytral.fr/TPL_CODE/TPL_ACTUALITE/PAR_TPL_IDENTIFIANT/5326/440-sytral.htm"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Sytral" />
</a>
<a
href="https://tribunedelyon.fr/economie/energie-le-grand-lyon-lance-une-appli-pour-piloter-sa-consommation/"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Tribune de Lyon" />
</a>
<a
href="https://www.lesechos.fr/pme-regions/auvergne-rhone-alpes/a-lyon-le-quartier-de-la-confluence-vise-lenergie-positive-1909258"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Les Échos" />
</a> -->
</div>
</div>
<div class="carousel-dots"></div>
</div>
<button class="carousel-next">
<img src="assets/Arrow.svg" class="arrow-right" />
</button>
</div>
</section>
<section id="share">
<div class="blur-container">
<div class="yellow-blur"></div>
<img src="assets/bullhorn.svg" alt="" />
</div>
<h2>Vous aussi, parlez d'Ecolyo autour de vous!</h2>
<p>
N’hésitez pas à parler d’Ecolyo à vos amis et proches ! <br />
Il vous suffit de cliquer sur les boutons juste en dessous pour
accéder aux réseaux sociaux :
</p>
<div class="logos-container">
<a
href="https://www.facebook.com/sharer/sharer.php?u=https://ecolyo.com"
target="_blank"
>
<img src="assets/socials/facebook.svg" alt="Facebook" />
</a>
<a
href="https://twitter.com/intent/tweet?url=⚡ J’utilise Ecolyo, l'application gratuite développée par la Métropole de Lyon, pour suivre et réduire mes consommations d'eau et d’énergie. Et toi tu fais quoi ? 👉https://ecolyo.com/"
target="_blank"
>
<img src="assets/socials/Twitter.svg" alt="Twitter" />
</a>
<a
href="https://www.instagram.com/?url=https://ecolyo.com"
target="_blank"
>
<img src="assets/socials/Insta.svg" alt="Instagram" />
</a>
href="https://www.linkedin.com/shareArticle?mini=true&url=https://ecolyo.com&title=Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
target="_blank"
<img src="assets/socials/Linkedin.svg" alt="LinkedIn" />
<div class="logos-footer" aria-label="Logo des financeurs">
<img
class="gl"
src="assets/legal/mglLogo.svg"
alt="Logo Métropole de Lyon"
/>
<img
class="gouv"
src="assets/legal/Gouvernement.svg"
<img
class="tiga"
src="assets/legal/BDT.svg"
alt="Logo de la Banque des Territoires"
<img
class="territory"
src="assets/legal/2030TI.svg"
alt="Logo du programme France 2030"
/>
alt="Logo Financé par l'Union Européenne"
<div class="contact">
<span>Il vous reste des questions ?</span>
<a
class="footerLink"
href="https://support.grandlyon.com/ecolyo/"
target="_blank"
>
</div>
<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">
//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%']);
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
//el carousel
document.addEventListener('DOMContentLoaded', function () {
const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.carousel-slide img');
const prevBtn = document.querySelector('.carousel-prev');
const nextBtn = document.querySelector('.carousel-next');
const dotsContainer = document.querySelector('.carousel-dots');
const totalSlides = slides.length;
// Initialize currentIndex to center around the second slide
let currentIndex = 0;
// Set up event listeners for prev and next buttons
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
updateCarousel();
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % totalSlides;
updateCarousel();
});
// Generate dots
slides.forEach((_, index) => {
const dot = document.createElement('span');
dot.classList.add('carousel-dot');
dot.addEventListener('click', () => {
currentIndex = index;
updateCarousel();
});
dotsContainer.appendChild(dot);
});
// Update carousel position and active dot
function updateCarousel() {
carousel.style.transform = `translateX(${-currentIndex * 110}px)`;
document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// Initialize carousel
updateCarousel();
});
<script src="./matomo.js" defer></script>