<?php
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/functions.php';

$page_title   = 'Password Generator – Generate Secure Passwords';
$page_desc    = 'Free password generator: create strong, secure passwords with custom length, character sets and options – on ipcheck.tools.';
$page_current = 'passwort';

require_once __DIR__ . '/header.php';
?>

<div class="hero">
  <div class="hero-label">Tool</div>
  <div class="hero-title">Password Generator</div>
  <div class="hero-sub">Generate strong, secure passwords instantly</div>
</div>

<div class="wrap">

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div class="card card-blue">
    <div class="card-title"><i class="ti ti-settings"></i> Options</div>

    <div style="margin-bottom:16px;">
      <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">
        Length: <span id="length-val" style="color:var(--blue-dim);">16</span> characters
      </label>
      <input type="range" id="pw-length" min="4" max="64" value="16"
             style="width:100%; accent-color:var(--blue);"
             oninput="document.getElementById('length-val').textContent=this.value; generatePassword();" />
      <div style="display:flex; justify-content:space-between; font-size:10px; color:var(--text4); margin-top:2px;">
        <span>4</span><span>64</span>
      </div>
    </div>

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;">
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-upper" checked onchange="generatePassword()" style="cursor:pointer;"> Uppercase (A-Z)
      </label>
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-lower" checked onchange="generatePassword()" style="cursor:pointer;"> Lowercase (a-z)
      </label>
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-numbers" checked onchange="generatePassword()" style="cursor:pointer;"> Numbers (0-9)
      </label>
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-symbols" checked onchange="generatePassword()" style="cursor:pointer;"> Symbols (!@#$...)
      </label>
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-similar" onchange="generatePassword()" style="cursor:pointer;"> Exclude similar (0,O,l,1)
      </label>
      <label style="display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-memorable" onchange="generatePassword()" style="cursor:pointer;"> Memorable password
      </label>
    </div>

    <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
      <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; white-space:nowrap;">Count:</label>
      <select id="pw-count" class="input-select" onchange="generatePassword()" style="width:120px;">
        <option value="1">1 password</option>
        <option value="3">3 passwords</option>
        <option value="5" selected>5 passwords</option>
        <option value="10">10 passwords</option>
      </select>
    </div>

    <button class="btn btn-primary" onclick="generatePassword()" style="width:100%;">
      <i class="ti ti-refresh"></i> Generate passwords
    </button>
  </div>

  <div class="card" id="results-card" style="display:none;">
    <div class="card-title"><i class="ti ti-lock-password"></i> Generated passwords</div>
    <div id="passwords-list"></div>
    <button class="copy-btn" onclick="copyAll()" style="margin-top:12px;">
      <i class="ti ti-copy"></i> Copy all
    </button>
  </div>

  <div class="card">
    <div class="card-title"><i class="ti ti-shield-check"></i> Password security tips</div>
    <div class="data-row"><span class="dk">Length</span><span class="dv" style="color:var(--green);">At least 16 characters</span></div>
    <div class="data-row"><span class="dk">Uniqueness</span><span class="dv" style="color:var(--green);">Different password for each account</span></div>
    <div class="data-row"><span class="dk">Password manager</span><span class="dv" style="color:var(--green);">Use Bitwarden or 1Password</span></div>
    <div class="data-row"><span class="dk">2FA</span><span class="dv" style="color:var(--green);">Enable two-factor authentication</span></div>
    <div class="data-row"><span class="dk">No words</span><span class="dv" style="color:var(--orange);">No names, dates or dictionary words</span></div>
  </div>

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div class="tools-row">
    <a href="/en/"            class="tool-btn"><i class="ti ti-home"></i><span>My IP</span></a>
    <a href="/en/passwort.php" class="tool-btn current"><i class="ti ti-lock-password"></i><span>Password</span></a>
    <a href="/en/hash.php"    class="tool-btn"><i class="ti ti-hash"></i><span>Hash</span></a>
    <a href="/en/base64.php"  class="tool-btn"><i class="ti ti-code"></i><span>Base64</span></a>
    <a href="/en/qr-generator.php" class="tool-btn"><i class="ti ti-qrcode"></i><span>QR Code</span></a>
  </div>

  <div class="seo-box">
    <h2>Secure password generator</h2>
    <p>A strong password should be at least 16 characters long and contain uppercase letters, lowercase letters, numbers and symbols. Avoid dictionary words, names or dates. Use a different password for each account and store them in a password manager like Bitwarden or 1Password. Enable two-factor authentication wherever possible for additional security.</p>
  </div>

