Update scripts.js

scripts.js

@@ -1,85 +1,54 @@
-const manifest = [
-    {
-        name: "App One",
-        description: "This is the first app.",
-        installUrl: "#",
-        iconUrl: "https://via.placeholder.com/50"
-    },
-    {
-        name: "App Two",
-        description: "This is the second app.",
-        installUrl: "#",
-        iconUrl: "https://via.placeholder.com/50"
-    },
-    {
-        name: "App Three",
-        description: "This is the third app.",
-        installUrl: "#",
-        iconUrl: "https://via.placeholder.com/50"
-    },
-    {
-        name: "App Four",
-        description: "This is the fourth app.",
-        installUrl: "#",
-        iconUrl: "https://via.placeholder.com/50"
-    }
-];
+async function fetchManifest() {
+    const response = await fetch('manifest.json');
+    return await response.json();
+}
 
-function renderAppList() {
+function renderAppList(apps) {
     const listContainer = document.getElementById('app-list-container');
     listContainer.innerHTML = '';
-    manifest.forEach((app, index) => {
+    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(index));
+        item.addEventListener('click', () => showAppDetail(app));
         listContainer.appendChild(item);
     });
 }
 
 function renderAppDetail(app) {
-    const detail = document.createElement('div');
-    detail.className = 'detail-view active';
-    detail.id = 'app-detail';
-    
-    const name = document.createElement('h2');
-    name.textContent = app.name;
-    
-    const description = document.createElement('p');
-    description.textContent = app.description;
-    
-    const installButton = document.createElement('button');
-    installButton.textContent = 'Install';
-    installButton.addEventListener('click', () => {
-        window.location.href = app.installUrl;
-    });
-    
-    detail.appendChild(name);
-    detail.appendChild(description);
-    detail.appendChild(installButton);
-    
-    return detail;
+    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 showAppDetail(index) {
-    const detailView = document.getElementById('app-detail');
-    if (detailView) {
-        detailView.remove();
-    }
-    const appDetail = renderAppDetail(manifest[index]);
-    document.getElementById('app').appendChild(appDetail);
+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', () => {
-    renderAppList();
+document.addEventListener('DOMContentLoaded', async () => {
+    const apps = await fetchManifest();
+    renderAppList(apps);
 
-    document.getElementById('browse-button').addEventListener('click', () => {
-        const detailView = document.getElementById('app-detail');
-        if (detailView) {
-            detailView.remove();
-        }
-    });
+    document.getElementById('browse-button').addEventListener('click', backToList);
 });