Merge pull request 'Add SSB-related templates' (#21) from ssb_templates into main

Reviewed-on: #21

peach-web/static/css/peachcloud.css

@@ -206,6 +206,13 @@
     margin-bottom: 1rem;
 }
 
+.capsule-profile {
+    margin-left: 2rem;
+    margin-right: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+}
+
 /*
  * CARDS
  */
@@ -267,6 +274,7 @@
 
 .circle {
     align-items: center;
+    background: var(--light-gray);
     border-radius: 50%;
     box-shadow: var(--box-shadow-3);
     display: flex;
@@ -427,6 +435,20 @@
     justify-content: center;
 }
 
+.profile-grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto;
+    grid-gap: 10px;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+    margin-right: 2rem;
+    margin-left: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+}
+
 .stack {
     display: grid;
     align-items: flex-end;
@@ -568,7 +590,7 @@
 }
 
 .icon-large {
-    width: 3rem;
+    width: 5rem;
 }
 
 .icon-100 {
@@ -610,6 +632,12 @@
     width: 100%;
 }
 
+.message-input {
+    height: 7rem;
+    overflow: auto;
+    resize: vertical;
+}
+
 .alert-input {
     /* Needed to render inputs & buttons of equal width */
     -moz-box-sizing: border-box;
@@ -645,6 +673,12 @@
     display: block;
 }
 
+.label-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 10rem;
+}
+
 .input-label {
     margin-bottom: 0.4rem;
 }

peach-web/static/icons/pencil.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#000000" d="M19.104 0.896c-0.562-0.562-1.309-0.871-2.104-0.871s-1.542 0.309-2.104 0.871l-12.75 12.75c-0.052 0.052-0.091 0.114-0.116 0.183l-2 5.5c-0.066 0.183-0.021 0.387 0.116 0.524 0.095 0.095 0.223 0.146 0.354 0.146 0.057 0 0.115-0.010 0.171-0.030l5.5-2c0.069-0.025 0.131-0.065 0.183-0.116l12.75-12.75c0.562-0.562 0.871-1.309 0.871-2.104s-0.309-1.542-0.871-2.104zM5.725 17.068l-4.389 1.596 1.596-4.389 11.068-11.068 2.793 2.793-11.068 11.068zM18.396 4.396l-0.896 0.896-2.793-2.793 0.896-0.896c0.373-0.373 0.869-0.578 1.396-0.578s1.023 0.205 1.396 0.578c0.373 0.373 0.578 0.869 0.578 1.396s-0.205 1.023-0.578 1.396z"></path>
+</svg>

peach-web/static/icons/user.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#000000" d="M9.5 11c-3.033 0-5.5-2.467-5.5-5.5s2.467-5.5 5.5-5.5 5.5 2.467 5.5 5.5-2.467 5.5-5.5 5.5zM9.5 1c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5c2.481 0 4.5-2.019 4.5-4.5s-2.019-4.5-4.5-4.5z"></path>
+<path fill="#000000" d="M17.5 20h-16c-0.827 0-1.5-0.673-1.5-1.5 0-0.068 0.014-1.685 1.225-3.3 0.705-0.94 1.67-1.687 2.869-2.219 1.464-0.651 3.283-0.981 5.406-0.981s3.942 0.33 5.406 0.981c1.199 0.533 2.164 1.279 2.869 2.219 1.211 1.615 1.225 3.232 1.225 3.3 0 0.827-0.673 1.5-1.5 1.5zM9.5 13c-3.487 0-6.060 0.953-7.441 2.756-1.035 1.351-1.058 2.732-1.059 2.746 0 0.274 0.224 0.498 0.5 0.498h16c0.276 0 0.5-0.224 0.5-0.5-0-0.012-0.023-1.393-1.059-2.744-1.382-1.803-3.955-2.756-7.441-2.756z"></path>
+</svg>

peach-web/templates/admin/configure_admin.html.tera

