Voici un quatrième modèle, avec un vrai fond animé

33 1 Animations appbudu Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Voici un quatrième modèle, avec un vrai fond animé

<!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');

Comments 1

…

Voici un quatrième modèle, avec un vrai fond animé

Recommended

Comments 1