<!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</title>
</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-padding">
<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"
>
Illustration Ecolyo
</object>
<img
id="mgl-logo"
class="mglLogo"
alt="Logo Métropole Grand Lyon"
src="assets/legal/mglLogo.svg"
/>
</section>
<section class="explanation" id="how-it-works">
<h2 class="text-36-white">Comment ça marche ?</h2>
<p class="text-18-white-padding">
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-padding">
Pour en profiter, il vous suffit d'être équipé <br />de l'un de ces
compteurs communicants :
</p>
<div class="compteurs">
<div class="bloc elec-color">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/compteurs/Linky.svg"
>
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">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/compteurs/Teleo.svg"
>
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">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/compteurs/Gazpar.svg"
>
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="illustration des fluides"
/>
</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 Grand Lyon"
>
Cloud personnel Grand Lyon
</a>
...
</p>
<div class="container-img">
<img src="assets/cloud-shield.svg" alt="logo cloud grand Lyon" />
</div>
<p class="xl-text">
... afin de sécuriser vos données pour que personne, pas même la
métropole, n'ait accès à celles-ci.
</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 Grand Lyon"
>
Cloud personnel Grand Lyon
</a>
afin de sécuriser vos données pour que personne, pas même la
métropole, ait accès celles-ci.
</p>
</div>
</div>
</section>
<section class="views-app">
<div class="content">
<div class="fluid-pipes">
<img
src="assets/fluid-pipes-yellow.svg"
alt="illustration des fluides"
/>
</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</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 espace personnel
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-mgl.svg" alt="logo cloud grand Lyon" />
<h2>J'ai déjà un compte</h2>
<p class="text-18-white-padding">
Vous avez déjà un compte ?
<br />Pas de panique, pour retrouver l'accès à votre cloud personnel
Grand Lyon 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 à mon cloud personnel
</a>
</div>
</section>
<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="territory"
src="assets/legal/2030TI.svg"
alt="logo banque des territoire"
/>
<img class="tiga" src="assets/legal/BDT.svg" alt="logo tiga" />
</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">
<img src="assets/legal/info.svg" alt="" />
<a href="https://www.grandlyon.com/" target="_blank"
>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>