Mise à jour des vues de connexion/inscription

php/controleur/UtilisateurControleur.php

@@ -38,7 +38,7 @@ class UtilisateurControleur
     protected function connection()
     {
         global $twig;
-        echo $twig->render('connection.html', []);
+        echo $twig->render('connexion.html', []);
     }
 
     protected function inscription()

php/css/accueil.css

@@ -0,0 +1,30 @@
+@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Share+Tech+Mono&display=swap);
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+body{
+    display: inline;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #fff;
+}
+
+input{
+    position: relative;
+    outline: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    letter-spacing: 1px;
+    font-size: 0.85em;
+    background-color: #00DBFF;
+    color: #fff;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: 600;
+    margin-top: 10px;
+    border: none;
+}

php/css/connection.css

@@ -1,140 +0,0 @@
-@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Share+Tech+Mono&display=swap);
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-a{
-    text-decoration: none;
-}
-
-body{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background: #2f363e;
-}
-
-.container{
-    position: relative;
-    width: 350px;
-    min-height: 500px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #2f363e;
-    box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
-    10px 10px 70px rgba(0,0,0,0.25),
-    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
-    inset 5px 5px 10px rgba(255, 255, 255, 0.2),
-    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
-    border-radius: 30px;
-    padding: 50px;
-}
-form{
-    position: relative;
-    width: 100%;
-}
-.container h3{
-    color: #fff;
-    font-weight: 600;
-    font-size: 2em;
-    width: 100%;
-    text-align: center;
-    margin-bottom: 30px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-}
-.container a:link {
-    color: #fff;
-  }
-.container  a:visited {
-    color: #fff;
-  }
-.container  a:hover {
-    color: #fff;
-  }
-.container  a:active {
-    color: #fff;
-  }
-.CadreInput
-{
-    position: relative;
-    width: 100%;
-    margin-bottom: 20px;
-}
-.CadreInput span{
-    display: inline-block;
-    color: #fff;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.75em;
-    border-left: 4px solid #fff;
-    padding-left: 4px;
-    line-height: 1em;
-}
-.CadreInput .box{
-    display: flex;
-}
-.CadreInput .box .icon{
-    position: relative;
-    min-width: 40px;
-    height: 40px;
-    background-color: #a50b12;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    margin-right: 10px;
-    color: #fff;
-    font-size: 1.15em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
-}
-.CadreInput .box input{
-    position: relative;
-    width: 100%;
-    border: none;
-    outline: none;
-    padding: 10px 20px;
-    border-radius: 30px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.85em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
-}
-.CadreInput .box input[type="submit"]{
-    background-color: #04070a;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
-    color: #fff;
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-weight: 600;
-    margin-top: 10px;
-}
-label{
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.85em;
-    display: flex;
-    align-items: center;
-}
-label input{
-    margin-right: 5px;
-}
-.forgot{
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.85em;
-}

php/css/connexion.css

@@ -4,28 +4,30 @@
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
+    color: black;
 }
+a{
+    text-decoration: none;
+}
+
 body{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: #2f363e;
+    background: #fff;
 }
 
 .container{
     position: relative;
-    width: 350px;
+    width: 500px;
     min-height: 500px;
-    display: flex;
+    display: inline;
     justify-content: center;
     align-items: center;
-    background: #2f363e;
+    background: #fff;
-    box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
+    box-shadow:  10px 10px 20px #fff,
-    10px 10px 70px rgba(0,0,0,0.25),
+    -10px -10px 20px #ccc;
-    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
-    inset 5px 5px 10px rgba(255, 255, 255, 0.2),
-    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
     border-radius: 30px;
     padding: 50px;
 }
