From 55031ad71166d023500c7d545658e8adb921e413 Mon Sep 17 00:00:00 2001
From: Pablo Revilla <pablorevilla@gmail.com>
Date: Thu, 13 Feb 2025 22:57:48 -0800
Subject: [PATCH] Made the conversation section a bit more modern looking

---
 meshview/templates/chat.html       | 10 ++++++++--
 meshview/templates/net.html        | 18 ++++++++++++++----
 meshview/templates/net_packet.html | 14 ++++++--------
 meshview/templates/stats.html      |  6 +++---
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/meshview/templates/chat.html b/meshview/templates/chat.html
index 48eb783..821f601 100644
--- a/meshview/templates/chat.html
+++ b/meshview/templates/chat.html
@@ -5,11 +5,17 @@
     min-width:10em;
 }
 .chat-packet:nth-of-type(odd){
-    background-color:#1f1f1f;
+    background-color: #3a3a3a; /* Lighter than #2a2a2a */
+}
+.chat-packet {
+    border-bottom: 1px solid #555;
+    padding: 8px;
+    border-radius: 8px; /* Adjust the value to make the corners more or less rounded */
 }
 .chat-packet:nth-of-type(even){
-    background-color:#181818;
+    background-color: #333333; /* Slightly lighter than the previous #181818 */
 }
+
 {% endblock %}
 
 
diff --git a/meshview/templates/net.html b/meshview/templates/net.html
index c6f63e6..b16e0db 100644
--- a/meshview/templates/net.html
+++ b/meshview/templates/net.html
@@ -5,18 +5,28 @@
     min-width:10em;
 }
 .chat-packet:nth-of-type(odd){
-    background-color:#1f1f1f;
+    background-color: #3a3a3a; /* Lighter than #2a2a2a */
+}
+.chat-packet {
+    border-bottom: 1px solid #555;
+    padding: 8px;
+    border-radius: 8px; /* Adjust the value to make the corners more or less rounded */
 }
 .chat-packet:nth-of-type(even){
-    background-color:#181818;
+    background-color: #333333; /* Slightly lighter than the previous #181818 */
 }
+
 {% endblock %}
 
 
 {% block body %}
-    <div class="container"hx-ext="sse" sse-connect="/net_events" sse-swap="net_packet" hx-swap="afterbegin">
+
+    <div class="container" > Weekly Mesh check-in. We will keep it open on every Wednesday from 5:00pm for checkins so you do not have to rush.<br>
+        The message format should be (LONG NAME) - (CITY YOU ARE IN) #BayMeshNet.<br><br>
+ </div>
+    <div class="container" hx-ext="sse" sse-connect="/net_events" sse-swap="net_packet" hx-swap="afterbegin">
         {% for packet in packets %}
-        {% include 'net_packet.html' %}
+        {% include 'chat_packet.html' %}
         {% else %}
         No packets found.
         {% endfor %}
diff --git a/meshview/templates/net_packet.html b/meshview/templates/net_packet.html
index 3a06039..9a6d833 100644
--- a/meshview/templates/net_packet.html
+++ b/meshview/templates/net_packet.html
@@ -1,8 +1,6 @@
-<div class="card mt-2">
-    <div class="card-header">
-        <span class="fw-bold">{{packet.from_node.long_name}}</span>
-            </div>
-    <div class="card-body">
-            <div>{{packet.import_time.strftime('%-I:%M:%S %p - %d-%m-%Y')}} - {{packet.payload}}</div>
-    </div>
-</div>
+<div class="row chat-packet">
+    <span class="col-2 timestamp">{{packet.import_time.strftime('%-I:%M:%S %p - %d-%m-%Y')}} </span>
+    <span class="col-1 timestamp"><a href="/packet/{{packet.id}}">✉️</a> {{packet.from_node.channel}}</span>
+    <span class="col-2 username"><a href="/packet_list/{{packet.from_node_id}}">{{packet.from_node.long_name or (packet.from_node_id | node_id_to_hex) }}</a></span>
+    <span class="col-6 message">{{packet.payload}}</span>
+</div>
\ No newline at end of file
diff --git a/meshview/templates/stats.html b/meshview/templates/stats.html
index 0770699..aca49cf 100644
--- a/meshview/templates/stats.html
+++ b/meshview/templates/stats.html
@@ -16,14 +16,14 @@
     <!-- Section for Total Nodes -->
     <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 15px;">
         <p style="font-size: 16px; margin: 0; font-weight: 500;">
-            Total Nodes (Last 24 hours):
+            Total Active Nodes (Last 24 hours):
             <span style="font-weight: 700; color: #ffeb3b;">{{ total_nodes }}</span>
         </p>
     </div>
     <!-- Section for Total Nodes LongFast -->
     <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 10px;">
         <p style="font-size: 14px; margin: 0; font-weight: 500;">
-            Total Nodes LongFast:
+            Total Active Nodes LongFast: <br>
             <span style="font-weight: 700; color: #03dac6;">{{ total_nodes_longfast }}</span>
             <span style="font-size: 12px; color: #ffeb3b; font-weight: 400;">
                 ({{ (total_nodes_longfast / total_nodes * 100) | round(2) }}%)
@@ -33,7 +33,7 @@
     <!-- Section for Total Nodes MediumSlow -->
     <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 10px;">
         <p style="font-size: 14px; margin: 0; font-weight: 500;">
-            Total Nodes MediumSlow:
+            Total Active Nodes MediumSlow: <br>
             <span style="font-weight: 700; color: #03dac6;">{{ total_nodes_mediumslow }}</span>
             <span style="font-size: 12px; color: #ffeb3b; font-weight: 400;">
                 ({{ (total_nodes_mediumslow / total_nodes * 100) | round(2) }}%)