leo.tuaillon
/
SAE_2A_FA-Reseau_ALICA
3
2
Fork 0
Code Issues 18 Pull Requests 2 Packages Projects 1 Releases Wiki Activity

Mise à jour des vues de connexion/inscription

Browse Source
gateway
Alexis FERON 1 year ago
parent 29b08cf4bb
commit c6bdecbbb5
10 changed files with 134 additions and 245 deletions
Show Stats Download Patch File Download Diff File

2
php/controleur/UtilisateurControleur.php
Unescape View File

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

30
php/css/accueil.css
Unescape View File

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

140
php/css/connection.css
Unescape View File

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

63
php/css/index.css → php/css/connexion.css
Unescape View File

@ -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;
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);
background: #fff;
box-shadow: 10px 10px 20px #fff,
-10px -10px 20px #ccc;
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;
text-transform: uppercase;
border-radius: 10px;
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);
border: #00DBFF 2px solid;
}
.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);
background-color: #00DBFF;
color: #fff;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-top: 10px;
border: none;
}
label{
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85em;
display: flex;
align-items: center;
}
label input{
margin-right: 5px;
.CadreInput .box input[type="submit"].other{
background-color: #fff;
color: #00DBFF;
margin-right: 15px;
}
.forgot{
color: #fff;
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 0.85em;
}

19
php/css/erreur.css
Unescape View File

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

64
php/css/inscription.css
Unescape View File

@ -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;
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);
background: #fff;
box-shadow: 10px 10px 20px #fff,
-10px -10px 20px #ccc;
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;
text-transform: uppercase;
border-radius: 10px;
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);
border: #00DBFF 2px solid;
}
.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);
background-color: #00DBFF;
color: #fff;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-top: 10px;
border: none;
}
label{
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85em;
display: flex;
align-items: center;
}
label input{
margin-right: 5px;
.CadreInput .box input[type="submit"].other{
background-color: #fff;
color: #00DBFF;
margin-right: 15px;
}
.login{
color: #fff;
text-transform: uppercase;
.forgot{
color: #000;
letter-spacing: 1px;
font-size: 0.85em;
}

5
php/vues/accueil.html
Unescape View File

@ -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>

30
php/vues/connection.html → php/vues/connexion.html
Unescape View File

@ -3,17 +3,18 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alica - Connection</title>
<link rel="stylesheet" type="text/css" href="css/connection.css">
<title>Alica - Connexion</title>
<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,25 +22,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>
<label>
<input type="checkbox">Se souvenir de moi
</label>
<a href="#" class="forgot">Mot de passe oublié ?</a>
<div class="CadreInput">
<div class="box">
<div class="icon"></div>
<input type="submit" value="S'identifier">
<input type="submit" value="Se connecter">
</div>
</div>
<a href="#" class="forgot">Mot de passe oublié</a>
</form>
<form action="index.php?action=inscription" method="POST">
<input type="submit" value="S'inscrire">
</form>
<div class="CadreInput">
<div class="box">
<form action="index.php?action=inscription" method="POST">
<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>

1
php/vues/erreur.html
Unescape View File

@ -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>

21
php/vues/inscription.html
Unescape View File

@ -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,21 +31,25 @@
<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>
<form action="index.php?action=connection" method="POST">
<input type="submit" value="S'identifier">
</form>
<div class="CadreInput">
<div class="box">
<form action="index.php?action=connection" method="POST">
<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>

Write Preview
Loading…
Cancel
Save