<!DOCTYPE html>
<html lang="fr">
<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 rel="stylesheet" href="./index.css" />
<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" property="og:site_name" />
<meta
content="Ecolyo｜Suivez et maîtrisez vos consos d'énergie et d'eau"
property="og:title"
/>
<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."
property="og:description"
/>
<meta property="og:url" content="https://ecolyo.com" />
<meta property="og:type" content="website" />
<!-- 1024x512 -->
<meta
property="og:image"
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"
/>
<meta
name="twitter:title"
content="Ecolyo｜Suivez et maîtrisez vos consos d'énergie et d'eau "
/>
</head>
<body>
<header>
<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>
</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>
</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"
>
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"
>
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>
<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" />
</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"
>
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>
</section>
<section class="views-app">
<div class="content">
<div class="fluid-pipes">
<img
src="assets/fluid-pipes-yellow.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>
</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>
</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>
<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>
</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"
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" />
<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" />
<img
class="territory"
src="assets/legal/logo-eu-funding.svg"
alt="logo EU funding"
/>
</div>
<div class="contact">
<span>Il vous reste des questions ?</span>
<a
class="footerLink"
href="https://support.grandlyon.com/ecolyo/"
target="_blank"
>
Contactez-nous</a
>
</div>
<div class="legal-notice">
<a class="footerLink" href="mentions-legales.html">Mentions légales</a>
<a class="footerLink" href="accessibilite.html">Accessibilité</a>
</div>
<div class="info">
<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>
</div>
</footer>
</body>
<script>
const navBar = document.querySelector('nav');
//smooth scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
let item = document.querySelector(this.getAttribute('href'));
window.scrollTo({
top: item.offsetTop - 50,
behavior: 'smooth',
});
});
});
//Hide menu on scroll down
let scrollUp = true;
let hideDistance = 200;
let headerHeight = '6.25rem';
let vw;
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
);
};
onload = setDeviceWidth();
window.addEventListener('resize', () => {
setDeviceWidth();
});
window.addEventListener('load', () => {
setDeviceHeight();
});
window.addEventListener('scroll', (event) => {
if (vw < 1200) {
if (scrollY > hideDistance) {
scrollUp = this.oldScroll > this.scrollY;
if (scrollUp === false) {
navBar.style.marginTop = '-' + headerHeight;
}
if (scrollUp === true) {
navBar.style.marginTop = '0';
}
this.oldScroll = this.scrollY;
}
}
// 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>
<script src="./matomo.js" defer></script>
</html>