@@ -2,33 +2,29 @@
 {%- block card %}
       <!-- CONFIGURE ADMIN PAGE -->
       <div class="card center">
-            <div class="text-container">
-                <h4> Current Admins </h4>
-
-                {% if not ssb_admin_ids %}
-                    <div>
-                        There are no currently configured admins.
-                    </div>
-                {% else %}
-                    {% for admin in ssb_admin_ids %}
-                        <div>
-                            <form action="/settings/admin/delete" method="post">
-                                <input type="hidden" name="ssb_id" value="{{admin}}"/>
-                                <input type="submit" value="X" title="Delete"/> <span>{{ admin }}</span>
-                            </form>
-                        </div>
-                    {% endfor %}
-                {% endif %}
-                <a class="button button-primary center full-width" style="margin-top: 25px;" href="/settings/admin/add" title="Add Admin">Add Admin</a>
+        <div class="text-container">
+          <h4> Current Admins </h4>
+          {% if not ssb_admin_ids %}
+            <div>
+              There are no currently configured admins.
             </div>
-
-
-            <!-- FLASH MESSAGE -->
-           {% include "snippets/flash_message" %}
-
-           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
-           {% include "snippets/noscript" %}
-
+          {% else %}
+            {% for admin in ssb_admin_ids %}
+              <div>
+                <form action="/settings/admin/delete" method="post">
+                  <input type="hidden" name="ssb_id" value="{{admin}}"/>
+                  <input type="submit" value="X" title="Delete"/> <span>{{ admin }}</span>
+                </form>
+              </div>
+            {% endfor %}
+          {% endif %}
+          <a class="button button-primary center full-width" style="margin-top: 25px;" href="/settings/admin/add" title="Add Admin">Add Admin</a>
         </div>
+
+        <!-- FLASH MESSAGE -->
+        {% include "snippets/flash_message" %}
+
+        <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+        {% include "snippets/noscript" %}
       </div>
 {%- endblock card -%}

peach-web/templates/device.html.tera

@@ -126,14 +126,7 @@
           <p class="card-text">Uptime data unavailable</p>
           {%- endif %}
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" -%}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" -%}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif %}
+          {% include "snippets/flash_message" %}
         </div>
       </div>
 {%- endblock card %}

peach-web/templates/index.html.tera

@@ -13,7 +13,7 @@
         <!-- CURRENT USER LINK AND ICON -->
         <a class="top-middle" href="/profile" title="Profile">
           <div class="circle circle-small">
-            <img class="icon-100" src="icons/glyph.png">
+            <img class="icon-medium" src="icons/user.svg">
           </div>
         </a>
         <!-- top-right -->

peach-web/templates/login.html.tera

@@ -14,17 +14,7 @@
           </form>
 
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {% if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "info" %}
-          <!-- display info message -->
-          <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif -%}
+          {% include "snippets/flash_message" %}
 
          <div class="center-text" style="margin-top: 25px;">
              <a href="/forgot_password" class="label-small link">Forgot Password?</a>

peach-web/templates/messages.html.tera

@@ -4,18 +4,9 @@
       <div class="card center">
         <div class="card-container">
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <p class="center-text flash-message">This website will be unresponsive while the device shuts down or reboots.</p>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
 {%- endblock card -%}

peach-web/templates/network_add.html.tera

@@ -14,23 +14,9 @@
             </div>
           </form>
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {% if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "info" %}
-          <!-- display info message -->
-          <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif -%}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <div class="capsule flash-message info-border">
-              <p class="center-text">This website may be temporarily unresponsive while the WiFi credentials are added.</p>
-            </div>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
       <script type="text/javascript" src="/js/network_add.js"></script>

peach-web/templates/network_card.html.tera

@@ -33,17 +33,7 @@
           <a id="viewUsage" class="button button-primary center" href="/network/wifi/usage" title="View Data Usage">View Data Usage</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif %}
+        {% include "snippets/flash_message" %}
         <!-- CARD GRID -->
         <div class="card-container">
           <div class="three-grid">
