remove legacy wardrive app instead

Reviewed-on: https://git.ctmesh.org/ctmesh/web/pulls/1

.gitea/workflows/deploy.yml

@@ -17,4 +17,4 @@ jobs:
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          command: pages deploy /tmp/deploy --project-name=ctmesh-org
+          command: pages deploy /tmp/deploy --project-name=ctmesh-org --branch=${{ github.ref_name }}

.gitignore

@@ -0,0 +1 @@
+.DS_Store

_redirects

@@ -0,0 +1 @@
+/discord https://discord.gg/m4F328as3K 302

index.html

@@ -6,14 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
   <!-- Site Description & Keywords -->
-  <meta name="description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
-  <meta name="keywords" content="CT Mesh, Meshtastic, Connecticut, CT, community, user group, Discord, map">
+  <meta name="description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
+  <meta name="keywords" content="CT Mesh, Meshtastic, MeshCore, Connecticut, CT, community, mesh networking, user group, Discord, map">
   <meta name="author" content="CT Mesh">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.png?3">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:title" content="CT Mesh">
-  <meta property="og:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
+  <meta property="og:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
   <meta property="og:image" content="favicon.png?3">
   <meta property="og:url" content="https://ctmesh.org">
   <meta property="og:type" content="website">
@@ -21,7 +21,7 @@
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="CT Mesh">
-  <meta name="twitter:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
+  <meta name="twitter:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
   <meta name="twitter:image" content="favicon.png?3">
 
   <!-- Fonts and Icons -->
@@ -48,7 +48,7 @@
       margin: 0;
       padding: 0;
       width: 100%;
