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

modif css page admin (1)

Browse Source
master
Maxence LANONE 3 years ago
parent 4f10889d9e
commit 3f619eaed5
4 changed files with 39 additions and 58 deletions
Show Stats Download Patch File Download Diff File

5
src/App.js
Unescape View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Connexion from './pages/Connexion'; import Connexion from './pages/Connexion';
// import Admin from './pages/Admin.js'; import Admin from './pages/Admin.js';
const App = () => { const App = () => {
return ( return (
@ -11,7 +11,8 @@ const App = () => {
// </Routes> // </Routes>
//</BrowserRouter> //</BrowserRouter>
<Connexion /> <Admin/>
// <Connexion />
); );
} }

10
src/pages/Admin.js
Unescape View File

@ -23,23 +23,23 @@ const Admin = () => {
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">
<tr> <tr>
<p className="texte">Nom :</p> <p className="texte">Nom :</p>
<input id="nom" className="texte_zone" type="text"/> <input id="nom" className="texte_zone" type="text" placeholder="Nom"/>
</tr> </tr>
<tr> <tr>
<p className="texte">Prénom :</p> <p className="texte">Prénom :</p>
<input id="prénom" className="texte_zone" type="text"/> <input id="prénom" className="texte_zone" type="text" placeholder="Prénom"/>
</tr> </tr>
<tr> <tr>
<p className="texte">Rôle dans l'entreprise :</p> <p className="texte">Rôle dans l'entreprise :</p>
<input id="rôle" className="texte_zone" type="text"/> <input id="rôle" className="texte_zone" type="text" placeholder="Rôle"/>
</tr> </tr>
<tr> <tr>
<p className="texte">Identifiant :</p> <p className="texte">Identifiant :</p>
<input id="identifiant" className="texte_zone" type="text"/> <input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant"/>
</tr> </tr>
<tr> <tr>
<p className="texte">Mot de passe (par défaut) :</p> <p className="texte">Mot de passe (par défaut) :</p>
<input id="password" className="texte_zone" type="text"/> <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
</tr> </tr>
<tr> <tr>
<button className="bouton_val_ann" type="submit">Valider</button> <button className="bouton_val_ann" type="submit">Valider</button>

2
src/pages/Connexion.js
Unescape View File

@ -13,7 +13,7 @@ const Connexion = () => {
Connexion Connexion
</tr> </tr>
<tr> <tr>
<input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" /> <input id="pseudo" className="text_zone" type="text" placeholder="Identifiant" />
</tr> </tr>
<tr> <tr>
<input id="password" className="text_zone" type="password" placeholder="Mot de passe" /> <input id="password" className="text_zone" type="password" placeholder="Mot de passe" />

74
src/styles/components/_admin.scss
Unescape View File

@ -9,23 +9,23 @@
height: 753px; height: 753px;
border: 5px white inset; border: 5px white inset;
.create_user{ .create_user {
padding: 30px; padding: 30px;
align-self: center; align-self: center;
} }
.modify_user{ .modify_user {
padding: 30px; padding: 30px;
align-self: center; align-self: center;
} }
.delete_user{ .delete_user {
padding: 30px; padding: 30px;
align-self: center; align-self: center;
} }
.bouton{ .bouton {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -38,18 +38,19 @@
transition: 1s box-shadow; transition: 1s box-shadow;
cursor: pointer; cursor: pointer;
border: none; border: none;
box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
background-color: white; background-color: white;
} }
.bouton:hover{ .bouton:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0,0,0,1); box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white; color: white;
background-color: black; background-color: black;
} }
.bouton:hover::before, .bouton:hover::after{ .bouton:hover::before,
.bouton:hover::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -61,71 +62,48 @@
animation: 0.5s jiggle infinite; animation: 0.5s jiggle infinite;
} }
.bouton:hover::after{ .bouton:hover::after {
background: black; background: black;
animation: 1s jiggle infinite; animation: 1s jiggle infinite;
} }
@keyframes jiggle {
0% {
transform: translate(-5px, -5px);
}
14% {
transform: translate(0px, -5px);
}
28% {
transform: translate(5px, -5px);
}
42% {
transform: translate(5px, 0px);
}
57% {
transform: translate(5px, 5px);
}
71% {
transform: translate(0, 5px);
}
85% {
transform: translate(-5px, 5px);
}
100% {
transform: translate(-5px, 0);
}
}
} }
.Titre{ .Titre {
display: flex; display: flex;
font-weight: bold; font-weight: bold;
font-size: 80px; font-size: 80px;
margin: 20px; margin: 20px;
} }
.Formulaire{ .Formulaire {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.form{ .form {
align-self: center; align-self: center;
flex-direction: row; flex-direction: row;
font-size: 30px; font-size: 30px;
} }
.texte{ .texte {
align-self: center; align-self: center;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
} }
.texte_zone{ .texte_zone {
width: 600px; width: 600px;
height: 50px; height: 50px;
font-size: 30px; background-color: transparent;
border-radius: 5px;
border: 0.5px solid;
padding-left: 10px;
padding-right: 10px;
} }
.bouton_val_ann{ .bouton_val_ann {
width: 150px; width: 150px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
@ -133,16 +111,18 @@
color: $white; color: $white;
border: 0; border: 0;
background-color: black; background-color: black;
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px); backdrop-filter: blur(30px);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
&:hover{
&:hover {
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active{
background-color:rgba(68, 68, 68, 0.972); &:active {
background-color: rgba(68, 68, 68, 0.972);
} }
} }
} }
Write Preview
Loading…
Cancel
Save