Add OCA Modules Status section: searchable scrollable table with v19/v20 support indicators and GitHub icon links

index.html

@@ -99,6 +99,26 @@
       .biz-checkbox input[type="checkbox"]{width:1.05rem;height:1.05rem;accent-color:var(--brass);cursor:pointer;flex-shrink:0}
       .biz-success{margin-top:1.5rem}.biz-success i{font-size:2.5rem;color:var(--success);margin-bottom:.75rem}
       .biz-success h3{color:#fff;margin-bottom:.5rem}.biz-success p{color:rgba(255,255,255,.65);font-size:.95rem;max-width:480px;margin:0 auto 1.25rem;line-height:1.7}
+      /* OCA Modules */
+      .oca-section{padding:3.5rem 0;overflow-x:hidden}
+      .oca-search-wrap{max-width:400px;margin:0 auto 1.5rem}
+      .oca-search{width:100%;padding:.7rem 1rem;border-radius:var(--radius-pill);border:1px solid var(--line-brass);background:rgba(255,255,255,.06);color:#fff;font-family:Inter,sans-serif;font-size:.85rem;outline:none;transition:border-color .2s,background .2s;box-sizing:border-box}
+      .oca-search:focus{border-color:var(--brass);background:rgba(255,255,255,.1)}
+      .oca-search::placeholder{color:rgba(255,255,255,.3)}
+      .oca-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--line-brass);background:rgba(255,255,255,.03)}
+      .oca-table{width:100%;border-collapse:collapse;min-width:500px}
+      .oca-table th{padding:.75rem 1rem;text-align:left;font-family:Marcellus,Georgia,serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid var(--line-brass);background:rgba(13,27,46,.5);white-space:nowrap}
+      .oca-table th:last-child{width:48px;text-align:center}
+      .oca-table td{padding:.65rem 1rem;font-size:.85rem;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(201,162,39,.08);vertical-align:middle}
+      .oca-table tbody tr:hover{background:rgba(201,162,39,.06)}
+      .oca-table tbody tr:last-child td{border-bottom:none}
+      .oca-check{color:var(--success);font-size:1rem}
+      .oca-cross{color:rgba(255,255,255,.2);font-size:1rem}
+      .oca-icon-link{color:var(--brass);font-size:1.1rem;cursor:pointer;transition:color .2s,transform .2s;display:inline-block}
+      .oca-icon-link:hover{color:var(--brass-bright);transform:scale(1.2)}
+      .oca-empty{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-style:italic;display:none}
+      .oca-loading{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-size:.88rem}
+      @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}}
     </style>
     <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
     <noscript><link rel="stylesheet" href="style.css" /></noscript>
@@ -402,6 +422,33 @@
       </div>
     </section>
 
+    <!-- OCA Modules Status -->
+    <section class="section-dark oca-section" id="ocaModules">
+      <div class="container">
+        <p class="section-kicker">OCA Modules</p>
+        <h2 class="section-title">Most Used OCA Module Status</h2>
+        <div class="oca-search-wrap">
+          <input type="text" class="oca-search" id="ocaSearch" placeholder="Search modules..." />
+        </div>
+        <div class="oca-table-wrap">
+          <table class="oca-table" id="ocaTable">
+            <thead>
+              <tr>
+                <th>Module</th>
+                <th>Area</th>
+                <th>19.0</th>
+                <th>20.0</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody id="ocaTbody"></tbody>
+          </table>
+        </div>
+        <div class="oca-empty" id="ocaEmpty">No modules match your search.</div>
+        <div class="oca-loading" id="ocaLoading">Loading modules...</div>
+      </div>
+    </section>
+
     <!-- Business Wizard -->
     <section class="biz-wizard">
       <div class="container">

script.js

@@ -666,3 +666,66 @@ var si = 0,
                 form.submit();
                 document.body.removeChild(form);
             };
+
+            /* ---- OCA Modules Status ---- */
+            (function () {
+                var tbody = document.getElementById('ocaTbody');
+                var searchInput = document.getElementById('ocaSearch');
+                var empty = document.getElementById('ocaEmpty');
+                var loading = document.getElementById('ocaLoading');
+                var allModules = [];
+
+                function render(filter) {
+                    var q = (filter || '').toLowerCase();
+                    var matched = q ? allModules.filter(function (m) { return (m.name + ' ' + m.area).toLowerCase().indexOf(q) !== -1; }) : allModules;
+                    if (matched.length === 0) {
+                        tbody.innerHTML = '';
+                        empty.style.display = 'block';
+                        return;
+                    }
+                    empty.style.display = 'none';
+                    var html = '';
+                    for (var i = 0; i < matched.length; i++) {
+                        var mod = matched[i];
+                        var v19 = mod.v19 ? '<span class="oca-check">&#10003;</span>' : '<span class="oca-cross">&ndash;</span>';
+                        var v20 = mod.v20 ? '<span class="oca-check">&#10003;</span>' : '<span class="oca-cross">&ndash;</span>';
+                        html += '<tr>' +
+                            '<td>' + esc(mod.name) + '</td>' +
+                            '<td>' + esc(mod.area) + '</td>' +
+                            '<td>' + v19 + '</td>' +
+                            '<td>' + v20 + '</td>' +
+                            '<td><a href="' + esc(mod.URL) + '" target="_blank" rel="noopener" class="oca-icon-link" title="View on GitHub"><i class="fas fa-external-link-alt"></i></a></td>' +
+                            '</tr>';
+                    }
+                    tbody.innerHTML = html;
+                }
+
+                function esc(s) {
+                    var d = document.createElement('div');
+                    d.appendChild(document.createTextNode(s || ''));
+                    return d.innerHTML;
+                }
+
+                fetch('https://n8n.odoo4projects.com/webhook/oc-guy/modules')
+                    .then(function (r) { return r.json(); })
+                    .then(function (data) {
+                        if (data && Array.isArray(data.data)) {
+                            allModules = data.data;
+                        } else if (Array.isArray(data) && data.length > 0 && Array.isArray(data[0].data)) {
+                            allModules = data[0].data;
+                        } else if (Array.isArray(data)) {
+                            allModules = data;
+                        }
+                        loading.style.display = 'none';
+                        render(searchInput ? searchInput.value : '');
+                    })
+                    .catch(function () {
+                        loading.textContent = 'Could not load module status.';
+                    });
+
+                if (searchInput) {
+                    searchInput.addEventListener('input', function () {
+                        render(this.value);
+                    });
+                }
+            })();