3.3.8 - Akadálymentes azonosítás (minimum)

<!-- BEJELENTKEZÉSI ŰRLAP - Jelszókezelő-barát -->
<form id="bejelentkezes-form" class="login-form" novalidate>
  <div class="form-header">
    <h2>Bejelentkezés</h2>
    <p>Használja fiókadatait a bejelentkezéshez</p>
  </div>
  
  <div class="form-group">
    <label for="felhasznalonev">Felhasználónév vagy e-mail cím</label>
    <input 
      type="text" 
      id="felhasznalonev" 
      name="felhasznalonev" 
      required
      autocomplete="username"
      aria-describedby="felhasznalonev-help"
    >
    <div id="felhasznalonev-help" class="field-help">
      Adja meg felhasználónevét vagy regisztrált e-mail címét
    </div>
  </div>
  
  <div class="form-group">
    <label for="jelszo">Jelszó</label>
    <input 
      type="password" 
      id="jelszo" 
      name="jelszo" 
      required
      autocomplete="current-password"
      aria-describedby="jelszo-help"
    >
    <!-- FONTOS: Nincs onpaste="return false;" vagy hasonló korlátozás! -->
    <div id="jelszo-help" class="field-help">
      Adja meg jelszavát. Használhatja jelszókezelőjét is.
    </div>
  </div>
  
  <div class="form-group remember-me">
    <label>
      <input type="checkbox" name="emlekezz_ram" value="1">
      Emlékezz rám ezen az eszközön
    </label>
  </div>
  
  <div class="form-actions">
    <button type="submit" class="btn-primary">Bejelentkezés</button>
    <a href="/jelszo-visszaallitas" class="forgot-link">Elfelejtette jelszavát?</a>
  </div>
  
  <!-- Alternatív bejelentkezési módok -->
  <div class="alternative-login">
    <p>Vagy jelentkezzen be:</p>
    <button type="button" id="biometrikus-belepes" class="btn-secondary">
      <svg aria-hidden="true" class="icon-fingerprint" width="20" height="20">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
      </svg>
      Ujjlenyomat használata
    </button>
    
    <button type="button" id="magic-link" class="btn-secondary">
      <svg aria-hidden="true" class="icon-email" width="20" height="20">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      Bejelentkezési link küldése e-mailben
    </button>
  </div>
</form>

<script>
  const bejelentkezesForm = document.getElementById('bejelentkezes-form');
  const biometrikusGomb = document.getElementById('biometrikus-belepes');
  const magikusLinkGomb = document.getElementById('magikus-link');
  
  // Biometrikus bejelentkezés
  biometrikusGomb.addEventListener('click', async function() {
    try {
      // Web Authentication API használata
      const credential = await navigator.credentials.get({
        publicKey: {
          challenge: new Uint8Array(32),
          timeout: 60000,
          userVerification: "preferred"
        }
      });
      
      if (credential) {
        console.log('Biometrikus hitelesítés sikeres');
        // Bejelentkezés feldolgozása
        window.location.href = '/fooldal';
      }
    } catch (error) {
      console.error('Biometrikus hitelesítés hiba:', error);
      alert('A biometrikus bejelentkezés nem sikerült. Kérjük, használja a hagyományos bejelentkezést.');
    }
  });
  
  // Mágikus link küldése
  magikusLinkGomb.addEventListener('click', function() {
    const email = prompt('Adja meg e-mail címét a bejelentkezési link fogadásához:');
    
    if (email && emailValidacio(email)) {
      // Itt történne a mágikus link küldése
      alert(`Bejelentkezési link elküldve a(z) ${email} címre. Kérjük, ellenőrizze postaládáját.`);
    } else if (email) {
      alert('Kérjük, érvényes e-mail címet adjon meg.');
    }
  });
  
  // Hagyományos bejelentkezés
  bejelentkezesForm.addEventListener('submit', function(esemeny) {
    esemeny.preventDefault();
    
    const felhasznalonev = document.getElementById('felhasznalonev').value;
    const jelszo = document.getElementById('jelszo').value;
    
    if (felhasznalonev && jelszo) {
      // Itt történne a bejelentkezés validálása
      console.log('Bejelentkezési kísérlet:', felhasznalonev);
      
      // Sikeres bejelentkezés szimulálása
      alert('Sikeres bejelentkezés!');
      window.location.href = '/fooldal';
    }
  });
  
  function emailValidacio(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }
