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

30 1 Animations appbudu Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

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

Recommandé

13 October 2026

Jeu de course de voitures acrobatiques en 3D avec WebGL, développé en HTML et JavaScript.

12 April 2025

Un code par fadlanbryan22

4 December 2025

Page d'accueil du Samsung Galaxy S24 Ultra

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

Commentaires 1

…