@@ -124,17 +114,7 @@
           <a id="configureAdmin" class="button button-primary center" href="/settings/configure_admin" title="Configure Admin">Configure Admin</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-success">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-info">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif %}
+        {% include "snippets/flash_message" %}
         <div id="gridDiv" class="card-container">
           <!-- CARD GRID -->
           <!-- row of icons representing network statistics -->

peach-web/templates/network_detail.html.tera

@@ -66,17 +66,7 @@
           <a class="button button-secondary center" href="/network/wifi" title="Cancel">Cancel</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif -%}
+        {% include "snippets/flash_message" %}
       </div>
     </div>
     <script type="text/javascript" src="/js/network_detail.js"></script>

peach-web/templates/network_modify.html.tera

@@ -14,17 +14,7 @@
               </div>
             </form>
             <!-- FLASH MESSAGE -->
-            <!-- check for flash message and display accordingly -->
-            {%- if flash_msg and flash_name == "success" %}
-            <!-- display success message -->
-            <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-            {%- elif flash_msg and flash_name == "info" %}
-            <!-- display info message -->
-            <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-            {%- elif flash_msg and flash_name == "error" %}
-            <!-- display error message -->
-            <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-            {%- endif -%}
+            {% include "snippets/flash_message" %}
           </div>
         </div>
         <script type="text/javascript" src="/js/network_modify.js"></script>

peach-web/templates/network_usage.html.tera

@@ -41,17 +41,7 @@
           <a class="button button-secondary center" href="/network" title="Cancel">Cancel</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {% if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-        {%- endif -%}
+        {% include "snippets/flash_message" %}
       </form>
       <script type="text/javascript" src="/js/network_usage.js"></script>
 {%- endblock card %}

peach-web/templates/password/change_password.html.tera

@@ -2,35 +2,33 @@
 {%- block card %}
       <!-- CHANGE PASSWORD FORM -->
       <div class="card center">
-
         <div class="form-container">
-
-              <form id="changePassword" action="/settings/change_password" method="post">
-              <div class="input-wrapper">
-                <!-- input for old password -->
-                <label id="old_password" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label>
+          <form id="changePassword" action="/settings/change_password" method="post">
+            <div class="input-wrapper">
+              <!-- input for old password -->
+              <label id="old_password" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label>
                 <input id="old_password" class="form-input"  style="margin-bottom: 0;"
-                    name="old_password" type="password" title="old password" value=""></label>
+                    name="old_password" type="password" title="old password" value="">
+              </label>
+            </div>
 
-              </div>
-
-              <div class="input-wrapper">
-                <!-- input for new password1 -->
-                <label id="new_password1" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
+            <div class="input-wrapper">
+              <!-- input for new password1 -->
+              <label id="new_password1" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
                 <input id="new_password1" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password1"  title="new_password1" type="password" value=""></label>
-              </div>
+                    name="new_password1"  title="new_password1" type="password" value="">
+              </label>
+            </div>
 
-               <div class="input-wrapper">
-                <!-- input for new password2 -->
-                <label id="new_password2" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
+            <div class="input-wrapper">
+              <!-- input for new password2 -->
+              <label id="new_password2" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
                 <input id="new_password2" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password2"  title="new_password2" type="password" value=""></label>
-              </div>
-
+                    name="new_password2"  title="new_password2" type="password" value="">
+              </label>
             </div>
 
             <div id="buttonDiv">
@@ -39,11 +37,11 @@
             <a class="button button-secondary center" href="/network" title="Cancel">Cancel</a>
           </form>
 
-            <!-- FLASH MESSAGE -->
-           {% include "snippets/flash_message" %}
+          <!-- FLASH MESSAGE -->
+          {% include "snippets/flash_message" %}
 
-           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
-           {% include "snippets/noscript" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
 
         </div>
       </div>

peach-web/templates/password/forgot_password.html.tera

@@ -2,25 +2,23 @@
 {%- block card %}
       <!--PUBLIC PAGE FOR SENDING A NEW TEMPORARY PASSWORD TO BE USED TO RESET YOUR PASSWORD -->
       <div class="card center">
+        <p class="text-notice" style="width: 80%;  margin:auto; margin-bottom: 35px; margin-top: 20px;">
+          Click the button below to send a new temporary password which can be used to change your device password.
+          <br/><br/>
+          The temporary password will be sent in an SSB private message to the admin of this device.
+        </p>
 
-            <p class="text-notice" style="width: 80%;  margin:auto; margin-bottom: 35px; margin-top: 20px;">
-                Click the button below to send a new temporary password which can be used to change your device password.
-                <br/><br/>
-                The temporary password will be sent in an SSB private message to the admin of this device.
-            </p>
+        <form id="sendPasswordReset" action="/send_password_reset" method="post">
+          <div id="buttonDiv">
+            <input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/>
+          </div>
+        </form>
 
-           <form id="sendPasswordReset" action="/send_password_reset" method="post">
-                <div id="buttonDiv">
-                    <input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/>
-                </div>
-           </form>
-
-           <!-- FLASH MESSAGE -->
-           {% include "snippets/flash_message" %}
-
-           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
-           {% include "snippets/noscript" %}
+        <!-- FLASH MESSAGE -->
+        {% include "snippets/flash_message" %}
 
+        <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+        {% include "snippets/noscript" %}
 
         </div>
       </div>

peach-web/templates/password/reset_password.html.tera

@@ -2,35 +2,33 @@
 {%- block card %}
       <!-- RESET PASSWORD PAGE -->
       <div class="card center">
-
         <div class="form-container">
-
-              <form id="changePassword" action="/reset_password" method="post">
-              <div class="input-wrapper">
-                <!-- input for temporary password -->
-                <label id="temporary_password" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="temporary_password" style="padding-top: 0.25rem;">Temporary Password</label>
+          <form id="changePassword" action="/reset_password" method="post">
+            <div class="input-wrapper">
+              <!-- input for temporary password -->
+              <label id="temporary_password" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="temporary_password" style="padding-top: 0.25rem;">Temporary Password</label>
                 <input id="temporary_password" class="form-input"  style="margin-bottom: 0;"
-                    name="temporary_password" type="password" title="temporary password" value=""></label>
+                    name="temporary_password" type="password" title="temporary password" value="">
+              </label>
+            </div>
 
-              </div>
-
-              <div class="input-wrapper">
-                <!-- input for new password1 -->
-                <label id="new_password1" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
+            <div class="input-wrapper">
+              <!-- input for new password1 -->
+              <label id="new_password1" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
                 <input id="new_password1" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password1"  title="new_password1" type="password" value=""></label>
-              </div>
+                    name="new_password1"  title="new_password1" type="password" value="">
+              </label>
+            </div>
 
-               <div class="input-wrapper">
-                <!-- input for new password2 -->
-                <label id="new_password2" class="label-small input-label font-near-black">
-                   <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
+            <div class="input-wrapper">
+              <!-- input for new password2 -->
+              <label id="new_password2" class="label-small input-label font-near-black">
+                <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
                 <input id="new_password2" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password2"  title="new_password2" type="password" value=""></label>
-              </div>
-
+                    name="new_password2"  title="new_password2" type="password" value="">
+              </label>
             </div>
 
             <div id="buttonDiv">
@@ -38,11 +36,11 @@
             </div>
           </form>
 
-           <!-- FLASH MESSAGE -->
-           {% include "snippets/flash_message" %}
+          <!-- FLASH MESSAGE -->
+          {% include "snippets/flash_message" %}
 
-           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
-           {% include "snippets/noscript" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
 
         </div>
       </div>

peach-web/templates/peers.html.tera

@@ -3,19 +3,13 @@
       <!-- SCUTTLEBUTT PEERS -->
       <div class="card center">
         <div class="card-container">
-          <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <p class="center-text flash-message">This website will be unresponsive while the device shuts down or reboots.</p>
-          </noscript>
+          <!-- BUTTONS -->
+          <div id="buttons">
+            <a id="friends" class="button button-primary center" href="/scuttlebutt/friends" title="List Friends">Friends</a>
+            <a id="follows" class="button button-primary center" href="/scuttlebutt/follows" title="List Follows">Follows</a>
+            <a id="followers" class="button button-primary center" href="/scuttlebutt/followers" title="List Followers">Followers</a>
+            <a id="blocks" class="button button-primary center" href="/scuttlebutt/blocks" title="List Blocks">Blocks</a>
+          </div>
         </div>
       </div>
 {%- endblock card -%}

peach-web/templates/peers_list.html.tera

@@ -0,0 +1,16 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <div class="card center">
+        <ul class="list">
+          <!-- for peer in peers -->
+          <li>
+            <a class="list-item link light-bg" href="/scuttlebutt/profile?public_key=pub_key">
+              <img id="peerImage" class="icon list-icon" src="{ image_path }" alt="{ peer_name }'s profile image">
+              <p id="peerName" class="list-text">{ name }</p>
+              <label class="label-small label-ellipsis list-label font-gray" for="peerName" title="{ peer_name }'s Public Key">{ public_key }</label>
+            </a>
+          </li>
+          <!-- end for loop -->
+        </ul>
+      </div>
+{%- endblock card -%}

peach-web/templates/profile.html.tera

@@ -2,20 +2,31 @@
 {%- block card %}
       <!-- USER PROFILE -->
       <div class="card center">
-        <div class="card-container">
-          <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <p class="center-text flash-message">This website will be unresponsive while the device shuts down or reboots.</p>
-          </noscript>
+        <!-- PROFILE INFO BOX -->
+        <div class="capsule capsule-profile" title="Scuttlebutt account profile information">
+          <!-- edit profile button -->
+          <img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
+          <!-- PROFILE BIO -->
+          <!-- profile picture -->
+          <img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
+          <!-- name, public key & description -->
+          <p id="profileName" class="card-text" title="Name">{ name }</p>
+          <label class="label-small label-ellipsis font-gray" style="user-select: all;" for="profileName" title="Public Key">{ public_key }</label>
+          <p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
         </div>
+        <!-- PUBLIC POST FORM -->
+        <form id="postForm" action="/scuttlebutt/post" method="post">
+          <!-- input for message contents -->
+          <textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
+          <input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
+        </form>
+        <!-- BUTTONS -->
+        <div id="buttons">
+          <a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
+          <a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
+          <a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
+        </div>
+        <!-- FLASH MESSAGE -->
+        {% include "snippets/flash_message" %}
       </div>
 {%- endblock card -%}

peach-web/templates/settings.html.tera

@@ -0,0 +1,14 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <!-- SETTINGS MENU -->
+      <div class="card center">
+        <div class="card-container">
+          <!-- BUTTONS -->
+          <div id="settingsButtons">
+            <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
+            <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
+            <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
+          </div>
+        </div>
+      </div>
+{%- endblock card -%}

peach-web/templates/shutdown.html.tera

@@ -10,20 +10,9 @@
             <a id="cancelBtn" class="button button-secondary center" href="/" title="Cancel">Cancel</a>
           </div>
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <div class="capsule flash-message info-border">
-              <p class="center-text">This website will be unresponsive while the device shuts down or reboots.</p>
-            </div>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
       <script type="text/javascript" src="/js/shutdown_menu.js"></script>

peach-web/templates/ssb_settings.html.tera

@@ -0,0 +1,20 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <!-- SCUTTLEBUTT SETTINGS MENU -->
+      <div class="card center">
+        <div class="card-container">
+          <!-- BUTTONS -->
+          <div id="settingsButtons">
+            <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
+            <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
+            <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
+            <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
+            <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
+            <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
+            <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
+            <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
+            <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
+          </div>
+        </div>
+      </div>
+{%- endblock card -%}