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://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
"
rel="stylesheet"
/>
<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" />
Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon
content="Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
content="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."
/>
<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"
<img src="./assets/ecolyo-icon.svg" alt="" />
Ecolyo
</a>
<div class="separator"></div>
<a
href="https://www.grandlyon.com/"
aria-label="Accéder au site de la métropole de Lyon"
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
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
>Se connecter
<img src="assets/launch.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
>Se créer un compte <img src="assets/launch-black.svg" alt=""
/></a>
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
<section id="service">
<div class="main-cta">
<div class="content-txt">
<div class="yellow-blur"></div>
<div class="left">
<h1 class="text-60-white">
Suivez vos consommations <br />
et passez à l'action
</h1>
<p 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.
</p>
<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 class="illu">
<!-- Use object tag instead of img to not have a blurry svg on IOS -->
<object
id="illu"
type="image/svg+xml"
data="assets/illu-landing.svg"
tabindex="-1"
aria-hidden="true"
>
Illustration Ecolyo
</object>
</div>
<h2 class="text-40-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
<ul class="compteurs">
<li class="bloc elec-color">
<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" />
</li>
<span class="compteurs-ou" aria-hidden="true">ou</span>
<li class="bloc water-color">
<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" />
</li>
<span class="compteurs-ou" aria-hidden="true">ou</span>
<li class="bloc gaz-color">
<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
<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>
<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
<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"
<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="" />
<h2 class="text-40-white">On parle de nous !</h2>
<p>Retrouvez les articles parlant d’Ecolyo sur ces plateformes :</p>
<div class="splide" aria-label="Articles parlant d'Ecolyo">
<div class="splide__track">
<div class="splide__list">
<div class="splide__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>
href="https://www.bfmtv.com/lyon/replay-emissions/bonsoir-lyon/chauffage-eau-chaude-appareils-trois-conseils-pour-reduire-sa-facture-d-electricite_VN-202401220761.html"
src="assets/logos/bfm-logo.svg"
alt="Business FM (BFM)"
href="https://tribunedelyon.fr/economie/energie-le-grand-lyon-lance-une-appli-pour-piloter-sa-consommation/"
src="assets/logos/tribune-de-lyon-logo.svg"
alt="Tribune de Lyon"
href="https://www.grdf.fr/institutionnel/actualite/newsroom/liste/communiques-presse/1er-data-challenge-2020"
src="assets/logos/grdf-logo.svg"
alt="Gaz Réseau Distribution France (GRDF)"
/>
</a>
</div>
</div>
</div>
<div class="splide-nav">
<button id="prev" aria-label="Article précédent">
<img src="assets/arrow_left.svg" alt="" />
</button>
<div class="current-page"></div>
<button id="next" aria-label="Article suivant">
<img src="assets/arrow_right.svg" alt="" />
</button>
</div>
</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"
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.37737 18.1509H12.3208V12.4151H14.5094L14.9245 9.69811H12.3208V7.92453C12.3208 6.96855 12.8239 6.49056 13.8302 6.49056H15V4.18868C14.2956 4.06289 13.6038 4 12.9245 4C12.195 4 11.5661 4.13836 11.0377 4.41509C10.5346 4.69182 10.1321 5.10692 9.8302 5.66037C9.52832 6.21383 9.37737 6.86792 9.37737 7.62264V9.69811H7.00001V12.4151H9.37737V18.1509Z"
fill="#e3b82a"
/>
</svg>
</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/"
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.223 2.87H18.983L12.923 9.77L20.003 19.13H14.447L10.097 13.442L5.11699 19.13H2.35699L8.77699 11.75L1.99699 2.87H7.69099L11.621 8.066L16.223 2.87ZM15.257 17.51H16.787L6.88699 4.43H5.24299L15.257 17.51Z"
fill="#e3b82a"
/>
</svg>
</a>
<a
href="https://www.instagram.com/?url=https://ecolyo.com"
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 6.89286C9.85714 6.89286 8.88095 7.29764 8.07143 8.10714C7.28571 8.89286 6.89286 9.85714 6.89286 11C6.89286 12.1429 7.28571 13.1191 8.07143 13.9286C8.88095 14.7143 9.85714 15.1071 11 15.1071C12.1429 15.1071 13.1071 14.7143 13.8929 13.9286C14.7024 13.1191 15.1071 12.1429 15.1071 11C15.1071 9.85714 14.7024 8.89286 13.8929 8.10714C13.1071 7.29764 12.1429 6.89286 11 6.89286ZM11 13.6786C10.2619 13.6786 9.63095 13.4166 9.10714 12.8929C8.58334 12.3691 8.32143 11.7381 8.32143 11C8.32143 10.2619 8.58334 9.63093 9.10714 9.10714C9.63095 8.58335 10.2619 8.32143 11 8.32143C11.7381 8.32143 12.3691 8.58335 12.8929 9.10714C13.4167 9.63093 13.6786 10.2619 13.6786 11C13.6786 11.7381 13.4167 12.3691 12.8929 12.8929C12.3691 13.4166 11.7381 13.6786 11 13.6786Z"
fill="#e3b82a"
/>
<path
d="M16.2143 6.71429C16.2143 6.45236 16.1191 6.23808 15.9286 6.07143C15.7619 5.88093 15.5476 5.78571 15.2857 5.78571C15.0238 5.78571 14.7976 5.88093 14.6071 6.07143C14.4167 6.23808 14.3214 6.45236 14.3214 6.71429C14.3214 6.97621 14.4167 7.20236 14.6071 7.39286C14.7976 7.58335 15.0238 7.67857 15.2857 7.67857C15.5476 7.67857 15.7619 7.58335 15.9286 7.39286C16.1191 7.20236 16.2143 6.97621 16.2143 6.71429Z"
fill="#e3b82a"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.9643 7.71429C18.9881 8.35714 19 9.45236 19 11C19 12.5476 18.9881 13.6429 18.9643 14.2857C18.8929 15.7381 18.4524 16.8691 17.6429 17.6786C16.8571 18.4643 15.7381 18.8809 14.2857 18.9286C13.6429 18.9762 12.5476 19 11 19C9.45238 19 8.35714 18.9762 7.71429 18.9286C6.26191 18.8571 5.14286 18.4286 4.35714 17.6429C4.04762 17.3571 3.79762 17.0238 3.60714 16.6429C3.41666 16.2619 3.2738 15.8929 3.17857 15.5357C3.10714 15.1786 3.07143 14.7619 3.07143 14.2857C3.0238 13.6429 3 12.5476 3 11C3 9.45236 3.0238 8.34522 3.07143 7.67857C3.14286 6.25 3.57143 5.14286 4.35714 4.35714C5.14286 3.54764 6.26191 3.10714 7.71429 3.03571C8.35714 3.01192 9.45238 3 11 3C12.5476 3 13.6429 3.01192 14.2857 3.03571C15.7381 3.10714 16.8571 3.54764 17.6429 4.35714C18.4524 5.14286 18.8929 6.26192 18.9643 7.71429ZM17.4286 15C17.3809 15.2857 17.3214 15.5238 17.25 15.7143C16.9643 16.4286 16.4524 16.9405 15.7143 17.25C15.5238 17.3214 15.2738 17.3809 14.9643 17.4286C14.6786 17.4762 14.3214 17.5119 13.8929 17.5357C13.4881 17.5595 13.1548 17.5714 12.8929 17.5714H9.07143C8.83334 17.5714 8.5 17.5595 8.07143 17.5357C7.66666 17.5119 7.30952 17.4762 7 17.4286C6.71429 17.3809 6.4762 17.3214 6.28571 17.25C5.57143 16.9643 5.05952 16.4524 4.75 15.7143C4.70238 15.5476 4.65477 15.3334 4.60714 15.0714C4.55952 14.8095 4.5238 14.5595 4.5 14.3214C4.4762 14.0595 4.45238 13.75 4.42857 13.3929V9.10714C4.42857 8.84522 4.44048 8.51192 4.46429 8.10714C4.48809 7.67857 4.5238 7.32143 4.57143 7.03571C4.61905 6.72621 4.67857 6.47621 4.75 6.28571C5.03571 5.54764 5.54762 5.03571 6.28571 4.75C6.4762 4.67857 6.71429 4.61907 7 4.57143C7.30952 4.52379 7.66666 4.48808 8.07143 4.46429C8.5 4.4405 8.84523 4.42857 9.10714 4.42857H12.8929C13.1548 4.42857 13.4881 4.4405 13.8929 4.46429C14.3214 4.48808 14.6786 4.52379 14.9643 4.57143C15.2738 4.61907 15.5238 4.67857 15.7143 4.75C16.4524 5.03571 16.9643 5.54764 17.25 6.28571C17.3214 6.47621 17.3809 6.72621 17.4286 7.03571C17.4762 7.32143 17.5119 7.67857 17.5357 8.10714C17.5595 8.51192 17.5714 8.84522 17.5714 9.10714V12.8929C17.5714 13.1548 17.5595 13.5 17.5357 13.9286C17.5119 14.3334 17.4762 14.6905 17.4286 15Z"
fill="#e3b82a"
/>
</svg>
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"
<svg
width="40"
height="41"
viewBox="0 0 40 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Ico22/RS / Linkedin">
<path
id="Subtract"
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.4091 31.4091H14.3353H9.46026V15.6023H14.4091V31.4091ZM11.8978 13.4602C11.1099 13.4602 10.4451 13.1894 9.90344 12.6477C9.36178 12.0568 9.09094 11.392 9.09094 10.6534C9.09094 9.86551 9.36178 9.20074 9.90344 8.65907C10.4451 8.06816 11.1099 7.77271 11.8978 7.77271C12.6856 7.77271 13.3504 8.06816 13.8921 8.65907C14.483 9.20074 14.7784 9.86551 14.7784 10.6534C14.7784 11.392 14.483 12.0568 13.8921 12.6477C13.3504 13.1894 12.6856 13.4602 11.8978 13.4602ZM32.7273 22.767V31.4091H27.8523V23.7272C27.8523 23.1363 27.8277 22.6685 27.7784 22.3238C27.7292 21.9299 27.6307 21.4867 27.483 20.9943C27.3845 20.5019 27.1383 20.1326 26.7444 19.8863C26.3504 19.6401 25.858 19.517 25.2671 19.517C24.1345 19.517 23.3712 19.8863 22.9773 20.625C22.5834 21.3636 22.3864 22.3485 22.3864 23.5795V31.4091H17.4375V15.6023H22.1648V17.7443H22.2387C22.5834 17.0549 23.1497 16.464 23.9375 15.9716C24.7747 15.4791 25.7595 15.2329 26.8921 15.2329C28.0739 15.2329 29.0587 15.4299 29.8466 15.8238C30.6837 16.1685 31.2993 16.7102 31.6932 17.4488C32.0872 18.1382 32.358 18.9015 32.5057 19.7386C32.6534 20.5757 32.7273 21.5852 32.7273 22.767Z"
fill="#e3b82a"
/>
</g>
</svg>
<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"
<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/"
aria-label="Accéder au site de la métropole de Lyon"
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%']);
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll(
'main section#service, main section#create-account, main section#about-us'
);
const navLinks = document.querySelectorAll('nav .navlink');
let currentSection = '';
for (let section of sections) {
const sectionTop = section.offsetTop - 80; // Adjust for header height
if (pageYOffset < sectionTop + section.clientHeight) {
currentSection = section.getAttribute('id');
break;
}
}
navLinks.forEach((link) => {
link.classList.remove('active');
if (link.getAttribute('href').includes(currentSection)) {
link.classList.add('active');
}
let articleNumber = document.querySelectorAll('.splide__slide').length;
// Carousel based on splide => https://splidejs.com/
document.addEventListener('DOMContentLoaded', function () {
var splide = new Splide('.splide', {
type: 'scroll',
perPage: 'auto',
focus: 'first',
gap: '40px',
fixedWidth: '200px',
pagination: false,
arrows: false,
drag: false,
breakpoints: {
1200: {
type: 'loop',
perPage: 1,
gap: '20px',
padding: '60px',
focus: 'center',
drag: true,
},
},
const updateCurrentPage = (index) => {
document.querySelector(
'.current-page'
).innerHTML = `<span class="bold yellow">${
index + 1
}</span> sur ${articleNumber}`;
};
document
.querySelector('#prev')
.addEventListener('click', () => splide.go('-1'));
document
.querySelector('#next')
.addEventListener('click', () => splide.go('+1'));
splide.on('move', (newIndex) => {
updateCurrentPage(newIndex);
});
<script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
<script src="./matomo.js" defer></script>