962 lines
42 KiB
HTML
962 lines
42 KiB
HTML
<!--
|
||
=========================================================
|
||
* Black Dashboard PRO - v1.1.1
|
||
=========================================================
|
||
|
||
* Product Page: https://themes.getbootstrap.com/product/black-dashboard-pro-premium-bootstrap-4-admin/
|
||
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||
|
||
* Coded by Creative Tim
|
||
|
||
=========================================================
|
||
|
||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||
<title>
|
||
Black Dashboard PRO by Creative Tim
|
||
</title>
|
||
<!-- Fonts and icons -->
|
||
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
||
<!-- Nucleo Icons -->
|
||
<link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||
<!-- CSS Files -->
|
||
<link href="../assets/css/black-dashboard.css?v=1.1.1" rel="stylesheet" />
|
||
<!-- CSS Just for demo purpose, don't include it in your project -->
|
||
<link href="../assets/demo/demo.css" rel="stylesheet" />
|
||
</head>
|
||
|
||
<body class="sidebar-mini ">
|
||
<div class="wrapper">
|
||
<div class="navbar-minimize-fixed">
|
||
<button class="minimize-sidebar btn btn-link btn-just-icon">
|
||
<i class="tim-icons icon-align-center visible-on-sidebar-regular text-muted"></i>
|
||
<i class="tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"></i>
|
||
</button>
|
||
</div>
|
||
<div class="sidebar">
|
||
<!--
|
||
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
|
||
-->
|
||
<div class="sidebar-wrapper">
|
||
<div class="logo">
|
||
<a href="javascript:void(0)" class="simple-text logo-mini">
|
||
CT
|
||
</a>
|
||
<a href="javascript:void(0)" class="simple-text logo-normal">
|
||
Creative Tim
|
||
</a>
|
||
</div>
|
||
<ul class="nav">
|
||
<li>
|
||
<a href="../examples/dashboard.html">
|
||
<i class="tim-icons icon-chart-pie-36"></i>
|
||
<p>Dashboard</p>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="collapse" href="#pagesExamples">
|
||
<i class="tim-icons icon-image-02"></i>
|
||
<p>
|
||
Pages
|
||
<b class="caret"></b>
|
||
</p>
|
||
</a>
|
||
<div class="collapse" id="pagesExamples">
|
||
<ul class="nav">
|
||
<li>
|
||
<a href="../examples/pages/pricing.html">
|
||
<span class="sidebar-mini-icon">P</span>
|
||
<span class="sidebar-normal"> Pricing </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/rtl.html">
|
||
<span class="sidebar-mini-icon">RS</span>
|
||
<span class="sidebar-normal"> RTL Support </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/timeline.html">
|
||
<span class="sidebar-mini-icon">T</span>
|
||
<span class="sidebar-normal"> Timeline </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/login.html">
|
||
<span class="sidebar-mini-icon">L</span>
|
||
<span class="sidebar-normal"> Login </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/register.html">
|
||
<span class="sidebar-mini-icon">R</span>
|
||
<span class="sidebar-normal"> Register </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/lock.html">
|
||
<span class="sidebar-mini-icon">LS</span>
|
||
<span class="sidebar-normal"> Lock Screen </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/pages/user.html">
|
||
<span class="sidebar-mini-icon">UP</span>
|
||
<span class="sidebar-normal"> User Profile </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="collapse" href="#componentsExamples">
|
||
<i class="tim-icons icon-molecule-40"></i>
|
||
<p>
|
||
Components
|
||
<b class="caret"></b>
|
||
</p>
|
||
</a>
|
||
<div class="collapse" id="componentsExamples">
|
||
<ul class="nav">
|
||
<li>
|
||
<a data-toggle="collapse" aria-expanded="false" href="#multicollapse">
|
||
<span class="sidebar-mini-icon">MLT</span>
|
||
<span class="sidebar-normal"> Multi Level Collapse
|
||
<b class="caret"></b>
|
||
</span>
|
||
</a>
|
||
<div class="collapse" id="multicollapse">
|
||
<ul class="nav">
|
||
<li>
|
||
<a>
|
||
<span class="sidebar-mini-icon">E</span>
|
||
<span class="sidebar-normal"> Example </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/buttons.html">
|
||
<span class="sidebar-mini-icon">B</span>
|
||
<span class="sidebar-normal"> Buttons </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/grid.html">
|
||
<span class="sidebar-mini-icon">G</span>
|
||
<span class="sidebar-normal"> Grid System </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/panels.html">
|
||
<span class="sidebar-mini-icon">P</span>
|
||
<span class="sidebar-normal"> Panels </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/sweet-alert.html">
|
||
<span class="sidebar-mini-icon">SA</span>
|
||
<span class="sidebar-normal"> Sweet Alert </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/notifications.html">
|
||
<span class="sidebar-mini-icon">N</span>
|
||
<span class="sidebar-normal"> Notifications </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/icons.html">
|
||
<span class="sidebar-mini-icon">I</span>
|
||
<span class="sidebar-normal"> Icons </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/components/typography.html">
|
||
<span class="sidebar-mini-icon">T</span>
|
||
<span class="sidebar-normal"> Typography </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="collapse" href="#formsExamples">
|
||
<i class="tim-icons icon-notes"></i>
|
||
<p>
|
||
Forms
|
||
<b class="caret"></b>
|
||
</p>
|
||
</a>
|
||
<div class="collapse" id="formsExamples">
|
||
<ul class="nav">
|
||
<li>
|
||
<a href="../examples/forms/regular.html">
|
||
<span class="sidebar-mini-icon">RF</span>
|
||
<span class="sidebar-normal"> Regular Forms </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/forms/extended.html">
|
||
<span class="sidebar-mini-icon">EF</span>
|
||
<span class="sidebar-normal"> Extended Forms </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/forms/validation.html">
|
||
<span class="sidebar-mini-icon">V</span>
|
||
<span class="sidebar-normal"> Validation Forms </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/forms/wizard.html">
|
||
<span class="sidebar-mini-icon">W</span>
|
||
<span class="sidebar-normal"> Wizard </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="collapse" href="#tablesExamples">
|
||
<i class="tim-icons icon-puzzle-10"></i>
|
||
<p>
|
||
Tables
|
||
<b class="caret"></b>
|
||
</p>
|
||
</a>
|
||
<div class="collapse" id="tablesExamples">
|
||
<ul class="nav">
|
||
<li>
|
||
<a href="../examples/tables/regular.html">
|
||
<span class="sidebar-mini-icon">RT</span>
|
||
<span class="sidebar-normal"> Regular Tables </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/tables/extended.html">
|
||
<span class="sidebar-mini-icon">ET</span>
|
||
<span class="sidebar-normal"> Extended Tables </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/tables/datatables.net.html">
|
||
<span class="sidebar-mini-icon">DT</span>
|
||
<span class="sidebar-normal"> DataTables.net </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="collapse" href="#mapsExamples">
|
||
<i class="tim-icons icon-pin"></i>
|
||
<p>
|
||
Maps
|
||
<b class="caret"></b>
|
||
</p>
|
||
</a>
|
||
<div class="collapse" id="mapsExamples">
|
||
<ul class="nav">
|
||
<li>
|
||
<a href="../examples/maps/google.html">
|
||
<span class="sidebar-mini-icon">GM</span>
|
||
<span class="sidebar-normal"> Google Maps </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/maps/fullscreen.html">
|
||
<span class="sidebar-mini-icon">FM</span>
|
||
<span class="sidebar-normal"> Full Screen Map </span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/maps/vector.html">
|
||
<span class="sidebar-mini-icon">VM</span>
|
||
<span class="sidebar-normal"> Vector Map </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="active">
|
||
<a href="../examples/widgets.html">
|
||
<i class="tim-icons icon-settings"></i>
|
||
<p>Widgets</p>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/charts.html">
|
||
<i class="tim-icons icon-chart-bar-32"></i>
|
||
<p>Charts</p>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="../examples/calendar.html">
|
||
<i class="tim-icons icon-time-alarm"></i>
|
||
<p>Calendar</p>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="main-panel">
|
||
<!-- Navbar -->
|
||
<nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
|
||
<div class="container-fluid">
|
||
<div class="navbar-wrapper">
|
||
<div class="navbar-minimize d-inline">
|
||
<button class="minimize-sidebar btn btn-link btn-just-icon" rel="tooltip" data-original-title="Sidebar toggle" data-placement="right">
|
||
<i class="tim-icons icon-align-center visible-on-sidebar-regular"></i>
|
||
<i class="tim-icons icon-bullet-list-67 visible-on-sidebar-mini"></i>
|
||
</button>
|
||
</div>
|
||
<div class="navbar-toggle d-inline">
|
||
<button type="button" class="navbar-toggler">
|
||
<span class="navbar-toggler-bar bar1"></span>
|
||
<span class="navbar-toggler-bar bar2"></span>
|
||
<span class="navbar-toggler-bar bar3"></span>
|
||
</button>
|
||
</div>
|
||
<a class="navbar-brand" href="javascript:void(0)">Widgets</a>
|
||
</div>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navigation">
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="search-bar input-group">
|
||
<button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal"><i class="tim-icons icon-zoom-split"></i>
|
||
<span class="d-lg-none d-md-block">Search</span>
|
||
</button>
|
||
</li>
|
||
<li class="dropdown nav-item">
|
||
<a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
|
||
<div class="notification d-none d-lg-block d-xl-block"></div>
|
||
<i class="tim-icons icon-sound-wave"></i>
|
||
<p class="d-lg-none">
|
||
Notifications
|
||
</p>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
|
||
<li class="nav-link">
|
||
<a href="#" class="nav-item dropdown-item">Mike John responded to your email</a>
|
||
</li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">You have 5 more tasks</a>
|
||
</li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Your friend Michael is in town</a>
|
||
</li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Another notification</a>
|
||
</li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Another one</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown nav-item">
|
||
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
|
||
<div class="photo">
|
||
<img src="../assets/img/mike.jpg" alt="Profile Photo">
|
||
</div>
|
||
<b class="caret d-none d-lg-block d-xl-block"></b>
|
||
<p class="d-lg-none">
|
||
Log out
|
||
</p>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-navbar">
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Profile</a>
|
||
</li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Settings</a>
|
||
</li>
|
||
<li class="dropdown-divider"></li>
|
||
<li class="nav-link">
|
||
<a href="javascript:void(0)" class="nav-item dropdown-item">Log out</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="separator d-lg-none"></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<i class="tim-icons icon-simple-remove"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar -->
|
||
<div class="content">
|
||
<div class="row">
|
||
<div class="col-lg-6 col-sm-6 text-center">
|
||
<div class="card card-tasks text-left">
|
||
<div class="card-header">
|
||
<h6 class="title d-inline">Tasks(5)</h6>
|
||
<p class="card-category d-inline">today</p>
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
|
||
<i class="tim-icons icon-settings-gear-63"></i>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<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>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-full-width table-responsive">
|
||
<table class="table">
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">Update the Documentation</p>
|
||
<p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" checked="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">GDPR Compliance</p>
|
||
<p class="text-muted">Alki Ave SW, Seattle, WA 98116, SUA 12:29 PM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">Export the processed files</p>
|
||
<p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">Release v2.0.0</p>
|
||
<p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">Solve the issues</p>
|
||
<p class="text-muted">Caption Hill, LA 12:34 AM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="">
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<p class="title">Arival at export process</p>
|
||
<p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
|
||
</td>
|
||
<td class="td-actions text-right">
|
||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
||
<i class="tim-icons icon-settings"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card card-contributions">
|
||
<div class="card-body">
|
||
<h1 class="card-title">6,332</h1>
|
||
<h3 class="card-category">Total Public Contributions</h3>
|
||
<p class="card-description">After a very successful two-year run, we’re going to be changing the way that contributions work.</p>
|
||
</div>
|
||
<hr>
|
||
<div class="card-footer">
|
||
<div class="row">
|
||
<div class="col-lg-6 col-md-8 ml-auto mr-auto">
|
||
<div class="card-stats justify-content-center">
|
||
<input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-label="ON" data-off-label="OFF" checked>
|
||
<span>All public contributions</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-8 ml-auto mr-auto">
|
||
<div class="card-stats justify-content-center">
|
||
<input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-label="ON" data-off-label="OFF">
|
||
<span>Past week contributions</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-sm-6">
|
||
<div class="card card-timeline card-plain">
|
||
<div class="card-body">
|
||
<ul class="timeline timeline-simple">
|
||
<li class="timeline-inverted">
|
||
<div class="timeline-badge danger">
|
||
<i class="tim-icons icon-bag-16"></i>
|
||
</div>
|
||
<div class="timeline-panel">
|
||
<div class="timeline-heading">
|
||
<span class="badge badge-danger">Some Title</span>
|
||
</div>
|
||
<div class="timeline-body">
|
||
<p>Wifey made the best Father's Day meal ever. So thankful so happy so blessed. Thank you for making my family We just had fun with the “future” theme !!! It was a fun night all together ... The always rude Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in downtown.</p>
|
||
</div>
|
||
<h6>
|
||
<i class="ti-time"></i> 11 hours ago via Twitter
|
||
</h6>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-inverted">
|
||
<div class="timeline-badge success">
|
||
<i class="tim-icons icon-gift-2"></i>
|
||
</div>
|
||
<div class="timeline-panel">
|
||
<div class="timeline-heading">
|
||
<span class="badge badge-success">Another One</span>
|
||
</div>
|
||
<div class="timeline-body">
|
||
<p>Thank God for the support of my wife and real friends. I also wanted to point out that it’s the first album to go number 1 off of streaming!!! I love you Ellen and also my number one design rule of anything I do from shoes to music to homes is that Kim has to like it....</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-inverted">
|
||
<div class="timeline-badge info">
|
||
<i class="tim-icons icon-planet"></i>
|
||
</div>
|
||
<div class="timeline-panel">
|
||
<div class="timeline-heading">
|
||
<span class="badge badge-info">Another Title</span>
|
||
</div>
|
||
<div class="timeline-body">
|
||
<p>Called I Miss the Old Kanye That’s all it was Kanye And I love you like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown LA 11:10PM</p>
|
||
<p>What if Kanye made a song about Kanye Royère doesn't make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own It wasn’t any Kanyes Set on his goals Kanye</p>
|
||
<hr>
|
||
</div>
|
||
<div class="timeline-footer">
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-round btn-info dropdown-toggle" data-toggle="dropdown">
|
||
<i class="tim-icons icon-bullet-list-67"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="card card-pricing card-primary card-white">
|
||
<div class="card-body">
|
||
<h1 class="card-title">pro</h1>
|
||
<img class="card-img" src="../assets/img/card-primary.png" alt="Image">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">300 messages</li>
|
||
<li class="list-group-item">150 emails</li>
|
||
<li class="list-group-item">24/7 Support</li>
|
||
</ul>
|
||
<div class="card-prices">
|
||
<h3 class="text-on-front">
|
||
<span>$</span>95</h3>
|
||
<h5 class="text-on-back">95</h5>
|
||
<p class="plan">Professional plan</p>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer text-center mb-3 mt-3">
|
||
<button class="btn btn-round btn-just-icon btn-primary">Get started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="card card-pricing card-primary">
|
||
<div class="card-body">
|
||
<h1 class="card-title">pro</h1>
|
||
<img class="card-img" src="../assets/img/card-primary.png" alt="Image">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">300 messages</li>
|
||
<li class="list-group-item">150 emails</li>
|
||
<li class="list-group-item">24/7 Support</li>
|
||
</ul>
|
||
<div class="card-prices">
|
||
<h3 class="text-on-front">
|
||
<span>$</span>95</h3>
|
||
<h5 class="text-on-back">95</h5>
|
||
<p class="plan">Professional plan</p>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer text-center mb-3 mt-3">
|
||
<button class="btn btn-round btn-just-icon btn-primary">Get started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card card-testimonial">
|
||
<div class="card-header card-header-avatar">
|
||
<a href="#pablo">
|
||
<img class="img img-raised" src="../assets/img/james.jpg" alt="Card image">
|
||
</a>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="card-description">
|
||
The networking at Web Summit is like no other European tech conference.
|
||
</p>
|
||
<div class="icon icon-primary">
|
||
<i class="fa fa-quote-right"></i>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<h4 class="card-title">Robert Priscen</h4>
|
||
<p class="category">@robertpriscen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="footer">
|
||
<div class="container-fluid">
|
||
<ul class="nav">
|
||
<li class="nav-item">
|
||
<a href="javascript:void(0)" class="nav-link">
|
||
Creative Tim
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="javascript:void(0)" class="nav-link">
|
||
About Us
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="javascript:void(0)" class="nav-link">
|
||
Blog
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="copyright">
|
||
©
|
||
<script>
|
||
document.write(new Date().getFullYear())
|
||
</script> made with <i class="tim-icons icon-heart-2"></i> by
|
||
<a href="javascript:void(0)" target="_blank">Creative Tim</a> for a better web.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<div class="fixed-plugin">
|
||
<div class="dropdown show-dropdown">
|
||
<a href="#" data-toggle="dropdown">
|
||
<i class="fa fa-cog fa-2x"> </i>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="header-title"> Sidebar Background</li>
|
||
<li class="adjustments-line">
|
||
<a href="javascript:void(0)" class="switch-trigger background-color">
|
||
<div class="badge-colors text-center">
|
||
<span class="badge filter badge-primary active" data-color="primary"></span>
|
||
<span class="badge filter badge-info" data-color="blue"></span>
|
||
<span class="badge filter badge-success" data-color="green"></span>
|
||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||
<span class="badge filter badge-danger" data-color="red"></span>
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
</a>
|
||
</li>
|
||
<li class="header-title">
|
||
Sidebar Mini
|
||
</li>
|
||
<li class="adjustments-line">
|
||
<div class="togglebutton switch-sidebar-mini">
|
||
<span class="label-switch">OFF</span>
|
||
<input type="checkbox" name="checkbox" checked class="bootstrap-switch" data-on-label="" data-off-label="" />
|
||
<span class="label-switch label-right">ON</span>
|
||
</div>
|
||
<div class="togglebutton switch-change-color mt-3">
|
||
<span class="label-switch">LIGHT MODE</span>
|
||
<input type="checkbox" name="checkbox" checked class="bootstrap-switch" data-on-label="" data-off-label="" />
|
||
<span class="label-switch label-right">DARK MODE</span>
|
||
</div>
|
||
</li>
|
||
<li class="button-container mt-4">
|
||
<a href="../docs/1.0/getting-started/introduction.html" class="btn btn-default btn-block btn-round">
|
||
Documentation
|
||
</a>
|
||
</li>
|
||
<li class="header-title">Thank you for 95 shares!</li>
|
||
<li class="button-container text-center">
|
||
<button id="twitter" class="btn btn-round btn-info"><i class="fab fa-twitter"></i> · 45</button>
|
||
<button id="facebook" class="btn btn-round btn-info"><i class="fab fa-facebook-f"></i> · 50</button>
|
||
<br>
|
||
<br>
|
||
<a class="github-button" href="https://github.com/creativetimofficial/ct-black-dashboard-pro" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Core JS Files -->
|
||
<script src="../assets/js/core/jquery.min.js"></script>
|
||
<script src="../assets/js/core/popper.min.js"></script>
|
||
<script src="../assets/js/core/bootstrap.min.js"></script>
|
||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
|
||
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
|
||
<!-- Plugin for Sweet Alert -->
|
||
<script src="../assets/js/plugins/sweetalert2.min.js"></script>
|
||
<!-- Plugin for Sorting Tables -->
|
||
<script src="../assets/js/plugins/jquery.tablesorter.js"></script>
|
||
<!-- Forms Validations Plugin -->
|
||
<script src="../assets/js/plugins/jquery.validate.min.js"></script>
|
||
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
|
||
<script src="../assets/js/plugins/jquery.bootstrap-wizard.js"></script>
|
||
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
|
||
<script src="../assets/js/plugins/bootstrap-selectpicker.js"></script>
|
||
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
|
||
<script src="../assets/js/plugins/bootstrap-datetimepicker.js"></script>
|
||
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
|
||
<script src="../assets/js/plugins/jquery.dataTables.min.js"></script>
|
||
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
|
||
<script src="../assets/js/plugins/bootstrap-tagsinput.js"></script>
|
||
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
|
||
<script src="../assets/js/plugins/jasny-bootstrap.min.js"></script>
|
||
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
|
||
<script src="../assets/js/plugins/fullcalendar/fullcalendar.min.js"></script>
|
||
<script src="../assets/js/plugins/fullcalendar/daygrid.min.js"></script>
|
||
<script src="../assets/js/plugins/fullcalendar/timegrid.min.js"></script>
|
||
<script src="../assets/js/plugins/fullcalendar/interaction.min.js"></script>
|
||
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
|
||
<script src="../assets/js/plugins/jquery-jvectormap.js"></script>
|
||
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
|
||
<script src="../assets/js/plugins/nouislider.min.js"></script>
|
||
<!-- Google Maps Plugin -->
|
||
<!-- Place this tag in your head or just before your close body tag. -->
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||
<!-- Chart JS -->
|
||
<script src="../assets/js/plugins/chartjs.min.js"></script>
|
||
<!-- Notifications Plugin -->
|
||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
|
||
<script src="../assets/js/black-dashboard.min.js?v=1.1.1"></script>
|
||
<!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
||
<script src="../assets/demo/demo.js"></script>
|
||
<script>
|
||
$(document).ready(function() {
|
||
$().ready(function() {
|
||
$sidebar = $('.sidebar');
|
||
$navbar = $('.navbar');
|
||
$main_panel = $('.main-panel');
|
||
|
||
$full_page = $('.full-page');
|
||
|
||
$sidebar_responsive = $('body > .navbar-collapse');
|
||
sidebar_mini_active = true;
|
||
white_color = false;
|
||
|
||
window_width = $(window).width();
|
||
|
||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||
|
||
|
||
|
||
$('.fixed-plugin a').click(function(event) {
|
||
if ($(this).hasClass('switch-trigger')) {
|
||
if (event.stopPropagation) {
|
||
event.stopPropagation();
|
||
} else if (window.event) {
|
||
window.event.cancelBubble = true;
|
||
}
|
||
}
|
||
});
|
||
|
||
$('.fixed-plugin .background-color span').click(function() {
|
||
$(this).siblings().removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
var new_color = $(this).data('color');
|
||
|
||
if ($sidebar.length != 0) {
|
||
$sidebar.attr('data', new_color);
|
||
}
|
||
|
||
if ($main_panel.length != 0) {
|
||
$main_panel.attr('data', new_color);
|
||
}
|
||
|
||
if ($full_page.length != 0) {
|
||
$full_page.attr('filter-color', new_color);
|
||
}
|
||
|
||
if ($sidebar_responsive.length != 0) {
|
||
$sidebar_responsive.attr('data', new_color);
|
||
}
|
||
});
|
||
|
||
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
|
||
var $btn = $(this);
|
||
|
||
if (sidebar_mini_active == true) {
|
||
$('body').removeClass('sidebar-mini');
|
||
sidebar_mini_active = false;
|
||
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
||
} else {
|
||
$('body').addClass('sidebar-mini');
|
||
sidebar_mini_active = true;
|
||
blackDashboard.showSidebarMessage('Sidebar mini activated...');
|
||
}
|
||
|
||
// we simulate the window Resize so the charts will get updated in realtime.
|
||
var simulateWindowResize = setInterval(function() {
|
||
window.dispatchEvent(new Event('resize'));
|
||
}, 180);
|
||
|
||
// we stop the simulation of Window Resize after the animations are completed
|
||
setTimeout(function() {
|
||
clearInterval(simulateWindowResize);
|
||
}, 1000);
|
||
});
|
||
|
||
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function() {
|
||
var $btn = $(this);
|
||
|
||
if (white_color == true) {
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function() {
|
||
$('body').removeClass('change-background');
|
||
$('body').removeClass('white-content');
|
||
}, 900);
|
||
white_color = false;
|
||
} else {
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function() {
|
||
$('body').removeClass('change-background');
|
||
$('body').addClass('white-content');
|
||
}, 900);
|
||
|
||
white_color = true;
|
||
}
|
||
|
||
|
||
});
|
||
|
||
$('.light-badge').click(function() {
|
||
$('body').addClass('white-content');
|
||
});
|
||
|
||
$('.dark-badge').click(function() {
|
||
$('body').removeClass('white-content');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |