Spaces:

Sachin5112
/

Mobile-emulator

Running

ngzbydze commited on Jan 17

Commit

eb53162

1 Parent(s): 905a701

Add app previewer and improve app installation flow

Create a new `appforge_preview.html` file to handle the rendering of user-submitted apps, and update `appstore.html` to correctly find and link to these apps, including passing the app ID to the previewer.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 359ff6bd-3611-43f4-80bb-8e00dffa9b94
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: cc1073e6-ac4d-48dc-98c5-a55510394ec2
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4f63ac58-4cb9-42c8-9fb2-13fd8b1964a3/359ff6bd-3611-43f4-80bb-8e00dffa9b94/MhNANtD
Replit-Helium-Checkpoint-Created: true

Files changed (3) hide show

appforge.html +2 -1
appforge_preview.html +110 -0
appstore.html +4 -2

appforge.html CHANGED Viewed

@@ -1540,7 +1540,8 @@
                 rating: 5.0,
                 downloads: '0+',
                 approved: true,
-                url: '#', // In a real scenario, this would link to the built app
                 submittedDate: new Date().toISOString()
             };

                 rating: 5.0,
                 downloads: '0+',
                 approved: true,
+                url: 'appforge_preview.html', // Point to a generic previewer
+                sections: appSections, // Include the actual sections
                 submittedDate: new Date().toISOString()
             };

appforge_preview.html ADDED Viewed

	@@ -0,0 +1,110 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Preview</title>
+    <style>
+        body { margin: 0; font-family: sans-serif; background: #000; color: #fff; height: 100vh; display: flex; flex-direction: column; }
+        #header { padding: 15px; background: #1a1a2e; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; }
+        #content { flex: 1; position: relative; }
+        iframe { width: 100%; height: 100%; border: none; }
+        #tabs { display: flex; background: #1a1a2e; border-top: 1px solid #333; }
+        .tab { flex: 1; padding: 15px; text-align: center; cursor: pointer; font-size: 12px; opacity: 0.6; }
+        .tab.active { opacity: 1; border-top: 2px solid #ff6b6b; color: #ff6b6b; }
+        #password-gate { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
+        input { padding: 10px; border-radius: 5px; border: 1px solid #444; background: #222; color: #fff; margin-bottom: 10px; }
+        button { padding: 10px 20px; background: #ff6b6b; border: none; border-radius: 5px; color: #fff; cursor: pointer; }
+    </style>
+</head>
+<body>
+    <div id="header">
+        <span id="app-name">App</span>
+        <span id="section-title">Loading...</span>
+        <div style="width: 20px;"></div>
+    </div>
+    <div id="content">
+        <div id="password-gate" style="display: none;">
+            <h3>Section Locked</h3>
+            <input type="password" id="pass-input" placeholder="Enter password">
+            <button onclick="checkPassword()">Unlock</button>
+        </div>
+        <iframe id="app-frame"></iframe>
+    </div>
+    <div id="tabs"></div>
+    <script>
+        let currentApp = null;
+        let currentSectionIdx = 0;
+        function loadApp() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const appId = urlParams.get('id');
+            const userApps = JSON.parse(localStorage.getItem('userSubmittedApps') || '[]');
+            currentApp = userApps.find(a => a.id === appId);
+            if (!currentApp) {
+                document.body.innerHTML = '<div style="padding:20px; text-align:center;">App not found</div>';
+                return;
+            }
+            document.getElementById('app-name').innerText = currentApp.name;
+            renderTabs();
+            switchSection(0);
+        }
+        function renderTabs() {
+            const tabsContainer = document.getElementById('tabs');
+            tabsContainer.innerHTML = currentApp.sections.map((s, idx) => `
+                <div class="tab ${idx === 0 ? 'active' : ''}" onclick="switchSection(${idx})">
+                    ${s.title}
+                </div>
+            `).join('');
+        }
+        function switchSection(idx) {
+            currentSectionIdx = idx;
+            const section = currentApp.sections[idx];
+            document.getElementById('section-title').innerText = section.title;
+            document.querySelectorAll('.tab').forEach((t, i) => {
+                t.classList.toggle('active', i === idx);
+            });
+            const gate = document.getElementById('password-gate');
+            if (section.data.password) {
+                gate.style.display = 'flex';
+                document.getElementById('app-frame').src = 'about:blank';
+            } else {
+                gate.style.display = 'none';
+                loadSectionContent(section);
+            }
+        }
+        function checkPassword() {
+            const input = document.getElementById('pass-input').value;
+            const section = currentApp.sections[currentSectionIdx];
+            if (input === section.data.password) {
+                document.getElementById('password-gate').style.display = 'none';
+                loadSectionContent(section);
+            } else {
+                alert('Wrong password');
+            }
+        }
+        function loadSectionContent(section) {
+            const iframe = document.getElementById('app-frame');
+            if (section.type === 'web') {
+                iframe.src = section.data.url;
+            } else if (section.type === 'html') {
+                const doc = iframe.contentWindow.document;
+                doc.open();
+                doc.write(section.data.html || '');
+                doc.close();
+            }
+        }
+        window.onload = loadApp;
+    </script>
+</body>
+</html>

appstore.html CHANGED Viewed

@@ -654,7 +654,9 @@
         function installApp(appId) {
             const installed = getInstalledApps();
-            const app = availableApps.find(a => a.id === appId);
             if (!app) return;
@@ -667,7 +669,7 @@
                     icon: app.icon,
                     color: app.color,
                     category: app.category,
-                    url: app.url || null
                 });
                 localStorage.setItem('homeScreenApps', JSON.stringify(homeApps));
                 localStorage.setItem('installedStoreApps', JSON.stringify([...getInstalledApps(), appId]));

         function installApp(appId) {
             const installed = getInstalledApps();
+            const userSubmittedApps = JSON.parse(localStorage.getItem('userSubmittedApps') || '[]');
+            const allPossibleApps = [...availableApps, ...userSubmittedApps];
+            const app = allPossibleApps.find(a => a.id === appId);
             if (!app) return;
                     icon: app.icon,
                     color: app.color,
                     category: app.category,
+                    url: app.url === 'appforge_preview.html' ? `appforge_preview.html?id=${app.id}` : (app.url || null)
                 });
                 localStorage.setItem('homeScreenApps', JSON.stringify(homeApps));
                 localStorage.setItem('installedStoreApps', JSON.stringify([...getInstalledApps(), appId]));