Aquí tenéis un cuarto modelo, con un fondo animado real.

34 1 Animaciones appbudu Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Aquí tenéis un cuarto modelo, con un fondo animado real.

Recomendado

11 April 2026

Página de inicio de sesión HTML: Tema Matrix con autenticación por huella digital.

16 December 2024

Un código de smartfunction263

9 September 2025

Página de reserva de hotel HTML: habitaciones, servicios y contacto

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>saberhammouti– Connexion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="fond" aria-hidden="true"></canvas>
<main class="card">
  <p class="brand">SaberBudu</p>
  <div class="tabs" id="tabs" role="tablist">
    <button type="button" id="tab-login" role="tab" aria-selected="true">Connexion</button>
    <button type="button" id="tab-register" role="tab" aria-selected="false">Créer un compte</button>
  </div>

<section id="view-login">
    <h1>Connexion</h1>
    <p class="sub">Content de vous revoir.</p>
    <form id="login-form" novalidate>
      <label for="l-email">E-mail</label>
      <input id="l-email" type="email" autocomplete="email">
      <span class="error" id="l-email-err"></span>
      <label for="l-password">Mot de passe</label>
      <div class="pw"><input id="l-password" type="password" autocomplete="current-password"><button type="button">Afficher</button></div>
      <span class="error" id="l-password-err"></span>
      <button type="submit">Se connecter</button>
      <p id="l-msg" class="msg" role="alert"></p>
    </form>
  </section>

<section id="view-register" hidden>
    <h1>Créer un compte</h1>
    <p class="sub">Inscrivez-vous en quelques secondes.</p>
    <form id="register-form" novalidate>
      <label for="r-nom">Nom</label>
      <input id="r-nom" type="text" autocomplete="name">
      <span class="error" id="r-nom-err"></span>
      <label for="r-email">E-mail</label>
      <input id="r-email" type="email" autocomplete="email">
      <span class="error" id="r-email-err"></span>
      <label for="r-password">Mot de passe</label>
      <div class="pw"><input id="r-password" type="password" autocomplete="new-password"><button type="button">Afficher</button></div>
      <span class="error" id="r-password-err"></span>
      <label for="r-password2">Confirmer le mot de passe</label>
      <input id="r-password2" type="password" autocomplete="new-password">
      <span class="error" id="r-password2-err"></span>
      <button type="submit">Créer mon compte</button>
      <p id="r-msg" class="msg" role="alert"></p>
    </form>
  </section>

<section id="view-home" hidden>
    <h1 id="welcome">Bonjour !</h1>
    <p class="sub">Connecté avec <strong id="user-email"></strong>.</p>
    <button id="logout" type="button">Se déconnecter</button>
  </section>
</main>
<script src="fond.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS

