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" />
<img src="./assets/beta.svg" alt="beta-logo" class="beta-logo" />
</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>
</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.
href="https://ecolyo.com/expehiver2022.html"
target="_blank"
class="button robots-nocontent"
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez
testeur
</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
80
81
82
83
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
</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>
<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">Tester Ecolyo</h2>
<p class="text-18-white-padding">
Candidatez à l'expérimentation Ecolyo pour tester le service avant
sa sortie grand public.
</p>
<div class="center-button">
<a
href="https://ecolyo.com/expehiver2022.html"
target="_blank"
class="button robots-nocontent"
>
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez
testeur
</a>
</div>
<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 ? 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>
<div class="contact">
<p>
Il vous reste des questions ?
<a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a>
</p>
</div>
<p class="legal-notice">
<a href="mentions-legales.html">mentions légales</a>
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<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>