<!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>
<div class="main-logo">
<img src="./assets/ecolyo-icon.svg" alt="Ecoloy logo" />
Ecolyo
</div>
<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="container">
<div class="content-txt">
<h1 class="text-36-white">
Ecolyo vous aide à suivre et agir sur vos consommations d'énergie et
d'eau
</h1>
<div class="content-img mobile-illu">
<img
src="assets/illu-landing.svg"
alt="illustration-graph"
class="illu illu-sun"
/>
</div>
<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>Comparez 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.png" alt="ecolyo-icon" />
Se créer un compte
</a>
</div>
<div class="content-img desktop-illu">
<img
id="illu-sun"
alt="Illustration Ecolyo"
src="assets/illu-landing.svg"
/>
</div>
</div>
<img
class="mglLogo"
id="mgl-logo"
src="assets/legal/mglLogo.svg"
alt="Logo Métropole Grand Lyon"
/>
</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">
<img
class="compteur-img"
src="./assets/compteurs/Linky.svg"
alt="compteur-linky"
/>
<h3>Linky</h3>
<p class="text-18-white">pour l'éléctricité</p>
<div class="provider-logo">
<img alt="enedis-logo" src="./assets/enedis-logo.png" />
</div>
</div>
<span>ou</span>
<div class="bloc water-color">
<img
class="compteur-img"
src="./assets/compteurs/Teleo.svg"
alt="compteur-teleo"
/>
<h3>Téléo</h3>
<p class="text-18-white">pour l'eau</p>
<div class="provider-logo">
<img alt="edl-logo" src="assets/edl-logo.png" />
</div>
</div>
<span>ou</span>
<div class="bloc gaz-color">
<img
class="compteur-img"
src="./assets/compteurs/Gazpar.svg"
alt="compteur-gazpar"
/>
<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="illustation 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"
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="illustation des fluides"
/>
</div>
<div class="screens-container">
<div class="screen consumption">
<img
src="assets/screen-1.svg"
alt="ecran 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="ecran d'un smartphone représentant une illustration de simone"
/>
<p><span>Participer</span> à des défis ludiques</p>
</div>
<div class="screen ecogesture">
<img
src="assets/screen-3.svg"
alt="ecran 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">
<div class="content container">
<div class="text-content">
<h2 class="text-26-white">Se créer un compte en deux étapes !</h2>
<div class="warning">
<img src="assets/Plot.svg" alt="Travail en cours" />
<p>
Un parcours simplifié pour accéder à vos données de consommation
d'électricité sera disponible d'ici fin 2022.
</p>
</div>
<div class="warning2"></div>
</div>
</div>
</section>
<section class="steps" id="steps">
<div class="containerSteps">
<div class="step">
<div class="flex">
<div class="number water-color">1</div>
<div class="text">
<p class="header">Créer votre Cloud Personnel</p>
<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/step2.svg"
class="steppicture"
alt="Connecter vos compteurs"
/>
</div>
<div class="step">
<div class="flex">
<div class="number elec-color">2</div>
<div class="text">
<p class="header">Connecter vos compteurs à Ecolyo</p>
<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/step3.svg"
class="steppicture"
alt="Donner vos consentements"
/>
</div>
<a
href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
target="_blank"
class="button"
>
Se créer un compte
</a>
</div>
</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 mais ne savez plus comment y accéder ?
<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/grdlyon/reminder"
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="mailto:ecolyo@grandlyon.com">
Contactez-nous</a
>
</div>
<div class="legal-notice">
<a class="footerLink" href="mentions-legales.html">Mentions légales</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;
const setDeviceWidth = () => {
vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
};
onload = setDeviceWidth();
window.addEventListener("resize", () => {
setDeviceWidth();
});
window.addEventListener("scroll", () => {
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;
}
}
});
</script>
</html>