:root{--ink:#0f2742;--muted:#5a6f87;--line:#cdd9e6;--accent:#0b7bd6;--accent-d:#095fa8;--err:#c0213a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;background:linear-gradient(135deg,#071a33,#0d3560,#0a2447,#12467a);background-size:300% 300%;animation:grad 16s ease infinite}
@keyframes grad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
#fond{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.card{position:relative;z-index:1;width:100%;max-width:410px;padding:32px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:enter .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.brand{margin:0 0 16px;font-size:1.5rem;font-weight:800;color:var(--accent)}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:20px;border-bottom:1px solid var(--line)}
.tabs::after{content:"";position:absolute;left:0;bottom:-1px;width:50%;height:3px;background:var(--accent);border-radius:3px;transition:transform .35s cubic-bezier(.5,1.3,.5,1)}
.tabs:has(#tab-register[aria-selected="true"])::after{transform:translateX(100%)}
.tabs button{margin:0;padding:10px;border:0;background:none;color:var(--muted);font-weight:700;font-size:1rem;cursor:pointer;transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--accent)}
section{animation:swap .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
h1{margin:0 0 4px;font-size:1.5rem}
.sub{margin:0 0 6px;color:var(--muted)}
label{display:block;margin:14px 0 6px;font-size:.88rem;font-weight:600}
input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:1rem;color:var(--ink);transition:border-color .25s,box-shadow .25s}
input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(11,123,214,.15)}
input.invalid{border-color:var(--err);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.error{display:block;min-height:1.1em;margin-top:4px;color:var(--err);font-size:.8rem}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:9px;font-size:.9rem;display:none}
.msg.err{display:block;background:#fcebee;color:var(--err)}
.msg.ok{display:block;background:#e3f1fc;color:var(--accent-d)}
form>button[type=submit],#logout{width:100%;margin-top:22px;padding:12px;border:0;border-radius:9px;background:var(--accent);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
form>button[type=submit]:hover,#logout:hover{background:var(--accent-d);transform:translateY(-2px)}
button:focus-visible{outline:3px solid #7cc0f5;outline-offset:2px}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:6px;width:auto;margin:0;padding:6px 10px;border:0;border-radius:7px;background:none;color:var(--accent);font-size:.8rem;font-weight:600;cursor:pointer}
.pw button:hover{background:#e3f1fc}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

(() => {
  const c = document.getElementById('fond'), ctx = c.getContext('2d');
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const mouse = {x: -999, y: -999};
  let w, h, pts;
  function init() {
    const d = devicePixelRatio || 1;
    w = innerWidth; h = innerHeight;
    c.width = w * d; c.height = h * d;
    ctx.setTransform(d, 0, 0, d, 0, 0);
    const n = Math.min(110, Math.floor(w * h / 12000));
    pts = Array.from({length: n}, () => ({
      x: Math.random() * w, y: Math.random() * h,
      vx: (Math.random() - .5) * .6, vy: (Math.random() - .5) * .6,
      r: Math.random() * 1.8 + .8
    }));
  }
  function frame() {
    ctx.clearRect(0, 0, w, h);
    for (const p of pts) {
      if (!reduce) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > w) p.vx *= -1;
        if (p.y < 0 || p.y > h) p.vy *= -1;
        const dx = p.x - mouse.x, dy = p.y - mouse.y, d2 = dx * dx + dy * dy;
        if (d2 < 14000) { p.x += dx / 40; p.y += dy / 40; }
      }
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, 6.283);
      ctx.fillStyle = 'rgba(125,211,252,.9)';
      ctx.fill();
    }
    for (let i = 0; i < pts.length; i++) for (let j = i + 1; j < pts.length; j++) {
      const dx = pts[i].x - pts[j].x, dy = pts[i].y - pts[j].y, d = Math.hypot(dx, dy);
      if (d < 140) {
        ctx.strokeStyle = `rgba(125,211,252,${(1 - d / 140) * .35})`;
        ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[j].x, pts[j].y); ctx.stroke();
      }
    }
    if (!reduce) requestAnimationFrame(frame);
  }
  addEventListener('resize', () => { init(); if (reduce) frame(); });
  addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
  addEventListener('mouseleave', () => { mouse.x = mouse.y = -999; });
  init(); frame();
})();

function show(view){
  ['login','register','home'].forEach(v=>$('#view-'+v).hidden=v!==view);
  $('#tabs').hidden=view==='home';
  $('#tab-login').setAttribute('aria-selected',view==='login');
  $('#tab-register').setAttribute('aria-selected',view==='register');
  if(view==='home'){const s=read('session');$('#welcome').textContent='Bonjour '+s.nom+' !';$('#user-email').textContent=s.email}
}
$('#tab-login').onclick=()=>show('login');
$('#tab-register').onclick=()=>show('register');

document.querySelectorAll('.pw button').forEach(b=>b.addEventListener('click',()=>{
  const i=b.parentElement.querySelector('input');
  i.type=i.type==='password'?'text':'password';
  b.textContent=i.type==='password'?'Afficher':'Masquer';
}));

$('#register-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const nom=$('#r-nom').value.trim(),email=$('#r-email').value.trim().toLowerCase();
  const pw=$('#r-password').value,pw2=$('#r-password2').value;
  const ok=[
    setErr('r-nom',nom.length<2?'Entrez votre nom (2 caractères minimum).':''),
    setErr('r-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
    setErr('r-password',pw.length<8?'8 caractères minimum.':''),
    setErr('r-password2',pw!==pw2?'Les mots de passe ne correspondent pas.':'')
  ].every(Boolean);
  if(!ok)return;
  const users=read('users')||[];
  if(users.some(u=>u.email===email))return banner('r-msg','Un compte existe déjà avec cet e-mail. Connectez-vous.','err');
  users.push({nom,email,hash:await hash(pw)});
  write('users',users);
  e.target.reset();
  $('#l-email').value=email;
  show('login');
  banner('l-msg','Compte créé. Vous pouvez vous connecter.','ok');
});

$('#login-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const email=$('#l-email').value.trim().toLowerCase(),pw=$('#l-password').value;
  const ok=[setErr('l-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
            setErr('l-password',pw?'':'Entrez votre mot de passe.')].every(Boolean);
  if(!ok)return;
  const user=(read('users')||[]).find(u=>u.email===email);
  if(!user||user.hash!==await hash(pw))return banner('l-msg','E-mail ou mot de passe incorrect.','err');
  write('session',{nom:user.nom,email:user.email});
  e.target.reset();$('#l-msg').className='msg';
  show('home');
});

$('#logout').onclick=()=>{localStorage.removeItem('session');show('login')};
show(read('session')?'home':'login');

Comentarios 1

…