@@ -34,7 +36,7 @@ form{
     width: 100%;
 }
 .container h3{
-    color: #fff;
+    color: #000;
     font-weight: 600;
     font-size: 2em;
     width: 100%;
@@ -51,12 +53,12 @@ form{
 }
 .CadreInput span{
     display: inline-block;
-    color: #fff;
+    color: #000;
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.75em;
-    border-left: 4px solid #fff;
+    border-left: 4px solid #000;
     padding-left: 4px;
     line-height: 1em;
 }
@@ -67,17 +69,14 @@ form{
     position: relative;
     min-width: 40px;
     height: 40px;
-    background-color: #a50b12;
+    background-color: #00DBFF;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     margin-right: 10px;
-    color: #fff;
+    color: #000;
     font-size: 1.15em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
 }
 .CadreInput .box input{
     position: relative;
@@ -85,40 +84,28 @@ form{
     border: none;
     outline: none;
     padding: 10px 20px;
-    border-radius: 30px;
+    border-radius: 10px;
-    text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
+    border: #00DBFF 2px solid;
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
 }
 .CadreInput .box input[type="submit"]{
-    background-color: #04070a;
+    background-color: #00DBFF;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
     color: #fff;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 600;
     margin-top: 10px;
+    border: none;
 }
-label{
+.CadreInput .box input[type="submit"].other{
-    color: #fff;
+    background-color: #fff;
-    text-transform: uppercase;
+    color: #00DBFF;
-    letter-spacing: 1px;
+    margin-right: 15px;
-    font-size: 0.85em;
-    display: flex;
-    align-items: center;
-}
-label input{
-    margin-right: 5px;
 }
 .forgot{
-    color: #fff;
+    color: #000;
-    text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85em;
 }

php/css/erreur.css

@@ -6,9 +6,24 @@
     font-family: 'Poppins', sans-serif;
 }
 body{
-    display: flex;
+    display: inline;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: #2f363e;
+    background: #fff;
+}
+input{
+    position: relative;
+    outline: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    letter-spacing: 1px;
+    font-size: 0.85em;
+    background-color: #00DBFF;
+    color: #fff;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: 600;
+    margin-top: 10px;
+    border: none;
 }

php/css/inscription.css

@@ -4,29 +4,30 @@
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
+    color: black;
+}
+a{
     text-decoration: none;
 }
+
 body{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: #2f363e;
+    background: #fff;
 }
 
 .container{
     position: relative;
-    width: 350px;
+    width: 500px;
     min-height: 500px;
-    display: flex;
+    display: inline;
     justify-content: center;
     align-items: center;
-    background: #2f363e;
+    background: #fff;
-    box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
+    box-shadow:  10px 10px 20px #fff,
-    10px 10px 70px rgba(0,0,0,0.25),
+    -10px -10px 20px #ccc;
-    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
-    inset 5px 5px 10px rgba(255, 255, 255, 0.2),
-    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
     border-radius: 30px;
     padding: 50px;
 }
@@ -35,7 +36,7 @@ form{
     width: 100%;
 }
 .container h3{
-    color: #fff;
+    color: #000;
     font-weight: 600;
     font-size: 2em;
     width: 100%;
@@ -52,12 +53,12 @@ form{
 }
 .CadreInput span{
     display: inline-block;
-    color: #fff;
+    color: #000;
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.75em;
-    border-left: 4px solid #fff;
+    border-left: 4px solid #000;
     padding-left: 4px;
     line-height: 1em;
 }
@@ -68,17 +69,14 @@ form{
     position: relative;
     min-width: 40px;
     height: 40px;
-    background-color: #a50b12;
+    background-color: #00DBFF;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     margin-right: 10px;
-    color: #fff;
+    color: #000;
     font-size: 1.15em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
 }
 .CadreInput .box input{
     position: relative;
@@ -86,40 +84,28 @@ form{
     border: none;
     outline: none;
     padding: 10px 20px;
-    border-radius: 30px;
+    border-radius: 10px;
-    text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85em;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
+    border: #00DBFF 2px solid;
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
 }
 .CadreInput .box input[type="submit"]{
-    background-color: #04070a;
+    background-color: #00DBFF;
-    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
-    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
-    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
     color: #fff;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 600;
     margin-top: 10px;
+    border: none;
 }
-label{
+.CadreInput .box input[type="submit"].other{
-    color: #fff;
+    background-color: #fff;
-    text-transform: uppercase;
+    color: #00DBFF;
-    letter-spacing: 1px;
+    margin-right: 15px;
-    font-size: 0.85em;
-    display: flex;
-    align-items: center;
-}
-label input{
-    margin-right: 5px;
 }
-.login{
+.forgot{
-    color: #fff;
+    color: #000;
-    text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85em;
 }

php/vues/accueil.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="css/accueil.css">
     <title>Alica - Accueil</title>
   </head>
 
@@ -13,9 +14,9 @@
   <p>Vous pouvez vous connecter ou vous inscrire</p>
   <p>Vous pouvez aussi consulter les articles</p>
   <p>Vous pouvez aussi consulter les annonces</p>
-  <p>Connection :</p>
+  <p>Connexion :</p>
   <form action="index.php?action=connection"  method="POST">
-    <input type="submit" value="S'identifier">
+    <input type="submit" value="Se connecter">
   </form>
   </body>
 </html>

php/vues/connexion.html

@@ -3,17 +3,18 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Alica - Connection</title>
+    <title>Alica - Connexion</title>
-    <link rel="stylesheet" type="text/css" href="css/connection.css">
+    <link rel="stylesheet" type="text/css" href="css/connexion.css">
 </head>
 <body>
 <div class="container">
     <form action="" method="POST">
-        <h3>S'identifier</h3>
+        <h3>Connexion</h3>
         <div class="CadreInput">
             <span>Identifiant</span>
             <div class="box">
-                <div class="icon"><ion-icon name="person"></ion-icon>
+                <div class="icon">
+                    <ion-icon name="person"></ion-icon>
                 </div>
                 <input type="text" name="username" required>
             </div>
@@ -21,26 +22,27 @@
         <div class="CadreInput">
             <span>Mot de passe</span>
             <div class="box">
-                <div class="icon"><ion-icon name="lock-closed"></ion-icon>
+                <div class="icon">
+                    <ion-icon name="lock-closed"></ion-icon>
                 </div>
                 <input type="password" name="password" required>
             </div>
         </div>
-        <label>
+        <a href="#" class="forgot">Mot de passe oublié ?</a>
-            <input type="checkbox">Se souvenir de moi
-        </label>
         <div class="CadreInput">
             <div class="box">
-                <div class="icon"></div>
+                <input type="submit" value="Se connecter">
-                <input type="submit" value="S'identifier">
             </div>
         </div>
-        <a href="#" class="forgot">Mot de passe oublié</a>
     </form>
+    <div class="CadreInput">
+        <div class="box">
             <form action="index.php?action=inscription"  method="POST">
-        <input type="submit" value="S'inscrire">
+                <input type="submit" class="other" value="S'inscrire">
             </form>
         </div>
+    </div>
+</div>
 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </body>

php/vues/erreur.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="css/erreur.css">
     <title>Alica - Erreur</title>
   </head>
 

php/vues/inscription.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Alica - Inscription</title>
     <link rel="stylesheet" type="text/css" href="css/inscription.css">
 </head>
@@ -12,7 +13,8 @@
         <div class="CadreInput">
             <span>Identifiant</span>
             <div class="box">
-                <div class="icon"><ion-icon name="person"></ion-icon>
+                <div class="icon">
+                    <ion-icon name="person"></ion-icon>
                 </div>
                 <input type="text" name="username" required>
             </div>
@@ -20,7 +22,8 @@
         <div class="CadreInput">
             <span>Email</span>
             <div class="box">
-                <div class="icon"><ion-icon name="mail-outline"></ion-icon>
+                <div class="icon">
+                    <ion-icon name="mail-outline"></ion-icon>
                 </div>
                 <input type="email" name="email" required>
             </div>
@@ -28,22 +31,26 @@
         <div class="CadreInput">
             <span>Mot de passe</span>
             <div class="box">
-                <div class="icon"><ion-icon name="lock-closed"></ion-icon>
+                <div class="icon">
+                    <ion-icon name="lock-closed"></ion-icon>
                 </div>
                 <input type="password" name="password" required>
             </div>
         </div>
         <div class="CadreInput">
             <div class="box">
-                <div class="icon"></div>
                 <input type="submit" value="Creer mon compte">
             </div>
         </div>
     </form>
+    <div class="CadreInput">
+        <div class="box">
             <form action="index.php?action=connection"  method="POST">
-        <input type="submit" value="S'identifier">
+                <input class="other" type="submit" value="Se connecter">
             </form>
         </div>
+    </div>
+</div>
 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 <script noModule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </body>