data/web/templates/home.jinja2

@@ -11,13 +11,16 @@
     {% endfor %}
     </ul>
 
+<div class="container-fluid col-8">
     <h1>Bumper</h1>
     
-    
     <!-- Section Stats -->
-    <div class="card col-8">
-    <div>
-    <h2>Bumper Server Status</h2>
+    <div class="card bg-light border-dark">
+        <div class="card-header">
+            <h2 class="card-title">Bumper Server Status</h2>
+        </div>    
+        <div class="card-body">
+        
         <h3>MQTT Server</h3>
         Status: {% if mqtt_server[0].state == "started" %} <span class="badge badge-success">{{ mqtt_server[0].state }}</span> {% else %} <span class="badge badge-danger">{{ mqtt_server[0].state }}</span> {% endif %}
         Sessions: {{ mqtt_server[1].sessions[0].count }}
@@ -57,14 +60,17 @@
         Status: {% if helperbot[0].state == "connected" %} <span class="badge badge-success">{{ helperbot[0].state }}</span> {% else %} <span class="badge badge-danger">{{ helperbot[0].state }}</span> {% endif %}
 
         </div>
+
     </div>
 
     </br>
 
     <!-- Section Bots -->
-    <div class="card col-8">
-    <div>
-    <h2>Bots</h2>
+    <div class="card bg-light border-dark">
+        <div class="card-header">
+            <h2 class="card-title">Bots</h2>
+        </div>    
+        <div class="card-body">
         <table class="table table-striped table-bordered">
         <thead class="thead-dark">
         <TH>SN</TH><TH>Nickname</TH><TH>Class</TH><TH>DID</TH><TH>Resource</TH><TH>Company</TH><TH>MQTT Connected</TH><TH>XMPP Connected</TH>
@@ -89,9 +95,11 @@
 </br>
 
     <!-- Section Clients -->
-    <div class="card col-8">
-    <div>
-    <h2>Clients</h2>
+    <div class="card bg-light border-dark">
+        <div class="card-header">
+            <h2 class="card-title">Clients</h2>
+        </div>    
+        <div class="card-body">
         <table class="table table-striped table-bordered">
         <thead class="thead-dark">
         <TH>User ID</TH><TH>Realm</TH><TH>Resource</TH><TH>MQTT Connected</TH><TH>XMPP Connected</TH>
@@ -109,5 +117,6 @@
         </div>    
     </div>
     
+</div>    
 </body>
 </html>

requirements.txt

@@ -1,4 +1,5 @@
 aiohttp==3.6.2
+aiohttp-jinja2==1.2.0
 async-timeout==3.0.1
 atomicwrites==1.3.0
 attrs==19.3.0
@@ -6,9 +7,11 @@ chardet==3.0.4
 docopt==0.6.2
 hbmqtt==0.9.5
 idna==2.8
+Jinja2==2.10.3
+MarkupSafe==1.1.1
 multidict==4.5.2
 passlib==1.7.2
-PyYAML==5.2
+PyYAML==5.3b1
 six==1.13.0
 tinydb==3.15.2
 transitions==0.7.1