add scuttlebutt status page with placeholder data

peach-web/templates/status/scuttlebutt.html.tera

@@ -2,16 +2,86 @@
 {%- block card %}
       <!-- SCUTTLEBUTT STATUS -->
       <div class="card center">
-        <div class="card-container">
+        <!-- NETWORK INFO BOX -->
-          <p>Network key: </p>
+        <div class="capsule capsule-container success-border"> 
-          <p>Replication hops: </p>
+          <!-- NETWORK STATUS GRID -->
-          <p>Sbot version: </p>
+          <div class="two-grid" title="PeachCloud network mode and status">
-          <p>Process status: </p>
+            <!-- top-right config icon -->
+            <a class="link two-grid-top-right" href="/settings/scuttlebutt" title="Configure Scuttlebutt settings">
+              <img id="configureNetworking" class="icon-small" src="/icons/cog.svg" alt="Configure">
+            </a>
+            <!-- left column -->
+            <!-- network mode icon with label -->
+            <div class="grid-column-1">
+              <img id="netModeIcon" class="center icon icon-active" src="/icons/hermies.svg" alt="WiFi router">
+              <label id="netModeLabel" for="netModeIcon" class="center label-small font-gray" style="margin-top: 0.5rem;" title="Access Point Online">ACTIVE</label>
+            </div>
+            <!-- right column -->
+            <!-- network mode, ssid & ip with labels -->
+            <div class="grid-column-2">
+              <label class="label-small font-gray" for="netMode" title="Network Mode">VERSION</label>
+              <p id="netMode" class="card-text" title="Network Mode">1.1.0-alpha</p>
+              <label class="label-small font-gray" for="netSsid" title="Access Point SSID" style="margin-top: 0.5rem;">UPTIME</label>
+              <p id="netSsid" class="card-text" title="SSID">3 days & 7 hours</p>
+            </div>
+          </div>
+          <div id="middleSection" style="margin-top: 1rem;">
+            <div id="ssbSocialCounts" class="center" style="display: flex; justify-content: space-between; width: 90%;">
+              <div style="display: flex; align-items: last baseline;">
+                <label class="card-text" style="margin-right: 2px;">21</label>
+                <label class="label-small font-gray">Friends</label>
+              </div>
+              <div style="display: flex; align-items: last baseline;">
+                <label class="card-text" style="margin-right: 2px;">5</label>
+                <label class="label-small font-gray">Follows</label>
+              </div>
+              <div style="display: flex; align-items: last baseline;">
+                <label class="card-text" style="margin-right: 2px;">38</label>
+                <label class="label-small font-gray">Followers</label>
+              </div>
+              <div style="display: flex; align-items: last baseline;">
+                <label class="card-text" style="margin-right: 2px;">2</label>
+                <label class="label-small font-gray">Blocks</label>
+              </div>
+            </div>
+          </div>
+          <!--
+          <p class="card-text">Latest sequence number: </p>
+          <p class="card-text">Network key: </p>
           <p>Process uptime: </p>
+          <p>Sbot version: </p>
+          <p>Replication hops: </p>
+          <p>Process status: </p>
           <p>Blobstore size: </p>
-          <p>Latest sequence number: </p>
           <p>Last time you visited this page, latest sequence was x ... now it's y</p>
           <p>Number of follows / followers / friends / blocks</p>
+          -->
+          <!-- THREE-ACROSS STACK -->
+          <div class="three-grid card-container" style="margin-top: 1rem;">
+            <div class="stack">
+              <img class="icon" title="Hops" src="/icons/orbits.png">
+              <div class="flex-grid" style="padding-top: 0.5rem;">
+                <label class="label-medium" style="padding-right: 3px;" title="Replication hops">2</label>
+              </div>
+              <label class="label-small font-gray">HOPS</label>
+            </div>
+            <div class="stack">
+              <img class="icon" title="Blobs" src="/icons/image-file.png">
+              <div class="flex-grid" style="padding-top: 0.5rem;">
+                <label class="label-medium" style="padding-right: 3px;" title="Blobstore size in MB">163</label>
+                <label class="label-small font-near-black">MB</label>
+              </div>
+              <label class="label-small font-gray">BLOBSTORE</label>
+            </div>
+            <div class="stack">
+              <img class="icon" title="Memory" src="/icons/ram.png">
+              <div class="flex-grid" style="padding-top: 0.5rem;">
+                <label class="label-medium" style="padding-right: 3px;" title="Memory usage of the go-sbot process in MB">47</label>
+                <label class="label-small font-near-black">MB</label>
+              </div>
+              <label class="label-small font-gray">MEMORY</label>
+            </div>
+          </div>
         </div>
       </div>
 {%- endblock card -%}