Repartition des codes avants merges

public/assets/css/style-dashboard.css

+/** GLOBAL CSS */
+
+body {
+  padding-top: 5rem;
+  background-color: #FFF;
+}
+
+/** INDEX CSS */
+
+.contenttype-title{
+	display: flex;
+}
+
+.contenttype-title h3{
+	flex: 1 0;
+}
+
+.contenttype-all-button{
+	margin-top: 5px;
+}
+
+/** LIST CSS */
+
+.list-group-item-flex{
+	display: flex;
+}
+
+.list-group-item-tools{
+	display: block;
+	width: 30px;
+}
+
+.list-group-item-image{
+	margin-right: 10px;
+}
+
+.list-group-item-content{
+	flex: 1 0;
+}
+
+/** EDIT CSS */
+
+
+.content-input{
+
+	height: 500px;
+}
+
+
+/** Menu CSS */
+.wrapper {
+    display: flex;
+    width: 100%;
+}
+
+
+#sidebar {
+    width: 250px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 999;
+    background: #7386D5;
+    color: #fff;
+    transition: all 0.3s;
+}
+
+#sidebar.active {
+    margin-left: -250px;
+}
+
+#sidebar .sidebar-header {
+    padding: 20px;
+    background: #6d7fcc;
+}
+
+#sidebar ul.components {
+    padding: 20px 0;
+    border-bottom: 1px solid #47748b;
+}
+
+#sidebar ul p {
+    color: #fff;
+    padding: 10px;
+}
+
+#sidebar ul li a {
+	text-decoration: none;
+	color: #fff;
+    padding: 10px;
+    font-size: 1.1em;
+    display: block;
+}
+
+#sidebar ul li a:hover {
+    color: #7386D5;
+    background: #fff;
+}
+
+#sidebar ul li.active>a,
+a[aria-expanded="true"] {
+    color: #fff;
+    background: #6d7fcc;
+}
+
+#content {
+    width: calc(100% - 250px);
+    padding: 40px;
+    min-height: 100vh;
+    transition: all 0.3s;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+#content.active {
+    width: 100%;
+}

public/assets/css/style.css

@@ -45,183 +45,3 @@ body {
 
 	height: 500px;
 }
-
-
-/** Menu CSS */
-.wrapper {
-    display: flex;
-    width: 100%;
-}
-
-
-#sidebar {
-    width: 250px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    z-index: 999;
-    background: #7386D5;
-    color: #fff;
-    transition: all 0.3s;
-}
-
-#sidebar.active {
-    margin-left: -250px;
-}
-
-#sidebar .sidebar-header {
-    padding: 20px;
-    background: #6d7fcc;
-}
-
-#sidebar ul.components {
-    padding: 20px 0;
-    border-bottom: 1px solid #47748b;
-}
-
-#sidebar ul p {
-    color: #fff;
-    padding: 10px;
-}
-
-#sidebar ul li a {
-	text-decoration: none;
-	color: #fff;
-    padding: 10px;
-    font-size: 1.1em;
-    display: block;
-}
-
-#sidebar ul li a:hover {
-    color: #7386D5;
-    background: #fff;
-}
-
-#sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: #fff;
-    background: #6d7fcc;
-}
-
-#content {
-    width: calc(100% - 250px);
-    padding: 40px;
-    min-height: 100vh;
-    transition: all 0.3s;
-    position: absolute;
-    top: 0;
-    right: 0;
-}
-
-#content.active {
-    width: 100%;
-}
-
-/** GLOBAL CSS */
-
-.content-box{
-	display: flex;
-	margin : 0 0 45px;
-	padding: 30px;
-	background-color: #9d9d9d;
-}
-
-
-.card-body {
-	background: green;
-	display: flex;
-	justify-content: center;
-  width : auto;
-}
-.card-body-item {
-	height: 100%;
-	width: 100%;
-}
-.card-body-item:nth-child(1) { /* or `:nth-child(n + 4)` */
-	break-after: always;
-}
-
-#heart-rate {
-	width: auto;
-	height: auto;
-	-webkit-animation-name: beating; /* Safari 4.0 - 8.0 */
-  	-webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
-	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
-	animation-name: beating;
-	animation-duration: 1.5s;
-	animation-iteration-count: infinite;
-    }
-
-    /* Safari 4.0 - 8.0 */
-    @-webkit-keyframes beating {
-		0%   {transform: scale(0.1,0.1);}
-		10%  {transform: scale(0.3,0.3)}
-		20%  {transform: scale(0.4,0.4)}
-		30%  {transform: scale(0.6,0.6);}
-		40%  {transform: scale(0.8,0.8);}
-		50%  {transform: scale(1,1);}
-		60%  {transform: scale(0.8,0.8);}
-		70%  {transform: scale(0.6,0.6);}
-		80%  {transform: scale(0.4,0.4);}
-		90%  {transform: scale(0.3,0.3);}
-		100% {transform: scale(0.2,0.2)}
-    }
-/* Standard syntax */
-@-webkit-keyframes beating {
-	0%  {transform: scale(0.3,0.3);}
-	10%  {transform: scale(0.35,0.35);}
-	20%  {transform: scale(0.4,0.4);}
-	30%  {transform: scale(0.45,0.45);}
-	40%  {transform: scale(0.5,0.5);}
-	50%  {transform: scale(0.6,0.6);}
-	60%  {transform: scale(0.7,0.7);}
-	70%  {transform: scale(0.8,0.8);}
-	80%  {transform: scale(0.9,0.9);}
-	90%  {transform: scale(0.95,0.95);}
-	100% {transform: scale(1,1)}
-}
-
-
-body {
-	padding-top: 5rem;
-}
-
-/** INDEX CSS */
-
-.contenttype-title{
-	display: flex;
-}
-
-.contenttype-title h3{
-	flex: 1 0;
-}
-
-.contenttype-all-button{
-	margin-top: 5px;
-}
-
-/** LIST CSS */
-
-.list-group-item-flex{
-	display: flex;
-}
-
-.list-group-item-tools{
-	display: block;
-	width: 30px;
-}
-
-.list-group-item-image{
-	margin-right: 10px;
-}
-
-.list-group-item-content{
-	flex: 1 0;
-}
-
-/** EDIT CSS */
-
-.content-input{
-	height: 500px;
-}

public/assets/dist/style-dashboard.min.css

+body{padding-top:5rem;background-color:#fff}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}.wrapper{display:flex;width:100%}#sidebar{width:250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:-250px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#sidebar ul.components{padding:20px 0;border-bottom:1px solid #47748b}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{text-decoration:none;color:#fff;padding:10px;font-size:1.1em;display:block}#sidebar ul li a:hover{color:#7386d5;background:#fff}#sidebar ul li.active>a,a[aria-expanded=true]{color:#fff;background:#6d7fcc}#content{width:calc(100% - 250px);padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:100%}
\ No newline at end of file

public/assets/dist/style.min.css

-body{padding-top:5rem;background-color:#fff}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}.wrapper{display:flex;width:100%}#sidebar{width:250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:-250px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#sidebar ul.components{padding:20px 0;border-bottom:1px solid #47748b}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{text-decoration:none;color:#fff;padding:10px;font-size:1.1em;display:block}#sidebar ul li a:hover{color:#7386d5;background:#fff}#sidebar ul li.active>a,a[aria-expanded=true]{color:#fff;background:#6d7fcc}#content{width:calc(100% - 250px);padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:100%}.content-box{display:flex;margin:0 0 45px;padding:30px;background-color:#9d9d9d}.card-body{background:green;display:flex;justify-content:center;width:auto}.card-body-item{height:100%;width:100%}.card-body-item:nth-child(1){break-after:always}#heart-rate{width:auto;height:auto;-webkit-animation-name:beating;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-name:beating;animation-duration:1.5s;animation-iteration-count:infinite}@-webkit-keyframes beating{0%{transform:scale(.1,.1)}10%{transform:scale(.3,.3)}20%{transform:scale(.4,.4)}30%{transform:scale(.6,.6)}40%{transform:scale(.8,.8)}50%{transform:scale(1,1)}60%{transform:scale(.8,.8)}70%{transform:scale(.6,.6)}80%{transform:scale(.4,.4)}90%{transform:scale(.3,.3)}100%{transform:scale(.2,.2)}}@-webkit-keyframes beating{0%{transform:scale(.3,.3)}10%{transform:scale(.35,.35)}20%{transform:scale(.4,.4)}30%{transform:scale(.45,.45)}40%{transform:scale(.5,.5)}50%{transform:scale(.6,.6)}60%{transform:scale(.7,.7)}70%{transform:scale(.8,.8)}80%{transform:scale(.9,.9)}90%{transform:scale(.95,.95)}100%{transform:scale(1,1)}}body{padding-top:5rem}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}
\ No newline at end of file
+body{padding-top:5rem;background-color:#fff}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}
\ No newline at end of file

views/dashboard.html

+{% extends "layout/base.html" %}
+
+{% block content %}
+<main role="main" class="container-fluid">
+  <!-- Health Breadcrumbs-->
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      Health
+    </li>
+  </ol>
+  <div class="row">
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header">Heart rate <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i id="heart-rate" class="fas fa-heart fa-9x" style="color: white;"></i>
+          </div>
+          <div class="card-body-item">
+            <p>BPM</p>
+            <h1>90</h1>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Heart Rate</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header">Body Temperature <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-thermometer-half fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <p>(°C)</p>
+            <h1 style="font-size: 50px;">38</h1>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Heart Rate</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+
+  </div>
+  <!-- Environment Breadcrumbs-->
+  <p>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"> Environment</li>
+    </ol>
+  </p>
+  <div class="row">
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header"> Méteo <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-sun fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <br><br>
+            <h1>50 °C</h1>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Meteo</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header">Wind <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-wind fa-9x"></i>
+            <i style="color: white;" class="fas fa-arrow-up fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <br>
+            <h1>North</h1>
+            <h1>60 km/h</h1>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Meteo</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <!-- Ressources Breadcrumbs-->
+  <p>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"> Ressources</li>
+    </ol>
+  </p>
+  <div class="row">
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header"> Water Capacity <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-tint fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <br><br>
+            <h1 style="padding-left: 50px">3 m<sup>3</sup> </h1>
+            <div class="progress">
+              <div class="progress-bar bg-info" style="width:30%"></div>
+            </div>
+          </div>
+
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Water Capacity</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header">Power Capacity <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-bolt fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <p>
+              <br>
+              <h1 style="padding-left: 50px"> 400 Ah</h1>
+              <div class="progress">
+                <div class="progress-bar bg-info" style="width:30%"></div>
+              </div>
+            </p>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Electricity Capacity</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <br>
+  <div class="row">
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header"> Peoples <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-user fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <br><br>
+            <h1 style="padding-left: 30px">3 m<sup>3</sup> </h1>
+          </div>
+
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Population</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+    <div class="col-sm">
+      <!-- Icon Cards-->
+      <div class="card">
+        <div class="card-header"> Food Stock <span class="float-right"><i class="fas fa-heartbeat"></i></span>
+        </div>
+        <div class="card-body">
+          <div class="card-body-item">
+            <i style="color: white;" class="fas fa-utensils fa-9x"></i>
+          </div>
+          <div class="card-body-item">
+            <p>
+              <br>
+              <h1 style="padding-left: 50px"> 20.000 kcal</h1>
+              <div class="progress">
+                <div class="progress-bar bg-info" style="width:30%"></div>
+              </div>
+            </p>
+          </div>
+        </div>
+        <a class="card-footer" href="#">
+          <span class="float-left">View Details History of Food Stock</span>
+          <span class="float-right"><i class="fas fa-angle-right"></i></span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+
+</main>
+
+{% endblock %}

views/index.html

 {% extends "layout/base.html" %}
 
 {% block content %}
-<main role="main" class="container-fluid">
-  <!-- Health Breadcrumbs-->
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item">
-      Health
-    </li>
-  </ol>
+<link href="/assets/dist/style-index.min.css" rel="stylesheet">
+
+<main role="main" class="container">
   <div class="row">
-    <div class="col-sm">
-      <!-- Icon Cards-->
-      <div class="card">
-        <div class="card-header">Heart rate <span class="float-right"><i class="fas fa-heartbeat"></i></span>
-        </div>
-        <div class="card-body">
-          <div class="card-body-item">
-            <i id="heart-rate" class="fas fa-heart fa-9x" style="color: #d12128;"></i>
-          </div>
-          <div class="card-body-item">
-            <p>BPM</p>
-            <h1>90</h1>
-          </div>
-        </div>
-        <a class="card-footer" href="#">
-          <span class="float-left">View Details History of Heart Rate</span>
-          <span class="float-right"><i class="fas fa-angle-right"></i></span>
-        </a>
-      </div>
+    <div class=" col-md-4 " style="padding-bottom: 1rem;">
+      <a href="#" class="btn btn-info btn-block" name="DashBoard">
+        <span style="font-size: 40px; color: white;"><i class="far fa-list-alt"></span></i>
+        <h3>DashBoard</h3>
+      </a>
     </div>
-    <div class="col-sm">
-      <!-- Icon Cards-->
-      <div class="card">
-        <div class="card-header">Body Temperature <span class="float-right"><i class="fas fa-heartbeat"></i></span>
-        </div>
-        <div class="card-body">
-          <div class="card-body-item">
-            <i class="fas fa-thermometer-half fa-9x"></i>
-          </div>
-          <div class="card-body-item">
-            <p>(°C)</p>
-            <h1 style="font-size: 50px;">38</h1>
-          </div>
-        </div>
-        <a class="card-footer" href="#">
-          <span class="float-left">View Details History of Heart Rate</span>
-          <span class="float-right"><i class="fas fa-angle-right"></i></span>
-        </a>
-      </div>
+
+    <div class="col-md-4" style="padding-bottom: 1rem;">
+      <a href="#" class="btn btn-info btn-block" name="DashBoard">
+        <span style="font-size: 40px; color: white;"><i class="fas fa-map" href="#"></i></span>
+        <h3 style="font-style: white;"> Map </h3>
+      </a>
     </div>
 
+    <div class="col-md-4 " href="#" style="padding-bottom: 1rem;">
+      <a href="#" class="btn btn-info btn-block" name="DashBoard">
+        <span style="font-size: 40px; color: white;"><i class="fas fa-check-double"></i></span>
+        <h3 style="font-style: white;">Check List</h3>
+      </a>
+    </div>
   </div>
-  <!-- Environment Breadcrumbs-->
-  <p>
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"> Environment</li>
-    </ol>
-  </p>
   <div class="row">
-    <div class="col-sm">
-      <!-- Icon Cards-->
-      <div class="card">