Login
Facebook Style
Bootstrap 5
Responsive
Html
Css
Formulaire
Authentification
Snippet
Design
Connexion
Template
Template de page connexion inspiré du design Facebook en Bootstrap 5. Interface familière avec formulaire centré, fond bleu et boutons stylisés pour l'auth.
<!DOCTYPE html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Facebook Page Login Bootstrap 5 01 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
background: #f0f2f5;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.facebook-container {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
/* Colonne gauche */
.fb-left {
padding-right: 32px;
margin-top: -40px;
}
.fb-logo {
margin-bottom: -10px;
}
.fb-logo img {
height: 106px;
margin-left: -28px;
}
.fb-logo-text {
font-size: 60px;
font-weight: 800;
color: #1877f2;
letter-spacing: -1px;
margin-bottom: 10px;
}
.fb-slogan {
font-size: 28px;
font-weight: 400;
line-height: 32px;
color: #1c1e21;
margin-top: 16px;
max-width: 500px;
}
/* Colonne droite - Carte de connexion */
.fb-right {
padding-left: 0;
}
.login-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 28px;
text-align: center;
}
.form-control-fb {
width: 100%;
padding: 14px 16px;
border: 1px solid #dddfe2;
border-radius: 6px;
font-size: 17px;
color: #1d2129;
margin-bottom: 12px;
outline: none;
transition: border-color 0.2s;
}
.form-control-fb:focus {
border-color: #1877f2;
box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
}
.form-control-fb::placeholder {
color: #90949c;
}
.btn-login {
width: 100%;
padding: 12px;
background: #1877f2;
color: white;
border: none;
border-radius: 6px;
font-size: 20px;
font-weight: 700;
line-height: 48px;
cursor: pointer;
transition: background 0.2s;
margin-bottom: 16px;
}
.btn-login:hover {
background: #166fe5;
}
.forgot-link {
color: #1877f2;
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: inline-block;
margin-bottom: 20px;
}
.forgot-link:hover {
text-decoration: underline;
}
.divider-fb {
border-bottom: 1px solid #dadde1;
margin: 20px 0;
}
.btn-create {
background: #42b72a;
color: white;
border: none;
border-radius: 6px;
padding: 12px 16px;
font-size: 17px;
font-weight: 700;
line-height: 36px;
cursor: pointer;
transition: background 0.2s;
display: inline-block;
margin: 8px 0 4px;
}
.btn-create:hover {
background: #36a420;
}
.create-page-text {
text-align: center;
font-size: 14px;
color: #1c1e21;
}
.create-page-text a {
color: #1c1e21;
font-weight: 700;
text-decoration: none;
}
.create-page-text a:hover {
text-decoration: underline;
}
/* Footer */
.fb-footer {
max-width: 980px;
margin: 0 auto;
padding-top: 20px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 8px;
}
.footer-links a {
color: #737373;
text-decoration: none;
font-size: 12px;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-divider {
border-bottom: 1px solid #dddfe2;
margin: 8px 0;
}
.footer-copyright {
color: #737373;
font-size: 11px;
margin-top: 20px;
}
/* Password wrapper */
.password-wrapper {
position: relative;
}
.password-toggle {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #90949c;
cursor: pointer;
background: none;
border: none;
padding: 0;
font-size: 18px;
}
.password-toggle:hover {
color: #1877f2;
}
/* Responsive */
@media (max-width: 992px) {
.fb-left {
text-align: center;
padding-right: 0;
margin-top: 0;
margin-bottom: 30px;
}
.fb-slogan {
font-size: 24px;
margin: 0 auto;
}
.fb-logo-text {
font-size: 50px;
}
}
@media (max-width: 768px) {
body {
padding: 12px;
}
.fb-slogan {
font-size: 20px;
max-width: 400px;
}
.login-card {
padding: 16px;
}
}
@media (max-width: 576px) {
.fb-logo-text {
font-size: 42px;
}
.fb-slogan {
font-size: 18px;
max-width: 300px;
}
.form-control-fb {
padding: 12px 14px;
font-size: 15px;
}
.btn-login {
font-size: 18px;
line-height: 42px;
}
}
/* Animation */
.login-card {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loading spinner */
.spinner-border-sm {
width: 1.2rem;
height: 1.2rem;
border-width: 0.15em;
}
</style>
</head>
<body>
<div class="facebook-container">
<div class="row align-items-center">
<!-- Colonne gauche : Logo et slogan -->
<div class="col-lg-6 fb-left">
<div class="fb-logo">
<div class="fb-logo-text">facebook</div>
</div>
<h2 class="fb-slogan">
Avec Facebook, partagez et restez en contact avec votre entourage.
</h2>
</div>
<!-- Colonne droite : Formulaire de connexion -->
<div class="col-lg-6 fb-right">
<div class="login-card">
<form id="loginForm" onsubmit="handleLogin(event)">
<!-- Champ Email/Téléphone -->
<input
type="text"
class="form-control-fb"
id="email"
placeholder="Adresse e-mail ou numéro de tél."
required
autocomplete="email"
>
<!-- Champ Mot de passe -->
<div class="password-wrapper">
<input
type="password"
class="form-control-fb"
id="password"
placeholder="Mot de passe"
required
autocomplete="current-password"
>
<button type="button" class="password-toggle" onclick="togglePassword()" aria-label="Afficher/Masquer le mot de passe">
<i aria-hidden="true" class="bi bi-eye" id="toggleIcon"></i>
</button>
</div>
<!-- Bouton Connexion -->
<button type="submit" class="btn-login" id="loginBtn">
Se connecter
</button>
<!-- Lien Mot de passe oublié -->
<div>
<a href="#" class="forgot-link" onclick="showForgotPassword(event)">
Mot de passe oublié ?
</a>
</div>
<!-- Séparateur -->
<div class="divider-fb"></div>
<!-- Bouton Créer un compte -->
<button type="button" class="btn-create" onclick="showCreateAccount()">
Créer nouveau compte
</button>
</form>
</div>
<!-- Lien Créer une Page -->
<div class="create-page-text">
<a href="#"><strong>Créer une Page</strong></a> pour une célébrité, une marque ou une entreprise.
</div>
</div>
</div>
<!-- Footer -->
<div class="fb-footer">
<div class="footer-links">
<a href="#">Français</a>
<a href="#">English (US)</a>
<a href="#">Español</a>
<a href="#">العربية</a>
<a href="#">Italiano</a>
<a href="#">Deutsch</a>
<a href="#">Português (Brasil)</a>
<a href="#">中文(简体)</a>
<a href="#">日本語</a>
<a href="#">हिन्दी</a>
<button class="btn btn-link p-0 border-0" style="font-size: 12px; color: #737373;" onclick="showMoreLanguages()" aria-label="Afficher plus de langues">
<i aria-hidden="true" class="bi bi-plus-lg"></i>
</button>
</div>
<div class="footer-divider"></div>
<div class="footer-links">
<a href="#">S'inscrire</a>
<a href="#">Se connecter</a>
<a href="#">Messenger</a>
<a href="#">Facebook Lite</a>
<a href="#">Vidéo</a>
<a href="#">Lieux</a>
<a href="#">Jeux</a>
<a href="#">Marketplace</a>
<a href="#">Meta Pay</a>
<a href="#">Meta Store</a>
<a href="#">Meta Quest</a>
<a href="#">Imagine with Meta AI</a>
<a href="#">Instagram</a>
<a href="#">Threads</a>
<a href="#">Collectes de dons</a>
<a href="#">Services</a>
<a href="#">Centre d'information sur les élections</a>
<a href="#">Confidentialité</a>
<a href="#">Centre de confidentialité</a>
<a href="#">Groupes</a>
<a href="#">À propos</a>
<a href="#">Créer une publicité</a>
<a href="#">Créer une Page</a>
<a href="#">Développeurs</a>
<a href="#">Emplois</a>
<a href="#">Cookies</a>
<a href="#">Choisir sa publicité</a>
<a href="#">Conditions générales</a>
<a href="#">Aide</a>
<a href="#">Importation des contacts et non-utilisateurs</a>
</div>
<div class="footer-copyright">
Meta © 2024
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Toggle password visibility
function togglePassword() {
const passwordInput = document.getElementById('password');
const toggleIcon = document.getElementById('toggleIcon');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleIcon.classList.remove('bi-eye');
toggleIcon.classList.add('bi-eye-slash');
} else {
passwordInput.type = 'password';
toggleIcon.classList.remove('bi-eye-slash');
toggleIcon.classList.add('bi-eye');
}
}
// Gestion de la connexion
function handleLogin(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const btn = document.getElementById('loginBtn');
// Animation du bouton
const originalText = btn.innerHTML;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Connexion...';
btn.disabled = true;
// Simulation de connexion
setTimeout(() => {
// console.log('Tentative de connexion:', { email, password });
// Validation simple
if (email && password.length >= 6) {
// Succès
showNotification('Connexion réussie ! Redirection...', 'success');
setTimeout(() => {
// window.location.href = '/';
// console.log('Redirection vers l\'accueil');
btn.innerHTML = originalText;
btn.disabled = false;
}, 1500);
} else {
// Erreur
showNotification('L\'adresse e-mail ou le mot de passe que vous avez saisi(e) n\'est pas associé(e) à un compte.', 'error');
btn.innerHTML = originalText;
btn.disabled = false;
}
}, 1000);
}
// Mot de passe oublié
function showForgotPassword(event) {
event.preventDefault();
const email = document.getElementById('email').value || 'votre adresse e-mail';
// Créer un modal simple
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(255,255,255,0.95)';
modal.style.zIndex = '9999';
modal.style.display = 'flex';
modal.style.alignItems = 'center';
modal.style.justifyContent = 'center';
modal.style.padding = '20px';
modal.innerHTML = `
<div style="background: white; max-width: 500px; width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); padding: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h3 style="font-size: 20px; font-weight: 700; margin: 0;">Réinitialiser votre mot de passe</h3>
<button onclick="this.closest('div').parentElement.remove()" style="border: none; background: none; font-size: 24px; cursor: pointer; color: #606770;">×</button>
</div>
<p style="color: #606770; margin-bottom: 16px;">Veuillez saisir votre adresse e-mail ou votre numéro de téléphone pour rechercher votre compte.</p>
<input type="text" class="form-control-fb" placeholder="Adresse e-mail ou numéro de tél." value="${email}" style="margin-bottom: 16px;">
<div style="display: flex; gap: 10px; justify-content: flex-end;">
<button onclick="this.closest('div').parentElement.remove()" style="padding: 8px 24px; background: #e4e6eb; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">Annuler</button>
<button onclick="sendResetEmail(this)" style="padding: 8px 24px; background: #1877f2; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">Rechercher</button>
</div>
</div>
`;
document.body.appendChild(modal);
}
function sendResetEmail(btn) {
const originalText = btn.innerHTML;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Envoi...';
btn.disabled = true;
setTimeout(() => {
showNotification('Un e-mail de réinitialisation a été envoyé.', 'success');
btn.closest('div').parentElement.remove();
}, 1500);
}
// Créer un compte
function showCreateAccount() {
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(255,255,255,0.95)';
modal.style.zIndex = '9999';
modal.style.display = 'flex';
modal.style.alignItems = 'center';
modal.style.justifyContent = 'center';
modal.style.padding = '20px';
modal.style.overflowY = 'auto';
modal.innerHTML = `
<div style="background: white; max-width: 432px; width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); padding: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<h3 style="font-size: 32px; font-weight: 700; margin: 0;">S'inscrire</h3>
<button onclick="this.closest('div').parentElement.remove()" style="border: none; background: none; font-size: 24px; cursor: pointer; color: #606770;">×</button>
</div>
<p style="color: #606770; margin-bottom: 16px;">C'est rapide et facile.</p>
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
<input type="text" class="form-control-fb" placeholder="Prénom" style="margin-bottom: 0;">
<input type="text" class="form-control-fb" placeholder="Nom" style="margin-bottom: 0;">
</div>
<input type="text" class="form-control-fb" placeholder="Numéro de mobile ou e-mail">
<input type="password" class="form-control-fb" placeholder="Nouveau mot de passe">
<div style="margin-bottom: 10px;">
<label style="font-size: 12px; color: #606770;">Date de naissance</label>
<div style="display: flex; gap: 10px;">
<select class="form-control-fb" style="margin-bottom: 0;">
<option>1</option><option>15</option><option>31</option>
</select>
<select class="form-control-fb" style="margin-bottom: 0;">
<option>Jan</option><option>Juin</option><option>Déc</option>
</select>
<select class="form-control-fb" style="margin-bottom: 0;">
<option>2024</option><option>2000</option><option>1990</option>
</select>
</div>
</div>
<div style="margin-bottom: 10px;">
<label style="font-size: 12px; color: #606770;">Genre</label>
<div style="display: flex; gap: 10px;">
<label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #dddfe2; border-radius: 6px; flex: 1;">
<input type="radio" name="gender" value="Femme"> Femme
</label>
<label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #dddfe2; border-radius: 6px; flex: 1;">
<input type="radio" name="gender" value="Homme"> Homme
</label>
<label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #dddfe2; border-radius: 6px; flex: 1;">
<input type="radio" name="gender" value="Autre"> Autre
</label>
</div>
</div>
<p style="font-size: 11px; color: #777; margin-bottom: 16px;">
En cliquant sur S'inscrire, vous acceptez nos <a href="#">Conditions générales</a>, notre <a href="#">Politique de confidentialité</a> et notre <a href="#">Politique d'utilisation des cookies</a>.
</p>
<div style="text-align: center;">
<button onclick="registerAccount(this)" style="background: #42b72a; color: white; border: none; border-radius: 6px; padding: 8px 32px; font-size: 18px; font-weight: 700; cursor: pointer;">S'inscrire</button>
</div>
</div>
`;
document.body.appendChild(modal);
}
function registerAccount(btn) {
const originalText = btn.innerHTML;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Inscription...';
btn.disabled = true;
setTimeout(() => {
showNotification('Compte créé avec succès !', 'success');
btn.closest('div').parentElement.remove();
}, 1500);
}
function showMoreLanguages() {
showNotification('Plus de langues disponibles', 'info');
}
// Notification
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.left = '50%';
notification.style.transform = 'translateX(-50%)';
notification.style.padding = '12px 24px';
notification.style.borderRadius = '6px';
notification.style.color = 'white';
notification.style.fontWeight = '500';
notification.style.zIndex = '10000';
notification.style.animation = 'fadeIn 0.3s ease-out';
notification.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
if (type === 'success') {
notification.style.background = '#42b72a';
notification.innerHTML = '<i aria-hidden="true" class="bi bi-check-circle me-2"></i>' + message;
} else if (type === 'error') {
notification.style.background = '#fa383e';
notification.innerHTML = '<i aria-hidden="true" class="bi bi-exclamation-circle me-2"></i>' + message;
} else {
notification.style.background = '#1877f2';
notification.innerHTML = '<i aria-hidden="true" class="bi bi-info-circle me-2"></i>' + message;
}
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'fadeOut 0.3s ease-out';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Ajouter les styles d'animation
const style = document.createElement('style');
style.textContent = `
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateX(-50%) translateY(0); }
to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
Télécharger le fichier source