Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="">
- <meta name="author" content="">
- <link href="css/boostrap.css" rel="stylesheet">
- <link href="css/styles.css" rel="stylesheet">
- <title>Title GG</title>
- </head>
- <nav class="navbar navbar-expand navbar-dark bg-dark">
- <a class="navbar-brand" href="#"><img src="img/logo.png" width=35rem></a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="true" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarsExample02">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Overview <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Servers</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Editor</a>
- </li>
- </ul>
- </div>
- </nav>
- <h1> System Overview </h1>
- <p> This page shows the overall infrastructure status </p>
- <div class="container">
- <div class="row">
- <div class="col-md-4">
- <!-- Windows Side -->
- <h4><img src="img/windows.png" width=40rem> Windows</h4>
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>Server</th>
- <th>Status</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>dc1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>dc2.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>fs1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>fs2.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>ex1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>sq1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- Linux Side -->
- <Div class="col-md-4">
- <h4><img src="img/linux.png" width=45rem> Linux</h4>
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>Server</th>
- <th>Status</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>web1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>web2.example.com</td>
- <td class="status-degraded">Degraded </td>
- </tr>
- <tr>
- <td>cs1.example.com</td>
- <td class="status-offline">Offline</td>
- </tr>
- <tr>
- <td>cs2.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- Hyper V side -->
- <Div class="col-md-4">
- <h4><img src="img/hyper-v.png" width=45rem> Hyper V's</h4>
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>Server</th>
- <th>Status</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>hv1.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- <tr>
- <td>hv2.example.com</td>
- <td class="status-degraded">Degraded </td>
- </tr>
- <tr>
- <td>hv4.example.com</td>
- <td class="status-offline">Offline</td>
- </tr>
- <tr>
- <td>hv5.example.com</td>
- <td class="status-ok">OK</td>
- </tr>
- </tbody>
- </table>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement