add connected instances list to aprelay

services/aprelay.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link href="../style.css?v=20250831" rel="stylesheet" />
   <style>
-    /* Relay-only CSS */
     .relay-wrap {
       max-width: 860px;
       margin: 0 auto 60px;
@@ -30,7 +29,6 @@
         font-size: 18px;
       }
 
-    /* logo next to header */
     .relay-logo {
       display: block;
       width: 80px;
@@ -88,7 +86,6 @@
       font-size: 14px;
     }
 
-    /* Homepage-style icon box for updates */
     .updates-title {
       margin: 0 0 10px;
       font-size: 16px;
@@ -107,7 +104,6 @@
       line-height: 1.5;
     }
 
-    /* Policy box (make it match the rest of the page sizing) */
     .policy-card {
       font-size: 14px;
     }
@@ -203,7 +199,6 @@
       </noscript>
     </section>
 
-    <!-- Updates box -->
     <section class="relay-card updates-card" style="margin-top:16px;">
       <p class="updates-title"><strong>For relay updates, check here</strong></p>
       <div class="icon-row">
@@ -216,7 +211,6 @@
       </div>
     </section>
 
-    <!-- Covenant / policy box -->
     <section class="relay-card policy-card" style="margin-top:16px;">
       <p class="policy-title"><strong>Relay policy</strong></p>
 
@@ -242,6 +236,28 @@
       </div>
     </section>
 
+    <section class="relay-card instances-card" style="margin-top:16px;">
+      <p class="instances-title"><strong>Connected instances</strong></p>
+
+      <div class="instances-table" role="table" aria-label="Connected relay instances">
+        <div class="instances-header" role="row">
+          <span role="columnheader">Instance</span>
+          <span role="columnheader">Status</span>
+        </div>
+
+        <div id="instances-body" class="instances-body" role="rowgroup">
+          <div class="instances-row" role="row">
+            <span class="mono" role="cell">Loading…</span>
+            <span role="cell">–</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="instances-meta">
+        Last check: <span id="instances-updated">–</span>
+      </div>
+    </section>
+
     <footer class="site-footer" role="contentinfo" style="margin-top:16px;">
       <div class="footer-inner">
         <div class="footer-left">
@@ -275,6 +291,7 @@
   </main>
 
   <a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>Mastodon</a>
+  <a rel="me" href="https://mastodon.circlewithadot.net/@cwad" hidden>Mastodon</a>
 </body>
 </html>