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" />
<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
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>
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="button robots-nocontent"
<img src="assets/ecolyo-shadow.png" alt="ecolyo-icon" />
alt="Illustration Ecolyo"
src="assets/illu-landing.svg"
/>
<img
class="mglLogo"
id="mgl-logo"
src="assets/legal/mglLogo.svg"
alt="Logo Métropole Grand Lyon"
/>
<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>
<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" />
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 class="fluid-pipes">
<img src="assets/fluid-icons-pipes.svg" alt="illustation des fluides" />
</div>
</section>
<section class="security" id="security">
<div class="container">
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>
...
<img src="assets/cloud-shield.svg" alt="logo cloud grand lyon" />
<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>
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.
</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">
alt="ecran d'un smartphone représentant un diagramme à barre"
/>
<p><span>Visualiser</span> vos consommations</p>
</div>
<div class="screen challenge">
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">
alt="ecran d'un smartphone représentant une illustration d'un chat avec un parapluie"
/>
<p><span>Consulter</span> des écogestes utiles</p>
</div>
<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>
<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>
<img
src="assets/steps/step3.svg"
class="steppicture"
alt="Donner vos consentements"
/>
<a
href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
target="_blank"
class="button"
>
Se créer un compte
</a>
<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 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
>
321
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
</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>