<!DOCTYPE html>
<html lang="en">
<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="./style.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/logo-with-text.svg" alt="ecolyo-logo-with-text" />
</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">Accès au service</a>
<a class="navlink tester" href="#test-ecolyo">Devenir testeur</a>
</div>
</nav>
<section class="main-cta">
<div class="container">
<div class="content-txt">
<h1 class="text-36-white">
Visualiser et agir sur sa consommation d'énergie et d'eau
</h1>
<div class="content-img mobile-illu">
<img
src="assets/illu-landing-graph.svg"
alt="illustration-graph"
class="illu illu-sun"
/>
</div>
<p class="text-18-white-padding">
Ecolyo vous permet de maîtriser vos dépenses énergétiques et d'eau
de votre foyer, il vous suffit d'être équipé d'un compteur Linky
et/ou Gazpar et/ou Téléo pour en profiter !
</p>
<p class="text-18-white-padding">
Vous pourrez alors visualiser vos consommations d'électricité, de
gaz et d'eau au même endroit en euros, en kWh, en litres et à
différentes échelles de temps.
</p>
<a
href="#test-ecolyo"
target="_blank"
class="button robots-nocontent"
>
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Tester le
service
</a>
</div>
<div class="content-img desktop-illu">
<object
type="image/svg+xml"
data="assets/illu-landing-graph.svg"
class="illu illu-graph"
id="illu-sun"
></object>
</div>
</div>
</section>
<section class="explanation" id="how-it-works">
<div class="content">
<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/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/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/gazpar.png"
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>
</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 un Cloud personnel Grand
Lyon...
</p>
<div class="container-img">
<img src="assets/icon-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 Cloud personnel Grand
Lyon 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/illu-mobile-consumption.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/illu-mobile-challenge.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/illu-mobile-ecogesture.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="test-ecolyo" id="test-ecolyo">
<div class="content container">
<div class="text-content">
<h2 class="text-36-white">
Testez le service : inscription en quelques étapes !
</h2>
<p class="text-18-white-padding">
<em
>(attention : Prévoir 20 minutes en étant muni des factures
d'énergie ou d'eau)</em
>
</p>
</div>
</div>
</section>
<section class="steps" id="steps">
<div class="content container">
<div class="containerSteps">
<div class="step">
<div class="flex">
<div class="number gaz-color">1</div>
<div class="text">
<p class="header">Remplir le formulaire <br />de test</p>
<p class="content">
Afin de mieux préparer le déploiement généralisé de notre
service, nous avons besoin de quelques informations sur vous.
</p>
</div>
</div>
<img src="assets/steps/step1.svg" class="steppicture" />
</div>
<div class="step">
<div class="flex">
<div class="number water-color">2</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" />
</div>
<div class="step">
<div class="flex">
<div class="number elec-color">3</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, la donnée est mise à jour quotidiennement !
</p>
</div>
</div>
<img src="assets/steps/step3.svg" class="steppicture" />
</div>
<div class="question">Envie de tester le service ?</div>
<a
href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
target="_blank"
class="button"
>
C'est parti!
</a>
</div>
</div>
</section>
<section class="cloud-gl" id="cloud">
<div class="content container">
<div class="text-content">
<img src="assets/icon-gl.svg" alt="logo cloud grand lyon" />
<h2>Accès au service</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"
>
<span>Accéder</span> à mon cloud personnel
</a>
</div>
</div>
</section>
<footer>
<div class="content">
<div class="bottom">
<div class="logos-footer">
<div class="container-img">
<img
class="gl"
src="assets/logo-grandlyon.svg"
alt="logo grandlyon"
/>
</div>
<div class="container-img">
<img
class="gouv"
src="assets/logo-gouv.svg"
alt="logo gouvernement"
/>
<img
class="territory"
src="assets/logo-territoire.svg"
alt="logo banque des territoire"
/>
<img
class="tiga"
src="assets/logo-tiga-white.svg"
alt="logo tiga"
/>
</div>
</div>
<div class="contact">
<p>
Il vous reste des questions ?
<a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a>
</p>
</div>
<div class="legal-notice">
<a href="mentions-legales.html">Mentions légales</a>
</div>
<div class="info">
<img src="assets/info.svg" alt="" />
<a href="https://www.grandlyon.com/" target="_blank"
><p>Un site de la Métropole de Lyon</p></a
>
</div>
</div>
</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>