</script>

<!-- ÚJ JELSZÓ LÉTREHOZÁSA - Másolás-beillesztés támogatással -->
<form id="uj-jelszo-form" class="password-form">
  <div class="form-header">
    <h2>Új jelszó létrehozása</h2>
    <p>Erős jelszót javaslunk, amelyet jelszókezelőben tárolhat</p>
  </div>
  
  <div class="form-group">
    <label for="uj-jelszo">Új jelszó</label>
    <input 
      type="password" 
      id="uj-jelszo" 
      name="uj_jelszo" 
      required
      minlength="8"
      autocomplete="new-password"
      aria-describedby="jelszo-kovetelmenyek jelszo-javaslat"
    >
    <!-- Nincs beillesztés blokkolás! -->
    
    <div id="jelszo-kovetelmenyek" class="password-requirements">
      <h3>Jelszó követelmények:</h3>
      <ul>
        <li id="hossz-kovetel">Legalább 8 karakter</li>
        <li id="nagybetu-kovetel">Legalább egy nagybetű</li>
        <li id="kisbetu-kovetel">Legalább egy kisbetű</li>
        <li id="szam-kovetel">Legalább egy szám</li>
      </ul>
    </div>
    
    <div id="jelszo-javaslat" class="password-suggestion">
      <p><strong>Tipp:</strong> Használjon jelszókezelőt biztonságos jelszó generálásához és tárolásához. A legtöbb böngésző beépített jelszókezelővel rendelkezik.</p>
      <button type="button" id="jelszo-generalas" class="btn-link">
        Biztonságos jelszó generálása
      </button>
    </div>
  </div>
  
  <div class="form-group">
    <label for="jelszo-megersites">Jelszó megerősítése</label>
    <input 
      type="password" 
      id="jelszo-megersites" 
      name="jelszo_megersites" 
      required
      autocomplete="new-password"
      aria-describedby="megersites-help"
    >
    <div id="megersites-help" class="field-help">
      Másolja be vagy írja be újra a jelszót
    </div>
  </div>
  
  <div class="form-actions">
    <button type="submit" class="btn-primary">Jelszó beállítása</button>
  </div>
