<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<title>Login Form | Dan Aleko</title>
<link rel="stylesheet" href="styles.css" />
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<form action="login_process.php" method="post" onsubmit="return
validateForm()">
<h1>Connexion</h1>
<div class="input-box">
<input type="text" name="telephone" placeholder="Téléphone"
required>
<i class='bx bxs-phone'></i>
</div>
<div class="input-box">
<input type="password" name="password" id="password"
placeholder="Mot de passe" required>
<i class='bx bx-show' id="togglePassword" style="cursor:
pointer;"></i>
</div>
<div class="remember-forgot">
<label><input type="checkbox">Se souvenir de moi</label>
<a href="#">Mot de passe oublié ?</a>
</div>
<div id="error-message" class="error-message"></div>
<button type="submit" class="btn">Connexion</button>
<div class="register-link">
<p>Pas de compte ? <a href="#">S'inscrire</a></p>
</div>
</form>
</div>
<script>
const togglePassword = document.getElementById("togglePassword");
const passwordField = document.getElementById("password");
togglePassword.addEventListener("click", function () {
const type = passwordField.getAttribute("type") === "password" ?
"text" : "password";
passwordField.setAttribute("type", type);
this.classList.toggle("bx-show");
this.classList.toggle("bx-hide");
});
function validateForm() {
const tel = document.querySelector("input[name='telephone']").value;
const password =
document.querySelector("input[name='password']").value;
const errorMessage = document.getElementById("error-message");
// Exemple basique pour montrer le message (à remplacer par ta
vérification serveur)
if (tel !== "93000000" || password !== "password") {
errorMessage.textContent = "Téléphone ou mot de passe incorrect";
return false; // Empêche l'envoi du formulaire
return true; // Envoyer le formulaire si tout est correct
</script>
</body>
</html>
*{
Margin : 0 ;
Padding : 0 ;
Box-sizing : border-box ;
Font-family : « Poppins », sans-serif ;
Body{
Display : flex ;
Justify-content : center ;
Align-items : center ;
Min-height : 100vh ;
Background : url(bg.jpg) no-repeat ;
Background-size : cover ;
Background-position : center ;
.wrapper{
Width : 420px ;
Background : transparent ;
Border : 2px solid rgba(255, 255, 255, .2) ;
Backdrop-filter : blur(9px) ;
Color : #fff ;
Border-radius : 12px ;
Padding : 30px 40px ;
.wrapper h1{
Font-size : 36px ;
Text-align : center ;
.wrapper .input-box{
Position : relative ;
Width : 100% ;
Height : 50px ;
Margin : 30px 0 ;
.input-box input{
Width : 100% ;
Height : 100% ;
Background : transparent ;
Border : none ;
Outline : none ;
Border : 2px solid rgba(255, 255, 255, .2) ;
Border-radius : 40px ;
Font-size : 16px ;
Color : #fff ;
Padding : 20px 45px 20px 20px ;
.input-box input ::placeholder{
Color : #fff ;
.input-box i{
Position : absolute ;
Right : 20px ;
Top : 30% ;
Transform : translate(-50%) ;
Font-size : 20px ;
.wrapper .remember-forgot{
Display : flex ;
Justify-content : space-between ;
Font-size : 14.5px ;
Margin : -15px 0 15px ;
.remember-forgot label input{
Accent-color : #fff ;
Margin-right : 3px ;
.remember-forgot a{
Color : #fff ;
Text-decoration : none ;
.remember-forgot a :hover{
Text-decoration : underline ;
}
.wrapper .btn{
Width : 100% ;
Height : 45px ;
Background : #fff ;
Border : none ;
Outline : none ;
Border-radius : 40px ;
Box-shadow : 0 0 10px rgba(0, 0, 0, .1) ;
Cursor : pointer ;
Font-size : 16px ;
Color : #333 ;
Font-weight : 600 ;
.wrapper .register-link{
Font-size : 14.5px ;
Text-align : center ;
Margin : 20px 0 15px ;
.register-link p a{
Color : #fff ;
Text-decoration : none ;
Font-weight : 600 ;
.register-link p a :hover{
Text-decoration : underline ;
.error-message {
color: red;
text-align: center;
margin-bottom: 10px;
font-size: 14px;
