main.js

const projects = [
      { title: 'Calculator', desc: 'Basic calculator with keyboard support.', path: 'calculator/index.html' },
      { title: 'Bookmark', desc: 'Save and manage quick links locally.', path: 'Bookmark/index.html' },
      { title: 'RandomPasswordGenerator', desc: 'Basic Random Password Generator', path: 'RandomPasswordGenerator/index.html' },
      { title: 'Employee App', desc: 'Simple CRUD demo for employees.', path: 'EmployeeApp/index.html' },
      { title: 'Memory Game', desc: 'Classic card matching game.', path: 'Memory_Game/index.html' },
      { title: 'Movie App', desc: 'Search and browse movies.', path: 'Movie_APP/index.html' }
    ];

    // Utility: sanitize text for search
    const normalize = s => s.toLowerCase();

    // Render project cards
    function renderProjects(list) {
      const grid = document.getElementById('projectsGrid');
      grid.innerHTML = '';
      if (!list.length) {
        grid.innerHTML = '<div class="col-12"><div class="alert alert-info mb-0">No projects found.</div></div>';
        return;
      }
      list.forEach(p => {
        const col = document.createElement('div');
        col.className = 'col-12 col-sm-6 col-lg-4';
        col.innerHTML = `
          <div class="card app-card h-100">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-1">${escapeHtml(p.title)}</h5>
              <p class="card-text text-muted small mb-3">${escapeHtml(p.desc)}</p>
              <div class="mt-auto d-flex justify-content-between align-items-center">
                <a href="${encodeURI(p.path)}" class="btn btn-outline-primary btn-sm" aria-label="Open ${escapeHtml(p.title)}">Open</a>
                <button class="btn btn-sm btn-outline-secondary copy-btn" data-path="${encodeURI(p.path)}" type="button" title="Copy path">Copy path</button>
              </div>
            </div>
          </div>
        `;
        grid.appendChild(col);
      });
    }

    // Simple HTML escaper for safety
    function escapeHtml(str) {
      return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    }

    // Live filter
    function filterProjects(query) {
      const q = normalize(query.trim());
      if (!q) return projects.slice();
      return projects.filter(p => normalize(p.title).includes(q) || normalize(p.desc).includes(q));
    }

    document.addEventListener('DOMContentLoaded', () => {
      const search = document.getElementById('search');
      const clearBtn = document.getElementById('clearSearch');

      // Initial render
      renderProjects(projects);

      // Search input handler
      search.addEventListener('input', () => {
        const val = search.value;
        const results = filterProjects(val);
        renderProjects(results);
        clearBtn.classList.toggle('d-none', !val);
      });

      // Clear button
      clearBtn.addEventListener('click', () => {
        search.value = '';
        search.dispatchEvent(new Event('input'));
        search.focus();
        clearBtn.classList.add('d-none');
      });

      // Keyboard shortcut: press "/" to focus search (if not typing in an input)
      document.addEventListener('keydown', (e) => {
        if (e.key === '/' && !['INPUT','TEXTAREA'].includes(document.activeElement.tagName)) {
          e.preventDefault();
          search.focus();
          search.select();
        }
      });

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

      // Copy path buttons (event delegation)
      document.getElementById('projectsGrid').addEventListener('click', (e) => {
        const btn = e.target.closest('.copy-btn');
        if (!btn) return;
        const path = decodeURI(btn.getAttribute('data-path') || '');
        if (navigator.clipboard) {
          navigator.clipboard.writeText(path).then(() => {
            btn.textContent = 'Copied';
            setTimeout(() => btn.textContent = 'Copy path', 1200);
          }, () => {
            alert('Unable to copy to clipboard.');
          });
        } else {
          // Fallback
          const ta = document.createElement('textarea');
          ta.value = path;
          document.body.appendChild(ta);
          ta.select();
          try { document.execCommand('copy'); btn.textContent = 'Copied'; }
          catch { alert('Unable to copy to clipboard.'); }
          document.body.removeChild(ta);
          setTimeout(() => btn.textContent = 'Copy path', 1200);
        }
      });

      // Optional: allow Enter in search to open first result
      search.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          const firstLink = document.querySelector('#projectsGrid a.btn');
          if (firstLink) {
            firstLink.click();
          }
        }
      });
    });