Skip to content
Snippets Groups Projects
Commit 3d7d3bb6 authored by Tibo's avatar Tibo
Browse files

Remove mockups

parent 712e41e3
No related branches found
No related tags found
No related merge requests found
mockup/1519609010-dataset.png

33.8 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="theme.css" type="text/css"> </head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<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>
<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>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</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">Organization 1</h3>
</div>
</div>
<div class="row my-1">
<div class="col-md-10">
<a class="btn btn-primary" href="#">Add a new Server</a>
</div>
<div class="col-md-2">
<a class="btn btn-primary" href="#">Leave</a>
</div>
</div>
<div class="row my-1">
<div class="col-md-3">
<div class="card border">
<div class="card-header">Server 1 <i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Server 2 <i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Server 3 <i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Server 4<i class="pull-right fa fa-lg fa-cog"></i></div>
<div class="card-body">
<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>
</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>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="theme.css" type="text/css"> </head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<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>
<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>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</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">Your organizations</h3>
</div>
</div>
<div class="row bg-light">
<div class="col-md-12">
<p class="lead">Join a new organization
<br>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="">
<div class="form-group"> <label>Organization name</label>
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group"> <label>Password</label>
<input type="password" class="form-control" placeholder="Password"> </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="row bg-light">
<div class="col-md-12">
<p class="lead">You're a part of :&nbsp;</p>
</div>
</div>
<div class="row bg-light">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th>Organization</th>
<th>Since</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Organization 1</td>
<td>22-02-17</td>
<td><i class="pull-right fa fa-lg fa-cog"></i></td>
</tr>
<tr>
<td>Organization 2</td>
<td>20-02-17</td>
<td><i class="pull-right fa fa-lg fa-cog"></i></td>
</tr>
<tr>
<td>Organization 3</td>
<td>15-02-17</td>
<td><i class="pull-right fa fa-lg fa-cog"></i></td>
</tr>
</tbody>
</table>
</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>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="theme.css"> </head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<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>
<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>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light py-2">
<div class="row bg-primary my-1">
<div class="col-md-12">
<h3 class="display py-1">Server name</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo">Disks&nbsp;<span class="badge badge-primary badge-pill">1</span></button>
<div id="demo" class="collapse">
<div class="row">
<div class="col-md-6"> Date : 22-02-2018 16h57
<table class="table">
<thead>
<tr>
<th>Filesystem</th>
<th>Size</th>
<th>Used</th>
<th>Free</th>
</tr>
</thead>
<tbody>
<tr>
<td>/dev/sda1</td>
<td>257</td>
<td>0%</td>
<td>257</td>
</tr>
<tr>
<td>tmpfs</td>
<td>3</td>
<td>0%</td>
<td>3</td>
</tr>
<tr>
<td>/dev/sr0</td>
<td>59</td>
<td>0.119%</td>
<td>52</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<img class="img-fluid d-block" src="1519609010-dataset.png"> </div>
</div>
<div class="row">
<div class="col-md-6">
<a class="btn btn-primary text-white">Disk history</a>
</div>
</div>
</div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo2">Network</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">TCP</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">UDP</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">Reboot</button>
</ul>
</div>
</div>
</div>
</div>
<div class="py-5">
<div class="container"> </div>
<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://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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="theme.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<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>
<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>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</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-12">
<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">
<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 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>
<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://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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #333,
secondary: #4f70ce,
light: #f3f3f3,
dark: #151515,
info: #ccc,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: white;
$body-color: #333;
$body-color-inverse: invert($body-color) !default;
$link-color: #FFF;
// Fonts
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$headings-font-family: $font-family-base;
$display-font-family: $font-family-base;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
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) {
.container{
max-width: 970px;
}
}
.collapse.show {
background-color:white;
}
.container{
padding-bottom:5px;
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment