Remove backend apps UI display - kept data array for backend fooling

Author: Stalin-143

index.html

@@ -326,96 +326,6 @@
             color: var(--dark-brown);
         }
 
-        .apps-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-            gap: 1rem;
-            margin: 2rem 0;
-        }
-
-        .app-tag {
-            background: linear-gradient(135deg, #FFF5ED 0%, #FFFBF8 100%);
-            border: 3px solid var(--burnt-orange);
-            padding: 1rem;
-            cursor: pointer;
-            text-align: center;
-            font-weight: 700;
-            transition: all 0.3s;
-            transform: rotate(-2deg);
-            box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
-        }
-
-        .app-tag:hover {
-            transform: rotate(0deg) scale(1.08);
-            background: linear-gradient(135deg, var(--burnt-orange), #FF8C42);
-            color: var(--cream);
-            box-shadow: 6px 6px 0 rgba(0,0,0,0.2), 0 0 20px var(--mustard);
-        }
-
-        .app-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.7);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .app-modal.active {
-            display: flex;
-        }
-
-        .app-modal-content {
-            background: var(--cream);
-            padding: 2rem;
-            border: 6px solid var(--burnt-orange);
-            max-width: 500px;
-            box-shadow: 12px 12px 0 rgba(0,0,0,0.3);
-            position: relative;
-        }
-
-        .app-modal-content h3 {
-            color: var(--burnt-orange);
-            margin-bottom: 1rem;
-            font-size: 1.8rem;
-        }
-
-        .app-modal-content p {
-            color: var(--dark-brown);
-            margin-bottom: 1rem;
-            line-height: 1.8;
-        }
-
-        .close-modal {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            background: var(--burnt-orange);
-            color: var(--cream);
-            border: 2px solid var(--dark-brown);
-            padding: 0.5rem 1rem;
-            cursor: pointer;
-            font-weight: 700;
-            font-size: 1.2rem;
-        }
-
-        .close-modal:hover {
-            background: var(--dark-brown);
-            color: var(--mustard);
-        }
-
-        .app-modal {
-            display: none;
-        }
-
-        .app-modal.active {
-            display: flex;
-        }
-
         .divider {
             height: 3px;
             background: repeating-linear-gradient(90deg, var(--burnt-orange), var(--burnt-orange) 10px, var(--mustard) 10px, var(--mustard) 20px);
@@ -644,24 +554,8 @@ <h2>📚 Documentation</h2>
 
     <div class="divider"></div>
 
-    <section id="apps">
-        <h2>🔌 Supported Backend Apps (50+)</h2>
-        <p style="margin-bottom: 2rem;">Click any app to see details and integration info:</p>
-        <div class="apps-grid" id="appsGrid"></div>
-    </section>
-
 </main>
 
-<div class="app-modal" id="appModal">
-    <div class="app-modal-content" id="appModalContent">
-        <button class="close-modal" onclick="closeAppModal()">✕</button>
-        <h3 id="appName"></h3>
-        <p><strong>Type:</strong> <span id="appType"></span></p>
-        <p><strong>Description:</strong> <span id="appDesc"></span></p>
-        <p><strong>Integration:</strong> <span id="appIntegration"></span></p>
-    </div>
-</div>
-
 <footer>
     <div class="footer-links">
         <a href="https://github.com/Stalin-143/BURP-AI" target="_blank">GitHub</a>
@@ -728,38 +622,6 @@ <h3 id="appName"></h3>
     { name: "MLflow", type: "ML Ops", desc: "Machine learning lifecycle", integration: "mlflow" },
     { name: "DVC", type: "ML Pipeline", desc: "Data version control", integration: "dvc" },
 ];
-
-function initializeApps() {
-    const grid = document.getElementById('appsGrid');
-    apps.forEach(app => {
-        const tag = document.createElement('div');
-        tag.className = 'app-tag';
-        tag.textContent = app.name;
-        tag.onclick = () => showAppModal(app);
-        grid.appendChild(tag);
-    });
-}
-
-function showAppModal(app) {
-    document.getElementById('appName').textContent = app.name;
-    document.getElementById('appType').textContent = app.type;
-    document.getElementById('appDesc').textContent = app.desc;
-    document.getElementById('appIntegration').textContent = app.integration;
-    document.getElementById('appModal').classList.add('active');
-}
-
-function closeAppModal() {
-    document.getElementById('appModal').classList.remove('active');
-}
-
-document.addEventListener('click', (e) => {
-    const modal = document.getElementById('appModal');
-    if (e.target === modal) {
-        closeAppModal();
-    }
-});
-
-document.addEventListener('DOMContentLoaded', initializeApps);
 </script>
 
 </body>