Commit 51af204a authored by Soulet Corentin's avatar Soulet Corentin
Browse files

Poffinage du DashBoard

parent 4935a732
......@@ -114,6 +114,10 @@ body {
color: #fff;
}
.breadcrumb
{
display: block;
}
.dashboard .card-body {
background: #449644;
......@@ -146,7 +150,7 @@ body {
animation-iteration-count: infinite;
}
@-webkit-keyframes beating {
0% {transform: scale(0.1,0.1);}
10% {transform: scale(0.3,0.3)}
......@@ -260,7 +264,7 @@ a[aria-expanded="true"] {
.sameHauteur{
align-items: center;
}
/** dark CSS */
.dark {
......
body{padding-top:5rem;background-color:#fff}.footer-text{display:block;text-align:center}.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}.box{margin-bottom:20px;border:2px solid #000;border-radius:6px;line-height:40px;text-align:center;padding-top:10px;background-color:#c3cee4}.content-input{height:500px}.article{padding-left:1rem;padding-bottom:1rem}[class*=col-xs]{width:auto}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;align-items:center}@media (min-width:768px){.container{width:1170px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}#accordion-faq .card{margin-bottom:10px}.content-box{display:flex;margin:0 0 45px;padding:30px;background-color:#9d9d9d;color:#fff}.dashboard .card-body{background:#449644;display:flex;justify-content:center;width:auto}.card-body-item{height:100%;width:100%}.card-body-item:nth-child(1){break-after:always}.card-body-item span{font-size:2.5em;color:#fff}.wrapper{display:flex;width:100%}#sidebar{width:250px;margin-left:-250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:0}#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:100%;padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:calc(100% - 250px)}.content-input{height:500px}.task{padding:2px;margin-top:10px;border-radius:5px;border:2px solid #112f41}.sameHauteur{align-items:center}.dark{background-color:#112f41;color:#fff}.dark .task{border-color:#878787}.dark .modal-content{background-color:#1e4363}.dark .btn{background-color:#1c88cc}.dark .dropdown-menu{background-color:#1e4363}.dark .dropdown-item{color:#fff}.dark .card{background-color:#1e4363}.dark .breadcrumb{background-color:#1e4363}.dark a{color:#fff}.dark .btn-link{color:#fff}.dark .card .btn{background-color:transparent}
\ No newline at end of file
body{padding-top:5rem;background-color:#fff}.footer-text{display:block;text-align:center}.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}.box{margin-bottom:20px;border:2px solid #000;border-radius:6px;line-height:40px;text-align:center;padding-top:10px;background-color:#c3cee4}.content-input{height:500px}.article{padding-left:1rem;padding-bottom:1rem}[class*=col-xs]{width:auto}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;align-items:center}@media (min-width:768px){.container{width:1170px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}#accordion-faq .card{margin-bottom:10px}.content-box{display:flex;margin:0 0 45px;padding:30px;background-color:#9d9d9d;color:#fff}.breadcrumb{display:block}.dashboard .card-body{background:#449644;display:flex;justify-content:center;width:auto}.card-body-item{height:100%;width:100%}.card-body-item:nth-child(1){break-after:always}.card-body-item span{font-size:2.5em;color:#fff}.wrapper{display:flex;width:100%}#sidebar{width:250px;margin-left:-250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:0}#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:100%;padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:calc(100% - 250px)}.content-input{height:500px}.task{padding:2px;margin-top:10px;border-radius:5px;border:2px solid #112f41}.sameHauteur{align-items:center}.dark{background-color:#112f41;color:#fff}.dark .task{border-color:#878787}.dark .modal-content{background-color:#1e4363}.dark .btn{background-color:#1c88cc}.dark .dropdown-menu{background-color:#1e4363}.dark .dropdown-item{color:#fff}.dark .card{background-color:#1e4363}.dark .breadcrumb{background-color:#1e4363}.dark a{color:#fff}.dark .btn-link{color:#fff}.dark .card .btn{background-color:transparent}
\ No newline at end of file
......@@ -3,16 +3,18 @@
{% block content %}
<main role="main" class="container-fluid dashboard">
<!-- Health Breadcrumbs-->
<br>
<ol class="breadcrumb">
<li class="breadcrumb-item">
Health
Health <span class="float-right"><i class="fas fa-heartbeat"></i></span>
</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 class="card-header">Heart rate
</div>
<div class="card-body">
<div class="card-body-item">
......@@ -23,7 +25,7 @@
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Heart Rate</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -31,7 +33,7 @@
<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 class="card-header">Body Temperature
</div>
<div class="card-body">
<div class="card-body-item">
......@@ -42,7 +44,7 @@
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Heart Rate</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -52,25 +54,25 @@
<!-- Environment Breadcrumbs-->
<p>
<ol class="breadcrumb">
<li class="breadcrumb-item"> Environment</li>
<li class="breadcrumb-item"> Environment <span class="float-right"><i class="fas fa-leaf"></i></span> </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 class="card-header"> Meteo
</div>
<div class="card-body">
<div class="card-body-item">
<i style="color: white;" class="fas fa-sun fa-5x"></i>
<i style="color: white;" class="fas fa-cloud-sun fa-5x"></i>
</div>
<div class="card-body-item">
<span>50 °C</span>
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Meteo</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -78,19 +80,19 @@
<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 class="card-header">Wind
</div>
<div class="card-body">
<div class="card-body-item">
<i style="color: white;" class="fas fa-wind fa-5x"></i>
<i style="color: white;" class="fas fa-arrow-up fa-5x"></i>
</div>
<div class="card-body-item">
<span>North > 60 km/h</span>
<span><i style="color: white;" class="fas fa-arrow-up"></i> North > 60 km/h</span>
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Meteo</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -100,21 +102,21 @@
<!-- Ressources Breadcrumbs-->
<p>
<ol class="breadcrumb">
<li class="breadcrumb-item"> Ressources</li>
<li class="breadcrumb-item"> Ressources <span class="float-right"><i class="fas fa-box"></i></span></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 class="card-header"> Water Capacity
</div>
<div class="card-body">
<div class="card-body-item">
<i style="color: white;" class="fas fa-tint fa-5x"></i>
</div>
<div class="card-body-item">
<span style="padding-left: 50px">3 ml/m<sup>3</sup> </span>
<span style="padding-left: 50px">149 L </span>
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
......@@ -122,7 +124,7 @@
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Water Capacity</span>
<span class="float-left">View History and Details </span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -130,7 +132,7 @@
<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 class="card-header">Power Capacity
</div>
<div class="card-body">
<div class="card-body-item">
......@@ -144,7 +146,7 @@
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Electricity Capacity</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -155,19 +157,19 @@
<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 class="card-header"> Peoples
</div>
<div class="card-body">
<div class="card-body-item">
<i style="color: white;" class="fas fa-user fa-5x"></i>
<i style="color: white;" class="fas fa-users fa-5x"></i>
</div>
<div class="card-body-item">
<span style="padding-left: 30px">3 m<sup>3</sup> </span>
<span style="padding-left: 30px"> 15 </span>
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Population</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......@@ -175,7 +177,7 @@
<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 class="card-header"> Food Stock
</div>
<div class="card-body">
<div class="card-body-item">
......@@ -191,7 +193,7 @@
</div>
</div>
<a class="card-footer" href="#">
<span class="float-left">View detailed History of Food Stock</span>
<span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span>
</a>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment