Skip to content
Snippets Groups Projects
Commit 6750bcc0 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

feat: add dacc page

parent 56cfc874
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 553 additions and 0 deletions
assets-dacc/dacc_illustration.png 0 → 100644
+ 0
− 0
View file @ 6750bcc0
assets-dacc/dacc_illustration.png

275 KiB

assets-dacc/data_illustration.png 0 → 100644
+ 0
− 0
View file @ 6750bcc0
assets-dacc/data_illustration.png

59.5 KiB

assets-dacc/favicon.png 0 → 100644
+ 0
− 0
View file @ 6750bcc0
assets-dacc/favicon.png

14.7 KiB

assets-dacc/header_illustration.png 0 → 100644
+ 0
− 0
View file @ 6750bcc0
assets-dacc/header_illustration.png

78 KiB

assets-dacc/logo_feder.svg 0 → 100644
+ 56
− 0
View file @ 6750bcc0
This diff is collapsed.
assets-dacc/metro_picto.svg 0 → 100644
+ 5
− 0
View file @ 6750bcc0
<svg width="39" height="33" viewBox="0 0 39 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.10352e-05 0.12561H33.8218V11.9632L38.8951 16.1909L33.8218 20.4187V32.2563H6.10352e-05V0.12561Z" fill="#DA322F"/>
<rect x="15.2198" y="8.58112" width="3.38218" height="16.9109" fill="white"/>
<rect x="8.45544" y="18.7275" width="3.38218" height="16.9109" transform="rotate(-90 8.45544 18.7275)" fill="white"/>
</svg>
assets-dacc/red_border.svg 0 → 100644
+ 11
− 0
View file @ 6750bcc0
<svg width="843" height="582" viewBox="0 0 843 582" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M171.368 131.522H769.988C785.341 131.522 795.965 148.677 790.563 164.751L704.847 419.592C701.624 429.174 693.425 435.515 684.272 435.515H85.6523C70.2993 435.515 59.6747 418.361 65.0769 402.287L150.793 147.446C154.016 137.864 162.215 131.522 171.368 131.522Z" fill="#E30613"/>
<path d="M266.799 131.522L193.314 119.718C184.25 118.261 175.333 123.234 170.93 132.213L53.666 370.816C46.276 385.861 54.5982 404.535 69.8052 406.971L662.337 502.186C671.401 503.643 680.318 498.67 684.721 489.691L801.985 251.075C809.375 236.031 801.053 217.357 785.846 214.92L774.3 213.062" stroke="#8E0000" stroke-width="4.61388" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="843" height="582" fill="white"/>
</clipPath>
</defs>
</svg>
assets-dacc/red_chat_bubble.svg 0 → 100644
+ 5
− 0
View file @ 6750bcc0
<svg width="664" height="438" viewBox="0 0 664 438" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M142.58 170.075L205.568 394.946C207.573 402.102 200.684 408.401 194.368 405.195L61.696 337.738C50.8225 332.212 45.717 318.709 49.9569 306.668L98.6445 168.453C106.471 146.256 136.211 147.359 142.58 170.075Z" fill="#A81917"/>
<path d="M134.833 99.7036H605.634C617.708 99.7036 626.064 112.584 621.816 124.654L554.402 316.003C551.867 323.198 545.419 327.96 538.22 327.96H67.4198C55.345 327.96 46.989 315.079 51.2377 303.01L118.651 111.66C121.186 104.465 127.634 99.7036 134.833 99.7036Z" fill="#E30613"/>
<path d="M209.888 99.7037L152.093 90.8401C144.965 89.7463 137.951 93.4803 134.489 100.222L42.2633 279.38C36.4512 290.676 42.9965 304.697 54.9564 306.527L520.969 378.02C528.097 379.114 535.111 375.38 538.573 368.638L630.799 189.471C636.611 178.175 630.066 164.153 618.106 162.324L609.026 160.928" stroke="#8E0000" stroke-width="4.61388" stroke-miterlimit="10"/>
</svg>
assets-dacc/ue_white.svg 0 → 100644
+ 31
− 0
View file @ 6750bcc0
This diff is collapsed.
cloud_statistiques.html 0 → 100644
+ 109
− 0
View file @ 6750bcc0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="./assets-dacc/favicon.png">
<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."
/>
<title>Mon cloud personnel Grand Lyon – Statistiques</title>
<link rel="stylesheet" href="style-dacc.css">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="background-image">
<div class="header">
<div>
<h1>Comment vos données sont-elles analysées ?</h1>
<p>Pour améliorer les services qui vous sont proposés dans l’univers du cloud personnel (#selfdata), nous avons besoin de suivre votre utilisation de nos applications.
<p>Comme la confidentialité de vos données est primordiale pour nous, nous avons mis en place un mode de récupération respectueux de vos données.</p>
</div>
<img src="./assets-dacc/header_illustration.png" class="hide-on-mobile" alt="self data illustration">
</div>
</div>
<div class="body margin-top-medium">
<h2>Quelles informations suivons-nous ?</h2>
<div class="center">
<div>
<p class="title">Pour Ecolyo les infos suivies sont :</p>
<ul>
<li><p>
La typologie des <strong>applications</strong> ajoutées qui récupèrent vos données (électricité, gaz ou eau) et leur bon fonctionnement
</p></li>
<li><p>
La <strong>fréquentation</strong> des pages
</p></li>
<li><p>
L’utilisation de la partie <strong>défis</strong> (durée des défis, taux de réussite ou d’échec)
</p></li>
<li><p>
Complétude du <strong>profil</strong> (oui ou non)
</p></li>
<li><p>
<strong>Pourcentage</strong> de baisse des <strong>consommations</strong> d’une période à l’autre
</p></li>
</ul>
</div>
<img src="./assets-dacc/data_illustration.png" alt="data visualisation illustration">
</div>
<div class="center-small border margin-top-small">
<p class="title">Pour quoi faire ?</p>
<p>La remontée de ces indicateurs nous permet de vérifier le bon fonctionnement des connecteurs, de comprendre l’utilisation multi-fluide (ou non) qui est faite de notre service ainsi que d’adapter la difficulté des défis.</p>
<p class="margin-top-small">Les pourcentages de baisse de consommation nous permettront d’évaluer l’impact de notre service et justifier de son maintien dans le temps ou non.</p>
</p>
</div>
<div class="center-small">
<h2 class="margin-top-medium">Mais... comment récupérer ces informations en respectant votre anonymat ?</h2>
</div>
<div class="red-chat">
<p>Une fois que vous avez accepté de nous transmettre vos informations les données sont anonymisées par notre service.</p>
</div>
<div class="blue-border blue-border-top">
<p>Il est alors impossible de savoir quelle donnée appartient à quel utilisateur. Impossible de remonter jusqu’à vous !</p>
</div>
<div class="blue-border blue-border-center">
<p>Toutes les données anonymisées sont ensuite mélangées entre elles.</p>
</div>
<div class="blue-border blue-border-bottom">
<p>Une fois cette étape franchie, chaque typologie de donnée n’est analysée que si un nombre minimum de données a été récolté.</p>
</div>
<div class="text-center">
<img src="./assets-dacc/dacc_illustration.png" alt="data visualisation illustration">
</div>
<div class="red-border">
<p class="first">Le tour est joué : les données cumulées nous permettent d’avoir une information d’analyse de l’utilisation de l’application totalement anonymisée.</p>
<p>... tout ceci dans le but d’améliorer nos services et vous proposer de nouvelles fonctionnalités !</p>
</div>
</div>
<div class="footer">
<div>
<a href="https://demarches-support.grandlyon.com/retour-cloud-personnel/contactez-nous-concernant-les-clouds-personnels-grand-lyon/" target="_blank">
Contact
</a>
</div>
<div class="flex-center">
<img src="./assets-dacc/logo_feder.svg" alt="logo région">
<img src="./assets-dacc/ue_white.svg" alt="logo europe">
</div>
<div class="flex-end">
<a href="https://www.grandlyon.com/" target="_blank">
<img src="./assets-dacc/metro_picto.svg" class="metro-logo" alt="métropole icone">
Un site de la Métropole de Lyon
</a>
</div>
</div>
</body>
</html>
style-dacc.css 0 → 100644
+ 336
− 0
View file @ 6750bcc0
body {
font-family: 'Roboto Mono', sans-serif;
font-style: normal;
font-weight: bold;
margin: auto;
}
html {
overflow-x: hidden;
background: white;
}
h1 {
font-weight: bold;
font-size: 2.875em;
line-height: 60px;
}
h2 {
text-align: center;
}
p {
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
line-height: 31px;
}
.background-image {
background: radial-gradient(29.38% 58.23% at 65.42% 50%, #234C85 0%, #234C85 100%);
}
.red-chat {
background-repeat: no-repeat;
height: 437px;
width: 663px;
background-image: url("./assets-dacc/red_chat_bubble.svg");
position: relative;
top: 24vh;
margin-top: -200px;
}
.red-chat p {
padding-top: 155px;
padding-left: 120px;
padding-right: 80px;
color: white;
font-weight: bold !important;
}
.blue-border {
background: rgba(94, 164, 218, 0.2);
border: 2px solid #35A8E0;
box-sizing: border-box;
border-radius: 20px;
text-align: center;
padding-top: 28px;
}
.blue-border p {
font-weight: bold !important;
}
.blue-border-top {
width: 520px;
height: 170px;
position: absolute;
right: 2vw;
margin-top: 120px;
}
.blue-border-center {
width: 435px;
height: 140px;
position: relative;
top: 800px;
margin-left: -2vw;
}
.blue-border-bottom {
width: 500px;
height: 170px;
position: absolute;
right: 2vw;
margin-top: 700px;
}
.header {
margin: auto;
max-width: 80%;
color: white;
display: flex;
align-items: center;
}
.header img {
width: 50%;
height: 50%;
}
.header h1 {
margin-top: 0;
}
.header p {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 1.5em;
line-height: 31px;
}
.body {
max-width: 80%;
margin: auto;
color: #0D3062;
}
.body p {
font-family: Roboto;
font-style: normal;
font-weight: normal;
margin: 0;
}
.body h2 {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: bold;
font-size: 2.25em;
line-height: 45px;
}
.body .title {
font-family: Roboto;
font-style: normal;
font-weight: 900;
line-height: 31px;
margin-bottom: 30px;
}
.footer {
background-color: black;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
}
.footer div {
display: flex;
align-items: center;
flex-basis: 33%;
}
.footer .flex-center {
justify-content: center;
}
.footer .flex-end {
justify-content: flex-end;
}
.footer .metro-logo {
margin-right: 0.3rem;
}
.footer a {
font-family: Titillium Web;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 34px;
display: flex;
align-items: center;
color: #FFFFFF;
text-decoration: none;
}
.center {
display: flex;
}
.center img {
width: 50%;
}
.center-small {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.border {
padding: 40px;
border: 4px solid #234C85;
box-sizing: border-box;
border-radius: 20px;
}
.text-center {
text-align: center;
}
.text-center img {
width: 100%;
max-height: 1432px;
max-width: 1192px;
}
.margin-top-small {
margin-top: 30px !important;
}
.margin-top-medium {
margin-top: 70px;
}
.red-border {
background-image: url("./assets-dacc/red_border.svg");
width: 843px;
height: 582px;
margin: auto;
}
.red-border p {
color: white;
font-weight: bold;
padding-left: 160px;
padding-right: 140px;
text-align: center;
}
.red-border .first {
padding-top: 180px;
padding-bottom: 20px;
}
@media (max-width: 1200px) {
.header {
padding-top: 20px;
align-items: center;
max-width: 90%;
}
.body {
max-width: 90%;
}
.center {
flex-direction: column;
align-items: center;
}
.blue-border {
margin: 20px auto;
}
.blue-border-top {
position: unset;
right: unset;
margin-top: unset;
}
.blue-border-center {
position: unset;
top: unset;
}
.blue-border-bottom {
position: unset;
right: unset;
margin-top: unset;
}
.red-chat {
position: unset;
top: unset;
margin-top: unset;
margin: auto;
}
}
@media (max-width: 900px) {
.red-border {
background-size: contain;
width: unset;
}
.red-border .first {
padding-top: 18vw;
}
.red-border p {
padding-left: 140px;
padding-right: 80px;
font-size: 1.3em;
}
.footer {
flex-direction: column;
}
}
@media (max-width: 768px) {
.hide-on-mobile {
display: none !important;
}
.center img {
width: 100%;
}
.center-small {
max-width: unset;
}
.blue-border {
width: unset !important;
height: unset !important;
padding-top: unset;
}
.red-chat, .red-border {
background: unset;
width: unset;
height: unset;
}
.red-chat p, .red-border p {
padding: unset;
color: #0D3062;
margin-bottom: 20px;
}
.red-border .first {
padding-top: unset;
}
.footer div {
flex-direction: column;
padding-bottom: 20px;
}
}
\ No newline at end of file
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