-      height: 100%;
+      min-height: 100%;
     }
     body {
       font-family: "Roboto", sans-serif;
@@ -78,8 +78,8 @@
       border-radius: 30px;
       padding: 3em 3em 2em 3em;
       margin: 1em;
-      width: min(100%, 900px);
-      max-width: 900px;
+      width: 90%;
+      max-width: 700px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
       color: #000000;
       position: relative;
@@ -122,7 +122,7 @@
     .btn {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 12px;
       background-color: #67EA94;
       color: #000000;
       border: none;
@@ -151,9 +151,48 @@
       height: 30px;
       filter: brightness(0);
     }
-    .btn-discord {
-      background-color: #7289da;
+    .btn-discord,
+    .btn-discord:visited {
+      background-color: #5865F2;
       color: #ffffff;
+      justify-content: center;
+    }
+    .btn-discord img {
+      filter: brightness(0) invert(1);
+    }
+    .btn-meshcore,
+    .btn-meshcore:visited {
+      background-color: #2B3A4E;
+      color: #ffffff;
+    }
+    .btn-meshcore img {
+      filter: brightness(0) invert(1);
+    }
+    a.btn[target="_blank"]::after {
+      content: "";
+      width: 16px;
+      height: 16px;
+      margin-left: auto;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M5 3.5h3.5V7'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      flex-shrink: 0;
+      opacity: 0.4;
+    }
+    a.btn:not([target="_blank"])::after {
+      content: "";
+      width: 16px;
+      height: 16px;
+      margin-left: auto;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5L8.5 6L4 9.5'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      flex-shrink: 0;
+      opacity: 0.4;
+    }
+    .btn-discord::after {
+      display: none;
+    }
+    .btn-meshcore::after {
+      filter: invert(1) !important;
     }
     .btn-group {
       display: flex;
@@ -165,11 +204,11 @@
     .btn-groups {
       display: flex;
       flex-direction: column;
-      gap: 1em;
+      gap: 1.5em;
     }
     .section-title {
       margin: 0.5em 0 0;
-      padding-top: 0.75em;
+      padding-top: 1em;
       font-size: 1rem;
       text-transform: uppercase;
       letter-spacing: 0.08em;
@@ -213,10 +252,7 @@
         padding-top: calc(env(safe-area-inset-top, 1em));
       }
       .splash-box {
-        margin-top: 1em;
-        margin-bottom: 1em;
         padding: 2em;
-        min-width: 350px;
       }
       .top-section {
         flex-direction: column;
@@ -232,32 +268,26 @@
       }
       .btn-group {
         flex-direction: column;
-        align-items: stretch;
+        align-items: center;
       }
       .section-title {
         text-align: center;
       }
       .btn {
-        width: 100%;
-        justify-content: center;
+        width: 340px;
+        max-width: 100%;
+        justify-content: flex-start;
         padding: 0.8em 1em;
         font-size: 16px;
-        text-align: center;
-        max-width: 100%;
+        text-align: left;
         flex: none;
       }
-      .btn-text {
-        align-items: center;
-      }
     }
     
     /* Further adjustments for devices with a viewport width of 480px or less */
     @media (max-width: 480px) {
       .splash-box {
         padding: 1.5em;
-        margin: 1em;
-        width: 90%;
-        min-width: 250px;
       }
       .logo {
         width: 120px;
@@ -282,58 +312,18 @@
       <img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
       <div class="text-content">
         <h1>CT Mesh</h1>
-        <p class="sub-header">Connecticut Meshtastic User Group</p>
+        <p class="sub-header">Connecticut Mesh Technologies User Group</p>
         <a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
       </div>
     </div>
     <div class="btn-groups">
       <div class="section">
         <div class="btn-group">
-          <a href="https://discord.gg/m4F328as3K" target="_blank" class="btn btn-discord">
-            <img src="discord.svg" alt="Discord Icon" />
+          <a href="/discord" target="_blank" class="btn btn-discord">
+            <img src="discord.svg" alt="Discord" />
             <div class="btn-text">
               Join our Discord
-              <small>Join the community</small>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="section">
-        <p class="section-title">Meshtastic</p>
-        <div class="btn-group">
-          <a href="https://meshtastic.org/" target="_blank" class="btn">
-            <img src="meshtastic.svg" alt="Meshtastic Icon" />
-            <div class="btn-text">
-              Meshtastic
-              <small>Learn more!</small>
-            </div>
-          </a>
-          <a href="https://malla.ctmesh.org/" target="_blank" class="btn">
-            <img src="info.svg" alt="Info Icon" />
-            <div class="btn-text">
-              Web Dashboard
-              <small>Network metrics & analytics</small>
-            </div>
-          </a>
-          <a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn">
-            <img src="map.svg" alt="Map Icon" />
-            <div class="btn-text">
-              CT Map
-              <small>Nodes seen by CT Mesh</small>
-            </div>
-          </a>
-          <a href="https://meshtastic.liamcottle.net/?lat=26.58852714730864&lng=285.11718750000006&zoom=2" target="_blank" class="btn">
-            <img src="globe.svg" alt="Globe Icon" />
-            <div class="btn-text">
-              Global Map
-              <small>Nodes around the world</small>
-            </div>
-          </a>
-          <a href="resources.html" class="btn">
-            <img src="info.svg" alt="Info Icon" />
-            <div class="btn-text">
-              Meshtastic Resources
-              <small>Channels, MQTT, tools</small>
+              <small>Chat with the community</small>
             </div>
           </a>
         </div>
@@ -341,46 +331,58 @@
       <div class="section">
         <p class="section-title">MeshCore</p>
         <div class="btn-group">
-          <a href="https://meshcore.co.uk/" target="_blank" class="btn">
-            <img src="meshcore.svg" alt="MeshCore Logo" />
+          <a href="https://meshcore.co.uk/" target="_blank" class="btn btn-meshcore">
+            <img src="meshcore.svg" alt="MeshCore" />
             <div class="btn-text">
-              Official MeshCore Website
-              <small>Project website</small>
+              MeshCore
+              <small>About the project</small>
             </div>
           </a>
-          <a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn">
-            <img src="map.svg" alt="Map Icon" />
+          <a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn btn-meshcore">
+            <img src="map.svg" alt="Map" />
             <div class="btn-text">
-              MeshCore Map
-              <small>Live node map</small>
+              Node Map
+              <small>Live MeshCore nodes</small>
             </div>
           </a>
-          <a href="https://meshcore-wardrive.ctmesh.org/" target="_blank" class="btn">
-            <img src="map.svg" alt="Map Icon" />
+          <a href="meshcore-resources.html" class="btn btn-meshcore">
+            <img src="info.svg" alt="Guides & Tools" />
             <div class="btn-text">
-              MeshCore Wardrive
-              <small>Coverage maps</small>
-            </div>
-          </a>
-          <a href="https://meshcore-wardrive.ctmesh.org/wardrive" target="_blank" class="btn">
-            <img src="wheel.svg" alt="Wheel Icon" />
-            <div class="btn-text">
-              Wardrive Contribution
-              <small>Upload wardrive data</small>
-            </div>
-          </a>
-          <a href="meshcore-resources.html" class="btn">
-            <img src="info.svg" alt="Info Icon" />
-            <div class="btn-text">
-              MeshCore Resources
-              <small>Tools and maps</small>
+              Guides & Tools
+              <small>Wardrive, MQTT, setup</small>
             </div>
           </a>
         </div>
       </div>
     </div>
+    <div class="section">
+        <p class="section-title">Meshtastic</p>
+        <div class="btn-group">
+          <a href="https://meshtastic.org/" target="_blank" class="btn">
+            <img src="meshtastic.svg" alt="Meshtastic" />
+            <div class="btn-text">
+              Meshtastic
+              <small>About the project</small>
+            </div>
+          </a>
+          <a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn">
+            <img src="map.svg" alt="Map" />
+            <div class="btn-text">
+              Node Map
+              <small>CT Mesh nodes</small>
+            </div>
+          </a>
+          <a href="meshtastic-resources.html" class="btn">
+            <img src="info.svg" alt="Guides & Tools" />
+            <div class="btn-text">
+              Guides & Tools
+              <small>Channels, MQTT, setup</small>
+            </div>
+          </a>
+        </div>
+      </div>
     <footer class="site-footer">
-      <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for <a href="https://meshtastic.org" target="_blank">Meshtastic</a> enthusiasts in Connecticut.</p>
+      <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for mesh technology enthusiasts in Connecticut.</p>
       <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Content licensed CC BY-SA 4.0</a></p>
     </footer>
   </div>

meshcore-resources.html

@@ -74,7 +74,7 @@
     }
     .note {
       background: #F5F5F5;
-      border-left: 4px solid #67EA94;
+      border-left: 4px solid #2B3A4E;
       border-radius: 8px;
       padding: 0.75em 1em;
       margin: 0.75em 0 0.5em;
@@ -98,8 +98,8 @@
       position: absolute;
       top: 0.75em;
       right: 0.75em;
-      background-color: #67EA94;
-      color: #000000;
+      background-color: #2B3A4E;
+      color: #ffffff;
       border: none;
       border-radius: 10px;
       padding: 0.4em 0.75em;
@@ -112,18 +112,79 @@
       align-items: center;
       justify-content: center;
       gap: 8px;
-      background-color: #67EA94;
-      color: #000000;
+      background-color: #2B3A4E;
+      color: #ffffff;
       border: none;
       padding: 0.75em 1.5em;
-      border-radius: 15px;
+      border-radius: 999px;
       cursor: pointer;
       font-weight: bold;
       font-size: 15px;
       text-decoration: none;
     }
-    .back-link {
+    .page-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+      text-decoration: none;
+      margin-bottom: 1.5em;
+    }
+    .page-header img {
+      width: 44px;
+      height: auto;
+    }
+    .page-header span {
+      font-weight: bold;
+      font-size: 19px;
+      color: #2C2D3C;
+    }
+    .back-link,
+    .back-link:visited {
       margin-top: 1.5em;
+      color: #ffffff;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .back-link::before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5L3.5 6L8 9.5'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      flex-shrink: 0;
+      opacity: 0.4;
+      filter: invert(1);
+    }
+    a[target="_blank"]::after {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      vertical-align: middle;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M5 3.5h3.5V7'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      opacity: 0.4;
+      text-decoration: underline;
+    }
+    .btn[target="_blank"]::after,
+    .copy-btn::after,
+    .site-footer a::after {
+      display: none;
+    }
+    .site-footer {
+      margin-top: 2em;
+      padding-top: 2em;
+      text-align: center;
+      font-size: 0.875rem;
+      color: #2C2D3C;
+      border-top: 1px solid #ccc;
+    }
+    .site-footer a {
+      text-decoration: none;
+    }
+    .site-footer a:hover {
+      text-decoration: underline;
     }
     @media (max-width: 800px) {
       body {
@@ -149,21 +210,25 @@
 <body>
   <div class="overlay"></div>
   <div class="content-box">
+    <a href="index.html" class="page-header">
+      <img src="logo_sm.png" alt="CT Mesh" />
+      <span>CT Mesh</span>
+    </a>
     <h1>MeshCore Resources</h1>
 
     <h2>Community-run Web Tools</h2>
     <div class="community-tools">
       <p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
       <ul>
-        <li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> - live map showing MeshCore nodes</li>
-        <li><a href="https://meshcore-wardrive.ctmesh.org/" target="_blank">MeshCore Wardriving Map</a> <strong>NEW!</strong> - coverage maps for MeshCore (you can also contribute!). <em>Note: a new app is in testing and may supersede this.</em></li>
+        <li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> &ndash; live map showing MeshCore nodes</li>
+        <li><a href="https://bdl.meshmapper.net/" target="_blank">MeshMapper</a> <strong>NEW!</strong> &ndash; coverage maps for MeshCore. Contribute via <a href="https://apps.apple.com/us/app/meshmapper/id6758073991" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=net.meshmapper.app" target="_blank">Android</a> mobile apps!</li>
       </ul>
     </div>
 
     <h2>Official Links</h2>
     <p><a href="https://meshcore.co.uk/" target="_blank">meshcore.co.uk</a></p>
     <p><a href="https://flasher.meshcore.co.uk/" target="_blank">flasher.meshcore.co.uk</a></p>
-    <div class="note"><strong>Note:</strong> the flasher requires WebSerial or Web Bluetooth support in your browser.</div>
+    <div class="note"><strong>Note:</strong> the flasher requires WebSerial or Web Bluetooth support in your browser</div>
 
     <h2>MQTT</h2>
     <p>Our MQTT broker is <em>uplink-only</em> and designed for fixed nodes across the state to serve as gateway nodes. Its purpose is not to bridge gaps or extend mesh coverage, but to report local traffic to our own web-based tools for analytical data and metrics to assess the mesh's performance. <strong>This role is best suited for stable, well-placed nodes with reliable coverage.</strong></p>
@@ -181,6 +246,10 @@ MCTOMQTT_MQTT3_PASSWORD=large4cats</pre>
     </div>
 
     <a class="btn back-link" href="index.html">Back to CT Mesh</a>
+    <footer class="site-footer">
+      <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for mesh technology enthusiasts in Connecticut.</p>
+      <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Content licensed CC BY-SA 4.0</a></p>
+    </footer>
   </div>
   <script>
     const copyButtons = document.querySelectorAll("[data-copy-target]");

meshtastic-resources.html

@@ -74,14 +74,17 @@
       padding: 0;
       line-height: 1.5;
     }
-    .settings {
+    .code-block {
       background: #F5F5F5;
       border-radius: 12px;
       padding: 1em;
       border: 1px solid #D0D0D0;
       margin: 0.75em 0;
+      position: relative;
     }
-    .settings code {
+    .code-block pre {
+      margin: 0;
+      white-space: pre-wrap;
       font-family: monospace;
       font-size: 0.95em;
     }
@@ -97,6 +100,13 @@
       margin-left: 0.5em;
       vertical-align: middle;
     }
+    .code-block .copy-btn {
+      position: absolute;
+      top: 0.75em;
+      right: 0.75em;
+      padding: 0.4em 0.75em;
+      margin-left: 0;
+    }
     .btn {
       display: inline-flex;
       align-items: center;
@@ -106,7 +116,7 @@
       color: #000000;
       border: none;
       padding: 0.75em 1.5em;
-      border-radius: 15px;
+      border-radius: 999px;
       cursor: pointer;
       font-weight: bold;
       font-size: 15px;
@@ -122,8 +132,74 @@
     .community-tools li {
       margin-bottom: 0.5em;
     }
+    .note {
+      background: #F5F5F5;
+      border-left: 4px solid #67EA94;
+      border-radius: 8px;
+      padding: 0.75em 1em;
+      margin: 0.75em 0 0.5em;
+      font-size: 0.95em;
+    }
+    .page-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+      text-decoration: none;
+      margin-bottom: 1.5em;
+    }
+    .page-header img {
+      width: 44px;
+      height: auto;
+    }
+    .page-header span {
+      font-weight: bold;
+      font-size: 19px;
+      color: #2C2D3C;
+    }
     .back-link {
       margin-top: 1.5em;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .back-link::before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5L3.5 6L8 9.5'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      flex-shrink: 0;
+      opacity: 0.4;
+    }
+    a[target="_blank"]::after {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      vertical-align: middle;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M5 3.5h3.5V7'/%3E%3C/svg%3E") no-repeat center;
+      background-size: contain;
+      opacity: 0.4;
+      text-decoration: underline;
+    }
+    .btn[target="_blank"]::after,
+    .copy-btn::after,
+    .site-footer a::after {
+      display: none;
+    }
+    .site-footer {
+      margin-top: 2em;
+      padding-top: 2em;
+      text-align: center;
+      font-size: 0.875rem;
+      color: #2C2D3C;
+      border-top: 1px solid #ccc;
+    }
+    .site-footer a {
+      text-decoration: none;
+    }
+    .site-footer a:hover {
+      text-decoration: underline;
     }
     @media (max-width: 800px) {
       body {
@@ -149,8 +225,24 @@
 <body>
   <div class="overlay"></div>
   <div class="content-box">
+    <a href="index.html" class="page-header">
+      <img src="logo_sm.png" alt="CT Mesh" />
+      <span>CT Mesh</span>
+    </a>
     <h1>Meshtastic Resources</h1>
 
+    <h2>Community-run Web Tools</h2>
+    <div class="community-tools">
+      <p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
+      <ul>
+        <li><a href="https://map.ctmesh.org/?lat=41.6558113360196&lng=287.3377990722657&zoom=10" target="_blank">Meshtastic Map</a> - live map of Meshtastic nodes CT Mesh has heard</li>
+        <li><a href="https://meshtastic.liamcottle.net/?lat=26.58852714730864&lng=285.11718750000006&zoom=2" target="_blank">Global Map</a> - Meshtastic nodes around the world</li>
+        <li><a href="https://malla.ctmesh.org/" target="_blank">Malla</a> - deeper packet-level metrics and mesh performance insights fed from MQTT</li>
+        <li><a href="https://potato.ctmesh.org/" target="_blank">PotatoMesh</a> <strong>NEW!</strong> - packet, chat, node list, and map fed from RF on Box Mountain</li>
+        <li><a href="https://meshinfo.ctmesh.org/" target="_blank">MeshInfo</a> <em>legacy, partially broken</em> - MQTT gateway setup info, secondary map, graphs, message history, etc.</li>
+      </ul>
+    </div>
+
     <h2>Mesh Channels</h2>
     <h3>Default (Primary) Channel</h3>
     <p><em>Most CT chatter occurs on the default LongFast channel.</em></p>
@@ -167,40 +259,32 @@
     <p>Our MQTT broker is <em>uplink-only</em> and designed for fixed nodes across the state to serve as gateway nodes. Its purpose is not to bridge gaps or extend mesh coverage, but to report local traffic to our own <a href="https://map.ctmesh.org" target="_blank">map</a> and other web-based tools for analytical data and metrics to assess the mesh's performance. <strong>This role is best suited for stable, well-placed nodes with reliable coverage.</strong> If that describes your setup, follow the steps at on <a href="https://meshinfo.ctmesh.org/" target="_blank">this page</a> to get set up.</p>
 
     <h3>Key Settings</h3>
-    <div class="settings">
-      <p>MQTT &gt; Enabled &gt; ON</p>
-      <p>MQTT &gt; Encryption Enabled &gt; ON</p>
-      <p>MQTT &gt; Map Report &gt; OFF</p>
-      <p>MQTT &gt; Root Topic &gt; <code>msh/US/CT</code></p>
-      <p>MQTT &gt; Address &gt; <code>mqtt.ctmesh.org</code></p>
-      <p>MQTT &gt; Username &gt; <code>meshdev</code></p>
-      <p>MQTT &gt; Password &gt; <code>large4cats</code></p>
-      <p>MQTT &gt; TLS Enabled &gt; OFF</p>
-      <p>Channels &gt; Primary Channel &gt; Positions Enabled &gt; ON</p>
-      <p>Channels &gt; Primary Channel &gt; Approximate Location &gt; (set as desired)</p>
-      <p>Channels &gt; Primary Channel &gt; MQTT Uplink &gt; ON</p>
-      <p>Channels &gt; Primary Channel &gt; MQTT Downlink &gt; OFF</p>
-      <p>Settings &gt; Modules &gt; Neighbor Info &gt; ON</p>
-      <p>LoRa &gt; Ok to MQTT &gt; ON</p>
-    </div>
-
-    <p><strong>Note:</strong> CT Mesh's MQTT server is bridged and uplinks to the MQTT servers for both <a href="https://meshtastic.liamcottle.net" target="_blank">meshtastic.liamcottle.net</a> and <a href="https://meshmap.net" target="_blank">meshmap.net</a>.</p>
-
-    <h2>Community-run Web Tools</h2>
-    <div class="community-tools">
-      <p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
-      <ul>
-        <li><a href="https://map.ctmesh.org/?lat=41.6558113360196&lng=287.3377990722657&zoom=10" target="_blank">Meshtastic Map</a> - live map of Meshtastic nodes CT Mesh has heard</li>
-        <li><a href="https://malla.ctmesh.org/" target="_blank">Malla</a> - deeper packet-level metrics and mesh performance insights fed from MQTT</li>
-        <li><a href="https://potato.ctmesh.org/" target="_blank">PotatoMesh</a> <strong>NEW!</strong> - packet, chat, node list, and map fed from RF on Box Mountain</li>
-        <li><a href="https://meshinfo.ctmesh.org/" target="_blank">MeshInfo</a> <em>legacy, partially broken</em> - MQTT gateway setup info, secondary map, graphs, message history, etc.</li>
-      </ul>
+    <div class="code-block">
+      <pre id="meshtastic-mqtt">MQTT > Enabled > ON
+MQTT > Encryption Enabled > ON
+MQTT > Map Report > OFF
+MQTT > Root Topic > msh/US/CT
+MQTT > Address > mqtt.ctmesh.org
+MQTT > Username > meshdev
+MQTT > Password > large4cats
+MQTT > TLS Enabled > OFF
+Channels > Primary Channel > Positions Enabled > ON
+Channels > Primary Channel > Approximate Location > (set as desired)
+Channels > Primary Channel > MQTT Uplink > ON
+Channels > Primary Channel > MQTT Downlink > OFF
+Settings > Modules > Neighbor Info > ON
+LoRa > Ok to MQTT > ON</pre>
     </div>
+    <div class="note"><strong>Note:</strong> CT Mesh's MQTT server is bridged and uplinks to the MQTT servers for both <a href="https://meshtastic.liamcottle.net" target="_blank">meshtastic.liamcottle.net</a> and <a href="https://meshmap.net" target="_blank">meshmap.net</a></div>
 
     <h2>Infrastructure Nodes</h2>
     <p><strong>Important:</strong> Infrastructure roles like <code>ROUTER</code>, <code>REPEATER</code>, <code>ROUTER_CLIENT</code>, or <code>ROUTER_LATE</code> are rarely appropriate. Unless your node is sitting on top of one of the tallest buildings in Hartford with clear line-of-sight across the region, using these roles will hurt more than help. For almost everyone, the correct choice is <code>CLIENT</code>. If you think you've got a node that truly warrants an infrastructure role, reach out first - we'd rather make sure it benefits the mesh than inadvertently weakens it.</p>
 
     <a class="btn back-link" href="index.html">Back to CT Mesh</a>
+    <footer class="site-footer">
+      <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for mesh technology enthusiasts in Connecticut.</p>
+      <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Content licensed CC BY-SA 4.0</a></p>
+    </footer>
   </div>
   <script>
     const copyButtons = document.querySelectorAll("[data-copy-target]");