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.
</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
77
78
79
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
</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.
</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.
href="https://ecolyo.com/expehiver2022.html"
<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
</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>
<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>
Il vous reste des questions ?
<a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a>
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
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
<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>