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">