</form>
<script>
  const ujJelszoForm = document.getElementById('uj-jelszo-form');
  const ujJelszoMezo = document.getElementById('uj-jelszo');
  const jelszoGeneralasGomb = document.getElementById('jelszo-generalas');
  
  // Jelszó generálás
  jelszoGeneralasGomb.addEventListener('click', function() {
    const generaltJelszo = generjBiztonsagosJelszot();
    ujJelszoMezo.value = generaltJelszo;
    ujJelszoMezo.type = 'text'; // Ideiglenesen láthatóvá tesszük
    
    // Másolás vágólapra
    navigator.clipboard.writeText(generaltJelszo).then(() => {
      alert('A generált jelszó a vágólapra került másolásra. Használja Ctrl+V a beillesztéshez.');
    });
    
    // 5 másodperc után elrejtjük
    setTimeout(() => {
      ujJelszoMezo.type = 'password';
    }, 5000);
    
    // Követelmények frissítése
    ellenorizJelszoKovetelmenyek();
  });
  
  // Jelszó követelmények valós idejű ellenőrzése
  ujJelszoMezo.addEventListener('input', ellenorizJelszoKovetelmenyek);
  
  function ellenorizJelszoKovetelmenyek() {
    const jelszo = ujJelszoMezo.value;
    
    // Hossz
    const hosszElem = document.getElementById('hossz-kovetel');
    if (jelszo.length >= 8) {
      hosszElem.classList.add('teljesitve');
      hosszElem.setAttribute('aria-label', 'Teljesítve: Legalább 8 karakter');
    } else {
      hosszElem.classList.remove('teljesitve');
      hosszElem.setAttribute('aria-label', 'Nem teljesítve: Legalább 8 karakter');
    }
    
    // Nagybetű
    const nagybetuElem = document.getElementById('nagybetu-kovetel');
    if (/[A-Z]/.test(jelszo)) {
      nagybetuElem.classList.add('teljesitve');
    } else {
      nagybetuElem.classList.remove('teljesitve');
    }
    
    // Kisbetű
    const kisbetuElem = document.getElementById('kisbetu-kovetel');
    if (/[a-z]/.test(jelszo)) {
      kisbetuElem.classList.add('teljesitve');
    } else {
      kisbetuElem.classList.remove('teljesitve');
    }
    
    // Szám
    const szamElem = document.getElementById('szam-kovetel');
    if (/[0-9]/.test(jelszo)) {
      szamElem.classList.add('teljesitve');
    } else {
      szamElem.classList.remove('teljesitve');
    }
  }
  
  function generjBiztonsagosJelszot() {
    const karakterek = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    let jelszo = '';
    
    // Biztosítjuk, hogy minden követelmény teljesüljön
    jelszo += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(Math.random() * 26)];
    jelszo += 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)];
    jelszo += '0123456789'[Math.floor(Math.random() * 10)];
    jelszo += '!@#$%^&*'[Math.floor(Math.random() * 8)];
    
    // Többi karakter
    for (let i = 4; i < 16; i++) {
      jelszo += karakterek[Math.floor(Math.random() * karakterek.length)];
    }
    
    // Összekeverés
    return jelszo.split('').sort(() => Math.random() - 0.5).join('');
  }
</script>
<style>
  .password-requirements li {
    color: #dc3545;
  }
  
  .password-requirements li.teljesitve {
    color: #28a745;
  }
  
  .password-requirements li.teljesitve::before {
    content: '✓ ';
  }
  
  .password-suggestion {
    background-color: #e7f3ff;
    padding: 12px;
    border-radius: 4px;
    margin-top: 8px;
  }
  
  .btn-link {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }
</style>

<!-- TÖBBFAKTOROS HITELESÍTÉS - Kognitív teszt nélkül -->
<div id="mfa-valasztas" class="mfa-options">
  <h2>Kétfaktoros hitelesítés</h2>
  <p>Válasszon egy módszert a személyazonosság megerősítéséhez:</p>
  
  <div class="mfa-methods">
    <!-- SMS kód opció -->
    <button type="button" class="mfa-method" id="sms-modszer">
      <svg aria-hidden="true" class="method-icon" width="48" height="48">
        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
      </svg>
      <h3>SMS kód</h3>
      <p>Kódot küldünk a +36******789 számra</p>
    </button>
    
    <!-- Hitelesítő alkalmazás -->
    <button type="button" class="mfa-method" id="app-modszer">
      <svg aria-hidden="true" class="method-icon" width="48" height="48">
        <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
      </svg>
      <h3>Hitelesítő alkalmazás</h3>
      <p>Használja Google Authenticator vagy hasonló alkalmazását</p>
    </button>
    
    <!-- Biometrikus hitelesítés -->
    <button type="button" class="mfa-method" id="biometrikus-modszer">
      <svg aria-hidden="true" class="method-icon" width="48" height="48">
        <path d="M17.81 4.47c-.8 0-1.54.3-2.1.84l-3.15 3.15c-.56.56-.84 1.3-.84 2.1s.28 1.54.84 2.1l6.27 6.27c.56.56 1.3.84 2.1.84s1.54-.28 2.1-.84l3.16-3.16c.56-.56.84-1.3.84-2.1s-.28-1.54-.84-2.1l-6.27-6.27c-.57-.55-1.31-.83-2.11-.83zm0 5.83c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25-1.25-.56-1.25-1.25.56-1.25 1.25-1.25z"/>
      </svg>
      <h3>Ujjlenyomat vagy arcfelismerés</h3>
      <p>Használja eszköze biometrikus azonosítóját</p>
    </button>
    
    <!-- Biztonsági kulcs -->
    <button type="button" class="mfa-method" id="kulcs-modszer">
      <svg aria-hidden="true" class="method-icon" width="48" height="48">
        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
      </svg>
      <h3>Biztonsági kulcs</h3>
      <p>Helyezze be USB vagy NFC biztonsági kulcsát</p>
    </button>
  </div>
  
  <div class="mfa-help">
    <p>Problémája van a bejelentkezéssel?</p>
    <a href="/mfa-segitseg">Alternatív bejelentkezési módok</a>
  </div>
