Update scripts.js

scripts.js

@@ -1,17 +1,28 @@
-async function fetchManifest() {
-    const response = await fetch('manifest.json');
-    return await response.json();
-}
+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(apps) {
+function renderAppList(manifest) {
     const listContainer = document.getElementById('app-list-container');
     listContainer.innerHTML = '';
-    apps.forEach((app, index) => {
+    manifest.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.style.setProperty('--gradient', app.gradient);
         item.innerHTML = `
-            <img src="${app.iconUrl}" alt="${app.name}">
+            <img src="${app.icon}" alt="${app.name}">
             <h2>${app.name}</h2>
         `;
         item.addEventListener('click', () => showAppDetail(app));
@@ -19,36 +30,27 @@ function renderAppList(apps) {
     });
 }
 
-function renderAppDetail(app) {
-    const detailContainer = document.getElementById('app-detail-container');
-    detailContainer.innerHTML = `
-        <div class="detail-view">
-            <h2>${app.name}</h2>
+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>
-            ${app.screenshots.map(src => `<img src="${src}" alt="${app.name} Screenshot">`).join('')}
-            <button onclick="backToList()">Back to List</button>
-        </div>
+            <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);
 
-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);
-});
+    document.getElementById('install-button').addEventListener('click', () => {
+        window.location.href = app.installUrl;
+    });
+}