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 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
<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>
<!-- Use object tag instead of img to not have a blurry svg on IOS -->
<object
type="image/svg+xml"
data="assets/illu-landing.svg"
>
Illustration Ecolyo
</object>
<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">
type="image/svg+xml"
data="./assets/compteurs/Linky.svg"
>
Compteur Linky
</object>
<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">
type="image/svg+xml"
data="./assets/compteurs/Teleo.svg"
>
Comteur Téléo
</object>
<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" />
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 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="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>
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>
class="steppicture"
alt="Donner vos consentements"
/>
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="createAccountButton"
>
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
>
307
308
309
310
311
312
313
314
315
316
317
318
319
320
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
</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>