</div>

<!-- SMS KÓD BEVITEL -->
<div id="sms-kod-bevitel" class="mfa-input" style="display: none;">
  <h2>Adja meg az SMS-ben kapott kódot</h2>
  <p>6 számjegyű kódot küldtünk a telefonjára</p>
  
  <form id="sms-kod-form">
    <div class="kod-bevitel">
      <label for="sms-kod" class="sr-only">6 számjegyű kód</label>
      <input 
        type="text" 
        id="sms-kod" 
        name="sms_kod" 
        inputmode="numeric"
        pattern="[0-9]{6}"
        maxlength="6"
        autocomplete="one-time-code"
        aria-describedby="kod-help"
        required
      >
      <div id="kod-help" class="field-help">
        Adja meg a telefonján kapott 6 számjegyű kódot
      </div>
    </div>
    
    <div class="form-actions">
      <button type="submit" class="btn-primary">Megerősítés</button>
      <button type="button" class="btn-secondary" id="kod-ujrakuldes">
        Új kód küldése
      </button>
    </div>
  </form>
  
  <div class="alternative-option">
    <p>Nem kapja meg a kódot?</p>
    <button type="button" id="mas-modszer" class="btn-link">
      Próbáljon másik módszert
    </button>
  </div>
</div>

<script>
  // MFA módszer választás
  const mfaModszerek = document.querySelectorAll('.mfa-method');
  const mfaValasztas = document.getElementById('mfa-valasztas');
  const smsKodBevitel = document.getElementById('sms-kod-bevitel');
  const masModszerGomb = document.getElementById('mas-modszer');
  
  // SMS módszer választása
  document.getElementById('sms-modszer').addEventListener('click', function() {
    mfaValasztas.style.display = 'none';
    smsKodBevitel.style.display = 'block';
    document.getElementById('sms-kod').focus();
    
    // SMS küldés szimulálása
    console.log('SMS kód elküldve');
  });
  
  // Biometrikus módszer
  document.getElementById('biometrikus-modszer').addEventListener('click', async function() {
    try {
      const credential = await navigator.credentials.get({
        publicKey: {
          challenge: new Uint8Array(32),
          timeout: 60000,
          userVerification: "required"
        }
      });
      
      if (credential) {
        alert('Biometrikus hitelesítés sikeres!');
        window.location.href = '/fooldal';
      }
    } catch (error) {
      alert('A biometrikus hitelesítés nem sikerült. Kérjük, válasszon másik módszert.');
    }
  });
  
  // Vissza a módszer választáshoz
  masModszerGomb.addEventListener('click', function() {
    smsKodBevitel.style.display = 'none';
    mfaValasztas.style.display = 'block';
  });
  
  // SMS kód ellenőrzés
  document.getElementById('sms-kod-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const kod = document.getElementById('sms-kod').value;
    
    if (kod.length === 6) {
      console.log('Kód ellenőrzése:', kod);
      alert('Sikeres hitelesítés!');
      window.location.href = '/fooldal';
    }
  });
  
  // Új kód küldése
  document.getElementById('kod-ujrakuldes').addEventListener('click', function() {
    alert('Új kód elküldve a telefonjára');
    document.getElementById('sms-kod').value = '';
    document.getElementById('sms-kod').focus();
  });
