From 802b7cab86de9fa1f99a2de20b547eb4e3f240ff Mon Sep 17 00:00:00 2001
From: Emre KARTAL <Emre.KARTAL@etu.uca.fr>
Date: Fri, 18 Nov 2022 11:43:11 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20page=20de=20l=20i?=
 =?UTF-8?q?nscription=20avec=20l=20ajout=20d=20un=20checkbox=20styler=20:w?=
 =?UTF-8?q?hite=5Fcheck=5Fmark:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vue/css/inscription.css             | 60 +++++++++++++++++++++
 src/Vue/css/style.css                   | 69 +++++++++++++++++++++++--
 src/Vue/html/inscription.html           | 15 +++---
 src/Vue/html/{index.html => login.html} |  8 ++-
 4 files changed, 138 insertions(+), 14 deletions(-)
 rename src/Vue/html/{index.html => login.html} (88%)

diff --git a/src/Vue/css/inscription.css b/src/Vue/css/inscription.css
index fa85dc7..5928aad 100644
--- a/src/Vue/css/inscription.css
+++ b/src/Vue/css/inscription.css
@@ -11,6 +11,66 @@ body {
   align-items: center;
 }
 
+.text-box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.btn:link,
+.btn:visited {
+  text-transform: uppercase;
+  text-decoration: none;
+  padding: 10px 15px;
+  display: inline-block;
+  border-radius: 100px;
+  font-size: 60%;
+  transition: all .2s;
+  position: absolute;
+}
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn-white {
+  background-color: #fff;
+  color: #777;
+}
+
+.btn::after {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: all .4s;
+}
+
+.btn-white::after {
+  background-color: #fff;
+}
+
+.btn:hover::after {
+  transform: scaleX(1.5) scaleY(1.7);
+  opacity: 0;
+}
+
+.btn-animated {
+  animation: moveInBottom 5s ease-out;
+  animation-fill-mode: backwards;
+}
+
 .main-logo img{
   width: 50%;
 }
diff --git a/src/Vue/css/style.css b/src/Vue/css/style.css
index e527f5c..5824257 100644
--- a/src/Vue/css/style.css
+++ b/src/Vue/css/style.css
@@ -14,6 +14,8 @@ body {
     justify-content: center;
 }
 
+/*Bouton*/
+
 .btn{
     display: flex;
     flex-direction: column;
@@ -75,6 +77,8 @@ body {
     animation-fill-mode: backwards;
 }
 
+/* Model */
+
 .model {
     width: 450px;
     background: rgba(255,255,255, .5);
@@ -162,10 +166,65 @@ body {
     opacity: .4;
 }
 
-.login-card-form .checkbox{
-    display: flex;
-    align-items: center;
-    gap: 7px;
+/*CheckBox*/
+
+.check {
+  cursor: pointer;
+  position: relative;
+  margin: auto;
+  width: 18px;
+  height: 18px;
+  -webkit-tap-highlight-color: transparent;
+  transform: translate3d(0, 0, 0);
+}
+.check:before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: -15px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(34,50,84,0.03);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.check svg {
+  position: relative;
+  z-index: 1;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: #c8ccd4;
+  stroke-width: 1.5;
+  transform: translate3d(0, 0, 0);
+  transition: all 0.2s ease;
+}
+.check svg path {
+  stroke-dasharray: 60;
+  stroke-dashoffset: 0;
+}
+.check svg polyline {
+  stroke-dasharray: 22;
+  stroke-dashoffset: 66;
+}
+.check:hover:before {
+  opacity: 1;
+}
+.check:hover svg {
+  stroke: #4285f4;
+}
+#cbx:checked + .check svg {
+  stroke: #4285f4;
+}
+#cbx:checked + .check svg path {
+  stroke-dashoffset: 60;
+  transition: all 0.3s linear;
+}
+#cbx:checked + .check svg polyline {
+  stroke-dashoffset: 42;
+  transition: all 0.2s linear;
+  transition-delay: 0.15s;
 }
 
 .login-card-form .form-item-other {
@@ -219,6 +278,8 @@ body {
     cursor: pointer;
 }
 
+/* Les réseaux social **/
+
 .social {
     display: flex;
     flex-direction: column;
diff --git a/src/Vue/html/inscription.html b/src/Vue/html/inscription.html
index c36df33..3869804 100644
--- a/src/Vue/html/inscription.html
+++ b/src/Vue/html/inscription.html
@@ -4,26 +4,23 @@
     <head>
 
       <title>Page d'inscription</title>
-
       <meta charset="utf-8">
-
-       <meta name="viewport" content="width=device-width, initial-scale=1">
-
-       <link rel="stylesheet" href="../css/inscription.css">
-
-       <script type="text/javascript" src="../javaScript/inscription.js" defer></script> 
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <link rel="stylesheet" href="../css/inscription.css">
+      <script type="text/javascript" src="../javaScript/inscription.js" defer></script> 
 
     </head>
 
     <body>
+          <div class="text-box">
+            <a href="#" class="btn btn-white btn-animate">Revenir</a>
+          </div>
           <div class="main-logo">
             <img src="../Images/Logo.png" alt="logo">
             <h1>Inscription</h1>
           </div>
-          
         
           <form>
-
             <ul class="items"></ul>
 
             <fieldset class="username enable">
diff --git a/src/Vue/html/index.html b/src/Vue/html/login.html
similarity index 88%
rename from src/Vue/html/index.html
rename to src/Vue/html/login.html
index 3984b15..0ac3729 100644
--- a/src/Vue/html/index.html
+++ b/src/Vue/html/login.html
@@ -33,7 +33,13 @@
                 </div>
                 <div class="form-item-other">
                     <div class="checkbox">
-                        <input type="checkbox" id="rememberMeCheckbox">
+                        <input type="checkbox" id="cbx" style="display: none;">
+                        <label for="cbx" class="check">
+                        <svg width="18px" height="18px" viewBox="0 0 18 18">
+                            <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                            <polyline points="1 9 7 14 15 4"></polyline>
+                        </svg>
+                        </label>
                         <label for="rememberMeCheckBox">Se souvenir de moi</label>
                     </div>
                     <a href="#">Oublie de mot de passe</a>