finition page de connexion (partie front ok)

3 years ago · 8e3e8d7293
parent 4c88edbb12
commit 8e3e8d7293
7 changed files with 122 additions and 14 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/public/fond_page_connexion.png
+++ b/public/fond_page_connexion.png
--- a/public/index.html
+++ b/public/index.html
@ -11,7 +11,7 @@
    />
    <title>JTT CrM</title>
  </head>
-  <body>
+  <body style="background-image:url(./fond_page_connexion.png); background-size: cover;">
    <div id="root"></div>
  </body>
 </html>
--- a/src/index.js
+++ b/src/index.js
@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import "./styles/index.scss";

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
--- a/src/pages/Connexion.js
+++ b/src/pages/Connexion.js
@ -3,19 +3,30 @@ import React from 'react';

 const Connexion = () => {
    return (
-        <div>
+        <div className="page_connexion">
            {/* Create a connexion page */}
-            <img  srcset="./LogoApp.svg"></img>
-            <div className="connexion">
-                <form action="">
-                    <input type="text" placeholder="Pseudo" />
-                    <input type="password" placeholder="Mot de passe" />
-                    <button type="submit">Se connecter</button>
-                    <input type="checkbox"/>
-                    <label htmlFor="checkbox">Se souvenir de moi</label>
-                </form>
-            </div>
-            <a href="http://localhost">Mot de passe oublié ?</a>
+            <img className="logo" srcSet="./LogoApp.svg"></img>
+            <form action="">
+                <table className="formulaire_de_connexion">
+                    <tr className="connexion_text">
+                        Connexion
+                    </tr>
+                    <tr>
+                        <input className="text_zone" type="text" placeholder="Pseudo" />
+                    </tr>
+                    <tr>
+                        <input className="text_zone" type="password" placeholder="Mot de passe" />
+                    </tr>
+                    <tr className="envoyer">
+                        <div className="memory_me">
+                            <label htmlFor="checkbox">Se souvenir de moi</label>
+                            <input type="checkbox" />
+                        </div>
+                        <button type="submit">Se connecter</button>
+                    </tr>
+                </table>
+            </form>
+            <a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
        </div>
    );
 };
--- a/src/styles/components/_connexion.scss
+++ b/src/styles/components/_connexion.scss
@ -0,0 +1,95 @@
+.page_connexion {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .logo {
+        width: 200px;
+        height: 200px;
+    }
+
+    .formulaire_de_connexion {
+        background: rgba(255, 255, 255, 0.143);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(1.5px);
+        border-radius: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+
+        padding: 40px;
+        padding-top: 100px;
+        width: 450px;
+        height: 470px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 10px;
+
+        .connexion_text {
+            font-size: 25px;
+        }
+
+        .text_zone {
+            width: 370px;
+            height: 50px;
+            background-color: transparent;
+            border-radius: 5px;
+            border: 0.5px solid;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .envoyer {
+            width: 100%;
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+
+            button {
+                width: 150px;
+                height: 40px;
+                border-radius: 10px;
+                border: 0.5px solid;
+                color: $white;
+                border: 0;
+                background-color: rgba(163, 163, 163, 0.371);
+                border: 1px solid rgba(255,255,255,0.1);
+                backdrop-filter: blur(30px);
+                color: rgb(255, 255, 255);
+                cursor: pointer;
+                font-size: 15px;
+                &:hover{
+                    background-color: rgba(114, 114, 114, 0.371);   
+                }
+                &:active{
+                    background-color:rgba(68, 68, 68, 0.972);   
+                }
+            }
+
+            .memory_me {
+                display: flex;
+                align-items: center;
+
+                label {
+                    margin-right: 10px;
+                    font-size: 12px;
+                    color: rgb(59, 59, 59);
+                }
+                input{
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .forgot_pw {
+        outline: none;
+        text-decoration: none;
+        color: rgb(159, 159, 159);
+
+        &:hover {
+            color: rgba(53, 112, 206, 1);
+        }
+    }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -1 +1,2 @@
-@import "./settings.scss";
+@import "./settings.scss";
+@import "./components/connexion.scss";