</script>

<style>
  .mfa-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
  }
  
  .mfa-method {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .mfa-method:hover, .mfa-method:focus {
    border-color: #007bff;
    background: #e7f3ff;
  }
  
  .method-icon {
    fill: #007bff;
    margin-bottom: 12px;
  }
  
  .mfa-method h3 {
    margin: 12px 0 8px;
    font-size: 18px;
  }
  
  .mfa-method p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
  }
  
  .kod-bevitel input {
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    width: 200px;
    padding: 12px;
  }
</style>

<!-- JELSZÓ VISSZAÁLLÍTÁS - Világos segítséggel -->
<div class="password-reset-container">
  <h2>Jelszó visszaállítása</h2>
  
  <div class="help-section">
    <p><strong>Elfelejtette jelszavát?</strong> Nincs probléma! Az alábbi módszerek egyikével állíthatja vissza:</p>
    
    <div class="reset-options">
      <div class="reset-option">
        <h3>1. módszer: E-mail alapú visszaállítás</h3>
        <p>Visszaállítási linket küldünk a regisztrált e-mail címére</p>
        <button type="button" id="email-reset" class="btn-primary">
          E-mail küldése
        </button>
      </div>
      
      <div class="reset-option">
        <h3>2. módszer: SMS kód</h3>
        <p>Kódot küldünk a regisztrált telefonszámára</p>
        <button type="button" id="sms-reset" class="btn-primary">
          SMS küldése
        </button>
      </div>
      
      <div class="reset-option">
        <h3>3. módszer: Ügyfélszolgálat</h3>
        <p>Beszéljen munkatársunkkal személyes segítségért</p>
        <a href="tel:+3612345678" class="btn-secondary">
          <svg aria-hidden="true" width="20" height="20">
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
          </svg>
          +36 1 234 5678
        </a>
      </div>
    </div>
  </div>
  
  <div class="additional-help">
    <h3>Hasznos tippek:</h3>
    <ul>
      <li>Használjon <strong>jelszókezelőt</strong> a jelszavak biztonságos tárolásához</li>
      <li>A böngészője is <strong>eltárolhatja a jelszavakat</strong> az Ön számára</li>
      <li>Írja le jelszavát egy <strong>biztonságos helyre</strong>, ahol csak Ön fér hozzá</li>
      <li>Fontolja meg a <strong>biometrikus bejelentkezés</strong> beállítását a jövőben</li>
    </ul>
  </div>
  
  <div class="password-manager-info">
    <h3>Ajánlott jelszókezelők:</h3>
    <p>Ezek az eszközök segítenek a jelszavak biztonságos tárolásában és automatikus kitöltésében:</p>
    <ul>
      <li>A böngészője beépített jelszókezelője (Chrome, Firefox, Safari, Edge)</li>
      <li>1Password, LastPass, Bitwarden, Dashlane</li>
      <li>iCloud Kulcskarika (Apple eszközökön)</li>
      <li>Google Jelszókezelő</li>
    </ul>
  </div>
</div>

<!-- E-MAIL ALAPÚ VISSZAÁLLÍTÁS -->
<div id="email-reset-form" style="display: none;">
  <h2>Jelszó visszaállítása e-mailben</h2>
  <form>
    <div class="form-group">
      <label for="reset-email">E-mail cím</label>
      <input 
        type="email" 
        id="reset-email" 
        name="email" 
        required
        autocomplete="email"
        aria-describedby="reset-email-help"
      >
      <div id="reset-email-help" class="field-help">
        Adja meg a fiókjához tartozó e-mail címet
      </div>
    </div>
    
    <div class="form-actions">
      <button type="submit" class="btn-primary">
        Visszaállítási link küldése
      </button>
      <button type="button" class="btn-secondary" onclick="showResetOptions()">
        Vissza
      </button>
    </div>
  </form>
