diff --git a/raspberry-backend/static/css/style_v3.css b/raspberry-backend/static/css/style_v3.css
index 1f58adaeeb319a4ee669850e196afd119488f67c..e5d4b22a9477b64fdad60d1f58e25f50dde0821c 100644
--- a/raspberry-backend/static/css/style_v3.css
+++ b/raspberry-backend/static/css/style_v3.css
@@ -1528,8 +1528,8 @@ pre code {
}
.col-xl-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 31.8%;
+ max-width: 31.8%;
}
.col-xl-5 {
@@ -10219,7 +10219,7 @@ body {
.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
color: #fff;
}
-.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
+.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon .sb-nav-button {
color: #fff;
}
.sb-sidenav-dark .sb-sidenav-footer {
@@ -10248,7 +10248,7 @@ body {
.sb-sidenav-light .sb-sidenav-menu .nav-link.active {
color: #007bff;
}
-.sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
+.sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon . sb-nav-button {
color: #007bff;
}
.sb-sidenav-light .sb-sidenav-footer {
@@ -10257,6 +10257,8 @@ body {
.br-red{border: 1px solid #ff0000;}
.reading{font-size:1.7rem;min-width:6rem;display:inline-block;text-align:right;}
+.reading-main{font-size:1.3rem;min-width:5rem;display:inline-block;text-align:right;}
+
#logo{ height:var(--top-height); }
#chart-area{ fill:white; }
@@ -10271,3 +10273,36 @@ div.active{
border-radius: 0.25rem;
}
.patient{ min-width:12rem;}
+.sb-control-button{
+ width:250px;
+ height:100px;
+}
+
+.sb-nav-button{ border: 1px solid var(--cern); width:95px; fill:none;
+
+ display: inline-block;
+ //text-shadow: 0 0 2px rgba(0,0,0,.3);
+ //font-family: sans-serif;
+ //box-shadow:
+ // inset 0 0 2px 0 rgba(255,255,255,.4),
+ // inset 0 0 3px 0 rgba(0,0,0,.4),
+ // inset 0 0 3px 5px rgba(0,0,0,.05),
+ // 2px 2px 4px 0 rgba(0,0,0,.25);
+ border-radius: 4px;
+
+ }
+.sb-nav-button:before {
+ //top: 0;
+ //border-bottom-left-radius: 4px;
+ //border-bottom-right-radius: 4px;
+ //background: rgba(255,255,255,.6);
+ //box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
+}
+.sb-nav-button:after {
+ //bottom: 0;
+ //border-top-left-radius: 4px;
+ //border-top-right-radius: 4px;
+ //background: rgba(0,0,0,.15);
+ //box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
+}
+.controls { position: absolute;bottom:0;}
\ No newline at end of file
diff --git a/raspberry-backend/templates/base.html b/raspberry-backend/templates/base.html
index 02d53ab41f14dfd50d942b778c7890a2645554a0..67d848dd81dfdcae70cf671b9b3d5b604bd35b48 100644
--- a/raspberry-backend/templates/base.html
+++ b/raspberry-backend/templates/base.html
@@ -36,42 +36,31 @@
<div id="layoutSidenav_nav" class="py-1">
<nav class="sb-sidenav accordion sb-sidenav-dark px-1" id="sidenavAccordion">
<div class="sb-sidenav-menu">
- <div class="nav">
- <a href="fan"> <div id="fan-icon" class = "sb-nav-link-icon {{'active' if fan_active }}">
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fan" class="fa-fan fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M352.57 128c-28.09 0-54.09 4.52-77.06 12.86l12.41-123.11C289 7.31 279.81-1.18 269.33.13 189.63 10.13 128 77.64 128 159.43c0 28.09 4.52 54.09 12.86 77.06L17.75 224.08C7.31 223-1.18 232.19.13 242.67c10 79.7 77.51 141.33 159.3 141.33 28.09 0 54.09-4.52 77.06-12.86l-12.41 123.11c-1.05 10.43 8.11 18.93 18.59 17.62 79.7-10 141.33-77.51 141.33-159.3 0-28.09-4.52-54.09-12.86-77.06l123.11 12.41c10.44 1.05 18.93-8.11 17.62-18.59-10-79.7-77.51-141.33-159.3-141.33zM256 288a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"></path></svg>
-
- </div></a>
- <a href="/"> <div class = "sb-nav-link-icon {{'active' if charts_active}}">
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-area" class="fa-chart-area fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM372.7 159.5L288 216l-85.3-113.7c-5.1-6.8-15.5-6.3-19.9 1L96 248v104h384l-89.9-187.8c-3.2-6.5-11.4-8.7-17.4-4.7z"></path></svg>
- </div></a>
- <a href="settings"> <div class = "sb-nav-link-icon {{'active' if settings_active}}">
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="fa-sliders-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z"></path></svg>
-</div></a>
-
-
-
+ <div class="nav">
+ <a href="/"> <div id="fan-icon" class = "sb-nav-link-icon {{'active' if fan_active }}">
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fan" class="fa-fan fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M352.57 128c-28.09 0-54.09 4.52-77.06 12.86l12.41-123.11C289 7.31 279.81-1.18 269.33.13 189.63 10.13 128 77.64 128 159.43c0 28.09 4.52 54.09 12.86 77.06L17.75 224.08C7.31 223-1.18 232.19.13 242.67c10 79.7 77.51 141.33 159.3 141.33 28.09 0 54.09-4.52 77.06-12.86l-12.41 123.11c-1.05 10.43 8.11 18.93 18.59 17.62 79.7-10 141.33-77.51 141.33-159.3 0-28.09-4.52-54.09-12.86-77.06l123.11 12.41c10.44 1.05 18.93-8.11 17.62-18.59-10-79.7-77.51-141.33-159.3-141.33zM256 288a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"></path></svg>
+
+ </div></a>
+ <a href="charts"> <div class = "sb-nav-link-icon {{'active' if charts_active}}">
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-area" class="fa-chart-area fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM372.7 159.5L288 216l-85.3-113.7c-5.1-6.8-15.5-6.3-19.9 1L96 248v104h384l-89.9-187.8c-3.2-6.5-11.4-8.7-17.4-4.7z"></path></svg>
+ </div></a>
+ <a href="settings"> <div class = "sb-nav-link-icon {{'active' if settings_active}}">
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="fa-sliders-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z"></path></svg>
+ </div></a>
+ </div>
+ <div class = "controls">
+ <a> <button class="sb-nav-button py-3">STOP</button></a>
+ <a> <button class="sb-nav-button py-1">START</button></a>
+ <a> <button class="sb-nav-button py-1">RESET</button></a>
+ </div>
+ </div>
</nav>
- </div>
-
-
+ </div>
- <div id="layoutSidenav_content" class="mx-0 my-0 mr-0">
- {% block content %}
- {% endblock %}
-
- <!-- <footer class="py-4 bg-light mt-auto">
- <div class="container-fluid">
- <div class="d-flex align-items-center justify-content-between small">
- <div class="text-muted">Copyright © Your Website 2019</div>
- <div>
- <a href="#">Privacy Policy</a>
- ·
- <a href="#">Terms & Conditions</a>
- </div>
- </div>
- </div>
- </footer> !-->
- </div>
+ <div id="layoutSidenav_content" class="mx-0 my-0 mr-0">
+ {% block content %}
+ {% endblock %}
+ </div>
</div>
<script src="{{ url_for('static', filename='js/jquery-3.4.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
@@ -82,63 +71,61 @@
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
-
-
-<script>
-function startTime() {
- var today = new Date();
- var h = today.getHours();
- var m = today.getMinutes();
- var s = today.getSeconds();
- m = checkTime(m);
- s = checkTime(s);
- document.getElementById('time').innerHTML = (("0"+today.getDate()).slice(-2)) +"."+ (("0"+(today.getMonth()+1)).slice(-2)) +"."+ (today.getFullYear()) + '   ' +
- h + ":" + m + ":" + s;
- var t = setTimeout(startTime, 500);
-}
-function checkTime(i) {
- if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
- return i;
-}
-</script>
-
-
-<script type=text/javascript>
-function update_variables() {
- $.getJSON("live-data",
- function (data) {
- document.getElementById("pressure").innerHTML = data.pressure;
- document.getElementById("temperature").innerHTML = data.temperature;
- document.getElementById("variable3").innerHTML = data.variable3;
- document.getElementById("variable4").innerHTML = data.variable4;
- document.getElementById("variable5").innerHTML = data.variable5;
- document.getElementById("variable6").innerHTML = data.variable6;
- }
- );
-}
-setInterval('update_variables()', 2000);
-</script>
-
-
-<script type=text/javascript>
- function update_alarms() {
- $.getJSON("live-alarms",
- function (data) {
- if (data.alarms !== 'none') {
- document.getElementById("alarms").innerHTML = data.alarms;
- var el = document.getElementById("alarm_ul");
- el.classlist.add("alarm-red");
- } else {
- document.getElementById("alarms").innerHTML = ''
- var el = document.getElementById("alarm_ul");
- el.classlist.add("alarm-red");
- }
- }
- );
- }
- setInterval('update_alarms()', 1000);
-</script>
-
+ <script>
+ function startTime() {
+ var today = new Date();
+ var h = today.getHours();
+ var m = today.getMinutes();
+ var s = today.getSeconds();
+ m = checkTime(m);
+ s = checkTime(s);
+ document.getElementById('time').innerHTML = (("0"+today.getDate()).slice(-2)) +"."+ (("0"+(today.getMonth()+1)).slice(-2)) +"."+ (today.getFullYear()) + '   ' +
+ h + ":" + m + ":" + s;
+ var t = setTimeout(startTime, 500);
+ }
+ function checkTime(i) {
+ if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
+ return i;
+ }
+ </script>
+
+
+ <script type=text/javascript>
+ function update_variables() {
+ $.getJSON("live-data",
+ function (data) {
+ document.getElementById("pressure").innerHTML = data.pressure;
+ document.getElementById("temperature").innerHTML = data.temperature;
+ document.getElementById("variable3").innerHTML = data.variable3;
+ document.getElementById("variable4").innerHTML = data.variable4;
+ document.getElementById("variable5").innerHTML = data.variable5;
+ document.getElementById("variable6").innerHTML = data.variable6;
+ }
+ );
+ }
+ setInterval('update_variables()', 2000);
+ </script>
+
+
+ <script type=text/javascript>
+ function update_alarms() {
+ $.getJSON("live-alarms",
+ function (data) {
+ if (data.alarms !== 'none') {
+ document.getElementById("alarms").innerHTML = data.alarms;
+ var el = document.getElementById("alarm_ul");
+ el.classlist.add("alarm-red");
+ } else {
+ document.getElementById("alarms").innerHTML = ''
+ var el = document.getElementById("alarm_ul");
+ el.classlist.add("alarm-red");
+ }
+ }
+ );
+ }
+ setInterval('update_alarms()', 1000);
+ </script>
+
</body>
</html>
diff --git a/raspberry-backend/templates/charts.html b/raspberry-backend/templates/charts.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef7a80ece90765e156e2adc32a96fe229baaed37
--- /dev/null
+++ b/raspberry-backend/templates/charts.html
@@ -0,0 +1,115 @@
+{% set charts_active = True %}
+{% extends 'base.html' %}
+
+{% block fan_classes %}
+{% endblock %}
+
+{% block content %}
+<main>
+ <div class="container-fluid">
+ <!--<h1 class="mt-4">Info</h1> !-->
+ <div class = "row">
+
+
+ <div class = "col-md-7 py-0">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="card mb-6">
+ <div class="card-chart-header small ">Variable number 1</div>
+ <div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="200%" height="40"></canvas></div>
+ </div>
+ </div>
+ </div>
+ <div class = "row">
+ <div class="col-md-12">
+ <div class="card mb-6 px-0 py-0">
+ <div class="card-chart-header small">Variable number 2</div>
+ <div class="card-body px-0 py-0"><canvas id="variable2" width="200%" height="40"></canvas></div>
+ </div>
+ </div>
+ </div>
+ <div class = "row">
+ <div class="col-md-12">
+ <div class="card mb-6 px-0 py-0">
+ <div class="card-chart-header small ">Variable number 3</div>
+ <div class="card-body px-0 py-0"><canvas id="chart_variable3" width="200%" height="40"></canvas></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class = "col-md-5 py-0 px-0 mr-0">
+
+ <div class="row">
+
+ <div class="col-xl-5b px-1 py-0 mr-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">Temperature</a>
+ </div>
+ <div class="card-body"><span class = "reading" id="temperature">000.00</span> ℃</div>
+ </div>
+ </div>
+
+ <div class="col-xl-5b px-1 py-0 mr-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">Pressure</a>
+ </div>
+ <div class="card-body"><span class = "reading" id = "pressure">000.00</span> Pa</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-xl-5b col-md-8 px-1 py-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">variable3</a>
+ </div>
+ <div class="card-body"><span class = "reading" id = "variable3">000.00</span> ℃</div>
+ </div>
+ </div>
+ <div class="col-xl-5b px-1 py-0 col-md-8">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">variable4</a>
+ </div>
+ <div class="card-body"><span class = "reading" id = "variable4">000.00</span> Pa</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-xl-5b col-md-8 px-1 py-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">variable5</a>
+ </div>
+ <div class="card-body"><span class = "reading" id = "variable5">000.00</span> ℃</div>
+ </div>
+ </div>
+ <div class="col-xl-5b px-1 py-0 col-md-8">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between">
+ <a class="small text-dark stretched-link" href="#">variable6</a>
+ </div>
+ <div class="card-body"><span class = "reading" id = "variable6">000.00</span> Pa</div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</main>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function setActiveClass() {
+ var element = document.getElementById("fan-icon");
+ element.classList.add("active");
+}
+</script>
+{% endblock %}
diff --git a/raspberry-backend/templates/index.html b/raspberry-backend/templates/index.html
index 7e6f5731880567d737538a461b983eaf69597c2d..8cd4633cb04f2e0cd630c15a840ccde656b79fb3 100644
--- a/raspberry-backend/templates/index.html
+++ b/raspberry-backend/templates/index.html
@@ -1,4 +1,4 @@
-{% set charts_active = True %}
+{% set fan_active = True %}
{% extends 'base.html' %}
{% block fan_classes %}
@@ -10,97 +10,86 @@
<!--<h1 class="mt-4">Info</h1> !-->
<div class = "row">
<div class = "col-md-7 py-0">
- <div class="row">
+ <div class="row">
<div class="col-md-12">
<div class="card mb-6">
<div class="card-chart-header small ">Variable number 1</div>
- <div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="200%" height="40"></canvas></div>
+ <div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="100%" height="80"></canvas></div>
</div>
</div>
</div>
- <div class = "row">
- <div class="col-md-12">
- <div class="card mb-6 px-0 py-0">
- <div class="card-chart-header small"></i>Variable number 2</div>
-<div class="card-body px-0 py-0"><canvas id="variable2" width="200%" height="40"></canvas></div>
-</div>
-</div>
-</div>
-<div class = "row">
- <div class="col-md-12">
- <div class="card mb-6 px-0 py-0">
- <div class="card-chart-header small ">Variable number 3</div>
- <div class="card-body px-0 py-0"><canvas id="chart_variable3" width="200%" height="40"></canvas></div>
- </div>
- </div>
-</div>
-</div>
-<div class = "col-md-5 py-0 px-0 mr-0">
-
- <div class="row">
-
- <div class="col-xl-5b px-1 py-0 mr-0">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">Temperature</a>
- </div>
- <div class="card-body"><span class = "reading" id="temperature">000.00</span> ℃</div>
</div>
- </div>
- <div class="col-xl-5b px-1 py-0 mr-0">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">Pressure</a>
- </div>
- <div class="card-body"><span class = "reading" id = "pressure">000.00</span> Pa</div>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="col-xl-5b col-md-8 px-1 py-0">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">variable3</a>
- </div>
- <div class="card-body"><span class = "reading" id = "variable3">000.00</span> ℃</div>
- </div>
- </div>
- <div class="col-xl-5b px-1 py-0 col-md-8">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">variable4</a>
- </div>
- <div class="card-body"><span class = "reading" id = "variable4">000.00</span> Pa</div>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="col-xl-5b col-md-8 px-1 py-0">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">variable5</a>
- </div>
- <div class="card-body"><span class = "reading" id = "variable5">000.00</span> ℃</div>
- </div>
- </div>
- <div class="col-xl-5b px-1 py-0 col-md-8">
- <div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between">
- <a class="small text-dark stretched-link" href="#">variable6</a>
- </div>
- <div class="card-body"><span class = "reading" id = "variable6">000.00</span> Pa</div>
+ <div class = "col-md-5 py-0 px-0 mr-0">
+ <div class="row">
+
+ <div class="col-xl-4 px-1 py-0 mr-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">Temperature</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id="temperature">000.00</span> ℃</div>
+ </div>
+ </div>
+
+ <div class="col-xl-4 px-1 py-0 mr-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">Pressure</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure">000.00</span> Pa</div>
+ </div>
+ </div>
+
+ <div class="col-xl-4 col-md-8 px-1 py-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">variable3</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable3">000.00</span> ℃</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-xl-4 px-1 py-0 col-md-5">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">variable4</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable4">000.00</span> Pa</div>
+ </div>
+ </div>
+ <div class="col-xl-4 col-md-8 px-1 py-0">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">variable5</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable5">000.00</span> ℃</div>
+ </div>
+ </div>
+ <div class="col-xl-4 px-1 py-0 col-md-8">
+ <div class="card bg-primary text-dark mb-2">
+ <div class="card-header d-flex align-items-center justify-content-between py-1">
+ <a class="small text-dark stretched-link" href="#">variable6</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable6">000.00</span> Pa</div>
+ </div>
+ </div>
+ <div class = "row">
+ <div class="col-xl-4 px-1 py-0 col-md-5">
+ <div class = "card">
+ <a> <button class="sb-control-button py-3 card">INHALE</button></a>
+ </div>
+ <div class="card">
+ <a> <button class="sb-control-button py-1 card">EXHALE</button></a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
-
-
-
-</div>
-</div>
-</div>
</main>
{% endblock %}