Newer
Older
<!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 !
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.
target="_blank"
class="button robots-nocontent"
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Tester le
service
</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
<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>
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<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>
<img
src="assets/fluid-icons-pipes.svg"
alt="illustation des fluides"
/>
</div>
</section>
<section class="security" id="security">
<div class="container">
<p class="xl-text">
Pour utiliser Ecolyo il vous faut créer un Cloud personnel Grand
Lyon...
</p>
<img src="assets/icon-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 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.
</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>
<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 class="step">
<div class="flex">
<div class="number elec-color">3</div>
<div class="text">
<p class="header">Connecter vos compteurs à Ecolyo</p>
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 !
<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>
<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
<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>
<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 class="contact">
<p>
Il vous reste des questions ?
<a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a>
<div class="legal-notice">
<a href="mentions-legales.html">Mentions légales</a>
</div>
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
373
374
375
376
377
<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>