|
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); |
|
}); |