Amélioration de la page de l inscription avec l ajout d un checkbox styler ✅

2 years ago · 802b7cab86
parent 5efdb0aa09
commit 802b7cab86
4 changed files with 138 additions and 14 deletions
--- 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%;
 }
--- 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;
--- 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> 

    </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">
--- a/src/Vue/html/login.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>