File size: 1,950 Bytes
26bf5c6 0c54daa 26bf5c6 6b0fd45 26bf5c6 0c54daa 6b0fd45 26bf5c6 6b0fd45 26bf5c6 6b0fd45 0c54daa 26bf5c6 0c54daa 26bf5c6 0c54daa 26bf5c6 0c54daa 26bf5c6 6b0fd45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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 = `
<img src="${app.iconUrl}" alt="${app.name}">
<h2>${app.name}</h2>
`;
item.addEventListener('click', () => showAppDetail(app));
listContainer.appendChild(item);
});
}
function renderAppDetail(app) {
const detailContainer = document.getElementById('app-detail-container');
detailContainer.innerHTML = `
<div class="detail-view">
<h2>${app.name}</h2>
<p>${app.description}</p>
${app.screenshots.map(src => `<img src="${src}" alt="${app.name} Screenshot">`).join('')}
<button onclick="backToList()">Back to List</button>
</div>
`;
}
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);
}); |