Templates Formulaires

.login-form { background:#fff; border-radius:20px; border:1px solid #e5e7eb; padding:40px; max-width:420px; width:100%; }
.login-form h2 { font-size:1.5rem; font-weight:800; color:#1A1A2E; margin-bottom:6px; }
.login-form > p { color:#6b7280; font-size:.875rem; margin-bottom:28px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:.875rem; font-weight:600; color:#1A1A2E; margin-bottom:8px; }
.form-group label span { color:#FF6584; }
.form-group input {
  width:100%; padding:12px 16px;
  background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:12px;
  color:#1A1A2E; font-size:.875rem; outline:none; transition:all .2s;
}
.form-group input:focus { border-color:#6C63FF; box-shadow:0 0 0 4px rgba(108,99,255,.12); background:#fff; }
.form-group input.error   { border-color:#EF4444; }
.form-group input.success { border-color:#10B981; }
.form-error { font-size:.75rem; color:#EF4444; margin-top:4px; display:none; }
.form-error.show { display:block; }
.form-forgot { display:block; text-align:right; font-size:.8rem; color:#6C63FF; text-decoration:none; margin-bottom:20px; font-weight:600; }
.form-submit {
  width:100%; padding:13px; background:linear-gradient(135deg,#6C63FF,#0FCCCE);
  color:white; border:none; border-radius:999px; font-size:.875rem; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(108,99,255,.35); }
.form-footer { text-align:center; font-size:.875rem; color:#6b7280; margin-top:20px; }
.form-footer a { color:#6C63FF; font-weight:600; text-decoration:none; }
.form-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); border-radius:12px; padding:14px; text-align:center; color:#10B981; font-weight:600; font-size:.875rem; margin-top:16px; }

const loginForm = document.getElementById('login-form');

// Validation en temps réel
loginForm.querySelector('#email').addEventListener('input', validateEmail);
loginForm.querySelector('#password').addEventListener('input', validatePassword);

function validateEmail() {
  const input = document.getElementById('email');
  const error = document.getElementById('email-error');
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim());
  setFieldState(input, error, isValid || !input.value);
  return isValid;
}

function validatePassword() {
  const input = document.getElementById('password');
  const error = document.getElementById('password-error');
  const isValid = input.value.length >= 6;
  setFieldState(input, error, isValid || !input.value);
  return isValid;
}

function setFieldState(input, error, isValid) {
  input.classList.toggle('error',   !isValid);
  input.classList.toggle('success',  isValid && input.value !== '');
  error.classList.toggle('show',    !isValid && input.value !== '');
}

loginForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const emailOk = validateEmail();
  const passOk  = validatePassword();
  if (emailOk && passOk) {
    document.getElementById('form-success').removeAttribute('hidden');
  }
});

// Indicateur de force du mot de passe
function checkPasswordStrength(password) {
  let score = 0;
  if (password.length >= 8)             score++;
  if (/[A-Z]/.test(password))          score++;
  if (/[0-9]/.test(password))          score++;
  if (/[^A-Za-z0-9]/.test(password))   score++;
  return score;
}

document.getElementById('password').addEventListener('input', function() {
  const score = checkPasswordStrength(this.value);
  const bar   = document.getElementById('strength-bar');
  const hint  = document.getElementById('strength-hint');
  const colors = ['#EF4444','#F59E0B','#3B82F6','#10B981'];
  const labels = ['Très faible','Faible','Moyen','Fort'];
  bar.style.width  = (score * 25) + '%';
  bar.style.background = colors[score - 1] || '#e5e7eb';
  hint.textContent = score > 0 ? labels[score - 1] : 'Entrez 8 caractères minimum';
});

// Validation formulaire
document.getElementById('register-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const email   = document.getElementById('email');
  const pass    = document.getElementById('password');
  const confirm = document.getElementById('confirm');
  const cgu     = document.getElementById('cgu');
  let valid = true;

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    showError('email-error'); valid = false;
  } else hideError('email-error');

  if (pass.value !== confirm.value) {
    showError('confirm-error'); valid = false;
  } else hideError('confirm-error');

  if (valid && cgu.checked) {
    document.getElementById('success-msg').removeAttribute('hidden');
  }
});

function showError(id) { document.getElementById(id).classList.add('show'); }
function hideError(id)  { document.getElementById(id).classList.remove('show'); }

document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault();
  let valid = true;

  const name    = document.getElementById('name');
  const email   = document.getElementById('email');
  const message = document.getElementById('message');

  // Nom
  if (!name.value.trim()) {
    showErr(name, 'name-error'); valid = false;
  } else clearErr(name, 'name-error');

  // Email
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    showErr(email, 'email-error'); valid = false;
  } else clearErr(email, 'email-error');

  // Message
  if (message.value.trim().length < 10) {
    showErr(message, 'message-error'); valid = false;
  } else clearErr(message, 'message-error');

  if (valid) {
    document.getElementById('form-success').removeAttribute('hidden');
    this.reset();
  }
});

function showErr(input, errId) {
  input.classList.add('error');
  input.classList.remove('success');
  document.getElementById(errId).classList.add('show');
}
function clearErr(input, errId) {
  input.classList.remove('error');
  input.classList.add('success');
  document.getElementById(errId).classList.remove('show');
}

document.getElementById('nl-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const email = document.getElementById('nl-email');
  const error = document.getElementById('nl-error');
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());

  if (!isValid) {
    email.classList.add('error');
    error.classList.add('show');
    return;
  }

  email.classList.remove('error');
  error.classList.remove('show');
  document.getElementById('nl-success').removeAttribute('hidden');
  this.style.display = 'none';
});

const ITEMS = [
  { label:'Navbar Simple', tags:['html','css'] },
  { label:'Navbar Dashboard', tags:['html','css','js'] },
  { label:'Footer Newsletter', tags:['html','css','js'] },
  { label:'Product Card', tags:['html','css'] },
  { label:'Login Form', tags:['html','css','js'] },
];

let activeFilter = 'all';

function searchItems(query) {
  const q = query.trim().toLowerCase();
  return ITEMS.filter(item => {
    const matchQ = !q || item.label.toLowerCase().includes(q);
    const matchF = activeFilter === 'all' || item.tags.includes(activeFilter);
    return matchQ && matchF;
  });
}

document.getElementById('search-input').addEventListener('input', function() {
  renderResults(searchItems(this.value));
});

document.querySelectorAll('.filter-chip').forEach(chip => {
  chip.addEventListener('click', function() {
    document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
    this.classList.add('active');
    activeFilter = this.dataset.filter;
    renderResults(searchItems(document.getElementById('search-input').value));
  });
});

document.getElementById('clear-btn').addEventListener('click', function() {
  document.getElementById('search-input').value = '';
  renderResults([]);
});

function renderResults(items) {
  const container = document.getElementById('results-container');
  if (!items.length) { container.innerHTML = ''; return; }
  container.innerHTML = items.map(i =>
    `<div class="search-result">${i.label}</div>`
  ).join('');
}

let currentStep = 1;

function goToStep(step) {
  // Masquer toutes les étapes
  document.querySelectorAll('.checkout-step').forEach(s => s.setAttribute('hidden', ''));
  // Afficher l'étape demandée
  document.getElementById(`checkout-step-${step}`).removeAttribute('hidden');
  // Mettre à jour les indicateurs
  document.querySelectorAll('.step').forEach((el, i) => {
    el.classList.toggle('active',   i < step);
    el.classList.toggle('complete', i < step - 1);
  });
  currentStep = step;
}

// Formater le numéro de carte (XXXX XXXX XXXX XXXX)
document.getElementById('card-num').addEventListener('input', function() {
  let val = this.value.replace(/\D/g, '').slice(0, 16);
  this.value = val.match(/.{1,4}/g)?.join(' ') ?? val;
});

// Formater la date d'expiration (MM/AA)
document.getElementById('expiry').addEventListener('input', function() {
  let val = this.value.replace(/\D/g, '').slice(0, 4);
  if (val.length >= 2) val = val.slice(0,2) + '/' + val.slice(2);
  this.value = val;
});

// Navigation
document.getElementById('next-1').addEventListener('click', () => {
  const name = document.getElementById('full-name').value.trim();
  const addr = document.getElementById('address').value.trim();
  if (name && addr) goToStep(2);
});

document.getElementById('prev-2').addEventListener('click', () => goToStep(1));
document.getElementById('next-2').addEventListener('click', () => {
  const card = document.getElementById('card-num').value.replace(/\s/g,'');
  if (card.length === 16) goToStep(3);
});

// Initialiser
goToStep(1);