From a6190dce65462a820fc67d3b7034bce274c354aa Mon Sep 17 00:00:00 2001
From: Alcaraz Yannick <yannick.alcaraz@etu.unice.fr>
Date: Fri, 4 Dec 2020 03:25:48 +0100
Subject: [PATCH] modif des formulaires connexion et inscriptions, et ajout de
 recupMDP

---
 .idea/workspace.xml |   2 +-
 connexion.html      |  11 +-
 css/connexion.css   |  13 ---
 css/inscription.css |  21 ++--
 css/recupMDP.css    | 245 ++++++++++++++++++++++++++++++++++++++++++++
 inscription.html    |  12 ++-
 recupMDP.html       |  38 +++++++
 7 files changed, 310 insertions(+), 32 deletions(-)
 create mode 100644 css/recupMDP.css
 create mode 100644 recupMDP.html
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b59d6de..8b0806d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -61,7 +61,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1607026953826</updated>
-      <workItem from="1607026956145" duration="10886000" />
+      <workItem from="1607026956145" duration="12994000" />
     </task>
     <servers />
   </component>
diff --git a/connexion.html b/connexion.html
index 87c1223..9c7d3c0 100644
--- a/connexion.html
+++ b/connexion.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8" />
     <!--link rel="icon" href="IconeLogo.ico"/-->
-    <title>Accueil</title>
+    <title>Connexion</title>
     <link rel="stylesheet" href="css/connexion.css" />
+    <link rel="stylesheet" href="css/index.css" />
 </head>
 <body>
 <form method="post" action="./traitement.php" name="formulaire">
@@ -19,14 +20,14 @@
 
         <!-- Login Form -->
         <form>
-            <input type="text" id="login" class="fondu second" name="login" placeholder="Nom d'utilisateur">
-            <input type="text" id="password" class="fondu third" name="login" placeholder="Mot de passe">
-            <input type="submit" class="fondu fourth" value="Se connecter">
+            <input type="text" id="login" class="fondu premier" name="login" placeholder="Nom d'utilisateur">
+            <input type="text" id="password" class="fondu deuxieme" name="login" placeholder="Mot de passe">
+            <input type="submit" class="fondu troisieme" value="Se connecter">
         </form>
 
         <!-- Remind Passowrd -->
         <div id="pied">
-            <a class="souligne" href="#">Mot de passe oublié ?</a>
+            <a class="souligne" href="recupMDP.html">Mot de passe oublié ?</a>
         </div>
 
     </div>
diff --git a/css/connexion.css b/css/connexion.css
index c42c508..e85249e 100644
--- a/css/connexion.css
+++ b/css/connexion.css
@@ -1,13 +1,5 @@
 /* BASIC */
 
