async function fetchManifest() {
const response = await fetch('manifest.json');
return await response.json();
}
function renderAppList(apps) {
const listContainer = document.getElementById('app-list-container');
listContainer.innerHTML = '';
apps.forEach((app, index) => {
const item = document.createElement('div');
item.className = 'grid-item';
item.style.background = `linear-gradient(135deg, ${app.gradient[0]}, ${app.gradient[1]})`;
item.innerHTML = `
${app.name}
`;
item.addEventListener('click', () => showAppDetail(app));
listContainer.appendChild(item);
});
}
function renderAppDetail(app) {
const detailContainer = document.getElementById('app-detail-container');
detailContainer.innerHTML = `
${app.name}
${app.description}
${app.screenshots.map(src => `
`).join('')}
`;
}
function showAppDetail(app) {
const listContainer = document.getElementById('app-list-container');
const detailContainer = document.getElementById('app-detail-container');
listContainer.classList.add('hidden');
detailContainer.classList.remove('hidden');
renderAppDetail(app);
}
function backToList() {
const listContainer = document.getElementById('app-list-container');
const detailContainer = document.getElementById('app-detail-container');
listContainer.classList.remove('hidden');
detailContainer.classList.add('hidden');
}
document.addEventListener('DOMContentLoaded', async () => {
const apps = await fetchManifest();
renderAppList(apps);
document.getElementById('browse-button').addEventListener('click', backToList);
});