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() protected function connection()
{ {
global $twig; global $twig;
echo $twig->render('connection.html', []); echo $twig->render('connexion.html', []);
} }
protected function inscription() 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; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
color: black;
} }
a{
text-decoration: none;
}
body{ body{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background: #2f363e; background: #fff;
} }
.container{ .container{
position: relative; position: relative;
width: 350px; width: 500px;
min-height: 500px; min-height: 500px;
display: flex; display: inline;
justify-content: center; justify-content: center;
align-items: 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; border-radius: 30px;
padding: 50px; padding: 50px;
} }
@ -34,7 +36,7 @@ form{
width: 100%; width: 100%;
} }
.container h3{ .container h3{
color: #fff; color: #000;
font-weight: 600; font-weight: 600;
font-size: 2em; font-size: 2em;
width: 100%; width: 100%;
@ -51,12 +53,12 @@ form{
} }
.CadreInput span{ .CadreInput span{
display: inline-block; display: inline-block;
color: #fff; color: #000;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 0.75em; font-size: 0.75em;
border-left: 4px solid #fff; border-left: 4px solid #000;
padding-left: 4px; padding-left: 4px;
line-height: 1em; line-height: 1em;
} }
@ -67,17 +69,14 @@ form{
position: relative; position: relative;
min-width: 40px; min-width: 40px;
height: 40px; height: 40px;
background-color: #a50b12; background-color: #00DBFF;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
color: #fff; color: #000;
font-size: 1.15em; 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{ .CadreInput .box input{
position: relative; position: relative;
@ -85,40 +84,28 @@ form{
border: none; border: none;
outline: none; outline: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 30px; border-radius: 10px;
text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 0.85em; 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"]{ .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; color: #fff;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 600; font-weight: 600;
margin-top: 10px; 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{ .forgot{
color: #fff; color: #000;
text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 0.85em; font-size: 0.85em;
} }

21
php/css/erreur.css
Unescape View File

@ -6,9 +6,24 @@
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
} }
body{ body{
display: flex; display: inline;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; 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;
}

66
php/css/inscription.css
Unescape View File

@ -4,29 +4,30 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
color: black;
}
a{
text-decoration: none; text-decoration: none;
} }
body{ body{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background: #2f363e; background: #fff;
} }
.container{ .container{
position: relative; position: relative;
width: 350px; width: 500px;
min-height: 500px; min-height: 500px;
display: flex; display: inline;
justify-content: center; justify-content: center;
align-items: 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; border-radius: 30px;
padding: 50px; padding: 50px;
} }
@ -35,7 +36,7 @@ form{
width: 100%; width: 100%;
} }
.container h3{ .container h3{
color: #fff; color: #000;
font-weight: 600; font-weight: 600;
font-size: 2em; font-size: 2em;
width: 100%; width: 100%;
@ -52,12 +53,12 @@ form{
} }
.CadreInput span{ .CadreInput span{
display: inline-block; display: inline-block;
color: #fff; color: #000;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 0.75em; font-size: 0.75em;
border-left: 4px solid #fff; border-left: 4px solid #000;
padding-left: 4px; padding-left: 4px;
line-height: 1em; line-height: 1em;
} }
@ -68,17 +69,14 @@ form{
position: relative; position: relative;
min-width: 40px; min-width: 40px;
height: 40px; height: 40px;
background-color: #a50b12; background-color: #00DBFF;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
color: #fff; color: #000;
font-size: 1.15em; 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{ .CadreInput .box input{
position: relative; position: relative;
@ -86,40 +84,28 @@ form{
border: none; border: none;
outline: none; outline: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 30px; border-radius: 10px;
text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 0.85em; 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"]{ .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; color: #fff;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 600; font-weight: 600;
margin-top: 10px; 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; letter-spacing: 1px;
font-size: 0.85em; font-size: 0.85em;
} }

5
php/vues/accueil.html
Unescape View File

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

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

@ -3,17 +3,18 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<form action="" method="POST"> <form action="" method="POST">
<h3>S'identifier</h3> <h3>Connexion</h3>
<div class="CadreInput"> <div class="CadreInput">
<span>Identifiant</span> <span>Identifiant</span>
<div class="box"> <div class="box">
<div class="icon"><ion-icon name="person"></ion-icon> <div class="icon">
<ion-icon name="person"></ion-icon>
</div> </div>
<input type="text" name="username" required> <input type="text" name="username" required>
</div> </div>
@ -21,25 +22,26 @@
<div class="CadreInput"> <div class="CadreInput">
<span>Mot de passe</span> <span>Mot de passe</span>
<div class="box"> <div class="box">
<div class="icon"><ion-icon name="lock-closed"></ion-icon> <div class="icon">
<ion-icon name="lock-closed"></ion-icon>
</div> </div>
<input type="password" name="password" required> <input type="password" name="password" required>
</div> </div>
</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="CadreInput">
<div class="box"> <div class="box">
<div class="icon"></div> <input type="submit" value="Se connecter">
<input type="submit" value="S'identifier">
</div> </div>
</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> </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> </div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <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> <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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>Alica - Erreur</title>
</head> </head>

21
php/vues/inscription.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save