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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
</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="expe-winter-assets/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="expe-winter-assets/step2.svg" class="steppicture" />
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<div class="step">
<div class="flex">
<div class="number elec-color">3</div>
<div class="text">
<p class="header">
Créer un compte chez le gestionnaire<br />
de votre compteur communicant
</p>
<p class="content">
Ecolyo va chercher la donnée auprès d'Enedis pour
l'électricité, GRDF pour le gaz ou Eau du Grand Lyon pour
l'eau. Une facture d'énergie ou d'eau, selon le compteur à
connecter, vous permettra de créer un compte chez ce
gestionnaire. Ce processus est voué à être simplifié dans les
prochains mois.
</p>
</div>
</div>
<img src="expe-winter-assets/step3.svg" class="steppicture" />
</div>
<div class="step">
<div class="flex">
<div class="number gl-color">4</div>
<div class="text">
<p class="header">
Connecter Ecolyo et <br />le compteur communicant
</p>
<p class="content">
Votre accord est nécessaire pour la visualisation de vos
données par Ecolyo. Cet accord a une durée limitée dans le
temps et est révocable à tout moment.
</p>
</div>
</div>
<img src="expe-winter-assets/step4.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>
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
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<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>