</div>

<script>
  function showResetOptions() {
    document.querySelector('.password-reset-container').style.display = 'block';
    document.getElementById('email-reset-form').style.display = 'none';
  }
  
  document.getElementById('email-reset').addEventListener('click', function() {
    document.querySelector('.password-reset-container').style.display = 'none';
    document.getElementById('email-reset-form').style.display = 'block';
    document.getElementById('reset-email').focus();
  });
</script>

<!-- ROSSZ GYAKORLAT - Kognitív teszt alternatíva nélkül -->
<form>
  <label for="felhasznalo">Felhasználónév</label>
  <input type="text" id="felhasznalo" name="felhasznalo">
  
  <label for="jelszo">Jelszó</label>
  <input type="password" id="jelszo" name="jelszo">
  
  <!-- ROSSZ: Kognitív kihívás -->
  <label for="captcha">Bizonyítsa, hogy nem robot: Mennyi 3 + 4?</label>
  <input type="text" id="captcha" name="captcha" required>
  
  <button type="submit">Bejelentkezés</button>
</form>
<!-- Nincs alternatíva vagy segítség -->

<!-- ROSSZ GYAKORLAT - Beillesztés blokkolása -->
<input 
  type="password" 
  id="jelszo" 
  onpaste="return false;" 
  oncopy="return false;" 
  oncut="return false;"
>
<!-- Megakadályozza a jelszókezelők használatát -->

<!-- ROSSZ GYAKORLAT - Bonyolult vizuális CAPTCHA -->
<div class="captcha">
  <img src="captcha-image.jpg" alt="CAPTCHA kép">
  <label for="captcha-input">Írja be a képen látható karaktereket:</label>
  <input type="text" id="captcha-input" required>
</div>
<!-- Nincs audio alternatíva vagy egyszerűbb opció -->

<!-- ROSSZ GYAKORLAT - Memória alapú biztonsági kérdések -->
<form>
  <label for="biztonsagi-kerdes">Mi volt az első háziállata neve?</label>
  <input type="text" id="biztonsagi-kerdes" required>
  <!-- Nincs alternatív módszer -->
  <button type="submit">Folytatás</button>
</form>

<!-- ROSSZ GYAKORLAT - Bonyolult jelszó követelmények -->
<form>
  <label for="uj-jelszo">Új jelszó</label>
  <input 
    type="password" 
    id="uj-jelszo" 
    name="jelszo"
    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{12,}$"
    title="A jelszónak tartalmaznia kell legalább 12 karaktert, nagybetűt, kisbetűt, számot és speciális karaktert"
    required
  >
  <!-- Nincs segítség vagy jelszógenerátor -->
  <button type="submit">Jelszó beállítása</button>
</form>

<!-- ROSSZ GYAKORLAT - Időkorlátos kognitív teszt -->
<div class="time-limited-challenge">
  <h3>Biztonsági ellenőrzés</h3>
  <p>Megoldás ideje: <span id="countdown">30</span> másodperc</p>
  
  <div class="math-challenge">
    <p>Oldja meg: 27 + 45 - 18 + 36 = ?</p>
    <input type="number" id="math-answer" required>
  </div>
  
  <button type="submit" id="submit-challenge">Elküldés</button>
</div>

<script>
  // ROSSZ: Időnyomás alatt kognitív feladat
  let timeLeft = 30;
  const countdown = setInterval(() => {
    timeLeft--;
    document.getElementById('countdown').textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(countdown);
      alert('Időtúllépés! Próbálja újra.');
      location.reload();
    }
  }, 1000);
</script>