Display pins in use

static/css/main.css

-body{
+body {
     font-family: "Roboto Thin";
 }
 
@@ -8,29 +8,27 @@ body{
     /*background-color: aqua;*/
 }
 
-.container{
+.container {
     display: flex;
     flex-direction: row;
     /*background-color: darkkhaki;*/
     height: 100%;
 }
 
-.device_list{
+.device_list {
     width: 25%;
     /*background-color: red;*/
     border-right-style: solid;
     border-color: black;
     border-width: 1px;
     margin-left: 5%;
-    text-align: center;
 }
 
-.device_list_title{
+.device_list_title {
     text-decoration: underline;
-    text-align: left;
 }
 
-.smart_meter{
+.smart_meter {
     width: 65%;
     margin-right: 5%;
     margin-left: 5%;
@@ -39,3 +37,7 @@ body{
     border-color: black;
     border-width: 1px;
 }
+
+.smart_meter_info {
+
+}

templates/main.html

@@ -29,7 +29,13 @@
         </div>
 
         <div class="smart_meter">
-
+            <div class="smart_meter_info">
+                <p>Devices currently in use:
+                    {% for pin in pins %}
+                    {% if pins[pin].state == true %}
+                    {{ pins[pin].name }}
+                </p>
+            </div>
         </div>
     </div>
 </body>