-html {
-    background-color: #56baed;
-}
-
-body {
-    font-family: "Poppins", sans-serif;
-    height: 100vh;
-}
 
 a {
     color: #92badd;
@@ -215,11 +207,6 @@ input[type=text]::placeholder {
     animation-delay: 0.8s;
 }
 
-.fondu.quatrieme {
-    -webkit-animation-delay: 1s;
-    -moz-animation-delay: 1s;
-    animation-delay: 1s;
-}
 
 /* Simple CSS3 Fade-in Animation */
 .souligne:after {
diff --git a/css/inscription.css b/css/inscription.css
index 91a48ad..0192756 100644
--- a/css/inscription.css
+++ b/css/inscription.css
@@ -1,14 +1,5 @@
 /* BASIC */
 
-html {
-    background-color: #56baed;
-}
-
-body {
-    font-family: "Poppins", sans-serif;
-    height: 100vh;
-}
-
 a {
     color: #92badd;
     display:inline-block;
@@ -220,6 +211,18 @@ input[type=text]::placeholder {
     animation-delay: 1s;
 }
 
+.fondu.cinquieme {
+    -webkit-animation-delay: 1.2s;
+    -moz-animation-delay: 1.2s;
+    animation-delay: 1.2s;
+}
+.fondu.sixieme {
+    -webkit-animation-delay: 1.4s;
+    -moz-animation-delay: 1.4s;
+    animation-delay: 1.4s;
+}
+
+
 /* Simple CSS3 Fade-in Animation */
 .souligne:after {
     display: block;
diff --git a/css/recupMDP.css b/css/recupMDP.css
new file mode 100644
index 0000000..e85249e
--- /dev/null
+++ b/css/recupMDP.css
@@ -0,0 +1,245 @@
+/* BASIC */
+
+
+a {
+    color: #92badd;
+    display:inline-block;
+    text-decoration: none;
+    font-weight: 400;
+}
+
+h2 {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display:inline-block;
+    margin: 40px 8px 10px 8px;
+    color: #cccccc;
+}
+
+
+
+/* STRUCTURE */
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: 20px;
+}
+
+#contenu {
+
+    background: #fff;
+    padding: 30px;
+    width: 90%;
+    max-width: 450px;
+    position: relative;
+    padding: 0px;
+    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    text-align: center;
+}
+
+#pied {
+    background-color: #f6f6f6;
+    border-top: 1px solid #dce8f1;
+    padding: 25px;
+    text-align: center;
+}
+
+
+
+/* TABS */
+
+h2.inactive {
+    color: #cccccc;
+}
+
+h2.active {
+    color: #0d0d0d;
+    border-bottom: 2px solid #5fbae9;
+}
+
+
+
+/* FORM TYPOGRAPHY*/
+
+input[type=button], input[type=submit], input[type=reset]  {
+    background-color: #56baed;
+    border: none;
+    color: white;
+    padding: 15px 80px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 13px;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    margin: 5px 20px 40px 20px;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+    background-color: #39ace7;
+}
+
+input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
+    -moz-transform: scale(0.95);
+    -webkit-transform: scale(0.95);
+    -o-transform: scale(0.95);
+    -ms-transform: scale(0.95);
+    transform: scale(0.95);
+}
+
+input[type=text] {
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 5px;
+    width: 85%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+}
+
+input[type=text]:focus {
+    background-color: #fff;
+    border-bottom: 2px solid #5fbae9;
+}
+
+input[type=text]::placeholder {
+    color: #cccccc;
+}
+
+
+
+/* ANIMATIONS */
+
+/* Simple CSS3 Fade-in-down Animation */
+.fonduBas {
+    -webkit-animation-name: fonduBas;
+    animation-name: fonduBas;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+@-webkit-keyframes fonduBas {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fonduBas {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+/* Simple CSS3 Fade-in Animation */
+@-webkit-keyframes fondu { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fondu { from { opacity:0; } to { opacity:1; } }
+@keyframes fondu { from { opacity:0; } to { opacity:1; } }
+
+.fondu {
+    opacity:0;
+    -webkit-animation:fondu ease-in 1;
+    -moz-animation:fondu ease-in 1;
+    animation:fondu ease-in 1;
+
+    -webkit-animation-fill-mode:forwards;
+    -moz-animation-fill-mode:forwards;
+    animation-fill-mode:forwards;
+
+    -webkit-animation-duration:1s;
+    -moz-animation-duration:1s;
+    animation-duration:1s;
+}
+
+.fondu.premier {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+
+.fondu.deuxieme {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay: 0.6s;
+    animation-delay: 0.6s;
+}
+
+.fondu.troisieme {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+}
+
+
+/* Simple CSS3 Fade-in Animation */
+.souligne:after {
+    display: block;
+    left: 0;
+    bottom: -10px;
+    width: 0;
+    height: 2px;
+    background-color: #56baed;
+    content: "";
+    transition: width 0.2s;
+}
+
+.souligne:hover {
+    color: #0d0d0d;
+}
+
+.souligne:hover:after{
+    width: 100%;
+}
+
+
+
+/* OTHERS */
+
+*:focus {
+    outline: none;
+}
+
+#icon {
+    width:60%;
+}
+
+* {
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/inscription.html b/inscription.html
index 6a5fb20..cdcb7b9 100644
--- a/inscription.html
+++ b/inscription.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8" />
     <!--link rel="icon" href="IconeLogo.ico"/-->
-    <title>Accueil</title>
+    <title>Inscription</title>
     <link rel="stylesheet" href="css/inscription.css" />
+    <link rel="stylesheet" href="css/index.css" />
 </head>
 <body>
 <form method="post" action="./traitement.php" name="formulaire">
@@ -18,9 +19,12 @@
 
         <!-- Login Form -->
         <form>
-            <input type="text" id="login" class="fondu second" name="login" placeholder="Nom d'utilisateur">
-            <input type="text" id="password" class="fondu third" name="login" placeholder="Mot de passe">
-            <input type="submit" class="fondu fourth" value="S'inscrire">
+            <input type="text" id="nom" class="fondu premier" name="nom" placeholder="Nom">
+            <input type="text" id="prenom" class="fondu deuxieme" name="prenom" placeholder="Prenom">
+            <input type="text" id="mail" class="fondu troisieme" name="mail" placeholder="E-mail">
+            <input type="text" id="login" class="fondu quatrieme" name="login" placeholder="Nom d'utilisateur">
+            <input type="text" id="password" class="fondu cinquieme" name="login" placeholder="Mot de passe">
+            <input type="submit" class="fondu sixieme" value="S'inscrire">
         </form>
 
         <!-- Remind Passowrd -->
diff --git a/recupMDP.html b/recupMDP.html
new file mode 100644
index 0000000..7df8d3b
--- /dev/null
+++ b/recupMDP.html
@@ -0,0 +1,38 @@
+
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8" />
+    <!--link rel="icon" href="IconeLogo.ico"/-->
+    <title>Recuperation</title>
+    <link rel="stylesheet" href="css/recupMDP.css" />
+    <link rel="stylesheet" href="css/index.css" />
+</head>
+<body>
+<form method="post" action="./traitement.php" name="formulaire">
+
+    <div class="wrapper fonduBas">
+        <div id="contenu">
+            <!-- Tabs Titles -->
+            <h2 class="active"> Mot de passe oublié</h2>
+
+
+            <!-- Login Form -->
+            <form>
+                <input type="text" id="mail" class="fondu premier" name="mail" placeholder="E-mail">
+                <input type="submit" class="fondu troisieme" value="Envoyer">
+            </form>
+
+            <!-- Remind Passowrd -->
+            <div id="pied">
+                <a class="souligne" href="connexion.html">Se connecter</a>
+            </div>
+
+        </div>
+    </div>
+    <! --/form-->
+
+</form>
+</body>
+
+</html>
\ No newline at end of file
