|
document.addEventListener('DOMContentLoaded', () => { |
|
fetch('manifest.json') |
|
.then(response => response.json()) |
|
.then(data => renderAppList(data)); |
|
|
|
document.getElementById('browse-button').addEventListener('click', () => { |
|
const detailView = document.getElementById('app-detail'); |
|
if (detailView) { |
|
detailView.remove(); |
|
} |
|
fetch('manifest.json') |
|
.then(response => response.json()) |
|
.then(data => renderAppList(data)); |
|
}); |
|
}); |
|
|
|
function renderAppList(manifest) { |
|
const listContainer = document.getElementById('app-list-container'); |
|
listContainer.innerHTML = ''; |
|
manifest.forEach((app, index) => { |
|
const item = document.createElement('div'); |
|
item.className = 'grid-item'; |
|
item.style.setProperty('--gradient', app.gradient); |
|
item.innerHTML = ` |
|
<img src="${app.icon}" alt="${app.name}"> |
|
<h2>${app.name}</h2> |
|
`; |
|
item.addEventListener('click', () => showAppDetail(app)); |
|
listContainer.appendChild(item); |
|
}); |
|
} |
|
|
|
function showAppDetail(app) { |
|
const detailView = document.createElement('div'); |
|
detailView.className = 'detail-view'; |
|
detailView.id = 'app-detail'; |
|
detailView.innerHTML = ` |
|
<header> |
|
<h1>${app.name}</h1> |
|
</header> |
|
<main> |
|
<img src="${app.icon}" alt="${app.name}"> |
|
<p>${app.description}</p> |
|
<div class="screenshots"> |
|
<img src="${app.screenshots[0]}" alt="Screenshot 1"> |
|
<img src="${app.screenshots[1]}" alt="Screenshot 2"> |
|
</div> |
|
<button id="install-button">Install</button> |
|
</main> |
|
`; |
|
document.getElementById('app').appendChild(detailView); |
|
|
|
document.getElementById('install-button').addEventListener('click', () => { |
|
window.location.href = app.installUrl; |
|
}); |
|
} |