security_features.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Practice Lab</title>

<style>
:root{
  --bg:#0b0f1a;
  --panel:#111827;
  --border:#1f2937;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --accent:#3b82f6;
  --done:#22c55e;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: Inter, system-ui, sans-serif;
}

body{
  min-height:100vh;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--fg);
}

.container{
  width:420px;
  background:linear-gradient(180deg,#0f172a,#020617);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
}

header{
  text-align:center;
  margin-bottom:22px;
}

header h1{
  font-size:22px;
  letter-spacing:.12em;
}

header p{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.progress-wrap{
  margin:18px 0;
}

.progress-bar-bg{
  background:#111827;
  border-radius:10px;
  overflow:hidden;
}

.progress-bar{
  height:12px;
  width:0%;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  transition:width .6s ease;
}

.progress-text{
  font-size:12px;
  color:#9aa3d1;
  margin-top:6px;
}

ul{
  list-style:none;
  display:grid;
  gap:14px;
}

.tool{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:#020617;
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:.25s;
}

.tool:hover{
  border-color:var(--accent);
}

.left{
  display:flex;
  flex-direction:column;
}

.name{
  font-size:15px;
  font-weight:600;
}

.desc{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}

.badge.done{
  color:var(--done);
  border-color:#14532d;
}

#quizWrapper{
  display:none;
  margin-top:22px;
}

#quizBtn{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  font-weight:800;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#020617;
  cursor:pointer;
}

footer{
  margin-top:18px;
  font-size:11px;
  color:#6b7280;
  text-align:center;
}
</style>
</head>

<body>

<div class="container">

<header>
  <h1>SECURITY PRACTICE LAB</h1>

  <div class="progress-wrap">
    <div class="progress-bar-bg">
      <div id="progressBar" class="progress-bar"></div>
    </div>
    <div id="progressText" class="progress-text">0% completed</div>
  </div>

  <p>Ethical security learning • theory-first • safe simulations</p>
</header>

<ul>
<li>
<a class="tool" href="/nmap" target="_blank" data-phase="reconnaissance">
  <div class="left">
    <div class="name">Reconnaissance</div>
    <div class="desc">Hosts, ports, services, attack surface</div>
  </div>
  <span class="badge">PHASE 1</span>
</a>
</li>

<li>
<a class="tool" href="/netcat" target="_blank" data-phase="enumeration">
  <div class="left">
    <div class="name">Enumeration</div>
    <div class="desc">Service behavior, banners, manual probing</div>
  </div>
  <span class="badge">PHASE 2</span>
</a>
</li>

<li>
<a class="tool" href="/sqlmap" target="_blank" data-phase="exploitation">
  <div class="left">
    <div class="name">Exploitation Awareness</div>
    <div class="desc">Vulnerabilities & exploit logic</div>
  </div>
  <span class="badge">PHASE 3</span>
</a>
</li>

<li>
<a class="tool" href="/password_cracking" target="_blank" data-phase="credential_attacks">
  <div class="left">
    <div class="name">Credential Attacks</div>
    <div class="desc">Hydra, John, hashes & real breaches</div>
  </div>
  <span class="badge">PHASE 4</span>
</a>
</li>
</ul>

<div id="quizWrapper">
  <button id="quizBtn" onclick="window.open('/quiz','_blank')">
    🎓 Start Final Quiz
  </button>
</div>

<footer>
  Authorized learning only • No misuse
</footer>

</div>

<script>
/* ===== PHASES (single source of truth) ===== */
const REQUIRED_PHASES = [
  "reconnaissance",
  "enumeration",
  "exploitation",
  "credential_attacks"
];

/* ===== Progress calculation ===== */
const completed = REQUIRED_PHASES.filter(
  p => localStorage.getItem(`lesson:${p}`) === "done"
).length;

const percent = Math.round((completed / REQUIRED_PHASES.length) * 100);

document.getElementById("progressBar").style.width = percent + "%";
document.getElementById("progressText").textContent =
  `${percent}% completed`;

/* ===== Badge update ===== */
document.querySelectorAll("[data-phase]").forEach(el => {
  const phase = el.dataset.phase;
  const badge = el.querySelector(".badge");

  if (localStorage.getItem(`lesson:${phase}`) === "done") {
    badge.textContent = "COMPLETED";
    badge.classList.add("done");
  }
});

/* ===== Quiz unlock ===== */
if (percent === 100) {
  document.getElementById("quizWrapper").style.display = "block";
}
</script>

</body>
</html>