version 4.0 udpate
Complete refactor! Main layout changed, new pages added, build system changed, now uses Gulp 4, Bootstrap SCSS, custom SCSS, new design, dropped Morris and Flot Charts, added Chart.js for charts, new example pages, and more...
This commit is contained in:
David Miller
512
404.html
512
404.html
@@ -1,202 +1,400 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - 404 Error</title>
|
<title>SB Admin 2 - 404</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Page level plugin CSS-->
|
</head>
|
||||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
<body id="page-top">
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
<body id="page-top">
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a class="navbar-brand mr-1" href="index.html">Start Bootstrap</a>
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
|
<!-- Nav Item - Dashboard -->
|
||||||
<i class="fas fa-bars"></i>
|
<li class="nav-item">
|
||||||
</button>
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Navbar Search -->
|
<!-- Divider -->
|
||||||
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
|
<hr class="sidebar-divider">
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
<!-- Heading -->
|
||||||
<div class="input-group-append">
|
<div class="sidebar-heading">
|
||||||
<button class="btn btn-primary" type="button">
|
Interface
|
||||||
<i class="fas fa-search"></i>
|
</div>
|
||||||
</button>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</li>
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
<ul class="navbar-nav ml-auto ml-md-0">
|
<li class="nav-item">
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
<i class="fas fa-bell fa-fw"></i>
|
<span>Utilities</span>
|
||||||
<span class="badge badge-danger">9+</span>
|
</a>
|
||||||
</a>
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
<div class="dropdown-divider"></div>
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-envelope fa-fw"></i>
|
<!-- Divider -->
|
||||||
<span class="badge badge-danger">7</span>
|
<hr class="sidebar-divider">
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
<!-- Heading -->
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<div class="sidebar-heading">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Addons
|
||||||
<div class="dropdown-divider"></div>
|
</div>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item active" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-user-circle fa-fw"></i>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
|
||||||
<a class="dropdown-item" href="#">Settings</a>
|
|
||||||
<a class="dropdown-item" href="#">Activity Log</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</nav>
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<div id="wrapper">
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Divider -->
|
||||||
<ul class="sidebar navbar-nav">
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="index.html">
|
|
||||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
||||||
<span>Dashboard</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-fw fa-folder"></i>
|
|
||||||
<span>Pages</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
|
|
||||||
<h6 class="dropdown-header">Login Screens:</h6>
|
|
||||||
<a class="dropdown-item" href="login.html">Login</a>
|
|
||||||
<a class="dropdown-item" href="register.html">Register</a>
|
|
||||||
<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<h6 class="dropdown-header">Other Pages:</h6>
|
|
||||||
<a class="dropdown-item active" href="404.html">404 Page</a>
|
|
||||||
<a class="dropdown-item" href="blank.html">Blank Page</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="charts.html">
|
|
||||||
<i class="fas fa-fw fa-chart-area"></i>
|
|
||||||
<span>Charts</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="tables.html">
|
|
||||||
<i class="fas fa-fw fa-table"></i>
|
|
||||||
<span>Tables</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div id="content-wrapper">
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Breadcrumbs-->
|
<!-- 404 Error Text -->
|
||||||
<ol class="breadcrumb">
|
<div class="text-center">
|
||||||
<li class="breadcrumb-item">
|
<div class="error mx-auto" data-text="404">404</div>
|
||||||
<a href="index.html">Dashboard</a>
|
<p class="lead text-gray-800 mb-5">Page Not Found</p>
|
||||||
</li>
|
<p class="text-gray-500 mb-0">It looks like you found a glitch in the matrix...</p>
|
||||||
<li class="breadcrumb-item active">404 Error</li>
|
<a href="index.html">← Back to Dashboard</a>
|
||||||
</ol>
|
</div>
|
||||||
|
|
||||||
<!-- Page Content -->
|
|
||||||
<h1 class="display-1">404</h1>
|
|
||||||
<p class="lead">Page not found. You can
|
|
||||||
<a href="javascript:history.back()">go back</a>
|
|
||||||
to the previous page, or
|
|
||||||
<a href="index.html">return home</a>.</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container-fluid -->
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
<!-- Sticky Footer -->
|
|
||||||
<footer class="sticky-footer">
|
|
||||||
<div class="container my-auto">
|
|
||||||
<div class="copyright text-center my-auto">
|
|
||||||
<span>Copyright © Your Website 2018</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.content-wrapper -->
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /#wrapper -->
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
<!-- Scroll to Top Button-->
|
</div>
|
||||||
<a class="scroll-to-top rounded" href="#page-top">
|
<!-- End of Page Wrapper -->
|
||||||
<i class="fas fa-angle-up"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Logout Modal-->
|
<!-- Scroll to Top Button-->
|
||||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
<div class="modal-dialog" role="document">
|
<i class="fas fa-angle-up"></i>
|
||||||
<div class="modal-content">
|
</a>
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
<!-- Logout Modal-->
|
||||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
<span aria-hidden="true">×</span>
|
<div class="modal-dialog" role="document">
|
||||||
</button>
|
<div class="modal-content">
|
||||||
</div>
|
<div class="modal-header">
|
||||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
<div class="modal-footer">
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
<span aria-hidden="true">×</span>
|
||||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Core plugin JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
<!-- Custom scripts for all pages-->
|
<!-- Custom scripts for all pages-->
|
||||||
<script src="js/sb-admin-2.min.js"></script>
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
|||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) 2013-2018 Blackrock Digital LLC
|
Copyright (c) 2013-2019 Blackrock Digital LLC
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
62
README.md
62
README.md
@@ -1,3 +1,63 @@
|
|||||||
# [Start Bootstrap - SB Admin 2](https://startbootstrap.com/template-overviews/sb-admin-2/)
|
# [Start Bootstrap - SB Admin 2](https://startbootstrap.com/template-overviews/sb-admin-2/)
|
||||||
|
|
||||||
SB Admin 2 is under development. You can download version 3 from the `gh-pages` repo, or you can experiment with the files from the `master` repo which will eventually be merged into `gh-pages` once development on version 4.0.0 is complete.
|
[SB Admin 2](https://startbootstrap.com/template-overviews/sb-admin-2/) is an open source admin dashboard theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/).
|
||||||
|
|
||||||
|
## Preview
|
||||||
|
|
||||||
|
[](https://blackrockdigital.github.io/startbootstrap-sb-admin-2/)
|
||||||
|
|
||||||
|
**[Launch Live Preview](https://blackrockdigital.github.io/startbootstrap-sb-admin-2/)**
|
||||||
|
|
||||||
|
## Status
|
||||||
|
|
||||||
|
[](https://raw.githubusercontent.com/BlackrockDigital/startbootstrap-sb-admin-2/master/LICENSE)
|
||||||
|
[](https://www.npmjs.com/package/startbootstrap-sb-admin-2)
|
||||||
|
[](https://travis-ci.org/BlackrockDigital/startbootstrap-sb-admin-2)
|
||||||
|
[](https://david-dm.org/BlackrockDigital/startbootstrap-sb-admin-2)
|
||||||
|
[](https://david-dm.org/BlackrockDigital/startbootstrap-sb-admin-2?type=dev)
|
||||||
|
|
||||||
|
## Download and Installation
|
||||||
|
|
||||||
|
To begin using this template, choose one of the following options to get started:
|
||||||
|
|
||||||
|
- [Download the latest release on Start Bootstrap](https://startbootstrap.com/template-overviews/sb-admin-2/)
|
||||||
|
- Install via npm: `npm i startbootstrap-sb-admin-2`
|
||||||
|
- Clone the repo: `git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2.git`
|
||||||
|
- [Fork, Clone, or Download on GitHub](https://github.com/BlackrockDigital/startbootstrap-sb-admin-2)
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
After installation, run `npm install` which will install all third party dependencies into your node modules folder. After this, run `gulp` which will compile the CSS and move some core dependencies into the vendor directory.
|
||||||
|
|
||||||
|
### Gulp Tasks
|
||||||
|
|
||||||
|
- `gulp` the default task that builds everything
|
||||||
|
- `gulp dev` browserSync opens the project in your default browser and live reloads when changes are made
|
||||||
|
- `gulp css` compiles SCSS files into CSS and minifies the compiled CSS
|
||||||
|
- `gulp js` minifies the themes JS file
|
||||||
|
- `gulp vendor` copies dependencies from node_modules to the vendor directory
|
||||||
|
|
||||||
|
You must have npm and Gulp installed globally on your machine in order to use these features. This theme was built using node v11.6.0 and the Gulp CLI v2.0.1. If Gulp is not running properly after running `npm install`, you may need to update node and/or the Gulp CLI locally.
|
||||||
|
|
||||||
|
## Bugs and Issues
|
||||||
|
|
||||||
|
Have a bug or an issue with this template? [Open a new issue](https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/sb-admin-2/).
|
||||||
|
|
||||||
|
## About
|
||||||
|
|
||||||
|
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
|
||||||
|
|
||||||
|
- <https://startbootstrap.com>
|
||||||
|
- <https://twitter.com/SBootstrap>
|
||||||
|
|
||||||
|
Start Bootstrap was created by and is maintained by **[David Miller](http://davidmiller.io/)**.
|
||||||
|
|
||||||
|
- <http://davidmiller.io>
|
||||||
|
- <https://twitter.com/davidmillerskt>
|
||||||
|
- <https://github.com/davidtmiller>
|
||||||
|
|
||||||
|
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
|
||||||
|
|
||||||
|
## Copyright and License
|
||||||
|
|
||||||
|
Copyright 2013-2019 Blackrock Digital LLC. Code released under the [MIT](https://github.com/BlackrockDigital/startbootstrap-resume/blob/gh-pages/LICENSE) license.
|
||||||
|
|||||||
505
blank.html
505
blank.html
@@ -1,200 +1,395 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Blank Page</title>
|
<title>SB Admin 2 - Blank</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Page level plugin CSS-->
|
</head>
|
||||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
<body id="page-top">
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
<body id="page-top">
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a class="navbar-brand mr-1" href="index.html">Start Bootstrap</a>
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
|
<!-- Nav Item - Dashboard -->
|
||||||
<i class="fas fa-bars"></i>
|
<li class="nav-item">
|
||||||
</button>
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Navbar Search -->
|
<!-- Divider -->
|
||||||
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
|
<hr class="sidebar-divider">
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
<!-- Heading -->
|
||||||
<div class="input-group-append">
|
<div class="sidebar-heading">
|
||||||
<button class="btn btn-primary" type="button">
|
Interface
|
||||||
<i class="fas fa-search"></i>
|
</div>
|
||||||
</button>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</li>
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
<ul class="navbar-nav ml-auto ml-md-0">
|
<li class="nav-item">
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
<i class="fas fa-bell fa-fw"></i>
|
<span>Utilities</span>
|
||||||
<span class="badge badge-danger">9+</span>
|
</a>
|
||||||
</a>
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
<div class="dropdown-divider"></div>
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-envelope fa-fw"></i>
|
<!-- Divider -->
|
||||||
<span class="badge badge-danger">7</span>
|
<hr class="sidebar-divider">
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
<!-- Heading -->
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<div class="sidebar-heading">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Addons
|
||||||
<div class="dropdown-divider"></div>
|
</div>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item active" href="blank.html">Blank Page</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-user-circle fa-fw"></i>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
|
||||||
<a class="dropdown-item" href="#">Settings</a>
|
|
||||||
<a class="dropdown-item" href="#">Activity Log</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</nav>
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<div id="wrapper">
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Divider -->
|
||||||
<ul class="sidebar navbar-nav">
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="index.html">
|
|
||||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
||||||
<span>Dashboard</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-fw fa-folder"></i>
|
|
||||||
<span>Pages</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
|
|
||||||
<h6 class="dropdown-header">Login Screens:</h6>
|
|
||||||
<a class="dropdown-item" href="login.html">Login</a>
|
|
||||||
<a class="dropdown-item" href="register.html">Register</a>
|
|
||||||
<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<h6 class="dropdown-header">Other Pages:</h6>
|
|
||||||
<a class="dropdown-item" href="404.html">404 Page</a>
|
|
||||||
<a class="dropdown-item active" href="blank.html">Blank Page</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="charts.html">
|
|
||||||
<i class="fas fa-fw fa-chart-area"></i>
|
|
||||||
<span>Charts</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="tables.html">
|
|
||||||
<i class="fas fa-fw fa-table"></i>
|
|
||||||
<span>Tables</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div id="content-wrapper">
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Breadcrumbs-->
|
<!-- Page Heading -->
|
||||||
<ol class="breadcrumb">
|
<h1 class="h3 mb-4 text-gray-800">Blank Page</h1>
|
||||||
<li class="breadcrumb-item">
|
|
||||||
<a href="index.html">Dashboard</a>
|
|
||||||
</li>
|
|
||||||
<li class="breadcrumb-item active">Blank Page</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<!-- Page Content -->
|
|
||||||
<h1>Blank Page</h1>
|
|
||||||
<hr>
|
|
||||||
<p>This is a great starting point for new custom pages.</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container-fluid -->
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
<!-- Sticky Footer -->
|
|
||||||
<footer class="sticky-footer">
|
|
||||||
<div class="container my-auto">
|
|
||||||
<div class="copyright text-center my-auto">
|
|
||||||
<span>Copyright © Your Website 2018</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.content-wrapper -->
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /#wrapper -->
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
<!-- Scroll to Top Button-->
|
</div>
|
||||||
<a class="scroll-to-top rounded" href="#page-top">
|
<!-- End of Page Wrapper -->
|
||||||
<i class="fas fa-angle-up"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Logout Modal-->
|
<!-- Scroll to Top Button-->
|
||||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
<div class="modal-dialog" role="document">
|
<i class="fas fa-angle-up"></i>
|
||||||
<div class="modal-content">
|
</a>
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
<!-- Logout Modal-->
|
||||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
<span aria-hidden="true">×</span>
|
<div class="modal-dialog" role="document">
|
||||||
</button>
|
<div class="modal-content">
|
||||||
</div>
|
<div class="modal-header">
|
||||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
<div class="modal-footer">
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
<span aria-hidden="true">×</span>
|
||||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Core plugin JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
<!-- Custom scripts for all pages-->
|
<!-- Custom scripts for all pages-->
|
||||||
<script src="js/sb-admin-2.min.js"></script>
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
560
buttons.html
Normal file
560
buttons.html
Normal file
@@ -0,0 +1,560 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Buttons</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item active" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<h1 class="h3 mb-4 text-gray-800">Buttons</h1>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<!-- Circle Buttons -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Circle Buttons</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Use Font Awesome Icons (included with this theme package) along with the circle buttons as shown in the examples below!</p>
|
||||||
|
<!-- Circle Buttons (Default) -->
|
||||||
|
<div class="mb-2">
|
||||||
|
<code>.btn-circle</code>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary btn-circle">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-success btn-circle">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-info btn-circle">
|
||||||
|
<i class="fas fa-info-circle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-warning btn-circle">
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-danger btn-circle">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Circle Buttons (Small) -->
|
||||||
|
<div class="mt-4 mb-2">
|
||||||
|
<code>.btn-circle .btn-sm</code>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary btn-circle btn-sm">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-success btn-circle btn-sm">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-info btn-circle btn-sm">
|
||||||
|
<i class="fas fa-info-circle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-warning btn-circle btn-sm">
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-danger btn-circle btn-sm">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Circle Buttons (Large) -->
|
||||||
|
<div class="mt-4 mb-2">
|
||||||
|
<code>.btn-circle .btn-lg</code>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary btn-circle btn-lg">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-success btn-circle btn-lg">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-info btn-circle btn-lg">
|
||||||
|
<i class="fas fa-info-circle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-warning btn-circle btn-lg">
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-danger btn-circle btn-lg">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Brand Buttons -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Brand Buttons</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Google and Facebook buttons are available featuring each company's respective brand color. They are used on the user login and registration pages.</p>
|
||||||
|
<p>You can create more custom buttons by adding a new color variable in the <code>_variables.scss</code> file and then using the Bootstrap button variant mixin to create a new style, as demonstrated in the <code>_buttons.scss</code> file.</p>
|
||||||
|
<a href="#" class="btn btn-google btn-block"><i class="fab fa-google fa-fw"></i> .btn-google</a>
|
||||||
|
<a href="#" class="btn btn-facebook btn-block"><i class="fab fa-facebook-f fa-fw"></i> .btn-facebook</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Split Buttons with Icon</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Works with any button colors, just use the <code>.btn-icon-split</code> class and the markup in the examples below. The examples below also use the <code>.text-white-50</code> helper class on the icons for additional styling, but it is not required.</p>
|
||||||
|
<a href="#" class="btn btn-primary btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Primary</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-success btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Success</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-info btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-info-circle"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Info</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-warning btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Warning</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-danger btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Danger</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-secondary btn-icon-split">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Secondary</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-light btn-icon-split">
|
||||||
|
<span class="icon text-gray-600">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Primary</span>
|
||||||
|
</a>
|
||||||
|
<div class="mb-4"></div>
|
||||||
|
<p>Also works with small and large button classes!</p>
|
||||||
|
<a href="#" class="btn btn-primary btn-icon-split btn-sm">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Small</span>
|
||||||
|
</a>
|
||||||
|
<div class="my-2"></div>
|
||||||
|
<a href="#" class="btn btn-primary btn-icon-split btn-lg">
|
||||||
|
<span class="icon text-white-50">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text">Split Button Large</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
547
cards.html
Normal file
547
cards.html
Normal file
@@ -0,0 +1,547 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Cards</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item active" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||||||
|
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-primary shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-calendar fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-success shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-info shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="progress progress-sm mr-2">
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending Requests Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-warning shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-comments fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<!-- Default Card Example -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
Default Card Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Basic Card Example -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Basic Card Example</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
The styling for this basic card example is created by using default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<!-- Dropdown Card Example -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<!-- Card Header - Dropdown -->
|
||||||
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Dropdown Card Example</h6>
|
||||||
|
<div class="dropdown no-arrow">
|
||||||
|
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
||||||
|
<div class="dropdown-header">Dropdown Header:</div>
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card Body -->
|
||||||
|
<div class="card-body">
|
||||||
|
Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collapsable Card Example -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<!-- Card Header - Accordion -->
|
||||||
|
<a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>
|
||||||
|
</a>
|
||||||
|
<!-- Card Content - Collapse -->
|
||||||
|
<div class="collapse show" id="collapseCardExample">
|
||||||
|
<div class="card-body">
|
||||||
|
This is a collapsable card example using Bootstrap's built in collapse functionality. <strong>Click on the card header</strong> to see the card body collapse and expand!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
591
charts.html
591
charts.html
@@ -1,243 +1,458 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Charts</title>
|
<title>SB Admin 2 - Charts</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Page level plugin CSS-->
|
</head>
|
||||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
<body id="page-top">
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
<body id="page-top">
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a class="navbar-brand mr-1" href="index.html">Start Bootstrap</a>
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
|
<!-- Nav Item - Dashboard -->
|
||||||
<i class="fas fa-bars"></i>
|
<li class="nav-item">
|
||||||
</button>
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Navbar Search -->
|
<!-- Divider -->
|
||||||
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
|
<hr class="sidebar-divider">
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
<!-- Heading -->
|
||||||
<div class="input-group-append">
|
<div class="sidebar-heading">
|
||||||
<button class="btn btn-primary" type="button">
|
Interface
|
||||||
<i class="fas fa-search"></i>
|
</div>
|
||||||
</button>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</li>
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
<ul class="navbar-nav ml-auto ml-md-0">
|
<li class="nav-item">
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
<i class="fas fa-bell fa-fw"></i>
|
<span>Utilities</span>
|
||||||
<span class="badge badge-danger">9+</span>
|
</a>
|
||||||
</a>
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
<div class="dropdown-divider"></div>
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-envelope fa-fw"></i>
|
<!-- Divider -->
|
||||||
<span class="badge badge-danger">7</span>
|
<hr class="sidebar-divider">
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
<!-- Heading -->
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<div class="sidebar-heading">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Addons
|
||||||
<div class="dropdown-divider"></div>
|
</div>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-user-circle fa-fw"></i>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
|
||||||
<a class="dropdown-item" href="#">Settings</a>
|
|
||||||
<a class="dropdown-item" href="#">Activity Log</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</nav>
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<div id="wrapper">
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Divider -->
|
||||||
<ul class="sidebar navbar-nav">
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="index.html">
|
|
||||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
||||||
<span>Dashboard</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-fw fa-folder"></i>
|
|
||||||
<span>Pages</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
|
|
||||||
<h6 class="dropdown-header">Login Screens:</h6>
|
|
||||||
<a class="dropdown-item" href="login.html">Login</a>
|
|
||||||
<a class="dropdown-item" href="register.html">Register</a>
|
|
||||||
<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<h6 class="dropdown-header">Other Pages:</h6>
|
|
||||||
<a class="dropdown-item" href="404.html">404 Page</a>
|
|
||||||
<a class="dropdown-item" href="blank.html">Blank Page</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="charts.html">
|
|
||||||
<i class="fas fa-fw fa-chart-area"></i>
|
|
||||||
<span>Charts</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="tables.html">
|
|
||||||
<i class="fas fa-fw fa-table"></i>
|
|
||||||
<span>Tables</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div id="content-wrapper">
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Breadcrumbs-->
|
<!-- Page Heading -->
|
||||||
<ol class="breadcrumb">
|
<h1 class="h3 mb-2 text-gray-800">Charts</h1>
|
||||||
<li class="breadcrumb-item">
|
<p class="mb-4">Chart.js is a third party plugin that is used to generate the charts in this theme. The charts below have been customized - for further customization options, please visit the <a target="_blank" href="https://www.chartjs.org/docs/latest/">official Chart.js documentation</a>.</p>
|
||||||
<a href="#">Dashboard</a>
|
|
||||||
</li>
|
|
||||||
<li class="breadcrumb-item active">Charts</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<!-- Area Chart Example-->
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-header">
|
|
||||||
<i class="fas fa-chart-area"></i>
|
|
||||||
Area Chart Example</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<canvas id="myAreaChart" width="100%" height="30"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
|
||||||
<div class="card mb-3">
|
<div class="col-xl-8 col-lg-7">
|
||||||
<div class="card-header">
|
|
||||||
<i class="fas fa-chart-bar"></i>
|
<!-- Area Chart -->
|
||||||
Bar Chart Example</div>
|
<div class="card shadow mb-4">
|
||||||
<div class="card-body">
|
<div class="card-header py-3">
|
||||||
<canvas id="myBarChart" width="100%" height="50"></canvas>
|
<h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="chart-area">
|
||||||
|
<canvas id="myAreaChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
Styling for the area chart can be found in the <code>/js/demo/chart-area-demo.js</code> file.
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col-lg-4">
|
<!-- Bar Chart -->
|
||||||
<div class="card mb-3">
|
<div class="card shadow mb-4">
|
||||||
<div class="card-header">
|
<div class="card-header py-3">
|
||||||
<i class="fas fa-chart-pie"></i>
|
<h6 class="m-0 font-weight-bold text-primary">Bar Chart</h6>
|
||||||
Pie Chart Example</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<canvas id="myPieChart" width="100%" height="100"></canvas>
|
<div class="chart-bar">
|
||||||
|
<canvas id="myBarChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
Styling for the bar chart can be found in the <code>/js/demo/chart-bar-demo.js</code> file.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Donut Chart -->
|
||||||
|
<div class="col-xl-4 col-lg-5">
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<!-- Card Header - Dropdown -->
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Donut Chart</h6>
|
||||||
|
</div>
|
||||||
|
<!-- Card Body -->
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="chart-pie pt-4">
|
||||||
|
<canvas id="myPieChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
Styling for the donut chart can be found in the <code>/js/demo/chart-pie-demo.js</code> file.
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="small text-center text-muted my-5">
|
|
||||||
<em>More chart examples coming soon...</em>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container-fluid -->
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
<!-- Sticky Footer -->
|
|
||||||
<footer class="sticky-footer">
|
|
||||||
<div class="container my-auto">
|
|
||||||
<div class="copyright text-center my-auto">
|
|
||||||
<span>Copyright © Your Website 2018</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.content-wrapper -->
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /#wrapper -->
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
<!-- Scroll to Top Button-->
|
</div>
|
||||||
<a class="scroll-to-top rounded" href="#page-top">
|
<!-- End of Page Wrapper -->
|
||||||
<i class="fas fa-angle-up"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Logout Modal-->
|
<!-- Scroll to Top Button-->
|
||||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
<div class="modal-dialog" role="document">
|
<i class="fas fa-angle-up"></i>
|
||||||
<div class="modal-content">
|
</a>
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
<!-- Logout Modal-->
|
||||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
<span aria-hidden="true">×</span>
|
<div class="modal-dialog" role="document">
|
||||||
</button>
|
<div class="modal-content">
|
||||||
</div>
|
<div class="modal-header">
|
||||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
<div class="modal-footer">
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
<span aria-hidden="true">×</span>
|
||||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Core plugin JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
<!-- Page level plugin JavaScript-->
|
<!-- Custom scripts for all pages-->
|
||||||
<script src="vendor/chart.js/Chart.min.js"></script>
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
<!-- Custom scripts for all pages-->
|
<!-- Page level plugins -->
|
||||||
<script src="js/sb-admin-2.min.js"></script>
|
<script src="vendor/chart.js/Chart.min.js"></script>
|
||||||
|
|
||||||
<!-- Demo scripts for this page-->
|
<!-- Page level custom scripts -->
|
||||||
<script src="js/demo/chart-area-demo.js"></script>
|
<script src="js/demo/chart-area-demo.js"></script>
|
||||||
<script src="js/demo/chart-bar-demo.js"></script>
|
<script src="js/demo/chart-pie-demo.js"></script>
|
||||||
<script src="js/demo/chart-pie-demo.js"></script>
|
<script src="js/demo/chart-bar-demo.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
2293
css/sb-admin-2.css
2293
css/sb-admin-2.css
File diff suppressed because it is too large
Load Diff
4
css/sb-admin-2.min.css
vendored
4
css/sb-admin-2.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,61 +1,82 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Forgot Password</title>
|
<title>SB Admin 2 - Forgot Password</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
</head>
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<body class="bg-gradient-primary">
|
||||||
|
|
||||||
<body class="bg-dark">
|
<div class="container">
|
||||||
|
|
||||||
<div class="container">
|
<!-- Outer Row -->
|
||||||
<div class="card card-login mx-auto mt-5">
|
<div class="row justify-content-center">
|
||||||
<div class="card-header">Reset Password</div>
|
|
||||||
<div class="card-body">
|
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||||
<div class="text-center mb-4">
|
|
||||||
<h4>Forgot your password?</h4>
|
<div class="card o-hidden border-0 shadow-lg my-5">
|
||||||
<p>Enter your email address and we will send you instructions on how to reset your password.</p>
|
<div class="card-body p-0">
|
||||||
</div>
|
<!-- Nested Row within Card Body -->
|
||||||
<form>
|
<div class="row">
|
||||||
<div class="form-group">
|
<div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
|
||||||
<div class="form-label-group">
|
<div class="col-lg-6">
|
||||||
<input type="email" id="inputEmail" class="form-control" placeholder="Enter email address" required="required" autofocus="autofocus">
|
<div class="p-5">
|
||||||
<label for="inputEmail">Enter email address</label>
|
<div class="text-center">
|
||||||
|
<h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
|
||||||
|
<p class="mb-4">We get it, stuff happens. Just enter your email address below and we'll send you a link to reset your password!</p>
|
||||||
|
</div>
|
||||||
|
<form class="user">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
|
||||||
|
</div>
|
||||||
|
<a href="login.html" class="btn btn-primary btn-user btn-block">
|
||||||
|
Reset Password
|
||||||
|
</a>
|
||||||
|
</form>
|
||||||
|
<hr>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="register.html">Create an Account!</a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="login.html">Already have an account? Login!</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-primary btn-block" href="login.html">Reset Password</a>
|
|
||||||
</form>
|
|
||||||
<div class="text-center">
|
|
||||||
<a class="d-block small mt-3" href="register.html">Register an Account</a>
|
|
||||||
<a class="d-block small" href="login.html">Login Page</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
</div>
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
</body>
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
1
img/undraw_posting_photo.svg
Normal file
1
img/undraw_posting_photo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 36 KiB |
707
index.html
707
index.html
@@ -30,26 +30,58 @@
|
|||||||
|
|
||||||
<!-- Sidebar - Brand -->
|
<!-- Sidebar - Brand -->
|
||||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
<div class="sidebar-brand-icon">
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
<i class="fas fa-laugh-wink"></i>
|
<i class="fas fa-laugh-wink"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Divider -->
|
<!-- Divider -->
|
||||||
<hr class="sidebar-divider my-0">
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
<!-- Dashboards Accordion Menu -->
|
<!-- Nav Item - Dashboard -->
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
<a class="nav-link" href="index.html">
|
||||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
<span>Dashboards</span>
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
</a>
|
</a>
|
||||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionSidebar">
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
<div class="bg-white py-2 collapse-inner rounded">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<h6 class="collapse-header">Dashboard Examples:</h6>
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
<a class="collapse-item" href="index.html">Default Dashboard</a>
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
<a class="collapse-item" href="#">Social Dashboard</a>
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -59,16 +91,16 @@
|
|||||||
|
|
||||||
<!-- Heading -->
|
<!-- Heading -->
|
||||||
<div class="sidebar-heading">
|
<div class="sidebar-heading">
|
||||||
Components
|
Addons
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Nav Item - Pages Collapse Menu -->
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
<i class="fas fa-fw fa-folder"></i>
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
<span>Pages</span>
|
<span>Pages</span>
|
||||||
</a>
|
</a>
|
||||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
<div class="bg-white py-2 collapse-inner rounded">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<h6 class="collapse-header">Login Screens:</h6>
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
<a class="collapse-item" href="login.html">Login</a>
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
@@ -82,14 +114,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<!-- Divider -->
|
|
||||||
<hr class="sidebar-divider">
|
|
||||||
|
|
||||||
<!-- Heading -->
|
|
||||||
<div class="sidebar-heading">
|
|
||||||
Addons
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav Item - Charts -->
|
<!-- Nav Item - Charts -->
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="charts.html">
|
<a class="nav-link" href="charts.html">
|
||||||
@@ -124,10 +148,15 @@
|
|||||||
<!-- Topbar -->
|
<!-- Topbar -->
|
||||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<!-- Topbar Search -->
|
<!-- Topbar Search -->
|
||||||
<form class="d-none d-md-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 w-100">
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control border-0 bg-light" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" style="font-size: 0.85rem;">
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
<button class="btn btn-primary" type="button">
|
<button class="btn btn-primary" type="button">
|
||||||
<i class="fas fa-search fa-sm"></i>
|
<i class="fas fa-search fa-sm"></i>
|
||||||
@@ -137,21 +166,74 @@
|
|||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Topbar Navbar -->
|
<!-- Topbar Navbar -->
|
||||||
<ul class="navbar-nav mr-auto ml-md-auto">
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Nav Item - Alerts -->
|
<!-- Nav Item - Alerts -->
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
<i class="fas fa-bell fa-fw"></i>
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
<!-- Counter - Alerts -->
|
<!-- Counter - Alerts -->
|
||||||
<span class="badge badge-danger badge-counter">9+</span>
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
</a>
|
</a>
|
||||||
<!-- Dropdown - Alerts -->
|
<!-- Dropdown - Alerts -->
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="dropdown-header">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Alerts Center
|
||||||
<div class="dropdown-divider"></div>
|
</h6>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
@@ -163,21 +245,68 @@
|
|||||||
<span class="badge badge-danger badge-counter">7</span>
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
</a>
|
</a>
|
||||||
<!-- Dropdown - Messages -->
|
<!-- Dropdown - Messages -->
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="dropdown-header">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Message Center
|
||||||
<div class="dropdown-divider"></div>
|
</h6>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
<!-- Nav Item - User Information -->
|
<!-- Nav Item - User Information -->
|
||||||
<li class="nav-item dropdown no-arrow">
|
<li class="nav-item dropdown no-arrow">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
</a>
|
</a>
|
||||||
<!-- Dropdown - User Information -->
|
<!-- Dropdown - User Information -->
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--grow-in" aria-labelledby="userDropdown">
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
<a class="dropdown-item" href="#">
|
<a class="dropdown-item" href="#">
|
||||||
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
Settings
|
Settings
|
||||||
@@ -196,279 +325,290 @@
|
|||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- Sidebar Toggle (Topbar) -->
|
|
||||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
<!-- End of Topbar -->
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Area Chart -->
|
<!-- Page Heading -->
|
||||||
<div class="card border-0 shadow mb-4">
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||||||
<div class="card-header border-0 py-3 d-flex flex-row align-items-center justify-content-between">
|
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
|
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
|
||||||
<!-- Card Header Dropdown -->
|
</div>
|
||||||
<div class="dropdown no-arrow">
|
|
||||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-ellipsis-v fa-sm fa-fw mx-1 text-gray-400"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
<!-- Content Row -->
|
||||||
<div class="dropdown-header">Dropdown Header:</div>
|
<div class="row">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
<div class="dropdown-divider"></div>
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<div class="card border-left-primary shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-calendar fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
|
||||||
<div class="chart-area">
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
<canvas id="myAreaChart"></canvas>
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-success shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Earnings (Monthly) Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-info shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="progress progress-sm mr-2">
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending Requests Card Example -->
|
||||||
|
<div class="col-xl-3 col-md-6 mb-4">
|
||||||
|
<div class="card border-left-warning shadow h-100 py-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row no-gutters align-items-center">
|
||||||
|
<div class="col mr-2">
|
||||||
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
|
||||||
|
<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<i class="fas fa-comments fa-2x text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row align-items-stretch">
|
<!-- Content Row -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Area Chart -->
|
||||||
|
<div class="col-xl-8 col-lg-7">
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<!-- Card Header - Dropdown -->
|
||||||
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
|
||||||
|
<div class="dropdown no-arrow">
|
||||||
|
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
||||||
|
<div class="dropdown-header">Dropdown Header:</div>
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card Body -->
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="chart-area">
|
||||||
|
<canvas id="myAreaChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pie Chart -->
|
||||||
|
<div class="col-xl-4 col-lg-5">
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<!-- Card Header - Dropdown -->
|
||||||
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
|
||||||
|
<div class="dropdown no-arrow">
|
||||||
|
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
||||||
|
<div class="dropdown-header">Dropdown Header:</div>
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card Body -->
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="chart-pie pt-4 pb-2">
|
||||||
|
<canvas id="myPieChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 text-center small">
|
||||||
|
<span class="mr-2">
|
||||||
|
<i class="fas fa-circle text-primary"></i> Direct
|
||||||
|
</span>
|
||||||
|
<span class="mr-2">
|
||||||
|
<i class="fas fa-circle text-success"></i> Social
|
||||||
|
</span>
|
||||||
|
<span class="mr-2">
|
||||||
|
<i class="fas fa-circle text-info"></i> Referral
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Content Column -->
|
||||||
<div class="col-lg-6 mb-4">
|
<div class="col-lg-6 mb-4">
|
||||||
|
|
||||||
|
<!-- Project Card Example -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Projects</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="small font-weight-bold">Server Migration <span class="float-right">20%</span></h4>
|
||||||
|
<div class="progress mb-4">
|
||||||
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="small font-weight-bold">Sales Tracking <span class="float-right">40%</span></h4>
|
||||||
|
<div class="progress mb-4">
|
||||||
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="small font-weight-bold">Customer Database <span class="float-right">60%</span></h4>
|
||||||
|
<div class="progress mb-4">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="small font-weight-bold">Payout Details <span class="float-right">80%</span></h4>
|
||||||
|
<div class="progress mb-4">
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="small font-weight-bold">Account Setup <span class="float-right">Complete!</span></h4>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Color System -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-primary text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Primary
|
||||||
|
<div class="text-white-50 small">#4e73df</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-success text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Success
|
||||||
|
<div class="text-white-50 small">#1cc88a</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-info text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Info
|
||||||
|
<div class="text-white-50 small">#36b9cc</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-warning text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Warning
|
||||||
|
<div class="text-white-50 small">#f6c23e</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-danger text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Danger
|
||||||
|
<div class="text-white-50 small">#e74a3b</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white shadow">
|
||||||
|
<div class="card-body">
|
||||||
|
Secondary
|
||||||
|
<div class="text-white-50 small">#858796</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6 mb-4">
|
||||||
|
|
||||||
|
<!-- Illustrations -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Illustrations</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="text-center">
|
||||||
|
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;" src="img/undraw_posting_photo.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p>Add some quality, svg illustrations to your project courtesy of <a target="_blank" rel="nofollow" href="https://undraw.co/">unDraw</a>, a constantly updated collection of beautiful svg images that you can use completely free and without attribution!</p>
|
||||||
|
<a target="_blank" rel="nofollow" href="https://undraw.co/">Browse Illustrations on unDraw →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Approach -->
|
<!-- Approach -->
|
||||||
<div class="card border-0 shadow mb-4">
|
<div class="card shadow mb-4">
|
||||||
<div class="card-header border-0 py-3">
|
<div class="card-header py-3">
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>
|
<h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.</p>
|
<p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.</p>
|
||||||
<p>Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes. Custom utility classes and components within this theme are explained in the documentation.</p>
|
<p class="mb-0">Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.</p>
|
||||||
<a href="#" class="btn btn-primary">View Documentation</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Default Card Example -->
|
|
||||||
<div class="card mb-4">
|
|
||||||
<div class="card-header">
|
|
||||||
Default Card Example
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Basic Card Example -->
|
|
||||||
<div class="card border-0 shadow mb-4">
|
|
||||||
<div class="card-header border-0 py-3">
|
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Basic Card Example</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
The styling for this basic card example is determined by default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Card Example -->
|
|
||||||
<div class="card border-0 shadow mb-4">
|
|
||||||
<div class="card-header border-0 py-3 d-flex flex-row align-items-center justify-content-between">
|
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Dropdown Card Example</h6>
|
|
||||||
<!-- Card Header Dropdown -->
|
|
||||||
<div class="dropdown no-arrow">
|
|
||||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownCardExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-ellipsis-v fa-sm fa-fw ml-1 text-gray-400"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--fade-in" aria-labelledby="dropdownCardExample">
|
|
||||||
<div class="dropdown-header">Dropdown Header:</div>
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collapsable Card Example -->
|
|
||||||
<div class="card border-0 shadow mb-4">
|
|
||||||
<a href="#collapseCardExample" class="d-block card-header border-0 py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
|
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>
|
|
||||||
</a>
|
|
||||||
<div class="collapse show" id="collapseCardExample">
|
|
||||||
<div class="card-body">
|
|
||||||
This is a collapsable card example using Bootstrap's built in collapse functionality. Click on the card header to see the card body collapse and expand!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Card Example -->
|
|
||||||
<div class="card border-0 shadow mb-4">
|
|
||||||
<div class="card-header border-0 py-3 d-flex flex-row align-items-center justify-content-between">
|
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Dropdown Card Example</h6>
|
|
||||||
<!-- Card Header Dropdown -->
|
|
||||||
<div class="dropdown no-arrow">
|
|
||||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownCardExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-angle-right fa-fw ml-1 text-gray-400"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right border-0 shadow animated--fade-in" aria-labelledby="dropdownCardExample">
|
|
||||||
<div class="dropdown-header">Dropdown Header:</div>
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Grayscale -->
|
|
||||||
<div class="card border-0 shadow mb-4">
|
|
||||||
<div class="card-header border-0 py-3">
|
|
||||||
<h6 class="m-0 font-weight-bold text-primary">Grayscale</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="card bg-gray-100 border-0 rounded-0">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 100
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-200 border-0 rounded-0">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 200
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-300 border-0 rounded-0">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 300
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-400 border-0 rounded-0">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 400
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-500 border-0 rounded-0 text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 500
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-600 border-0 rounded-0 text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 600
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-700 border-0 rounded-0 text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 700
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-800 border-0 rounded-0 text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 800
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card bg-gray-900 border-0 rounded-0 text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
Gray 900
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-primary text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Primary
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-success text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Success
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-info text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Info
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-warning text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Warning
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-danger text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Danger
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mb-4">
|
|
||||||
<div class="card border-0 bg-secondary text-white shadow">
|
|
||||||
<div class="card-body">
|
|
||||||
Secondary
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="accordion" id="accordionExample">
|
|
||||||
<h5 class="mb-0">
|
|
||||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
||||||
Collapsible Group Item #1
|
|
||||||
</button>
|
|
||||||
</h5>
|
|
||||||
|
|
||||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
|
||||||
1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-0">
|
|
||||||
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
||||||
Collapsible Group Item #2
|
|
||||||
</button>
|
|
||||||
</h5>
|
|
||||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
|
||||||
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-0">
|
|
||||||
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
||||||
Collapsible Group Item #3
|
|
||||||
</button>
|
|
||||||
</h5>
|
|
||||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
|
||||||
3 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container-fluid -->
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
@@ -479,7 +619,7 @@
|
|||||||
<footer class="sticky-footer bg-white">
|
<footer class="sticky-footer bg-white">
|
||||||
<div class="container my-auto">
|
<div class="container my-auto">
|
||||||
<div class="copyright text-center my-auto">
|
<div class="copyright text-center my-auto">
|
||||||
<span>Copyright © Your Website 2018</span>
|
<span>Copyright © Your Website 2019</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -530,6 +670,7 @@
|
|||||||
|
|
||||||
<!-- Page level custom scripts -->
|
<!-- Page level custom scripts -->
|
||||||
<script src="js/demo/chart-area-demo.js"></script>
|
<script src="js/demo/chart-area-demo.js"></script>
|
||||||
|
<script src="js/demo/chart-pie-demo.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -53,10 +53,10 @@ var myLineChart = new Chart(ctx, {
|
|||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
layout: {
|
layout: {
|
||||||
padding: {
|
padding: {
|
||||||
left: 0,
|
left: 10,
|
||||||
right: 25,
|
right: 25,
|
||||||
top: 25,
|
top: 25,
|
||||||
bottom: 25
|
bottom: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
|
|||||||
@@ -1,46 +1,111 @@
|
|||||||
// Set new default font family and font color to mimic Bootstrap's default styling
|
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||||
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||||
Chart.defaults.global.defaultFontColor = '#292b2c';
|
Chart.defaults.global.defaultFontColor = '#858796';
|
||||||
|
|
||||||
|
function number_format(number, decimals, dec_point, thousands_sep) {
|
||||||
|
// * example: number_format(1234.56, 2, ',', ' ');
|
||||||
|
// * return: '1 234,56'
|
||||||
|
number = (number + '').replace(',', '').replace(' ', '');
|
||||||
|
var n = !isFinite(+number) ? 0 : +number,
|
||||||
|
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
|
||||||
|
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
|
||||||
|
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
|
||||||
|
s = '',
|
||||||
|
toFixedFix = function(n, prec) {
|
||||||
|
var k = Math.pow(10, prec);
|
||||||
|
return '' + Math.round(n * k) / k;
|
||||||
|
};
|
||||||
|
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
|
||||||
|
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
|
||||||
|
if (s[0].length > 3) {
|
||||||
|
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
|
||||||
|
}
|
||||||
|
if ((s[1] || '').length < prec) {
|
||||||
|
s[1] = s[1] || '';
|
||||||
|
s[1] += new Array(prec - s[1].length + 1).join('0');
|
||||||
|
}
|
||||||
|
return s.join(dec);
|
||||||
|
}
|
||||||
|
|
||||||
// Bar Chart Example
|
// Bar Chart Example
|
||||||
var ctx = document.getElementById("myBarChart");
|
var ctx = document.getElementById("myBarChart");
|
||||||
var myLineChart = new Chart(ctx, {
|
var myBarChart = new Chart(ctx, {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: {
|
data: {
|
||||||
labels: ["January", "February", "March", "April", "May", "June"],
|
labels: ["January", "February", "March", "April", "May", "June"],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: "Revenue",
|
label: "Revenue",
|
||||||
backgroundColor: "rgba(2,117,216,1)",
|
backgroundColor: "#4e73df",
|
||||||
borderColor: "rgba(2,117,216,1)",
|
hoverBackgroundColor: "#2e59d9",
|
||||||
|
borderColor: "#4e73df",
|
||||||
data: [4215, 5312, 6251, 7841, 9821, 14984],
|
data: [4215, 5312, 6251, 7841, 9821, 14984],
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
layout: {
|
||||||
|
padding: {
|
||||||
|
left: 10,
|
||||||
|
right: 25,
|
||||||
|
top: 25,
|
||||||
|
bottom: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
xAxes: [{
|
||||||
time: {
|
time: {
|
||||||
unit: 'month'
|
unit: 'month'
|
||||||
},
|
},
|
||||||
gridLines: {
|
gridLines: {
|
||||||
display: false
|
display: false,
|
||||||
|
drawBorder: false
|
||||||
},
|
},
|
||||||
ticks: {
|
ticks: {
|
||||||
maxTicksLimit: 6
|
maxTicksLimit: 6
|
||||||
}
|
},
|
||||||
|
maxBarThickness: 25,
|
||||||
}],
|
}],
|
||||||
yAxes: [{
|
yAxes: [{
|
||||||
ticks: {
|
ticks: {
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 15000,
|
max: 15000,
|
||||||
maxTicksLimit: 5
|
maxTicksLimit: 5,
|
||||||
|
padding: 10,
|
||||||
|
// Include a dollar sign in the ticks
|
||||||
|
callback: function(value, index, values) {
|
||||||
|
return '$' + number_format(value);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
gridLines: {
|
gridLines: {
|
||||||
display: true
|
color: "rgb(234, 236, 244)",
|
||||||
|
zeroLineColor: "rgb(234, 236, 244)",
|
||||||
|
drawBorder: false,
|
||||||
|
borderDash: [2],
|
||||||
|
zeroLineBorderDash: [2]
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
display: false
|
display: false
|
||||||
}
|
},
|
||||||
|
tooltips: {
|
||||||
|
titleMarginBottom: 10,
|
||||||
|
titleFontColor: '#6e707e',
|
||||||
|
titleFontSize: 14,
|
||||||
|
backgroundColor: "rgb(255,255,255)",
|
||||||
|
bodyFontColor: "#858796",
|
||||||
|
borderColor: '#dddfeb',
|
||||||
|
borderWidth: 1,
|
||||||
|
xPadding: 15,
|
||||||
|
yPadding: 15,
|
||||||
|
displayColors: false,
|
||||||
|
caretPadding: 10,
|
||||||
|
callbacks: {
|
||||||
|
label: function(tooltipItem, chart) {
|
||||||
|
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||||
|
return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,16 +1,35 @@
|
|||||||
// Set new default font family and font color to mimic Bootstrap's default styling
|
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||||
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||||
Chart.defaults.global.defaultFontColor = '#292b2c';
|
Chart.defaults.global.defaultFontColor = '#858796';
|
||||||
|
|
||||||
// Pie Chart Example
|
// Pie Chart Example
|
||||||
var ctx = document.getElementById("myPieChart");
|
var ctx = document.getElementById("myPieChart");
|
||||||
var myPieChart = new Chart(ctx, {
|
var myPieChart = new Chart(ctx, {
|
||||||
type: 'pie',
|
type: 'doughnut',
|
||||||
data: {
|
data: {
|
||||||
labels: ["Blue", "Red", "Yellow", "Green"],
|
labels: ["Direct", "Referral", "Social"],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
data: [12.21, 15.58, 11.25, 8.32],
|
data: [55, 30, 15],
|
||||||
backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
|
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
|
||||||
|
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
|
||||||
|
hoverBorderColor: "rgba(234, 236, 244, 1)",
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
tooltips: {
|
||||||
|
backgroundColor: "rgb(255,255,255)",
|
||||||
|
bodyFontColor: "#858796",
|
||||||
|
borderColor: '#dddfeb',
|
||||||
|
borderWidth: 1,
|
||||||
|
xPadding: 15,
|
||||||
|
yPadding: 15,
|
||||||
|
displayColors: false,
|
||||||
|
caretPadding: 10,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
cutoutPercentage: 80,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,12 +2,20 @@
|
|||||||
"use strict"; // Start of use strict
|
"use strict"; // Start of use strict
|
||||||
|
|
||||||
// Toggle the side navigation
|
// Toggle the side navigation
|
||||||
$("#sidebarToggle, #sidebarToggleTop").on('click',function(e) {
|
$("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
|
||||||
e.preventDefault();
|
|
||||||
$("body").toggleClass("sidebar-toggled");
|
$("body").toggleClass("sidebar-toggled");
|
||||||
$(".sidebar").toggleClass("toggled");
|
$(".sidebar").toggleClass("toggled");
|
||||||
|
if ($(".sidebar").hasClass("toggled")) {
|
||||||
|
$('.sidebar .collapse').collapse('hide');
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Close any open menu accordions when window is resized below 768px
|
||||||
|
$(window).resize(function() {
|
||||||
|
if ($(window).width() < 768) {
|
||||||
|
$('.sidebar .collapse').collapse('hide');
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
|
// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
|
||||||
$('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
|
$('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
|
||||||
@@ -20,7 +28,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Scroll to top button appear
|
// Scroll to top button appear
|
||||||
$(document).on('scroll',function() {
|
$(document).on('scroll', function() {
|
||||||
var scrollDistance = $(this).scrollTop();
|
var scrollDistance = $(this).scrollTop();
|
||||||
if (scrollDistance > 100) {
|
if (scrollDistance > 100) {
|
||||||
$('.scroll-to-top').fadeIn();
|
$('.scroll-to-top').fadeIn();
|
||||||
@@ -30,12 +38,12 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Smooth scrolling using jQuery easing
|
// Smooth scrolling using jQuery easing
|
||||||
$(document).on('click', 'a.scroll-to-top', function(event) {
|
$(document).on('click', 'a.scroll-to-top', function(e) {
|
||||||
var $anchor = $(this);
|
var $anchor = $(this);
|
||||||
$('html, body').stop().animate({
|
$('html, body').stop().animate({
|
||||||
scrollTop: ($($anchor.attr('href')).offset().top)
|
scrollTop: ($($anchor.attr('href')).offset().top)
|
||||||
}, 1000, 'easeInOutExpo');
|
}, 1000, 'easeInOutExpo');
|
||||||
event.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
})(jQuery); // End of use strict
|
})(jQuery); // End of use strict
|
||||||
|
|||||||
2
js/sb-admin-2.min.js
vendored
2
js/sb-admin-2.min.js
vendored
@@ -4,4 +4,4 @@
|
|||||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
!function(l){"use strict";l("#sidebarToggle, #sidebarToggleTop").on("click",function(o){o.preventDefault(),l("body").toggleClass("sidebar-toggled"),l(".sidebar").toggleClass("toggled")}),l("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<l(window).width()){var e=o.originalEvent,t=e.wheelDelta||-e.detail;this.scrollTop+=30*(t<0?1:-1),o.preventDefault()}}),l(document).on("scroll",function(){100<l(this).scrollTop()?l(".scroll-to-top").fadeIn():l(".scroll-to-top").fadeOut()}),l(document).on("click","a.scroll-to-top",function(o){var e=l(this);l("html, body").stop().animate({scrollTop:l(e.attr("href")).offset().top},1e3,"easeInOutExpo"),o.preventDefault()})}(jQuery);
|
!function(t){"use strict";t("#sidebarToggle, #sidebarToggleTop").on("click",function(o){t("body").toggleClass("sidebar-toggled"),t(".sidebar").toggleClass("toggled"),t(".sidebar").hasClass("toggled")&&t(".sidebar .collapse").collapse("hide")}),t(window).resize(function(){t(window).width()<768&&t(".sidebar .collapse").collapse("hide")}),t("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<t(window).width()){var e=o.originalEvent,l=e.wheelDelta||-e.detail;this.scrollTop+=30*(l<0?1:-1),o.preventDefault()}}),t(document).on("scroll",function(){100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()}),t(document).on("click","a.scroll-to-top",function(o){var e=t(this);t("html, body").stop().animate({scrollTop:t(e.attr("href")).offset().top},1e3,"easeInOutExpo"),o.preventDefault()})}(jQuery);
|
||||||
124
login.html
124
login.html
@@ -1,71 +1,97 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Login</title>
|
<title>SB Admin 2 - Login</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
</head>
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<body class="bg-gradient-primary">
|
||||||
|
|
||||||
<body class="bg-dark">
|
<div class="container">
|
||||||
|
|
||||||
<div class="container">
|
<!-- Outer Row -->
|
||||||
<div class="card card-login mx-auto mt-5">
|
<div class="row justify-content-center">
|
||||||
<div class="card-header">Login</div>
|
|
||||||
<div class="card-body">
|
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||||
<form>
|
|
||||||
<div class="form-group">
|
<div class="card o-hidden border-0 shadow-lg my-5">
|
||||||
<div class="form-label-group">
|
<div class="card-body p-0">
|
||||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="required" autofocus="autofocus">
|
<!-- Nested Row within Card Body -->
|
||||||
<label for="inputEmail">Email address</label>
|
<div class="row">
|
||||||
|
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
|
||||||
|
</div>
|
||||||
|
<form class="user">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="custom-control custom-checkbox small">
|
||||||
|
<input type="checkbox" class="custom-control-input" id="customCheck">
|
||||||
|
<label class="custom-control-label" for="customCheck">Remember Me</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="index.html" class="btn btn-primary btn-user btn-block">
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
<hr>
|
||||||
|
<a href="index.html" class="btn btn-google btn-user btn-block">
|
||||||
|
<i class="fab fa-google fa-fw"></i> Login with Google
|
||||||
|
</a>
|
||||||
|
<a href="index.html" class="btn btn-facebook btn-user btn-block">
|
||||||
|
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
|
||||||
|
</a>
|
||||||
|
</form>
|
||||||
|
<hr>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="forgot-password.html">Forgot Password?</a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="register.html">Create an Account!</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label-group">
|
|
||||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="required">
|
|
||||||
<label for="inputPassword">Password</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" value="remember-me">
|
|
||||||
Remember Password
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a class="btn btn-primary btn-block" href="index.html">Login</a>
|
|
||||||
</form>
|
|
||||||
<div class="text-center">
|
|
||||||
<a class="d-block small mt-3" href="register.html">Register an Account</a>
|
|
||||||
<a class="d-block small" href="forgot-password.html">Forgot Password?</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
</div>
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
</body>
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
6
package-lock.json
generated
6
package-lock.json
generated
@@ -5,9 +5,9 @@
|
|||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": {
|
"@fortawesome/fontawesome-free": {
|
||||||
"version": "5.6.3",
|
"version": "5.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.7.0.tgz",
|
||||||
"integrity": "sha512-s5PLdI9NYgjBvfrv6rhirPHlAHWx+Sfo/IjsAeiXYfmemC/GSjwsyz1wLnGPazbLPXWfk62ks980o9AmsxYUEQ=="
|
"integrity": "sha512-jLikKhTPgYTY/IFIBwkPSh2JME5xK0b9DqXmTdlG/SUbMW0siHIJ+GLPTebL8qHO5R6xOth0uPHBL5/oZ7BeEQ=="
|
||||||
},
|
},
|
||||||
"abbrev": {
|
"abbrev": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"title": "SB Admin 2",
|
"title": "SB Admin 2",
|
||||||
"name": "startbootstrap-sb-admin-2",
|
"name": "startbootstrap-sb-admin-2",
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"description": "A Bootstrap admin theme.",
|
"description": "An open source Bootstrap 4 admin theme.",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"css",
|
"css",
|
||||||
"sass",
|
"sass",
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
"url": "https://github.com/BlackrockDigital/startbootstrap-sb-admin-2.git"
|
"url": "https://github.com/BlackrockDigital/startbootstrap-sb-admin-2.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "5.6.3",
|
"@fortawesome/fontawesome-free": "5.7.0",
|
||||||
"bootstrap": "4.2.1",
|
"bootstrap": "4.2.1",
|
||||||
"chart.js": "2.7.3",
|
"chart.js": "2.7.3",
|
||||||
"datatables.net-bs4": "1.10.19",
|
"datatables.net-bs4": "1.10.19",
|
||||||
|
|||||||
132
register.html
132
register.html
@@ -1,89 +1,95 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Register</title>
|
<title>SB Admin 2 - Register</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template-->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template-->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
</head>
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<body class="bg-gradient-primary">
|
||||||
|
|
||||||
<body class="bg-dark">
|
<div class="container">
|
||||||
|
|
||||||
<div class="container">
|
<div class="card o-hidden border-0 shadow-lg my-5">
|
||||||
<div class="card card-register mx-auto mt-5">
|
<div class="card-body p-0">
|
||||||
<div class="card-header">Register an Account</div>
|
<!-- Nested Row within Card Body -->
|
||||||
<div class="card-body">
|
<div class="row">
|
||||||
<form>
|
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
|
||||||
<div class="form-group">
|
<div class="col-lg-7">
|
||||||
<div class="form-row">
|
<div class="p-5">
|
||||||
<div class="col-md-6">
|
<div class="text-center">
|
||||||
<div class="form-label-group">
|
<h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
|
||||||
<input type="text" id="firstName" class="form-control" placeholder="First name" required="required" autofocus="autofocus">
|
</div>
|
||||||
<label for="firstName">First name</label>
|
<form class="user">
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-6 mb-3 mb-sm-0">
|
||||||
|
<input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<input type="text" class="form-control form-control-user" id="exampleLastName" placeholder="Last Name">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="form-group">
|
||||||
<div class="form-label-group">
|
<input type="email" class="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address">
|
||||||
<input type="text" id="lastName" class="form-control" placeholder="Last name" required="required">
|
</div>
|
||||||
<label for="lastName">Last name</label>
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-6 mb-3 mb-sm-0">
|
||||||
|
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<input type="password" class="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a href="login.html" class="btn btn-primary btn-user btn-block">
|
||||||
|
Register Account
|
||||||
|
</a>
|
||||||
|
<hr>
|
||||||
|
<a href="index.html" class="btn btn-google btn-user btn-block">
|
||||||
|
<i class="fab fa-google fa-fw"></i> Register with Google
|
||||||
|
</a>
|
||||||
|
<a href="index.html" class="btn btn-facebook btn-user btn-block">
|
||||||
|
<i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
|
||||||
|
</a>
|
||||||
|
</form>
|
||||||
|
<hr>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="forgot-password.html">Forgot Password?</a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<a class="small" href="login.html">Already have an account? Login!</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label-group">
|
|
||||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="required">
|
|
||||||
<label for="inputEmail">Email address</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-label-group">
|
|
||||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="required">
|
|
||||||
<label for="inputPassword">Password</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-label-group">
|
|
||||||
<input type="password" id="confirmPassword" class="form-control" placeholder="Confirm password" required="required">
|
|
||||||
<label for="confirmPassword">Confirm password</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a class="btn btn-primary btn-block" href="login.html">Register</a>
|
|
||||||
</form>
|
|
||||||
<div class="text-center">
|
|
||||||
<a class="d-block small mt-3" href="login.html">Login Page</a>
|
|
||||||
<a class="d-block small" href="forgot-password.html">Forgot Password?</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
</div>
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
</body>
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
52
scss/_buttons.scss
Normal file
52
scss/_buttons.scss
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
.btn-circle {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&.btn-sm {
|
||||||
|
height: 1.8rem;
|
||||||
|
width: 1.8rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
&.btn-lg {
|
||||||
|
height: 3.5rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon-split {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
.icon {
|
||||||
|
background: fade-out($black, .85);
|
||||||
|
display: inline-block;
|
||||||
|
padding: $btn-padding-y $btn-padding-x;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
padding: $btn-padding-y $btn-padding-x;
|
||||||
|
}
|
||||||
|
&.btn-sm {
|
||||||
|
.icon {
|
||||||
|
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-lg {
|
||||||
|
.icon {
|
||||||
|
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -7,3 +7,23 @@
|
|||||||
height: 20rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bar Chart
|
||||||
|
.chart-bar {
|
||||||
|
position: relative;
|
||||||
|
height: 10rem;
|
||||||
|
width: 100%;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pie Chart
|
||||||
|
.chart-pie {
|
||||||
|
position: relative;
|
||||||
|
height: 15rem;
|
||||||
|
width: 100%;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
height: calc(20rem - 43px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
52
scss/_error.scss
Normal file
52
scss/_error.scss
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
// Lucas Bebber's Glitch Effect
|
||||||
|
// Tutorial and CSS from CSS Tricks
|
||||||
|
// https://css-tricks.com/glitch-effect-text-images-svg/
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: $gray-800;
|
||||||
|
font-size: 7rem;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1;
|
||||||
|
width: 12.5rem;
|
||||||
|
}
|
||||||
|
@keyframes noise-anim {
|
||||||
|
$steps: 20;
|
||||||
|
@for $i from 0 through $steps {
|
||||||
|
#{percentage($i*(1/$steps))} {
|
||||||
|
clip: rect(random(100)+px,9999px,random(100)+px,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.error:after {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
text-shadow: -1px 0 $red;
|
||||||
|
top: 0;
|
||||||
|
color: $gray-800;
|
||||||
|
background: $gray-100;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0,900px,0,0);
|
||||||
|
animation: noise-anim 2s infinite linear alternate-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes noise-anim-2 {
|
||||||
|
$steps: 20;
|
||||||
|
@for $i from 0 through $steps {
|
||||||
|
#{percentage($i*(1/$steps))} {
|
||||||
|
clip: rect(random(100)+px,9999px,random(100)+px,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.error:before {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
text-shadow: 1px 0 $blue;
|
||||||
|
top: 0;
|
||||||
|
color: $gray-800;
|
||||||
|
background: $gray-100;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0,900px,0,0);
|
||||||
|
animation: noise-anim-2 3s infinite linear alternate-reverse;
|
||||||
|
}
|
||||||
@@ -9,6 +9,12 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Main page wrapper
|
// Main page wrapper
|
||||||
#wrapper {
|
#wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -29,29 +35,6 @@ body {
|
|||||||
padding-right: $grid-gutter-width;
|
padding-right: $grid-gutter-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fixed Nav Option
|
|
||||||
body.fixed-nav {
|
|
||||||
#content-wrapper {
|
|
||||||
margin-top: $navbar-base-height;
|
|
||||||
padding-left: $sidebar-collapsed-width;
|
|
||||||
}
|
|
||||||
&.sidebar-toggled {
|
|
||||||
#content-wrapper {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
#content-wrapper {
|
|
||||||
padding-left: $sidebar-base-width;
|
|
||||||
}
|
|
||||||
&.sidebar-toggled {
|
|
||||||
#content-wrapper {
|
|
||||||
padding-left: $sidebar-collapsed-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scroll to top button
|
// Scroll to top button
|
||||||
.scroll-to-top {
|
.scroll-to-top {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -1,69 +1,50 @@
|
|||||||
:root {
|
// Pulling these images from Unsplash
|
||||||
--input-padding-x: 0.75rem;
|
// Toshi the dog from https://unsplash.com/@charlesdeluvio - what a funny dog...
|
||||||
--input-padding-y: 0.75rem;
|
|
||||||
|
.bg-login-image {
|
||||||
|
background: url('https://source.unsplash.com/K4mSJ7kc0As/600x800');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-login {
|
.bg-register-image {
|
||||||
max-width: 25rem;
|
background: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-register {
|
.bg-password-image {
|
||||||
max-width: 40rem;
|
background: url('https://source.unsplash.com/oWTW-jNGl9I/600x800');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label-group {
|
form.user {
|
||||||
position: relative;
|
|
||||||
|
.custom-checkbox.small {
|
||||||
|
label {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-user {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-user {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label-group > input,
|
.btn-google {
|
||||||
.form-label-group > label {
|
@include button-variant($brand-google, $white);
|
||||||
padding: var(--input-padding-y) var(--input-padding-x);
|
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label-group > label {
|
.btn-facebook {
|
||||||
position: absolute;
|
@include button-variant($brand-facebook, $white);
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
/* Override default `<label>` margin */
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #495057;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
transition: all 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input::-webkit-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input:-ms-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input::-ms-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input::-moz-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input::placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input:not(:placeholder-shown) {
|
|
||||||
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
|
|
||||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label-group input:not(:placeholder-shown) ~ label {
|
|
||||||
padding-top: calc(var(--input-padding-y) / 3);
|
|
||||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
|
||||||
font-size: 12px;
|
|
||||||
color: #777;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1 @@
|
|||||||
@mixin rotate {
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
@import "navs/global.scss";
|
@import "navs/global.scss";
|
||||||
@import "navs/topbar.scss";
|
@import "navs/topbar.scss";
|
||||||
@import "navs/sidebar.scss";
|
@import "navs/sidebar.scss";
|
||||||
@import "navs/fixed.scss";
|
|
||||||
|
|||||||
@@ -2,3 +2,6 @@
|
|||||||
@import "utilities/background.scss";
|
@import "utilities/background.scss";
|
||||||
@import "utilities/display.scss";
|
@import "utilities/display.scss";
|
||||||
@import "utilities/text.scss";
|
@import "utilities/text.scss";
|
||||||
|
@import "utilities/border.scss";
|
||||||
|
@import "utilities/progress.scss";
|
||||||
|
@import "utilities/rotate.scss";
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
// Override Bootstrap default variables here
|
||||||
|
// Do not edit any of the files in /vendor/bootstrap/scss/!
|
||||||
|
|
||||||
// Color Variables
|
// Color Variables
|
||||||
// Bootstrap Color Overrides
|
// Bootstrap Color Overrides
|
||||||
|
|
||||||
@@ -24,6 +27,10 @@ $green: #1cc88a !default;
|
|||||||
$teal: #20c9a6 !default;
|
$teal: #20c9a6 !default;
|
||||||
$cyan: #36b9cc !default;
|
$cyan: #36b9cc !default;
|
||||||
|
|
||||||
|
// Custom Colors
|
||||||
|
$brand-google: #ea4335;
|
||||||
|
$brand-facebook: #3b5998;
|
||||||
|
|
||||||
// Set Contrast Threshold
|
// Set Contrast Threshold
|
||||||
$yiq-contrasted-threshold: 195 !default;
|
$yiq-contrasted-threshold: 195 !default;
|
||||||
|
|
||||||
@@ -41,20 +48,21 @@ $box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, .2) !default;
|
|||||||
$box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, .15) !default;
|
$box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, .15) !default;
|
||||||
// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
|
// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
|
||||||
|
|
||||||
// Border Radius
|
// Borders Radius
|
||||||
$border-radius: 0.35rem !default;
|
$border-radius: 0.35rem !default;
|
||||||
|
$border-color: darken($gray-200, 2%);
|
||||||
|
|
||||||
// Spacing Variables
|
// Spacing Variables
|
||||||
// Change below variable if the height of the navbar changes
|
// Change below variable if the height of the navbar changes
|
||||||
$topbar-base-height: 70px;
|
$topbar-base-height: 4.375rem;
|
||||||
$navbar-base-height: 56px;
|
|
||||||
// Change below variable to change the width of the sidenav
|
// Change below variable to change the width of the sidenav
|
||||||
$sidebar-base-width: 250px;
|
$sidebar-base-width: 14rem;
|
||||||
// Change below variable to change the width of the sidenav when collapsed
|
// Change below variable to change the width of the sidenav when collapsed
|
||||||
$sidebar-collapsed-width: 115px;
|
$sidebar-collapsed-width: 6.5rem;
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
$card-cap-bg: $gray-100;
|
$card-cap-bg: $gray-100;
|
||||||
|
$card-border-color: $border-color;
|
||||||
|
|
||||||
// Adjust column spacing for symmetry
|
// Adjust column spacing for symmetry
|
||||||
$spacer: 1rem;
|
$spacer: 1rem;
|
||||||
@@ -63,5 +71,6 @@ $grid-gutter-width: $spacer * 1.5;
|
|||||||
// Transitions
|
// Transitions
|
||||||
$transition-collapse: height .15s ease !default;
|
$transition-collapse: height .15s ease !default;
|
||||||
|
|
||||||
// Dropdown Font Font Size
|
// Dropdowns
|
||||||
$dropdown-font-size: 0.85rem;
|
$dropdown-font-size: 0.85rem;
|
||||||
|
$dropdown-border-color: $border-color;
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
// Fixed Nav Option
|
|
||||||
// Add .fixed-top class to top .navbar-nav and to .sidebar - add .fixed-nav to body
|
|
||||||
|
|
||||||
.sidebar.fixed-top {
|
|
||||||
// top: $navbar-base-height;
|
|
||||||
// height: calc(100vh - #{$navbar-base-height});
|
|
||||||
// overflow-y: auto;
|
|
||||||
}
|
|
||||||
@@ -68,6 +68,10 @@
|
|||||||
&:active {
|
&:active {
|
||||||
background-color: $gray-300;
|
background-color: $gray-300;
|
||||||
}
|
}
|
||||||
|
&.active {
|
||||||
|
color: $primary;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -113,7 +117,6 @@
|
|||||||
|
|
||||||
.sidebar-brand-icon i {
|
.sidebar-brand-icon i {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@include rotate;
|
|
||||||
}
|
}
|
||||||
.sidebar-brand-text {
|
.sidebar-brand-text {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -1,12 +1,40 @@
|
|||||||
// Topbar
|
// Topbar
|
||||||
.topbar {
|
.topbar {
|
||||||
height: $topbar-base-height;
|
height: $topbar-base-height;
|
||||||
|
#sidebarToggleTop {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
&:hover {
|
||||||
|
background-color: $gray-200;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: $gray-300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-search {
|
||||||
|
width: 25rem;
|
||||||
|
input {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topbar-divider {
|
||||||
|
width: 0;
|
||||||
|
border-right: 1px solid $border-color;
|
||||||
|
height: calc(#{$topbar-base-height} - 2rem);
|
||||||
|
margin: auto 1rem;
|
||||||
|
}
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
height: $topbar-base-height;
|
height: $topbar-base-height;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 0.75rem;
|
padding: 0 0.75rem;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dropdown {
|
.dropdown {
|
||||||
@@ -16,7 +44,54 @@
|
|||||||
right: $grid-gutter-width / 2;
|
right: $grid-gutter-width / 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include media-breakpoint-up(md) {
|
.dropdown-list {
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
.dropdown-header {
|
||||||
|
background-color: $primary;
|
||||||
|
border: 1px solid $primary;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.dropdown-item {
|
||||||
|
white-space: normal;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-left: 1px solid $border-color;
|
||||||
|
border-right: 1px solid $border-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
.dropdown-list-image {
|
||||||
|
position: relative;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
img {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
}
|
||||||
|
.status-indicator {
|
||||||
|
background-color: $gray-200;
|
||||||
|
height: 0.75rem;
|
||||||
|
width: 0.75rem;
|
||||||
|
border-radius: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
border: .125rem solid $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-truncate {
|
||||||
|
max-width: 10rem;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: $gray-200;
|
||||||
|
color: $gray-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
.dropdown {
|
.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
@@ -24,6 +99,14 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.dropdown-list {
|
||||||
|
width: 20rem !important;
|
||||||
|
.dropdown-item {
|
||||||
|
.text-truncate {
|
||||||
|
max-width: 13.375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,9 @@
|
|||||||
// Custom Components
|
// Custom Components
|
||||||
@import "dropdowns.scss";
|
@import "dropdowns.scss";
|
||||||
@import "navs.scss";
|
@import "navs.scss";
|
||||||
|
@import "buttons.scss";
|
||||||
@import "cards.scss";
|
@import "cards.scss";
|
||||||
@import "charts.scss";
|
@import "charts.scss";
|
||||||
@import "login.scss";
|
@import "login.scss";
|
||||||
|
@import "error.scss";
|
||||||
@import "footer.scss";
|
@import "footer.scss";
|
||||||
|
|||||||
39
scss/utilities/_border.scss
Normal file
39
scss/utilities/_border.scss
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
.border-left-primary {
|
||||||
|
border-left: .25rem solid $primary !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-left-success {
|
||||||
|
border-left: .25rem solid $success !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-left-info {
|
||||||
|
border-left: .25rem solid $info !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-left-warning {
|
||||||
|
border-left: .25rem solid $warning !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-left-danger {
|
||||||
|
border-left: .25rem solid $danger !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom-primary {
|
||||||
|
border-bottom: .25rem solid $primary !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom-success {
|
||||||
|
border-bottom: .25rem solid $success !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom-info {
|
||||||
|
border-bottom: .25rem solid $info !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom-warning {
|
||||||
|
border-bottom: .25rem solid $warning !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom-danger {
|
||||||
|
border-bottom: .25rem solid $danger !important;
|
||||||
|
}
|
||||||
3
scss/utilities/_progress.scss
Normal file
3
scss/utilities/_progress.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.progress-sm {
|
||||||
|
height: .5rem;
|
||||||
|
}
|
||||||
7
scss/utilities/_rotate.scss
Normal file
7
scss/utilities/_rotate.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.rotate-15 {
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate-n-15 {
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
@@ -1,5 +1,13 @@
|
|||||||
// Grayscale Text Utilities
|
// Grayscale Text Utilities
|
||||||
|
|
||||||
|
.text-xs {
|
||||||
|
font-size: .7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-lg {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-gray-100 {
|
.text-gray-100 {
|
||||||
color: $gray-100 !important;
|
color: $gray-100 !important;
|
||||||
}
|
}
|
||||||
@@ -35,3 +43,12 @@
|
|||||||
.text-gray-900 {
|
.text-gray-900 {
|
||||||
color: $gray-900 !important;
|
color: $gray-900 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-circle {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|||||||
529
tables.html
529
tables.html
@@ -1,148 +1,348 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>SB Admin - Tables</title>
|
<title>SB Admin 2 - Tables</title>
|
||||||
|
|
||||||
<!-- Bootstrap core CSS-->
|
<!-- Custom fonts for this template -->
|
||||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom fonts for this template-->
|
<!-- Custom styles for this template -->
|
||||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Page level plugin CSS-->
|
<!-- Custom styles for this page -->
|
||||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
|
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom styles for this template-->
|
</head>
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
<body id="page-top">
|
||||||
|
|
||||||
<body id="page-top">
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
<a class="navbar-brand mr-1" href="index.html">Start Bootstrap</a>
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
|
<!-- Divider -->
|
||||||
<i class="fas fa-bars"></i>
|
<hr class="sidebar-divider my-0">
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Navbar Search -->
|
<!-- Nav Item - Dashboard -->
|
||||||
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
|
<li class="nav-item">
|
||||||
<div class="input-group">
|
<a class="nav-link" href="index.html">
|
||||||
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
<div class="input-group-append">
|
<span>Dashboard</span></a>
|
||||||
<button class="btn btn-primary" type="button">
|
</li>
|
||||||
<i class="fas fa-search"></i>
|
|
||||||
</button>
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</li>
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
<ul class="navbar-nav ml-auto ml-md-0">
|
<li class="nav-item">
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
<i class="fas fa-bell fa-fw"></i>
|
<span>Utilities</span>
|
||||||
<span class="badge badge-danger">9+</span>
|
</a>
|
||||||
</a>
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
<div class="dropdown-divider"></div>
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow mx-1">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-envelope fa-fw"></i>
|
<!-- Divider -->
|
||||||
<span class="badge badge-danger">7</span>
|
<hr class="sidebar-divider">
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
<!-- Heading -->
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<div class="sidebar-heading">
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
Addons
|
||||||
<div class="dropdown-divider"></div>
|
</div>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item dropdown no-arrow">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-user-circle fa-fw"></i>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
|
||||||
<a class="dropdown-item" href="#">Settings</a>
|
|
||||||
<a class="dropdown-item" href="#">Activity Log</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</nav>
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<div id="wrapper">
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Divider -->
|
||||||
<ul class="sidebar navbar-nav">
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="index.html">
|
|
||||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
||||||
<span>Dashboard</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="fas fa-fw fa-folder"></i>
|
|
||||||
<span>Pages</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
|
|
||||||
<h6 class="dropdown-header">Login Screens:</h6>
|
|
||||||
<a class="dropdown-item" href="login.html">Login</a>
|
|
||||||
<a class="dropdown-item" href="register.html">Register</a>
|
|
||||||
<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<h6 class="dropdown-header">Other Pages:</h6>
|
|
||||||
<a class="dropdown-item" href="404.html">404 Page</a>
|
|
||||||
<a class="dropdown-item" href="blank.html">Blank Page</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="charts.html">
|
|
||||||
<i class="fas fa-fw fa-chart-area"></i>
|
|
||||||
<span>Charts</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="tables.html">
|
|
||||||
<i class="fas fa-fw fa-table"></i>
|
|
||||||
<span>Tables</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div id="content-wrapper">
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Breadcrumbs-->
|
<!-- Page Heading -->
|
||||||
<ol class="breadcrumb">
|
<h1 class="h3 mb-2 text-gray-800">Tables</h1>
|
||||||
<li class="breadcrumb-item">
|
<p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the <a target="_blank" href="https://datatables.net">official DataTables documentation</a>.</p>
|
||||||
<a href="#">Dashboard</a>
|
|
||||||
</li>
|
|
||||||
<li class="breadcrumb-item active">Tables</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<!-- DataTables Example -->
|
<!-- DataTales Example -->
|
||||||
<div class="card mb-3">
|
<div class="card shadow mb-4">
|
||||||
<div class="card-header">
|
<div class="card-header py-3">
|
||||||
<i class="fas fa-table"></i>
|
<h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
|
||||||
Data Table Example</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
||||||
@@ -627,72 +827,71 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="small text-center text-muted my-5">
|
|
||||||
<em>More table examples coming soon...</em>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.container-fluid -->
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
<!-- Sticky Footer -->
|
|
||||||
<footer class="sticky-footer">
|
|
||||||
<div class="container my-auto">
|
|
||||||
<div class="copyright text-center my-auto">
|
|
||||||
<span>Copyright © Your Website 2018</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.content-wrapper -->
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /#wrapper -->
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
<!-- Scroll to Top Button-->
|
</div>
|
||||||
<a class="scroll-to-top rounded" href="#page-top">
|
<!-- End of Page Wrapper -->
|
||||||
<i class="fas fa-angle-up"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Logout Modal-->
|
<!-- Scroll to Top Button-->
|
||||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
<div class="modal-dialog" role="document">
|
<i class="fas fa-angle-up"></i>
|
||||||
<div class="modal-content">
|
</a>
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
<!-- Logout Modal-->
|
||||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
<span aria-hidden="true">×</span>
|
<div class="modal-dialog" role="document">
|
||||||
</button>
|
<div class="modal-content">
|
||||||
</div>
|
<div class="modal-header">
|
||||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
<div class="modal-footer">
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
<span aria-hidden="true">×</span>
|
||||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
<!-- Bootstrap core JavaScript-->
|
||||||
<script src="vendor/jquery/jquery.min.js"></script>
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Core plugin JavaScript-->
|
<!-- Core plugin JavaScript-->
|
||||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
<!-- Page level plugin JavaScript-->
|
<!-- Custom scripts for all pages-->
|
||||||
<script src="vendor/datatables/jquery.dataTables.js"></script>
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
|
|
||||||
|
|
||||||
<!-- Custom scripts for all pages-->
|
<!-- Page level plugins -->
|
||||||
<script src="js/sb-admin-2.min.js"></script>
|
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
|
||||||
|
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
|
||||||
|
|
||||||
<!-- Demo scripts for this page-->
|
<!-- Page level custom scripts -->
|
||||||
<script src="js/demo/datatables-demo.js"></script>
|
<script src="js/demo/datatables-demo.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
480
utilities-animation.html
Normal file
480
utilities-animation.html
Normal file
@@ -0,0 +1,480 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Animation Utilities</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse show" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item active" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<h1 class="h3 mb-1 text-gray-800">Animation Utilities</h1>
|
||||||
|
<p class="mb-4">Bootstrap's default utility classes can be found on the official <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.</p>
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Grow In Utility -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<div class="card position-relative">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Grow In Animation Utilty</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<code>.animated--grow-in</code>
|
||||||
|
</div>
|
||||||
|
<div class="small mb-1">Navbar Dropdown Example:</div>
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-light mb-4">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right animated--grow-in" aria-labelledby="navbarDropdown">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p class="mb-0 small">Note: This utility animates the CSS transform property, meaning it will override any existing transforms on an element being animated! In this theme, the grow in animation is only being used on dropdowns within the navbar.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fade In Utility -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<div class="card position-relative">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Fade In Animation Utilty</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<code>.animated--fade-in</code>
|
||||||
|
</div>
|
||||||
|
<div class="small mb-1">Navbar Dropdown Example:</div>
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-light mb-4">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right animated--fade-in" aria-labelledby="navbarDropdown">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="small mb-1">Dropdown Button Example:</div>
|
||||||
|
<div class="dropdown mb-4">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mb-0 small">Note: This utility animates the CSS opacity property, meaning it will override any existing opacity on an element being animated!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
471
utilities-border.html
Normal file
471
utilities-border.html
Normal file
@@ -0,0 +1,471 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Border Utilities</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse show" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item active" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<h1 class="h3 mb-1 text-gray-800">Border Utilities</h1>
|
||||||
|
<p class="mb-4">Bootstrap's default utility classes can be found on the official <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.</p>
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Border Left Utilities -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-left-primary">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-left-primary
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-left-success">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-left-success
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-left-info">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-left-info
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-left-warning">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-left-warning
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-left-danger">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-left-danger
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Border Bottom Utilities -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-bottom-primary">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-bottom-primary
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-bottom-success">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-bottom-success
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-bottom-info">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-bottom-info
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-bottom-warning">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-bottom-warning
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4 py-3 border-bottom-danger">
|
||||||
|
<div class="card-body">
|
||||||
|
.border-bottom-danger
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
476
utilities-color.html
Normal file
476
utilities-color.html
Normal file
@@ -0,0 +1,476 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Color Utilities</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse show" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item active" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<h1 class="h3 mb-1 text-gray-800">Color Utilities</h1>
|
||||||
|
<p class="mb-4">Bootstrap's default utility classes can be found on the official <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.</p>
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- First Column -->
|
||||||
|
<div class="col-lg-4">
|
||||||
|
|
||||||
|
<!-- Custom Text Color Utilities -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Custom Text Color Utilities</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="text-gray-100 p-3 bg-dark m-0">.text-gray-100</p>
|
||||||
|
<p class="text-gray-200 p-3 bg-dark m-0">.text-gray-200</p>
|
||||||
|
<p class="text-gray-300 p-3 bg-dark m-0">.text-gray-300</p>
|
||||||
|
<p class="text-gray-400 p-3 bg-dark m-0">.text-gray-400</p>
|
||||||
|
<p class="text-gray-500 p-3 m-0">.text-gray-500</p>
|
||||||
|
<p class="text-gray-600 p-3 m-0">.text-gray-600</p>
|
||||||
|
<p class="text-gray-700 p-3 m-0">.text-gray-700</p>
|
||||||
|
<p class="text-gray-800 p-3 m-0">.text-gray-800</p>
|
||||||
|
<p class="text-gray-900 p-3 m-0">.text-gray-900</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom Font Size Utilities -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Custom Font Size Utilities</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="text-xs">.text-xs</p>
|
||||||
|
<p class="text-lg mb-0">.text-lg</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Second Column -->
|
||||||
|
<div class="col-lg-4">
|
||||||
|
|
||||||
|
<!-- Background Gradient Utilities -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Custom Background Gradient Utilities</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="px-3 py-5 bg-gradient-primary text-white">.bg-gradient-primary</div>
|
||||||
|
<div class="px-3 py-5 bg-gradient-success text-white">.bg-gradient-success</div>
|
||||||
|
<div class="px-3 py-5 bg-gradient-info text-white">.bg-gradient-info</div>
|
||||||
|
<div class="px-3 py-5 bg-gradient-warning text-white">.bg-gradient-warning</div>
|
||||||
|
<div class="px-3 py-5 bg-gradient-danger text-white">.bg-gradient-danger</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Third Column -->
|
||||||
|
<div class="col-lg-4">
|
||||||
|
|
||||||
|
<!-- Grayscale Utilities -->
|
||||||
|
<div class="card shadow mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Custom Grayscale Background Utilities</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="p-3 bg-gray-100">.bg-gray-100</div>
|
||||||
|
<div class="p-3 bg-gray-200">.bg-gray-200</div>
|
||||||
|
<div class="p-3 bg-gray-300">.bg-gray-300</div>
|
||||||
|
<div class="p-3 bg-gray-400">.bg-gray-400</div>
|
||||||
|
<div class="p-3 bg-gray-500 text-white">.bg-gray-500</div>
|
||||||
|
<div class="p-3 bg-gray-600 text-white">.bg-gray-600</div>
|
||||||
|
<div class="p-3 bg-gray-700 text-white">.bg-gray-700</div>
|
||||||
|
<div class="p-3 bg-gray-800 text-white">.bg-gray-800</div>
|
||||||
|
<div class="p-3 bg-gray-900 text-white">.bg-gray-900</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
469
utilities-other.html
Normal file
469
utilities-other.html
Normal file
@@ -0,0 +1,469 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>SB Admin 2 - Other Utilities</title>
|
||||||
|
|
||||||
|
<!-- Custom fonts for this template-->
|
||||||
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template-->
|
||||||
|
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
|
<!-- Sidebar - Brand -->
|
||||||
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||||
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
|
<i class="fas fa-laugh-wink"></i>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider my-0">
|
||||||
|
|
||||||
|
<!-- Nav Item - Dashboard -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||||
|
<span>Dashboard</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Interface
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||||
|
<i class="fas fa-fw fa-cog"></i>
|
||||||
|
<span>Components</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Components:</h6>
|
||||||
|
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||||
|
<a class="collapse-item" href="cards.html">Cards</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Utilities Collapse Menu -->
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
|
||||||
|
<i class="fas fa-fw fa-wrench"></i>
|
||||||
|
<span>Utilities</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapseUtilities" class="collapse show" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||||
|
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||||
|
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||||
|
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||||
|
<a class="collapse-item active" href="utilities-other.html">Other</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider">
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="sidebar-heading">
|
||||||
|
Addons
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Item - Pages Collapse Menu -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
|
||||||
|
<i class="fas fa-fw fa-folder"></i>
|
||||||
|
<span>Pages</span>
|
||||||
|
</a>
|
||||||
|
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||||
|
<div class="bg-white py-2 collapse-inner rounded">
|
||||||
|
<h6 class="collapse-header">Login Screens:</h6>
|
||||||
|
<a class="collapse-item" href="login.html">Login</a>
|
||||||
|
<a class="collapse-item" href="register.html">Register</a>
|
||||||
|
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||||
|
<div class="collapse-divider"></div>
|
||||||
|
<h6 class="collapse-header">Other Pages:</h6>
|
||||||
|
<a class="collapse-item" href="404.html">404 Page</a>
|
||||||
|
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Charts -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<i class="fas fa-fw fa-chart-area"></i>
|
||||||
|
<span>Charts</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Tables -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<i class="fas fa-fw fa-table"></i>
|
||||||
|
<span>Tables</span></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
|
<div class="text-center d-none d-md-inline">
|
||||||
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
<!-- Content Wrapper -->
|
||||||
|
<div id="content-wrapper" class="d-flex flex-column">
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<!-- Topbar -->
|
||||||
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Topbar Search -->
|
||||||
|
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Topbar Navbar -->
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
|
||||||
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||||
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-search fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||||
|
<form class="form-inline mr-auto w-100 navbar-search">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
<i class="fas fa-search fa-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Alerts -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-bell fa-fw"></i>
|
||||||
|
<!-- Counter - Alerts -->
|
||||||
|
<span class="badge badge-danger badge-counter">3+</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Alerts -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Alerts Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-primary">
|
||||||
|
<i class="fas fa-file-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 12, 2019</div>
|
||||||
|
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-success">
|
||||||
|
<i class="fas fa-donate text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 7, 2019</div>
|
||||||
|
$290.29 has been deposited into your account!
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="mr-3">
|
||||||
|
<div class="icon-circle bg-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="small text-gray-500">December 2, 2019</div>
|
||||||
|
Spending Alert: We've noticed unusually high spending for your account.
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Nav Item - Messages -->
|
||||||
|
<li class="nav-item dropdown no-arrow mx-1">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fas fa-envelope fa-fw"></i>
|
||||||
|
<!-- Counter - Messages -->
|
||||||
|
<span class="badge badge-danger badge-counter">7</span>
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - Messages -->
|
||||||
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||||
|
<h6 class="dropdown-header">
|
||||||
|
Message Center
|
||||||
|
</h6>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-weight-bold">
|
||||||
|
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
|
||||||
|
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
|
||||||
|
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-warning"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
|
||||||
|
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||||
|
<div class="dropdown-list-image mr-3">
|
||||||
|
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
|
||||||
|
<div class="status-indicator bg-success"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
|
||||||
|
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<div class="topbar-divider d-none d-sm-block"></div>
|
||||||
|
|
||||||
|
<!-- Nav Item - User Information -->
|
||||||
|
<li class="nav-item dropdown no-arrow">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
|
||||||
|
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||||
|
</a>
|
||||||
|
<!-- Dropdown - User Information -->
|
||||||
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Activity Log
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||||
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End of Topbar -->
|
||||||
|
|
||||||
|
<!-- Begin Page Content -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- Page Heading -->
|
||||||
|
<h1 class="h3 mb-1 text-gray-800">Other Utilities</h1>
|
||||||
|
<p class="mb-4">Bootstrap's default utility classes can be found on the official <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.</p>
|
||||||
|
|
||||||
|
<!-- Content Row -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<!-- Overflow Hidden -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Overflow Hidden Utilty</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
Use <code>.o-hidden</code> to set the overflow property of any element to hidden.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Progress Small -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Progress Small Utility</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-1 small">Normal Progress Bar</div>
|
||||||
|
<div class="progress mb-4">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-1 small">Small Progress Bar</div>
|
||||||
|
<div class="progress progress-sm mb-2">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
Use the <code>.progress-sm</code> class along with <code>.progress</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dropdown No Arrow -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Dropdown - No Arrow</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="dropdown no-arrow mb-4">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown (no arrow)
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
Add the <code>.no-arrow</code> class alongside the <code>.dropdown</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
|
||||||
|
<!-- Roitation Utilities -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h6 class="m-0 font-weight-bold text-primary">Rotation Utilities</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="bg-primary text-white p-3 rotate-15 d-inline-block my-4">.rotate-15</div>
|
||||||
|
<hr>
|
||||||
|
<div class="bg-primary text-white p-3 rotate-n-15 d-inline-block my-4">.rotate-n-15</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Main Content -->
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="sticky-footer bg-white">
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="copyright text-center my-auto">
|
||||||
|
<span>Copyright © Your Website 2019</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- End of Footer -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Content Wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End of Page Wrapper -->
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button-->
|
||||||
|
<a class="scroll-to-top rounded" href="#page-top">
|
||||||
|
<i class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Logout Modal-->
|
||||||
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||||
|
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript-->
|
||||||
|
<script src="vendor/jquery/jquery.min.js"></script>
|
||||||
|
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Core plugin JavaScript-->
|
||||||
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom scripts for all pages-->
|
||||||
|
<script src="js/sb-admin-2.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user