fix index and aprelay changes

services/aprelay.html

@@ -87,6 +87,58 @@
       color: #9aa0a6;
       font-size: 14px;
     }
+
+    /* Homepage-style icon box for updates */
+    .updates-title {
+      margin: 0 0 10px;
+      font-size: 16px;
+      color: #9aa0a6;
+    }
+    .updates-card .icon-row {
+      margin-top: 8px;
+      justify-content: flex-start;
+      gap: 18px;
+      flex-wrap: wrap;
+    }
+    .updates-note {
+      margin-top: 12px;
+      color: #9aa0a6;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    /* Policy box (make it match the rest of the page sizing) */
+    .policy-card {
+      font-size: 14px;
+    }
+    .policy-title {
+      margin: 0 0 10px;
+      font-size: 16px;
+      color: #9aa0a6;
+    }
+    .policy-card p {
+      margin: 0;
+      color: #e6e6e6;
+      line-height: 1.6;
+      font-size: 14px;
+    }
+    .policy-card ul {
+      margin: 10px 0 0 20px;
+      padding: 0;
+      color: #e6e6e6;
+      line-height: 1.6;
+      font-size: 14px;
+    }
+    .policy-card li {
+      margin: 6px 0;
+      font-size: 14px;
+    }
+    .policy-note {
+      margin-top: 12px;
+      color: #9aa0a6;
+      font-size: 14px;
+      line-height: 1.5;
+    }
   </style>
   <script src="aprelay.js" defer></script>
 </head>
@@ -97,6 +149,7 @@
       <span class="brand-name">CIRCLE WITH A DOT</span>
     </a>
   </header>
+
   <main class="relay-wrap">
     <header class="relay-header">
       <img class="relay-logo" src="../images/aprelay_logo.png" alt="ActivityPub Relay logo" width="80" height="80">
@@ -139,19 +192,57 @@
         Last update: <span id="updated">–</span><br />
         <br />
         Built using <a href="https://github.com/yukimochi/Activity-Relay" target="blank">Activity-Relay</a><br />
-        <br >
+        <br />
-        Only the above mentioned services are *officially* supported. Friendica and other instances may or may not work.
+        Only the above mentioned services are <em>officially</em> supported. Friendica and other instances may or may not work.
       </div>
 
       <noscript>
         <p class="stats">
-          JavaScript is disabled. Copy the relay URLs above. Live stats require
+          JavaScript is disabled. Copy the relay URLs above. Live stats require JavaScript.
-          JavaScript.
         </p>
       </noscript>
     </section>
 
-    <footer class="site-footer" role="contentinfo">
+    <!-- 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">
+        <a href="https://mastodon.circlewithadot.net/@cwad" target="_blank" rel="noopener">
+          <img src="../images/icon_mastodon.png" alt="Mastodon" />
+        </a>
+      </div>
+      <div class="updates-note">
+        Follow <a href="https://mastodon.circlewithadot.net/@cwad" target="_blank" rel="noopener">@cwad</a> for maintenance notices and relay-related updates.
+      </div>
+    </section>
+
+    <!-- Covenant / policy box -->
+    <section class="relay-card policy-card" style="margin-top:16px;">
+      <p class="policy-title"><strong>Relay policy</strong></p>
+
+      <p>
+        This relay follows the spirit of the
+        <a href="https://joinmastodon.org/covenant" target="_blank" rel="noopener">Mastodon Server Covenant</a>.
+        We aim to keep the relay safe, respectful, and usable for the broader Fediverse.
+      </p>
+
+      <ul>
+        <li>
+          We will remove any servers from the relay known to actively promote homophobia, transphobia, racism,
+          or any other form of bigotry.
+        </li>
+        <li>
+          We expect participating servers to be at minimum <strong>well maintained</strong> (e.g., reasonable upkeep,
+          responsive administration, and not persistently broken or abusive to federation).
+        </li>
+      </ul>
+
+      <div class="policy-note">
+        If a server on the relay becomes a problem, please reach out via the updates account above.
+      </div>
+    </section>
+
+    <footer class="site-footer" role="contentinfo" style="margin-top:16px;">
       <div class="footer-inner">
         <div class="footer-left">
           <a
@@ -183,8 +274,7 @@
     </footer>
   </main>
 
-  <a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>
+  <a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>Mastodon</a>
-    Mastodon</a>
 </body>
 </html>