<script>
const UPPER   = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const LOWER   = 'abcdefghijklmnopqrstuvwxyz';
const NUMBERS = '0123456789';
const SYMBOLS = '!@#$%^&*()_+-=[]{}|;:,.<>?';
const SIMILAR = /[0O1lI]/g;
const WORDS   = ['apple','brave','cloud','delta','eagle','flame','globe','happy','iron','jazz','kite','lemon','maple','night','ocean','piano','quest','river','storm','tiger','ultra','vapor','water','xenon','yacht','zebra','alpha','beta','gamma','nova','solar','lunar','pixel','cyber','swift','prime','nexus','sigma','vortex','crystal','thunder'];

function secureRandom(max) {
  const arr = new Uint32Array(1);
  crypto.getRandomValues(arr);
  return arr[0] % max;
}

function generatePassword() {
  const len        = parseInt(document.getElementById('pw-length').value);
  const count      = parseInt(document.getElementById('pw-count').value);
  const useUpper   = document.getElementById('opt-upper').checked;
  const useLower   = document.getElementById('opt-lower').checked;
  const useNumbers = document.getElementById('opt-numbers').checked;
  const useSymbols = document.getElementById('opt-symbols').checked;
  const noSimilar  = document.getElementById('opt-similar').checked;
  const memorable  = document.getElementById('opt-memorable').checked;

  if (memorable) {
    const passwords = [];
    for (let i = 0; i < count; i++) {
      let pw = '';
      while (pw.length < len - 4) pw += WORDS[secureRandom(WORDS.length)];
      pw += (secureRandom(99) + 1);
      pw += SYMBOLS[secureRandom(SYMBOLS.length)];
      if (pw.length > len) pw = pw.substring(0, len);
      passwords.push(pw);
    }
    displayPasswords(passwords);
    return;
  }

  let chars = '';
  if (useUpper)   chars += UPPER;
  if (useLower)   chars += LOWER;
  if (useNumbers) chars += NUMBERS;
  if (useSymbols) chars += SYMBOLS;
  if (noSimilar)  chars = chars.replace(SIMILAR, '');
  if (!chars) { alert('Please select at least one character type.'); return; }

  const passwords = [];
  for (let p = 0; p < count; p++) {
    let pw = '';
    if (useUpper)   { let c = noSimilar ? UPPER.replace(SIMILAR,'') : UPPER; pw += c[secureRandom(c.length)]; }
    if (useLower)   { let c = noSimilar ? LOWER.replace(SIMILAR,'') : LOWER; pw += c[secureRandom(c.length)]; }
    if (useNumbers) { let c = noSimilar ? NUMBERS.replace(SIMILAR,'') : NUMBERS; pw += c[secureRandom(c.length)]; }
    if (useSymbols) pw += SYMBOLS[secureRandom(SYMBOLS.length)];
    while (pw.length < len) pw += chars[secureRandom(chars.length)];
    pw = pw.split('').sort(() => secureRandom(3) - 1).join('');
    passwords.push(pw);
  }
  displayPasswords(passwords);
}

function displayPasswords(passwords) {
  const card = document.getElementById('results-card');
  const list = document.getElementById('passwords-list');
  card.style.display = 'block';

  list.innerHTML = passwords.map(pw => {
    const score = getStrength(pw);
    const colors = ['var(--red)','var(--red)','var(--orange)','var(--orange)','var(--green)','var(--green)'];
    const labels = ['Very weak','Weak','Fair','Medium','Strong','Very strong'];
    return `<div style="background:var(--bg3); border:1px solid var(--border2); border-radius:8px; padding:12px 14px; margin-bottom:8px;">
      <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
        <code style="font-family:var(--font-mono); font-size:13px; color:var(--text); word-break:break-all; flex:1;">${pw}</code>
        <button onclick="navigator.clipboard.writeText('${pw}')" class="copy-btn" style="margin-top:0; flex-shrink:0; font-size:11px; padding:4px 10px;">
          <i class="ti ti-copy"></i>
        </button>
      </div>
      <div style="margin-top:8px; display:flex; align-items:center; gap:8px;">
        <div style="flex:1; height:4px; background:var(--border2); border-radius:2px;">
          <div style="height:100%; width:${(score/5)*100}%; background:${colors[score]}; border-radius:2px; transition:width 0.3s;"></div>
        </div>
        <span style="font-size:10px; color:${colors[score]}; white-space:nowrap;">${labels[score]}</span>
      </div>
    </div>`;
  }).join('');
}

function getStrength(pw) {
  let score = 0;
  if (pw.length >= 8)  score++;
  if (pw.length >= 12) score++;
  if (pw.length >= 16) score++;
  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) score++;
  if (/[0-9]/.test(pw)) score++;
  if (/[^A-Za-z0-9]/.test(pw)) score++;
  return Math.min(score, 5);
}

function copyAll() {
  const pws = [...document.querySelectorAll('#passwords-list code')].map(c => c.textContent).join('\n');
  navigator.clipboard.writeText(pws);
}

generatePassword();
</script>

<?php require_once __DIR__ . '/footer.php'; ?>
