From 1ae04fe348f348f685c46669f52ccf78e803adbb Mon Sep 17 00:00:00 2001
From: remip <rpapin@grandlyon.com>
Date: Fri, 16 Oct 2020 15:12:54 +0200
Subject: [PATCH] Add forget home page
---
forget_home_page.html | 71 +++++++++++++++++++++++++++++++++++
style.css | 86 +++++++++++++++++++++++++++++++++++++++++--
2 files changed, 154 insertions(+), 3 deletions(-)
create mode 100644 forget_home_page.html
diff --git a/forget_home_page.html b/forget_home_page.html
new file mode 100644
index 0000000..bc8711c
--- /dev/null
+++ b/forget_home_page.html
@@ -0,0 +1,71 @@
+<!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>
+ <div class="forget-container">
+ <div class="forget-body">
+ <div class="content">
+ <h2 class="text-36-white">Retrouver mon espace personnel</h2>
+ <p class="text-18-white-padding">
+ Veuillez renseigner votre identifiant
+ </p>
+ <div class="input">
+ <input type="text" name="slug" id="slug" placeholder="claude">
+ <button
+ class="button"
+ onclick="getCozyAddress()"
+ >
+ <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" />
+ Accéder à mon cloud
+ </button>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <div class="content">
+ <div class="bottom">
+ <div class="logos-footer">
+ <img src="assets/logo-grandlyon.svg" alt="logo-grandlyon" />
+ <img src="assets/logo-tiga.svg" alt="logo-tiga" />
+ </div>
+ <div class="contact">
+ <p>
+ Contactez-nous Ã
+ <a href="mailto:ecolyo@grandlyon.com"> ecolyo@grandlyon.com</a>
+ </p>
+ </div>
+ <div class="info">
+ <img src="assets/info.svg" alt="info-métropole" />
+ <a href="https://www.grandlyon.com/" target="_blank"
+ ><p>Un site de la Métropole de Lyon</p></a
+ >
+ </div>
+ </div>
+ </div>
+ </footer>
+ </div>
+ </body>
+ <script>
+ function getCozyAddress(){
+
+ let cozyName = document.getElementById("slug").value
+ if(cozyName.length > 0){
+ window.location.href = "https://" + cozyName + "-ecolyo.cozygrandlyon.cloud/#/consumption"
+ }
+ }
+ </script>
+</html>
diff --git a/style.css b/style.css
index b4de42b..2e2dded 100644
--- a/style.css
+++ b/style.css
@@ -513,7 +513,7 @@ nav .links .navlink {
padding: 0.75rem 0;
}
-.guide .content .button {
+.guide .content .button{
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
@@ -670,7 +670,7 @@ footer .content h2 {
text-align: center;
}
-footer .content .button {
+footer .content .button{
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
@@ -925,4 +925,84 @@ footer .content .info a {
transform: scale(0.8);
}
}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+/*# sourceMappingURL=style.css.map */
+
+/*FOR forget_home_page.html*/
+
+.forget-body, .input {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.forget-body {
+ padding: 1rem 2rem;
+ background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
+ min-height: 75vh;
+}
+.forget-container footer, .forget-container footer .content {
+ min-height: 24vh;
+}
+.forget-container footer .content {
+ padding-top: 0;
+ justify-content: center;
+}
+.input {
+ flex-direction: column;
+
+}
+.input input {
+ border-radius: 4px 0 0 4px;
+ width: 100%;
+ height: 50px;
+ padding: .75em;
+ font-size: 1em;
+ line-height: 1.5;
+ font-family: Lato, sans-serif;
+ color: #121212;
+}
+.input img {
+ margin-right: 10px;
+}
+.input .button {
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-decoration: none;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ background: #f1c017;
+ color: #121212;
+ border-radius: 2px;
+ width: 100%;
+ height: 56px;
+ max-width: -webkit-fit-content;
+ max-width: -moz-fit-content;
+ max-width: fit-content;
+ padding: 1rem;
+ margin: 2rem 0;
+ border: 0;
+ -webkit-transition: all 400ms ease;
+ transition: all 400ms ease;
+ font-size: 1.25rem;
+ text-align: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-weight: 700;
+ background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
+}
+.input .button:hover {
+ -webkit-box-shadow: 0px 0px 20px 0px #f1c017;
+ box-shadow: 0px 0px 20px 0px #f1c017;
+}
+@media all and (max-width: 1280px) and (max-width: 600px) {
+ .main-cta .mobile-illu {
+ width: 125% !important;
+ margin: 1.5rem 0;
+ }
+}
\ No newline at end of file
--
GitLab