script.js

const search = document.querySelector('#toolSearch');
const rows = [...document.querySelectorAll('.tool-row[data-tool]')];

const matrixCanvas = document.querySelector('#matrixRain');
const matrixContext = matrixCanvas.getContext('2d');
const matrixCharacters = '01アイウエオ<>[]{}#$%';
let matrixColumns;
let matrixDrops;

function resizeMatrix() {
  matrixCanvas.width = window.innerWidth;
  matrixCanvas.height = window.innerHeight;
  matrixColumns = Math.floor(window.innerWidth / 19);
  matrixDrops = Array.from({ length: matrixColumns }, () => Math.random() * -40);
}

function drawMatrix() {
  matrixContext.fillStyle = 'rgba(8, 17, 13, 0.09)';
  matrixContext.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
  matrixContext.fillStyle = '#8dbb2e';
  matrixContext.font = '12px DM Mono, monospace';
  matrixDrops.forEach((drop, index) => {
    const character = matrixCharacters[Math.floor(Math.random() * matrixCharacters.length)];
    matrixContext.fillText(character, index * 19, drop * 19);
    matrixDrops[index] = drop > matrixCanvas.height / 19 && Math.random() > 0.975 ? 0 : drop + 0.55;
  });
  requestAnimationFrame(drawMatrix);
}

resizeMatrix();
window.addEventListener('resize', resizeMatrix);
drawMatrix();

const attackboxTab = document.querySelector('[data-lab="attackbox"]');
const kaliLogo = document.createElement('img');
kaliLogo.className = 'kali-logo';
kaliLogo.src = 'https://www.kali.org/images/kali-dragon-icon.svg';
kaliLogo.alt = 'Kali Linux dragon logo';
attackboxTab.querySelector('.lab-dot').replaceWith(kaliLogo);

search.addEventListener('input', (event) => {
  const query = event.target.value.trim().toLowerCase();
  rows.forEach((row) => {
    row.hidden = query.length > 0 && !row.dataset.tool.includes(query);
  });
});

const labData = {
  attackbox: {
    name: 'ATTACKBOX / KALI', prompt: 'Identify the current user', hint: 'Use the command shown in the prompt. This browser lab simulates a safe response.',
    exercises: [
      { command: 'whoami', result: 'student', detail: 'The shell is running as a standard lab user.' },
      { command: 'ip addr', result: 'eth0: 10.10.20.15/24', detail: 'The lab interface is on the private 10.10.20.0/24 range.' },
      { command: 'cat /etc/os-release', result: 'PRETTY_NAME="Kali GNU/Linux (sandbox)"', detail: 'Distribution metadata identifies the operating system.' },
      { command: 'pwd', result: '/home/student', detail: 'Your current working directory is the starting point for relative paths.' },
      { command: 'ls -la', result: 'drwxr-xr-x  labs  notes  tools', detail: 'Long listing mode exposes permissions and hidden entries for inspection.' }
    ]
  },
  vulnsys: {
    name: 'VULNSYS / WINDOWS', prompt: 'Inspect the host configuration', hint: 'Try the Windows command that reports the host network settings.',
    exercises: [
      { command: 'whoami', result: 'vulnsys\\student', detail: 'The lab account is a low-privilege local user.' },
      { command: 'ipconfig', result: 'IPv4 Address . . . : 10.10.20.25', detail: 'The Windows-style target is isolated on the private lab range.' },
      { command: 'systeminfo', result: 'OS Name: Microsoft Windows (sandbox)', detail: 'System information is available without changing the target.' },
      { command: 'hostname', result: 'VULNSYS-TRAINING', detail: 'A hostname gives an asset a human-readable identity in inventory.' },
      { command: 'tasklist', result: 'System  explorer.exe  student-notes.exe', detail: 'Process visibility helps defenders spot unexpected software.' }
    ]
  }
};

let activeLab = 'attackbox';
let exerciseIndex = 0;
let solved = false;
const labName = document.querySelector('#labName');
const labPrompt = document.querySelector('#labPrompt');
const labHint = document.querySelector('#labHint');
const commandInput = document.querySelector('#commandInput');
const commandResult = document.querySelector('#commandResult');
const labProgress = document.querySelector('#labProgress');
const nextExercise = document.querySelector('#nextExercise');

function renderExercise() {
  const lab = labData[activeLab];
  const exercise = lab.exercises[exerciseIndex];
  labName.textContent = lab.name;
  labPrompt.textContent = exerciseIndex === 0 ? lab.prompt : `Run ${exercise.command}`;
  labHint.textContent = `${lab.hint} Command: ${exercise.command}`;
  labProgress.textContent = `${exerciseIndex + 1} / ${lab.exercises.length} exercises`;
  commandInput.value = '';
  commandResult.textContent = 'Waiting for input...';
  commandResult.className = 'command-result';
  nextExercise.disabled = true;
  solved = false;
}

document.querySelectorAll('.lab-tab').forEach((tab) => {
  tab.addEventListener('click', () => {
    activeLab = tab.dataset.lab;
    exerciseIndex = 0;
    document.querySelectorAll('.lab-tab').forEach((item) => item.classList.toggle('active', item === tab));
    renderExercise();
  });
});

document.querySelector('#runCommand').addEventListener('click', () => {
  const expected = labData[activeLab].exercises[exerciseIndex];
  const typed = commandInput.value.trim().toLowerCase();
  if (typed === expected.command) {
    commandResult.innerHTML = `<strong>${expected.result}</strong><br />${expected.detail}`;
    commandResult.className = 'command-result success';
    nextExercise.disabled = false;
    solved = true;
  } else {
    commandResult.textContent = 'Not quite. Check the prompt and try the exact command.';
    commandResult.className = 'command-result error';
  }
});

commandInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') document.querySelector('#runCommand').click();
});

nextExercise.addEventListener('click', () => {
  if (!solved) return;
  exerciseIndex = (exerciseIndex + 1) % labData[activeLab].exercises.length;
  renderExercise();
});

renderExercise();

document.querySelectorAll('a[href^="#"]').forEach((link) => {
  link.addEventListener('click', () => {
    const target = document.querySelector(link.getAttribute('href'));
    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
});

const lessons = {
  os: { title: 'OS + hardware', body: 'An operating system is the control layer between applications and hardware. The kernel schedules CPU time, manages memory, exposes filesystems, and enforces permissions. Hardware knowledge explains what virtualization can isolate and what it cannot.', know: 'Kernel vs. user space · processes · filesystems · permissions · virtualization', next: 'Use the Attackbox drills to identify a user, inspect a working directory, and read a safe OS metadata file.' },
  software: { title: 'Software + code', body: 'Security work becomes clearer when you can read the software under test. Start with the shell, Python data types, package managers, logs, APIs, and version control. Good practitioners can explain what a tool is doing before trusting its output.', know: 'CLI · Python · dependencies · logs · HTTP requests · Git', next: 'Write a tiny script that parses a local log file and highlights repeated failed logins without collecting sensitive data.' },
  networking: { title: 'Networking + TCP/IP', body: 'Networking is the language systems use to communicate. Learn how frames become packets, how IP addresses and subnets define reachability, and how TCP establishes a reliable connection. Security analysis starts with observing normal traffic in a lab you control.', know: 'Ethernet · IP · TCP/UDP · ports · subnets · routing · captures', next: 'Use Wireshark on a permitted capture and identify DNS, TCP, and HTTPS traffic by their normal handshake patterns.' },
  dns: { title: 'DNS + identity', body: 'DNS translates human-friendly names into addresses through a hierarchy of resolvers and authoritative servers. Pair that with TLS, authentication, authorization, and MFA: identity proves who someone is, while authorization decides what they may do.', know: 'Resolvers · A/AAAA/CNAME records · TTL · TLS · authentication vs. authorization', next: 'Use a public documentation domain and map its DNS record types without probing private systems.' }
};

const lessonTitle = document.querySelector('#lessonTitle');
const lessonBody = document.querySelector('#lessonBody');
const lessonKnow = document.querySelector('#lessonKnow');
const lessonNext = document.querySelector('#lessonNext');
const lessonKicker = document.querySelector('.lesson-kicker');

function selectLesson(card) {
  const lesson = lessons[card.dataset.topic];
  document.querySelectorAll('.curriculum-card').forEach((item) => {
    const selected = item === card;
    item.classList.toggle('selected', selected);
    item.setAttribute('aria-pressed', selected);
  });
  lessonKicker.textContent = `LESSON ${String(Object.keys(lessons).indexOf(card.dataset.topic) + 1).padStart(2, '0')} / FOUNDATION`;
  lessonTitle.textContent = lesson.title;
  lessonBody.textContent = lesson.body;
  lessonKnow.textContent = lesson.know;
  lessonNext.textContent = lesson.next;
}

document.querySelectorAll('.curriculum-card').forEach((card) => {
  card.addEventListener('click', () => selectLesson(card));
  card.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      selectLesson(card);
    }
  });
});