gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 <!doctype html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <meta name="description" content="">
   7     <meta name="author" content="">
   8     <link rel="icon" href="../../../../favicon.ico">
   9
  10     <title>Dashboard Template for Bootstrap</title>
  11
  12     <!-- Bootstrap core CSS -->
  13     <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
  14
  15     <!-- Custom styles for this template -->
  16     <link href="dashboard.css" rel="stylesheet">
  17   </head>
  18
  19   <body>
  20     <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  21       <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
  22       <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  23       <ul class="navbar-nav px-3">
  24         <li class="nav-item text-nowrap">
  25           <a class="nav-link" href="#">Sign out</a>
  26         </li>
  27       </ul>
  28     </nav>
  29
  30     <div class="container-fluid">
  31       <div class="row">
  32         <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  33           <div class="sidebar-sticky">
  34             <ul class="nav flex-column">
  35               <li class="nav-item">
  36                 <a class="nav-link active" href="#">
  37                   <span data-feather="home"></span>
  38                   Dashboard <span class="sr-only">(current)</span>
  39                 </a>
  40               </li>
  41               <li class="nav-item">
  42                 <a class="nav-link" href="#">
  43                   <span data-feather="file"></span>
  44                   Orders
  45                 </a>
  46               </li>
  47               <li class="nav-item">
  48                 <a class="nav-link" href="#">
  49                   <span data-feather="shopping-cart"></span>
  50                   Products
  51                 </a>
  52               </li>
  53               <li class="nav-item">
  54                 <a class="nav-link" href="#">
  55                   <span data-feather="users"></span>
  56                   Customers
  57                 </a>
  58               </li>
  59               <li class="nav-item">
  60                 <a class="nav-link" href="#">
  61                   <span data-feather="bar-chart-2"></span>
  62                   Reports
  63                 </a>
  64               </li>
  65               <li class="nav-item">
  66                 <a class="nav-link" href="#">
  67                   <span data-feather="layers"></span>
  68                   Integrations
  69                 </a>
  70               </li>
  71             </ul>
  72
  73             <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
  74               <span>Saved reports</span>
  75               <a class="d-flex align-items-center text-muted" href="#">
  76                 <span data-feather="plus-circle"></span>
  77               </a>
  78             </h6>
  79             <ul class="nav flex-column mb-2">
  80               <li class="nav-item">
  81                 <a class="nav-link" href="#">
  82                   <span data-feather="file-text"></span>
  83                   Current month
  84                 </a>
  85               </li>
  86               <li class="nav-item">
  87                 <a class="nav-link" href="#">
  88                   <span data-feather="file-text"></span>
  89                   Last quarter
  90                 </a>
  91               </li>
  92               <li class="nav-item">
  93                 <a class="nav-link" href="#">
  94                   <span data-feather="file-text"></span>
  95                   Social engagement
  96                 </a>
  97               </li>
  98               <li class="nav-item">
  99                 <a class="nav-link" href="#">
 100                   <span data-feather="file-text"></span>
 101                   Year-end sale
 102                 </a>
 103               </li>
 104             </ul>
 105           </div>
 106         </nav>
 107
 108         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
 109           <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
 110             <h1 class="h2">Dashboard</h1>
 111             <div class="btn-toolbar mb-2 mb-md-0">
 112               <div class="btn-group mr-2">
 113                 <button class="btn btn-sm btn-outline-secondary">Share</button>
 114                 <button class="btn btn-sm btn-outline-secondary">Export</button>
 115               </div>
 116               <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
 117                 <span data-feather="calendar"></span>
 118                 This week
 119               </button>
 120             </div>
 121           </div>
 122
 123           <canvas class="my-4" id="myChart" width="900" height="380"></canvas>
 124
 125           <h2>Section title</h2>
 126           <div class="table-responsive">
 127             <table class="table table-striped table-sm">
 128               <thead>
 129                 <tr>
 130                   <th>#</th>
 131                   <th>Header</th>
 132                   <th>Header</th>
 133                   <th>Header</th>
 134                   <th>Header</th>
 135                 </tr>
 136               </thead>
 137               <tbody>
 138                 <tr>
 139                   <td>1,001</td>
 140                   <td>Lorem</td>
 141                   <td>ipsum</td>
 142                   <td>dolor</td>
 143                   <td>sit</td>
 144                 </tr>
 145                 <tr>
 146                   <td>1,002</td>
 147                   <td>amet</td>
 148                   <td>consectetur</td>
 149                   <td>adipiscing</td>
 150                   <td>elit</td>
 151                 </tr>
 152                 <tr>
 153                   <td>1,003</td>
 154                   <td>Integer</td>
 155                   <td>nec</td>
 156                   <td>odio</td>
 157                   <td>Praesent</td>
 158                 </tr>
 159                 <tr>
 160                   <td>1,003</td>
 161                   <td>libero</td>
 162                   <td>Sed</td>
 163                   <td>cursus</td>
 164                   <td>ante</td>
 165                 </tr>
 166                 <tr>
 167                   <td>1,004</td>
 168                   <td>dapibus</td>
 169                   <td>diam</td>
 170                   <td>Sed</td>
 171                   <td>nisi</td>
 172                 </tr>
 173                 <tr>
 174                   <td>1,005</td>
 175                   <td>Nulla</td>
 176                   <td>quis</td>
 177                   <td>sem</td>
 178                   <td>at</td>
 179                 </tr>
 180                 <tr>
 181                   <td>1,006</td>
 182                   <td>nibh</td>
 183                   <td>elementum</td>
 184                   <td>imperdiet</td>
 185                   <td>Duis</td>
 186                 </tr>
 187                 <tr>
 188                   <td>1,007</td>
 189                   <td>sagittis</td>
 190                   <td>ipsum</td>
 191                   <td>Praesent</td>
 192                   <td>mauris</td>
 193                 </tr>
 194                 <tr>
 195                   <td>1,008</td>
 196                   <td>Fusce</td>
 197                   <td>nec</td>
 198                   <td>tellus</td>
 199                   <td>sed</td>
 200                 </tr>
 201                 <tr>
 202                   <td>1,009</td>
 203                   <td>augue</td>
 204                   <td>semper</td>
 205                   <td>porta</td>
 206                   <td>Mauris</td>
 207                 </tr>
 208                 <tr>
 209                   <td>1,010</td>
 210                   <td>massa</td>
 211                   <td>Vestibulum</td>
 212                   <td>lacinia</td>
 213                   <td>arcu</td>
 214                 </tr>
 215                 <tr>
 216                   <td>1,011</td>
 217                   <td>eget</td>
 218                   <td>nulla</td>
 219                   <td>Class</td>
 220                   <td>aptent</td>
 221                 </tr>
 222                 <tr>
 223                   <td>1,012</td>
 224                   <td>taciti</td>
 225                   <td>sociosqu</td>
 226                   <td>ad</td>
 227                   <td>litora</td>
 228                 </tr>
 229                 <tr>
 230                   <td>1,013</td>
 231                   <td>torquent</td>
 232                   <td>per</td>
 233                   <td>conubia</td>
 234                   <td>nostra</td>
 235                 </tr>
 236                 <tr>
 237                   <td>1,014</td>
 238                   <td>per</td>
 239                   <td>inceptos</td>
 240                   <td>himenaeos</td>
 241                   <td>Curabitur</td>
 242                 </tr>
 243                 <tr>
 244                   <td>1,015</td>
 245                   <td>sodales</td>
 246                   <td>ligula</td>
 247                   <td>in</td>
 248                   <td>libero</td>
 249                 </tr>
 250               </tbody>
 251             </table>
 252           </div>
 253         </main>
 254       </div>
 255     </div>
 256
 257     <!-- Bootstrap core JavaScript
 258     ================================================== -->
 259     <!-- Placed at the end of the document so the pages load faster -->
 260     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 261     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
 262     <script src="../../../../assets/js/vendor/popper.min.js"></script>
 263     <script src="../../../../dist/js/bootstrap.min.js"></script>
 264
 265     <!-- Icons -->
 266     <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 267     <script>
 268       feather.replace()
 269     </script>
 270
 271     <!-- Graphs -->
 272     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
 273     <script>
 274       var ctx = document.getElementById("myChart");
 275       var myChart = new Chart(ctx, {
 276         type: 'line',
 277         data: {
 278           labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
 279           datasets: [{
 280             data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
 281             lineTension: 0,
 282             backgroundColor: 'transparent',
 283             borderColor: '#007bff',
 284             borderWidth: 4,
 285             pointBackgroundColor: '#007bff'
 286           }]
 287         },
 288         options: {
 289           scales: {
 290             yAxes: [{
 291               ticks: {
 292                 beginAtZero: false
 293               }
 294             }]
 295           },
 296           legend: {
 297             display: false,
 298           }
 299         }
 300       });
 301     </script>
 302   </body>
 303 </html>