maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finition page de connexion (partie front ok)

Browse Source
master
Maxence LANONE 3 years ago
parent 4c88edbb12
commit 8e3e8d7293
7 changed files with 122 additions and 14 deletions
Show Stats Download Patch File Download Diff File

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
public/fond_page_connexion.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 930 KiB

2
public/index.html
Unescape View File

@ -11,7 +11,7 @@
/> />
<title>JTT CrM</title> <title>JTT CrM</title>
</head> </head>
<body> <body style="background-image:url(./fond_page_connexion.png); background-size: cover;">
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

1
src/index.js
Unescape View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import "./styles/index.scss";
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(

35
src/pages/Connexion.js
Unescape View File

@ -3,19 +3,30 @@ import React from 'react';
const Connexion = () => { const Connexion = () => {
return ( return (
<div> <div className="page_connexion">
{/* Create a connexion page */} {/* Create a connexion page */}
<img srcset="./LogoApp.svg"></img> <img className="logo" srcSet="./LogoApp.svg"></img>
<div className="connexion"> <form action="">
<form action=""> <table className="formulaire_de_connexion">
<input type="text" placeholder="Pseudo" /> <tr className="connexion_text">
<input type="password" placeholder="Mot de passe" /> Connexion
<button type="submit">Se connecter</button> </tr>
<input type="checkbox"/> <tr>
<label htmlFor="checkbox">Se souvenir de moi</label> <input className="text_zone" type="text" placeholder="Pseudo" />
</form> </tr>
</div> <tr>
<a href="http://localhost">Mot de passe oublié ?</a> <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> </div>
); );
}; };

95
src/styles/components/_connexion.scss
Unescape View File

@ -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);
}
}
}

3
src/styles/index.scss
Unescape View File

@ -1 +1,2 @@
@import "./settings.scss"; @import "./settings.scss";
@import "./components/connexion.scss";
Write Preview
Loading…
Cancel
Save