<div class="sliderContainer">
  <label for="lengthSlider" class="label">Number of Characters:</label>
  <input type="range" min="4" max="18" value="8" class="slider" id="lengthSlider">
  <span id="length">8</span>
</div>

<div class="sliderContainer">
  <label for="complexitySlider" class="label">Complexity:</label>
  <input type="range" min="0" max="4" value="0" class="slider" id="complexitySlider">
  <span id="complexity">Numbers Only</span>
</div>

<button onclick="calculate()">Calculate Strength</button>
<div id="loading"></div> <!-- vlak onder de knop -->

<div id="result">Move the sliders to see the security level of your password.</div>

<script>
const passwordData = {
  '4': ["Instantly", "Instantly", "Instantly", "Instantly", "Instantly"],
  '5': ["Instantly", "Instantly", "Instantly", "Instantly", "Instantly"],
  '6': ["Instantly", "Instantly", "Instantly", "1 sec", "5 secs"],
  '7': ["Instantly", "Instantly", "25 secs", "1 min", "6 mins"],
  '8': ["Instantly", "5 secs", "22 mins", "1 hour", "8 hours"],
  '9': ["Instantly", "2 mins", "19 hours", "3 days", "3 weeks"],
  '10': ["Instantly", "58 mins", "1 month", "7 months", "5 years"],
  '11': ["2 secs", "1 day", "5 years", "41 years", "400 years"],
  '12': ["25 secs", "3 weeks", "300 years", "2k years", "34k years"],
  '13': ["4 mins", "1 jaar", "16k jaren", "100k jaren", "2m jaren"],
  '14': ["41 mins", "51 jaren", "800k jaren", "9m jaren", "200m jaren"],
  '15': ["6 uur", "1k jaren", "43m jaren", "60m jaren", "15 bn jaren"],
  '16': ["2 dagen", "34k jaren", "2bn jaren", "37bn jaren", "1tn jaren"],
  '17': ["4 weken", "800k jaren", "100bn jaren", "2tn jaren", "93tn jaren"],
  '18': ["9 maanden", "23m jaren", "6tn jaren", "100 tn jaren", "7qd jaren"],
};

const complexityLabels = [
  "Numbers Only", 
  "Lowercase Letters", 
  "Upper and Lowercase Letters", 
  "Numbers, Upper and Lowercase Letters", 
  "Numbers, Upper and Lowercase Letters, Symbols"
];

const colorMap = {
  "Instantly": "#6a0dad", // dark purple
  "red": "#ff6161", // rood voor tijden korter dan een dag
  "orange": "#ffa500", // oranje voor tijden tussen een dag en 10 jaar
  "yellow": "#ffff00", // geel voor tijden tussen 10 jaar en 1 miljoen jaar
  "green": "#00ff00", // groen voor tijden langer dan 1 miljoen jaar
};

document.getElementById('lengthSlider').oninput = function() {
  const display = document.getElementById('length');
  display.innerText = this.value;
};

document.getElementById('complexitySlider').oninput = function() {
  const display = document.getElementById('complexity');
  display.innerText = complexityLabels[this.value];
};

function calculate() {
  const loadingDiv = document.getElementById('loading');
  const resultDiv = document.getElementById('result');
  resultDiv.innerText = ""; // Wis eerdere resultaten
  loadingDiv.innerText = "Analyzing...";
  loadingDiv.style.display = "block"; // Toon laadbericht

  // Simuleer vertraging om "denkend" proces na te bootsen
  setTimeout(() => {
    const length = document.getElementById('lengthSlider').value;
    const complexity = document.getElementById('complexitySlider').value;
    const crackTime = passwordData[length][complexity];

    // Stel tekst van resultaat en achtergrondkleur in op basis van de kraak-tijd
    resultDiv.innerText = "Your password can be cracked in " + crackTime;
    setColorBasedOnTime(crackTime, resultDiv);

    loadingDiv.style.display = "none"; // Verberg laadbericht
  }, 1000); // Vertraging van 1000 milliseconden (1 seconde)
}

function setColorBasedOnTime(crackTime, resultDiv) {
  if (crackTime === "Instantly") {
    resultDiv.style.backgroundColor = colorMap["Instantly"];
  } else if (crackTime.includes("sec") || crackTime.includes("min") || crackTime.includes("uur")) {
    resultDiv.style.backgroundColor = colorMap["red"];
  } else if (crackTime.includes("dag")) {
    resultDiv.style.backgroundColor = colorMap["orange"];
  } else if (crackTime.includes("k jaar")) {
    resultDiv.style.backgroundColor = colorMap["yellow"];
  } else if (crackTime.includes("m jaar") || crackTime.includes("bn jaar") || crackTime.includes("tn jaar") || crackTime.includes("qd jaar")) {
    resultDiv.style.backgroundColor = colorMap["green"];
  } else {
    resultDiv.style.backgroundColor = colorMap["orange"];
  }
}

// Start labels correct instellen
document.getElementById('lengthSlider').oninput();
document.getElementById('complexitySlider').oninput();

</script>