Skip to content
Snippets Groups Projects
Commit f2d7c41a authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

feat(legal notice): add page legal notice

parent 24e7e0c8
No related branches found
No related tags found
1 merge request!6feat(legal notice): add page legal notice
Expand all Hide whitespace changes
Inline Side-by-side
index.html
+ 98
− 48
View file @ f2d7c41a
...@@ -42,20 +42,23 @@ ...@@ -42,20 +42,23 @@
/> />
</div> </div>
<p class="text-18-white-padding"> <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 Ecolyo vous permet de maîtriser vos dépenses énergétiques et d’eau
compteur Linky et/ou Gazpar et/ou Téléo pour en profiter ! 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>
<p class="text-18-white-padding"> <p class="text-18-white-padding">
Vous pourrez alors visualiser vos consommations d'électricité, Vous pourrez alors visualiser vos consommations d'électricité, de
de gaz et d'eau au même endroit en euros, en kWh, en litres et à différentes échelles de temps. gaz et d'eau au même endroit en euros, en kWh, en litres et à
différentes échelles de temps.
</p> </p>
<a <a
href="https://ecolyo.com/expehiver2022.html" href="https://ecolyo.com/expehiver2022.html"
target="_blank" target="_blank"
class="button robots-nocontent" class="button robots-nocontent"
> >
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez testeur <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez
</a> testeur
</a>
</div> </div>
<div class="content-img desktop-illu"> <div class="content-img desktop-illu">
<object <object
...@@ -116,23 +119,31 @@ ...@@ -116,23 +119,31 @@
</div> </div>
</div> </div>
<div class="fluid-pipes"> <div class="fluid-pipes">
<img src="assets/fluid-icons-pipes.svg" alt="illustation des fluides"> <img
src="assets/fluid-icons-pipes.svg"
alt="illustation des fluides"
/>
</div> </div>
</div> </div>
</section> </section>
<section class="security" id="security"> <section class="security" id="security">
<div class="container"> <div class="container">
<div class="container-cloud"> <div class="container-cloud">
<p class="xl-text">Pour utiliser Ecolyo il vous faut créer <p class="xl-text">
un Cloud personnel Grand Lyon...</p> Pour utiliser Ecolyo il vous faut créer un Cloud personnel Grand
Lyon...
</p>
<div class="container-img"> <div class="container-img">
<img src="assets/icon-shield.svg" alt="logo cloud grand lyon"> <img src="assets/icon-shield.svg" alt="logo cloud grand lyon" />
</div> </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="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"> <p class="xs-text">
Pour utiliser Ecolyo, Pour utiliser Ecolyo, il vous faut créer un Cloud personnel Grand
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, Lyon afin de sécuriser vos données pour que personne, pas même la
ait accès celles-ci. métropole, ait accès celles-ci.
</p> </p>
</div> </div>
</div> </div>
...@@ -140,19 +151,31 @@ ...@@ -140,19 +151,31 @@
<section class="views-app"> <section class="views-app">
<div class="content"> <div class="content">
<div class="fluid-pipes"> <div class="fluid-pipes">
<img src="assets/fluid-pipes-yellow.svg" alt="illustation des fluides"> <img
src="assets/fluid-pipes-yellow.svg"
alt="illustation des fluides"
/>
</div> </div>
<div class="screens-container"> <div class="screens-container">
<div class="screen consumption"> <div class="screen consumption">
<img src="assets/illu-mobile-consumption.svg" alt="ecran d'un smartphone représentant un diagramme à barre"> <img
src="assets/illu-mobile-consumption.svg"
alt="ecran d'un smartphone représentant un diagramme à barre"
/>
<p><span>Visualiser</span> vos consommations</p> <p><span>Visualiser</span> vos consommations</p>
</div> </div>
<div class="screen challenge"> <div class="screen challenge">
<img src="assets/illu-mobile-challenge.svg" alt="ecran d'un smartphone représentant une illustration de simone"> <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> <p><span>Participer</span> à des défis ludiques</p>
</div> </div>
<div class="screen ecogesture"> <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"> <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> <p><span>Consulter</span> des écogestes utiles</p>
</div> </div>
</div> </div>
...@@ -161,32 +184,40 @@ ...@@ -161,32 +184,40 @@
<section class="test-ecolyo" id="test-ecolyo"> <section class="test-ecolyo" id="test-ecolyo">
<div class="content container"> <div class="content container">
<div class="text-content"> <div class="text-content">
<h2 class="text-36-white">Tester Ecolyo</h2> <h2 class="text-36-white">Tester Ecolyo</h2>
<p class="text-18-white-padding"> <p class="text-18-white-padding">
Candidatez à l'expérimentation Ecolyo pour tester le service avant sa sortie grand public. Candidatez à l'expérimentation Ecolyo pour tester le service avant
</p> sa sortie grand public.
<div class="center-button"> </p>
<a <div class="center-button">
href="https://ecolyo.com/expehiver2022.html" <a
target="_blank" href="https://ecolyo.com/expehiver2022.html"
class="button robots-nocontent" target="_blank"
> class="button robots-nocontent"
<img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez testeur >
</a> <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez
testeur
</a>
</div>
</div> </div>
</div> </div>
</div>
</section> </section>
<section class="cloud-gl" id="cloud"> <section class="cloud-gl" id="cloud">
<div class="content container"> <div class="content container">
<div class="text-content"> <div class="text-content">
<img src="assets/icon-gl.svg" alt="logo cloud grand lyon"> <img src="assets/icon-gl.svg" alt="logo cloud grand lyon" />
<h2>Accès au service</h2> <h2>Accès au service</h2>
<p class="text-18-white-padding"> <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 Vous avez déjà un compte mais ne savez plus comment y accéder ? Pas
personnel Grand Lyon au sein duquel vous retrouverez Ecolyo, cliquez sur le bouton ci-dessous 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> </p>
<a href="https://manager.cozygrandlyon.cloud/grdlyon/reminder" target="_blank" class="button robots-nocontent"> <a
href="https://manager.cozygrandlyon.cloud/grdlyon/reminder"
target="_blank"
class="button robots-nocontent"
>
<span>Accéder</span> à mon cloud personnel <span>Accéder</span> à mon cloud personnel
</a> </a>
</div> </div>
...@@ -197,19 +228,39 @@ ...@@ -197,19 +228,39 @@
<div class="bottom"> <div class="bottom">
<div class="logos-footer"> <div class="logos-footer">
<div class="container-img"> <div class="container-img">
<img class="gl" src="assets/logo-grandlyon.svg" alt="logo grandlyon" /> <img
class="gl"
src="assets/logo-grandlyon.svg"
alt="logo grandlyon"
/>
</div> </div>
<div class="container-img"> <div class="container-img">
<img class="gouv" src="assets/logo-gouv.svg" alt="logo gouvernement" /> <img
<img class="territory" src="assets/logo-territoire.svg" alt="logo banque des territoire" /> class="gouv"
<img class="tiga" src="assets/logo-tiga-white.svg" alt="logo tiga" /> 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> </div>
<div class="contact"> <div>
<p> <div class="contact">
Il vous reste des questions ? <p>
<a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a> 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>
</p> </p>
</div> </div>
<div class="info"> <div class="info">
...@@ -269,6 +320,5 @@ ...@@ -269,6 +320,5 @@
} }
} }
}); });
</script> </script>
</html> </html>
mentions-legales.css 0 → 100644
+ 8
− 0
View file @ f2d7c41a
.main-cta {
overflow-y: hidden; }
.content-txt {
padding: 1rem 0; }
h2 {
margin-top: 1rem; }
mentions-legales.html 0 → 100644
+ 175
− 0
View file @ f2d7c41a
<!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 rel="stylesheet" href="./mentions-legales.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 - Mentions légales</title>
</head>
<body>
<nav>
<a class="main-logo" href="/">
<img src="./assets/logo-with-text.svg" alt="ecolyo-logo-with-text" />
<img src="./assets/beta.svg" alt="beta-logo" class="beta-logo" />
</a>
<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="/#test-ecolyo">Tester Ecolyo</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">Mentions légales</h1>
<h2 class="text-18-white">
Mentiones légales du site Ecolyo de la Métropole de Lyon
</h2>
<p class="text-16-white-padding">
Site Ecolyo de la Métropole de Lyon : <a href="www.ecolyo.com"
>www.ecolyo.com</a
><br />
Métropole de Lyon - 20 rue du Lac – CS 33569 - 69505 Lyon cedex
03<br />
Tél : (33) 4 78 63 40 40
</p>
<p class="text-16-white-padding">
<strong>Directrice de publication :</strong> Karine Lambert,
Directrice de la Direction Environnement Écologie, Energie <br />
<strong> Animation éditoriale, gestion et mise à jour :</strong>
Marion Bertholon, chef de projet à la direction Environnement,
Ecologie, Energie
</p>
<p class="text-16-white-padding">
<strong>Photographies :</strong> sauf mention contraire, les photos
sont la propriété de la Métropole de Lyon <br />
<strong>Vidéos :</strong> sauf mention contraire, les vidéos sont la
propriété de la Métropole de Lyon
</p>
<p class="text-16-white-padding">
<strong>Charte graphique :</strong> www.soprasteria.fr <br />
<strong>Réalisation technique :</strong> www.soprasteria.fr<br />
<strong>Maintenance technique :</strong> Délégation Développement
économique, emploi & savoirs - Innovation numérique systèmes
d'information - Usages et services numériques - Développement des
services numériques Ce site est optimisé pour Internet Explorer
(versions 10 et supérieures), Mozilla Firefox (version 31 et
supérieures), Google Chrome version 36 et supérieures), Safari
(version 7 et supérieures). <br />
<strong>Hébergement :</strong> Solutec / Synaaps - www.solutec.fr<br />
</p>
<h2 class="text-18-white">Dispositions légales</h2>
<p class="text-16-white-padding">
Les divers éléments du site web (la forme, la mise en page, le
fond, la structure …) sont protégés par le droit des dessins et
modèles, le droit d’auteur, le droit des marques ainsi que le droit
à l’image et ils ne peuvent être copiés ou imités en tout ou partie
sauf autorisation expresse de la Métropole de Lyon. <br />
Toute personne ne respectant pas les dispositions légales
applicables se rend coupable du délit de contrefaçon et est passible
des sanctions pénales prévues par la loi.
</p>
<h2 class="text-18-white">Droits d'auteurs</h2>
<p class="text-16-white-padding">
Le présent site constitue une œuvre dont la "Métropole de Lyon" est
l'auteur au sens des articles L. 111.1 et suivants du Code de la
propriété intellectuelle.<br />
Les photographies, textes, logos, pictogrammes, ainsi que toutes
œuvres intégrées dans le site sont la propriété de la "Métropole de
Lyon" ou de tiers ayant autorisé la "Métropole de Lyon" à les
utiliser. <br />
Les reproductions, les transmissions, les modifications, les
réutilisations, sur un support papier ou informatique, dudit site et
des œuvres qui y sont reproduites ne sont autorisées que pour un
usage personnel et privé conforme aux dispositions de l'article L
122-5 du Code de la Propriété Intellectuelle. Ces reproductions
devront ainsi notamment indiquer clairement la source et l'auteur du
site et/ou de ces œuvres multimédias. <br />
En aucun cas ces reproductions ne sauraient porter préjudice aux
droits des tiers. <br />
Les reproductions, les transmissions, les modifications, les
réutilisations à des fins publicitaires, commerciales ou
d'information, de tout ou partie du site, sont totalement
interdites.<br />
</p>
<h2 class="text-18-white">Logo de la Métropole de Lyon</h2>
<p class="text-16-white-padding">
Le logo de la Métropole de Lyon ne peut être modifié – proportions,
couleurs, éléments, constituants – et ne peut être sujet à aucune
transformation, animation ou tout autre processus. Le logo de la
Métropole de Lyon ne peut être utilisé et associé qu'aux seules
informations vérifiables. Il ne peut être notamment utilisé que pour
illustrer des relations avec la Métropole de Lyon ou des actions de
sponsorings dûment établies. <br />
Quel que soit le cas d'espèce, la Métropole de Lyon se réserve le
droit d'approuver ou de désapprouver toute utilisation du logo de la
Métropole de Lyon, pour assurer son utilisation correcte,
conformément à l'éthique, la morale et aux intérêts de la Métropole
de Lyon. Les conditions susmentionnées s'appliquent dans le cadre de
pages web, elles ne font pas référence à l'utilisation du logo dans
tout autre document. La Métropole de Lyon se réserve le droit de
modifier les conditions d'utilisation du logo de la Métropole de
Lyon à tout moment et sans préavis.
</p>
<h2 class="text-18-white">
Établissements de liens vers le site www.ecolyo.com
</h2>
<p class="text-16-white-padding">
La Métropole de Lyon autorise la mise en place d'un lien hypertexte
vers son site www.ecolyo.com pour tous les sites Internet, à
l'exclusion de ceux diffusant des informations à caractère
polémique, pornographique, xénophobe ou pouvant, dans une plus large
mesure porter atteinte à la sensibilité du plus grand nombre.<br />
Le lien doit aboutir à la page d'accueil du site (home page) et le
site www.ecolyo.com doit apparaître dans une nouvelle fenêtre. Les
pages du site www.ecolyo.com ne doivent en aucun cas être intégrées
à l'intérieur des pages d'un autre site (Frame).<br />
Dans tous les cas d'espèce, la Métropole de Lyon se réserve le droit
de demander la suppression d'un lien si elle estime que le site
cible ne respecte pas les règles ainsi définies.
</p>
<h2 class="text-18-white">
Liens vers des sites tiers depuis le site www.ecolyo.com
</h2>
<p class="text-16-white-padding">
Les liens hypertextes mis en œuvre au sein du site en direction
d'autres sites et/ou de pages personnelles et d'une manière générale
vers toutes ressources existantes sur internet ne sauraient engager
la responsabilité de la Métropole de Lyon quant aux liens qu'ils
contiennent ou aux changements ou mises à jour qui leur sont
apportés.
</p>
<h2 class="text-18-white">Mise en garde générale</h2>
<p class="text-16-white-padding">
Nos services mettent tout en œuvre pour offrir aux visiteurs de ce
site web des informations fiables et vérifiées.<br />
Cependant, malgré tous les soins apportés, le site peut comporter
des inexactitudes, des défauts de mise à jour ou des erreurs. <br />
Nous remercions les utilisateurs du site de nous faire part
d'éventuelles omissions, erreurs ou corrections par mail sur la
boite aux lettres du webmestre, ecolyo(at)grandlyon.com
</p>
</div>
</div>
</section>
</body>
</html>
mentions-legales.scss 0 → 100644
+ 11
− 0
View file @ f2d7c41a
.main-cta {
overflow-y: hidden;
}
.content-txt {
padding: 1rem 0;
}
h2 {
margin-top: 1rem;
}
style.css
+ 1152
− 1633
View file @ f2d7c41a
This diff is collapsed.
style.scss
+ 8
− 3
View file @ f2d7c41a
...@@ -660,9 +660,6 @@ footer { ...@@ -660,9 +660,6 @@ footer {
flex-basis: 33.33%; flex-basis: 33.33%;
text-align: center; text-align: center;
} }
@media (min-width: 1400px) {
margin-left: -5.5rem;
}
a { a {
color: $yellow; color: $yellow;
font-weight: 700; font-weight: 700;
...@@ -672,6 +669,14 @@ footer { ...@@ -672,6 +669,14 @@ footer {
} }
} }
} }
.legal-notice {
margin-top: 0.5rem;
text-align: center;
a {
color: $grey;
font-weight: normal;
}
}
} }
.info { .info {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment