Sprint 4 Capstone: University Resource Hub Single Page Application

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Day 40 - Sprint 4 Capstone</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; margin: 0; }
    .container { max-width: 720px; margin: auto; }
    .top-bar { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; }
    input { flex: 1; padding: 12px; background: #0c1328; border: 1px solid #334155; color: #fff; border-radius: 8px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
    .card { background: #0c1328; border: 1px solid #1e293b; padding: 20px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; }
    .card h3 { margin: 0 0 6px 0; color: #38bdf8; }
    .card p { color: #94a3b8; font-size: 13px; line-height: 1.5; flex: 1; }
    .actions { display: flex; gap: 8px; margin-top: 14px; }
    button { flex: 1; padding: 10px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; }
    .btn-view { background: #2563eb; color: #fff; }
    .btn-save { background: #f59e0b; color: #000; }
    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 9999; }
    .modal-backdrop.open { display: flex; }
    .modal-box { background: #0c1328; border: 1px solid #334155; padding: 24px; border-radius: 14px; width: 90%; max-width: 480px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="top-bar">
      <input type="text" id="filterInput" placeholder="🔍 Search curriculum subjects..." />
      <span id="savedCounter" style="color:#f59e0b;font-weight:bold;white-space:nowrap;">⭐ 0 Saved</span>
    </div>
    <div class="grid" id="subjectsGrid"></div>
  </div>

  <div class="modal-backdrop" id="modalBackdrop">
    <div class="modal-box">
      <h3 id="modalHeading" style="margin-top:0;color:#38bdf8;"></h3>
      <p id="modalBody" style="color:#cbd5e1;line-height:1.6;"></p>
      <button onclick="closeDialog()" style="background:#ef4444;color:#fff;width:100%;margin-top:14px;">Close (Esc)</button>
    </div>
  </div>

  <script>
    const subjects = [
      { id: 101, code: "BCS-011", name: "Computer Basics and PC Software", desc: "Data representation, hardware architectures, CPU registers, and Windows/Linux tools." },
      { id: 102, code: "BCSL-013", name: "Software Lab (PC Software)", desc: "Interactive command prompt, HTML5 document structures, CSS formatting, and web labs." },
      { id: 103, code: "BCS-012", name: "Basic Mathematics", desc: "Determinants, matrices, limits, continuity, coordinate geometry, and linear programming." },
      { id: 104, code: "MCS-011", name: "Problem Solving and C Programming", desc: "Structured programming, memory pointers, dynamic allocation, structures, and arrays." },
      { id: 105, code: "MCS-021", name: "Data and File Structures", desc: "Stacks, queues, linked lists, trees, binary search graphs, and hashing algorithms." },
      { id: 106, code: "BCS-053", name: "Web Programming & Technologies", desc: "Full-stack development, JavaScript DOM, async fetch APIs, and database integration." }
    ];

    let saved = JSON.parse(localStorage.getItem("bca_capstone_saved")) || [];
    const grid = document.getElementById("subjectsGrid");
    const modal = document.getElementById("modalBackdrop");

    function renderCards(list) {
      grid.innerHTML = "";
      document.getElementById("savedCounter").textContent = "⭐ " + saved.length + " Saved";

      list.forEach(s => {
        const isSaved = saved.includes(s.id);
        const card = document.createElement("div");
        card.className = "card";
        card.dataset.id = s.id;
        card.innerHTML = '<div>' +
          '<h3>' + s.code + '</h3>' +
          '<div style="font-weight:bold;font-size:14px;margin-bottom:6px;">' + s.name + '</div>' +
          '<p>' + s.desc + '</p>' +
          '</div>' +
          '<div class="actions">' +
          '<button class="btn-view">Details</button>' +
          '<button class="btn-save">' + (isSaved ? "★ Saved" : "☆ Save") + '</button>' +
          '</div>';
        grid.appendChild(card);
      });
    }

    grid.addEventListener("click", (e) => {
      const card = e.target.closest(".card");
      if (!card) return;
      const id = parseInt(card.dataset.id, 10);
      const sub = subjects.find(s => s.id === id);

      if (e.target.closest(".btn-view") && sub) {
        document.getElementById("modalHeading").textContent = sub.code + ": " + sub.name;
        document.getElementById("modalBody").textContent = sub.desc + " This module is accredited by NextSem Academy under lead faculty Er. Manoj Kumar.";
        modal.classList.add("open");
        document.body.style.overflow = "hidden";
      }

      if (e.target.closest(".btn-save")) {
        if (saved.includes(id)) saved = saved.filter(x => x !== id);
        else saved.push(id);
        localStorage.setItem("bca_capstone_saved", JSON.stringify(saved));
        renderCards(subjects);
      }
    });

    window.closeDialog = () => {
      modal.classList.remove("open");
      document.body.style.overflow = "";
    };

    window.addEventListener("keydown", (e) => { if (e.key === "Escape") closeDialog(); });
    modal.addEventListener("click", (e) => { if (e.target === modal) closeDialog(); });

    document.getElementById("filterInput").addEventListener("input", (e) => {
      const q = e.target.value.toLowerCase();
      renderCards(subjects.filter(s => s.code.toLowerCase().includes(q) || s.name.toLowerCase().includes(q) || s.desc.toLowerCase().includes(q)));
    });

    renderCards(subjects);
  </script>
</body>
</html>