Embed

<div style="font-family: 'Orbitron', sans-serif; max-width: 400px; margin: auto; text-align: center; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.05);">
  <h2 style="color: #d42b2b;">CEZIUM Code</h2>
  <label for="codeInput" style="display:block; margin-bottom: 8px; color: #555; font-weight: bold;">Code affiché à l'écran :</label>
  <input id="codeInput" maxlength="4" placeholder="Ex : 6707" style="width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 10px; margin-bottom: 15px;" />
  <button onclick="generatePassword()" style="width: 100%; padding: 12px; background-color: #f34b4b; color: white; border: none; border-radius: 10px; font-weight: bold; cursor: pointer;">Générer le mot de passe</button>
  <div id="result" style="margin-top: 20px; font-size: 18px; font-weight: bold; color: #444;">Code :</div>
</div>

<script>
function generatePassword() {
  const code = document.getElementById("codeInput").value;
  if (code.length === 4 && /^[0-9]{4}$/.test(code)) {
    const A = parseInt(code[0]);
    const B = parseInt(code[1]);
    const C = parseInt(code[2]);
    const D = parseInt(code[3]);
    const x = (C + 5) % 10;
    const y = (D + 6) % 10;
    const z = (A + 7) % 10;
    const w = (B + 8) % 10;
    document.getElementById("result").innerText = `Code : ${x}${y}${z}${w}`;
  } else {
    document.getElementById("result").innerText = "Veuillez entrer un code valide à 4 chiffres.";
  }
}
</script>
