Last active
April 16, 2020 10:16
-
-
Save blogcacanid/7e6aec2cbaa4b7dca5daf2ce8b115a1f to your computer and use it in GitHub Desktop.
layout template Covid-19 AngularJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Covid-19 Angular JS </title> | |
| <!-- Tell the browser to be responsive to screen width --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css"> | |
| <!-- Ionicons --> | |
| <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> | |
| <!-- DataTables --> | |
| <link rel="stylesheet" href="../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css"> | |
| <link rel="stylesheet" href="../plugins/datatables-responsive/css/responsive.bootstrap4.min.css"> | |
| <!-- Theme style --> | |
| <link rel="stylesheet" href="../dist/css/adminlte.min.css"> | |
| <!-- overlayScrollbars --> | |
| <link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> | |
| <!-- Google Font: Source Sans Pro --> | |
| <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> | |
| </head> | |
| <body class="hold-transition sidebar-mini layout-fixed"> | |
| <div class="wrapper"> | |
| <!-- Navbar --> | |
| <nav class="main-header navbar navbar-expand navbar-white navbar-light"> | |
| <!-- Left navbar links --> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> | |
| </li> | |
| </ul> | |
| <h3>Sistem Informasi Covid-19</h3> | |
| </nav> | |
| <!-- /.navbar --> | |
| <!-- Main Sidebar Container --> | |
| <aside class="main-sidebar sidebar-dark-primary elevation-4"> | |
| <!-- Brand Logo --> | |
| <a href="index3.html" class="brand-link"> | |
| <img src="https://i.imgur.com/YLiSEbF.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" | |
| style="opacity: .8"> | |
| <span class="brand-text font-weight-light">Covid-19</span> | |
| </a> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <!-- Sidebar user panel (optional) --> | |
| <div class="user-panel mt-3 pb-3 mb-3 d-flex"> | |
| <div class="image"> | |
| <img src="https://i.imgur.com/DlWzVsT.jpg" class="img-circle elevation-2" alt="User Image"> | |
| </div> | |
| <div class="info"> | |
| <a href="#" class="d-block">Cacan Blog</a> | |
| </div> | |
| </div> | |
| <!-- Sidebar Menu --> | |
| <nav class="mt-2"> | |
| <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> | |
| <!-- Add icons to the links using the .nav-icon class | |
| with font-awesome or any other icon font library --> | |
| <li class="nav-header">NASIONAL</li> | |
| <li class="nav-item"> | |
| <a href="../indonesia" class="nav-link <?php echo $uriSegments[1] == 'nasional' ? 'active' : '' ?>"> | |
| <i class="nav-icon far fa-flag"></i> | |
| <p>Indonesia</p> | |
| </a> | |
| </li> | |
| <li class="nav-header">INTERNASIONAL</li> | |
| <li class="nav-item"> | |
| <a href="../dunia" class="nav-link <?php echo $uriSegments[1] == 'internasional' ? 'active' : '' ?>"> | |
| <i class="nav-icon fa fa-globe"></i> | |
| <p>Dunia</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- /.sidebar-menu --> | |
| </div> | |
| <!-- /.sidebar --> | |
| </aside> | |
| <!-- Content Wrapper. Contains page content --> | |
| <div class="content-wrapper"> | |
| <!-- Content Header (Page header) --> | |
| <div class="content-header"> | |
| <div class="container-fluid"> | |
| <div class="row mb-2"> | |
| <div class="col-sm-6"> | |
| <h1 class="m-0 text-dark">Dashboard</h1> | |
| </div><!-- /.col --> | |
| <div class="col-sm-6"> | |
| <ol class="breadcrumb float-sm-right"> | |
| <li class="breadcrumb-item"><a href="#">Home</a></li> | |
| <li class="breadcrumb-item active">Dashboard v1</li> | |
| </ol> | |
| </div><!-- /.col --> | |
| </div><!-- /.row --> | |
| </div><!-- /.container-fluid --> | |
| </div> | |
| <!-- /.content-header --> | |
| <!-- Main content --> | |
| <section class="content"> | |
| <div class="container-fluid"> | |
| <!-- Small boxes (Stat box) --> | |
| <div class="row"> | |
| <div class="col-lg-3 col-6"> | |
| <!-- small box --> | |
| <div class="small-box bg-info"> | |
| <div class="inner"> | |
| <h3>150</h3> | |
| <p>New Orders</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="ion ion-bag"></i> | |
| </div> | |
| <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- ./col --> | |
| <div class="col-lg-3 col-6"> | |
| <!-- small box --> | |
| <div class="small-box bg-success"> | |
| <div class="inner"> | |
| <h3>53<sup style="font-size: 20px">%</sup></h3> | |
| <p>Bounce Rate</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="ion ion-stats-bars"></i> | |
| </div> | |
| <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- ./col --> | |
| <div class="col-lg-3 col-6"> | |
| <!-- small box --> | |
| <div class="small-box bg-warning"> | |
| <div class="inner"> | |
| <h3>44</h3> | |
| <p>User Registrations</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="ion ion-person-add"></i> | |
| </div> | |
| <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- ./col --> | |
| <div class="col-lg-3 col-6"> | |
| <!-- small box --> | |
| <div class="small-box bg-danger"> | |
| <div class="inner"> | |
| <h3>65</h3> | |
| <p>Unique Visitors</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="ion ion-pie-graph"></i> | |
| </div> | |
| <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- ./col --> | |
| </div> | |
| <!-- /.row --> | |
| <!-- Main row --> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">DataTable with default features</h3> | |
| </div> | |
| <!-- /.card-header --> | |
| <div class="card-body"> | |
| <table id="example1" class="table table-bordered table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Rendering engine</th> | |
| <th>Browser</th> | |
| <th>Platform(s)</th> | |
| <th>Engine version</th> | |
| <th>CSS grade</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 7.0</td> | |
| <td>Win 95+ / OSX.1+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 7.5</td> | |
| <td>Win 95+ / OSX.2+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 8.0</td> | |
| <td>Win 95+ / OSX.2+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 8.5</td> | |
| <td>Win 95+ / OSX.2+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 9.0</td> | |
| <td>Win 95+ / OSX.3+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 9.2</td> | |
| <td>Win 88+ / OSX.3+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera 9.5</td> | |
| <td>Win 88+ / OSX.3+</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Opera for Wii</td> | |
| <td>Wii</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Nokia N800</td> | |
| <td>N800</td> | |
| <td>-</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Presto</td> | |
| <td>Nintendo DS browser</td> | |
| <td>Nintendo DS</td> | |
| <td>8.5</td> | |
| <td>C/A<sup>1</sup></td> | |
| </tr> | |
| <tr> | |
| <td>KHTML</td> | |
| <td>Konqureror 3.1</td> | |
| <td>KDE 3.1</td> | |
| <td>3.1</td> | |
| <td>C</td> | |
| </tr> | |
| <tr> | |
| <td>KHTML</td> | |
| <td>Konqureror 3.3</td> | |
| <td>KDE 3.3</td> | |
| <td>3.3</td> | |
| <td>A</td> | |
| </tr> | |
| <tr> | |
| <td>Other browsers</td> | |
| <td>All others</td> | |
| <td>-</td> | |
| <td>-</td> | |
| <td>U</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th>Rendering engine</th> | |
| <th>Browser</th> | |
| <th>Platform(s)</th> | |
| <th>Engine version</th> | |
| <th>CSS grade</th> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| <!-- /.card-body --> | |
| </div> | |
| <!-- /.card --> | |
| </div> | |
| </div> | |
| <!-- /.row (main row) --> | |
| </div><!-- /.container-fluid --> | |
| </section> | |
| <!-- /.content --> | |
| </div> | |
| <!-- /.content-wrapper --> | |
| <footer class="main-footer"> | |
| <strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> | |
| All rights reserved. | |
| <div class="float-right d-none d-sm-inline-block"> | |
| <b>Version</b> 3.0.4 | |
| </div> | |
| </footer> | |
| <!-- Control Sidebar --> | |
| <aside class="control-sidebar control-sidebar-dark"> | |
| <!-- Control sidebar content goes here --> | |
| </aside> | |
| <!-- /.control-sidebar --> | |
| </div> | |
| <!-- ./wrapper --> | |
| <!-- jQuery --> | |
| <script src="../plugins/jquery/jquery.min.js"></script> | |
| <!-- Bootstrap 4 --> | |
| <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script> | |
| <!-- DataTables --> | |
| <script src="../plugins/datatables/jquery.dataTables.min.js"></script> | |
| <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script> | |
| <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script> | |
| <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script> | |
| <!-- AdminLTE App --> | |
| <script src="../dist/js/adminlte.min.js"></script> | |
| <!-- page script --> | |
| <script> | |
| $(function() { | |
| $("#example1").DataTable({ | |
| "responsive": true, | |
| "autoWidth": false, | |
| }); | |
| $('#example2').DataTable({ | |
| "paging": true, | |
| "lengthChange": false, | |
| "searching": false, | |
| "ordering": true, | |
| "info": true, | |
| "autoWidth": false, | |
| "responsive": true, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment