Bootstrap 5
Facebook Login
Login Template
Auth Ui
Snippets Html
Reproduction de la page de connexion Facebook en version Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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()">
<i 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()">
<i 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 class="bi bi-check-circle me-2"></i>' + message;
} else if (type === 'error') {
notification.style.background = '#fa383e';
notification.innerHTML = '<i class="bi bi-exclamation-circle me-2"></i>' + message;
} else {
notification.style.background = '#1877f2';
notification.innerHTML = '<i 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>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur