Skip to content
Snippets Groups Projects
Commit e546664f authored by btalhaoui's avatar btalhaoui
Browse files

Edit index of mockup

parent 56c68ef1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Mockup/index.html
+ 106
− 158
View file @ e546664f
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8">
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="theme.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css"> </head> </head>
<body>
<body> <nav class="navbar navbar-expand-md bg-primary navbar-dark">
<nav class="navbar navbar-expand-md bg-primary navbar-dark"> <div class="container">
<div class="container"> <a class="navbar-brand" href="index.html"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a>
<a class="navbar-brand" href="index.html"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent"> <ul class="navbar-nav">
<ul class="navbar-nav"> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="OrganizationsList.html"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
<a class="nav-link" href="OrganizationsList.html"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a> </li>
</li> </ul>
</ul>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light">
<div class="row bg-primary">
<div class="col-md-12">
<h3 class="display-5">Dashboard</h3>
</div>
</div>
<div class="row my-1">
<div class="col-md-3">
<div class="card border">
<div class="card-header"> Organization 1<a class="text-dark" href="OrganizationManagement.html"><i class="pull-right fa fa-lg fa-cog"></i></a></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space ok
<br>
<br> </p>
<a class="btn btn-secondary" href="server.html">Go to details</a>
</div>
<div class="card-body">
<h4>Server 2</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 2<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Oganization 3<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 4<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;OK</h6>
<p><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Free space :&lt;10%</p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
</div>
<div class="row my-1">
<div class="col-md-3">
<div class="card border">
<div class="card-header"> Organization 5<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space ok
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
<div class="card-body">
<h4>Server 2</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 6<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div> </div>
</div> </div>
</div> </nav>
<div class="col-md-3"> <div class="py-5">
<div class="card"> <div class="container bg-light">
<div class="card-header"> Oganization 7<i class="pull-right fa fa-lg fa-cog"></i></div> <div class="row bg-primary">
<div class="card-body"> <div class="col-md-12">
<h4>Server 1</h4> <h3 class="display-5">Dashboard</h3>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6> </div>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div> </div>
</div> <div class="row my-1">
</div> <div class="col-md-12">
<div class="col-md-3"> <div class="card border">
<div class="card"> <div class="card-header"> Organization 1<a class="text-dark" href="OrganizationManagement.html"><i class="pull-right fa fa-lg fa-cog"></i></a></div>
<div class="card-header"> Organization 8<i class="pull-right fa fa-lg fa-cog"></i></div> <div class="card-body">
<div class="card-body"> <table class="table">
<h4>Server 1</h4> <thead>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;OK</h6> <tr>
<p><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Free space :&lt;10%</p> <th scope="col">Server</th>
<a class="btn btn-secondary" href="#">Go to details</a> <th scope="col">Disk</th>
<th scope="col">Reboot</th>
<th scope="col">Updates</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">01</th>
<td>OK</td>
<td>OK</td>
<td>OK</td>
<td><a class="btn btn-secondary" href="server.html">Go to details</a></td>
</tr>
<tr>
<th scope="row">02</th>
<td><10%</td>
<td>Reboot required</td>
<td>OK</td>
<td><a class="btn btn-secondary" href="server.html">Go to details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header"> Organization 2<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Server</th>
<th scope="col">Disk</th>
<th scope="col">Reboot</th>
<th scope="col">Updates</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">01</th>
<td>OK</td>
<td>OK</td>
<td>OK</td>
<td><a class="btn btn-secondary" href="server.html">Go to details</a></td>
</tr>
<tr>
<th scope="row">02</th>
<td><10%</td>
<td>Reboot required</td>
<td>OK</td>
<td><a class="btn btn-secondary" href="server.html">Go to details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp; </pingendo>
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16"> </body>
</pingendo>
</body>
</html> </html>
\ No newline at end of file
Mockup/theme.css
+ 1
− 0
View file @ e546664f
...@@ -2977,6 +2977,7 @@ tbody.collapse.show { ...@@ -2977,6 +2977,7 @@ tbody.collapse.show {
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
margin-top:5px;
background-color: #fff; background-color: #fff;
background-clip: border-box; background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
......
Mockup/theme.scss
+ 4
− 0
View file @ e546664f
...@@ -141,6 +141,10 @@ html,body { ...@@ -141,6 +141,10 @@ html,body {
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1)); background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
} }
} }
.card {
margin-top:2px;
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container{ .container{
max-width: 970px; max-width: 970px;
......
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