Template Page Login – Bootstrap 5

Bootstrap 5 Login Page Auth Template Ui Login Snippets Html
Exemples de pages de connexion modernes et responsives en 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 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;800&display=swap" rel="stylesheet">
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      overflow-x: hidden;
    }

    /* Cercles décoratifs */
    .bg-shape {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .shape-1 {
      width: 600px;
      height: 600px;
      top: -200px;
      right: -100px;
    }

    .shape-2 {
      width: 400px;
      height: 400px;
      bottom: -100px;
      left: -50px;
    }

    .shape-3 {
      width: 250px;
      height: 250px;
      top: 40%;
      left: 60%;
    }

    /* Container principal */
    .login-container {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1100px;
    }

    /* Carte de login */
    .login-card {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 40px;
      overflow: hidden;
      box-shadow: 
        0 30px 60px -12px rgba(0,0,0,0.3),
        0 0 0 1px rgba(255,255,255,0.2) inset;
    }

    /* Colonne gauche (illustration) */
    .login-illustration {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      padding: 60px 40px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .login-illustration::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%);
      animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .illustration-content {
      position: relative;
      z-index: 1;
    }

    .illustration-icon {
      font-size: 80px;
      margin-bottom: 30px;
      color: #667eea;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .illustration-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    .illustration-text {
      font-size: 16px;
      opacity: 0.8;
      line-height: 1.6;
      margin-bottom: 40px;
    }

    .feature-list {
      list-style: none;
      padding: 0;
    }

    .feature-list li {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .feature-list i {
      color: #667eea;
      font-size: 20px;
      width: 24px;
    }

    /* Colonne droite (formulaire) */
    .login-form {
      padding: 60px 50px;
    }

    .form-header {
      margin-bottom: 40px;
    }

    .form-title {
      font-size: 32px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }

    .form-subtitle {
      color: #64748b;
      font-size: 15px;
    }

    .form-subtitle a {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s;
    }

    .form-subtitle a:hover {
      color: #764ba2;
    }

    /* Champs de formulaire */
    .input-group-custom {
      margin-bottom: 24px;
    }

    .input-label {
      display: block;
      font-weight: 500;
      color: #334155;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .input-wrapper {
      position: relative;
    }

    .input-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      font-size: 18px;
      transition: color 0.2s;
      z-index: 2;
    }

    .form-control-custom {
      width: 100%;
      padding: 14px 16px 14px 48px;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      font-size: 15px;
      color: #1e293b;
      background: white;
      transition: all 0.2s;
      outline: none;
    }

    .form-control-custom:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
    }

    .form-control-custom:focus + .input-icon,
    .input-wrapper:focus-within .input-icon {
      color: #667eea;
    }

    /* Toggle password */
    .password-toggle {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      cursor: pointer;
      transition: color 0.2s;
      z-index: 2;
      background: none;
      border: none;
      padding: 0;
    }

    .password-toggle:hover {
      color: #667eea;
    }

    /* Options (remember me + forgot password) */
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28px;
    }

    .checkbox-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .checkbox-wrapper input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: #667eea;
      cursor: pointer;
    }

    .checkbox-wrapper label {
      color: #475569;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }

    .forgot-link {
      color: #667eea;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }

    .forgot-link:hover {
      color: #764ba2;
    }

    /* Bouton de connexion */
    .btn-login {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s;
      box-shadow: 0 10px 25px -5px rgba(102,126,234,0.4);
      margin-bottom: 24px;
    }

    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px -5px rgba(102,126,234,0.5);
      background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    }

    .btn-login:active {
      transform: translateY(0);
    }

    /* Séparateur */
    .divider {
      display: flex;
      align-items: center;
      text-align: center;
      color: #94a3b8;
      font-size: 14px;
      margin: 24px 0;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid #e2e8f0;
    }

    .divider span {
      padding: 0 16px;
    }

    /* Boutons sociaux */
    .social-login {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
    }

    .btn-social {
      flex: 1;
      padding: 12px;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      background: white;
      color: #475569;
      font-weight: 500;
      font-size: 14px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-social:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .btn-social i {
      font-size: 18px;
    }

    .btn-google i {
      color: #ea4335;
    }

    .btn-github i {
      color: #333;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .login-illustration {
        padding: 40px 30px;
      }
      
      .login-form {
        padding: 40px 35px;
      }
      
      .illustration-title {
        font-size: 26px;
      }
    }

    @media (max-width: 768px) {
      body {
        padding: 15px;
      }
      
      .login-card {
        border-radius: 30px;
      }
      
      .login-illustration {
        padding: 40px 30px;
        text-align: center;
      }
      
      .feature-list li {
        justify-content: center;
      }
      
      .login-form {
        padding: 35px 25px;
      }
      
      .form-title {
        font-size: 28px;
      }
      
      .social-login {
        flex-direction: column;
      }
    }

    @media (max-width: 576px) {
      .login-form {
        padding: 30px 20px;
      }
      
      .form-options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
    }

    /* Animation d'entrée */
    .login-card {
      animation: slideUp 0.6s ease-out;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Message d'erreur (optionnel) */
    .alert-custom {
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 12px;
      padding: 12px 16px;
      color: #dc2626;
      font-size: 14px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Tooltip personnalisé */
    .tooltip-custom {
      position: relative;
    }
  </style>
</head>
<body>
  <!-- Formes décoratives -->
  <div class="bg-shape shape-1"></div>
  <div class="bg-shape shape-2"></div>
  <div class="bg-shape shape-3"></div>

  <!-- Container principal -->
  <div class="login-container">
    <div class="login-card">
      <div class="row g-0">
        <!-- Colonne gauche : Illustration -->
        <div class="col-lg-6">
          <div class="login-illustration">
            <div class="illustration-content">
              <div class="illustration-icon">
                <i class="bi bi-shield-lock"></i>
              </div>
              
              <h2 class="illustration-title">Bienvenue !</h2>
              
              <p class="illustration-text">
                Connectez-vous pour accéder à votre espace personnel et profiter de tous nos services.
              </p>
              
              <ul class="feature-list">
                <li>
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Tableau de bord personnalisé</span>
                </li>
                <li>
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Synchronisation multi-appareils</span>
                </li>
                <li>
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Support prioritaire 24/7</span>
                </li>
                <li>
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Mises à jour exclusives</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- Colonne droite : Formulaire -->
        <div class="col-lg-6">
          <div class="login-form">
            <div class="form-header">
              <h1 class="form-title">Connexion</h1>
              <p class="form-subtitle">
                Pas encore de compte ? <a href="#">Inscrivez-vous gratuitement</a>
              </p>
            </div>
            
            <!-- Formulaire -->
            <form id="loginForm" onsubmit="handleLogin(event)">
              <!-- Champ Email -->
              <div class="input-group-custom">
                <label class="input-label" for="email">
                  <i class="bi bi-envelope me-1"></i>Adresse email
                </label>
                <div class="input-wrapper">
                  <i class="bi bi-envelope input-icon"></i>
                  <input 
                    type="email" 
                    class="form-control-custom" 
                    id="email" 
                    placeholder="vous@exemple.com" 
                    required
                    autocomplete="email"
                  >
                </div>
              </div>
              
              <!-- Champ Mot de passe -->
              <div class="input-group-custom">
                <label class="input-label" for="password">
                  <i class="bi bi-key me-1"></i>Mot de passe
                </label>
                <div class="input-wrapper">
                  <i class="bi bi-lock input-icon"></i>
                  <input 
                    type="password" 
                    class="form-control-custom" 
                    id="password" 
                    placeholder="••••••••" 
                    required
                    autocomplete="current-password"
                  >
                  <button type="button" class="password-toggle" onclick="togglePassword()">
                    <i class="bi bi-eye" id="toggleIcon"></i>
                  </button>
                </div>
              </div>
              
              <!-- Options -->
              <div class="form-options">
                <div class="checkbox-wrapper">
                  <input type="checkbox" id="remember" checked>
                  <label for="remember">Se souvenir de moi</label>
                </div>
                <a href="#" class="forgot-link">
                  <i class="bi bi-question-circle me-1"></i>Mot de passe oublié ?
                </a>
              </div>
              
              <!-- Bouton de connexion -->
              <button type="submit" class="btn-login">
                <i class="bi bi-box-arrow-in-right me-2"></i>Se connecter
              </button>
              
              <!-- Séparateur -->
              <div class="divider">
                <span>ou continuer avec</span>
              </div>
              
              <!-- Connexion sociale -->
              <div class="social-login">
                <button type="button" class="btn-social btn-google" onclick="socialLogin('google')">
                  <i class="bi bi-google"></i>
                  Google
                </button>
                <button type="button" class="btn-social btn-github" onclick="socialLogin('github')">
                  <i class="bi bi-github"></i>
                  GitHub
                </button>
                <button type="button" class="btn-social" onclick="socialLogin('microsoft')">
                  <i class="bi bi-microsoft"></i>
                  Microsoft
                </button>
              </div>
              
              <!-- Mentions légales -->
              <div class="text-center mt-3">
                <small class="text-muted">
                  En vous connectant, vous acceptez nos 
                  <a href="#" class="text-decoration-none">Conditions d'utilisation</a> 
                  et notre 
                  <a href="#" class="text-decoration-none">Politique de confidentialité</a>
                </small>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <div class="text-center mt-4">
      <p class="text-white-50 mb-0">
        <i class="bi bi-shield-check me-1"></i>
        Connexion sécurisée · Cryptage SSL 256-bit
      </p>
    </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 soumission du formulaire
    function handleLogin(event) {
      event.preventDefault();
      
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      const remember = document.getElementById('remember').checked;
      
      // Animation du bouton
      const btn = event.target.querySelector('button[type="submit"]');
      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 (à remplacer par votre logique)
      setTimeout(() => {
        console.log('Tentative de connexion:', { email, password, remember });
        
        // Exemple de validation simple
        if (email && password.length >= 6) {
          // Succès
          showNotification('Connexion réussie ! Redirection...', 'success');
          
          // Redirection après 1.5 secondes
          setTimeout(() => {
            // window.location.href = '/dashboard';
            console.log('Redirection vers dashboard');
            btn.innerHTML = originalText;
            btn.disabled = false;
          }, 1500);
        } else {
          // Erreur
          showNotification('Email ou mot de passe invalide', 'error');
          btn.innerHTML = originalText;
          btn.disabled = false;
        }
      }, 1000);
    }
    
    // Connexion sociale
    function socialLogin(provider) {
      console.log(`Connexion avec ${provider}...`);
      showNotification(`Redirection vers ${provider}...`, 'info');
      
      // Exemple: redirection vers OAuth
      // window.location.href = `/auth/${provider}`;
    }
    
    // Notification toast (simple)
    function showNotification(message, type = 'info') {
      // Créer un élément de notification
      const notification = document.createElement('div');
      notification.style.position = 'fixed';
      notification.style.top = '20px';
      notification.style.right = '20px';
      notification.style.padding = '16px 24px';
      notification.style.borderRadius = '16px';
      notification.style.color = 'white';
      notification.style.fontWeight = '500';
      notification.style.zIndex = '9999';
      notification.style.animation = 'slideIn 0.3s ease-out';
      notification.style.backdropFilter = 'blur(10px)';
      notification.style.boxShadow = '0 10px 30px rgba(0,0,0,0.2)';
      
      // Style selon le type
      if (type === 'success') {
        notification.style.background = 'linear-gradient(135deg, #10b981, #059669)';
        notification.innerHTML = '<i class="bi bi-check-circle me-2"></i>' + message;
      } else if (type === 'error') {
        notification.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
        notification.innerHTML = '<i class="bi bi-exclamation-circle me-2"></i>' + message;
      } else {
        notification.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
        notification.innerHTML = '<i class="bi bi-info-circle me-2"></i>' + message;
      }
      
      document.body.appendChild(notification);
      
      // Supprimer après 3 secondes
      setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => notification.remove(), 300);
      }, 3000);
    }
    
    // Ajouter les animations CSS pour les notifications
    const style = document.createElement('style');
    style.textContent = `
      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateX(100%);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      @keyframes slideOut {
        from {
          opacity: 1;
          transform: translateX(0);
        }
        to {
          opacity: 0;
          transform: translateX(100%);
        }
      }
    `;
    document.head.appendChild(style);
    
    // Animation au focus des champs
    document.querySelectorAll('.form-control-custom').forEach(input => {
      input.addEventListener('focus', function() {
        this.parentElement.parentElement.querySelector('.input-label').style.color = '#667eea';
      });
      
      input.addEventListener('blur', function() {
        this.parentElement.parentElement.querySelector('.input-label').style.color = '#334155';
      });
    });
  </script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
