Initial Working Copy
This commit is contained in:
commit
0731843a82
357 changed files with 120880 additions and 0 deletions
919
html/mat-dashboard/examples/dashboard.html
Normal file
919
html/mat-dashboard/examples/dashboard.html
Normal file
|
|
@ -0,0 +1,919 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Dashboard</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-warning card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">content_copy</i>
|
||||
</div>
|
||||
<p class="card-category">Used Space</p>
|
||||
<h3 class="card-title">49/50
|
||||
<small>GB</small>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons text-danger">warning</i>
|
||||
<a href="#pablo">Get More Space...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-success card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">store</i>
|
||||
</div>
|
||||
<p class="card-category">Revenue</p>
|
||||
<h3 class="card-title">$34,245</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">date_range</i> Last 24 Hours
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-danger card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">info_outline</i>
|
||||
</div>
|
||||
<p class="card-category">Fixed Issues</p>
|
||||
<h3 class="card-title">75</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">local_offer</i> Tracked from Github
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-info card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</div>
|
||||
<p class="card-category">Followers</p>
|
||||
<h3 class="card-title">+245</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">update</i> Just Updated
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-success">
|
||||
<div class="ct-chart" id="dailySalesChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Daily Sales</h4>
|
||||
<p class="card-category">
|
||||
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> updated 4 minutes ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-warning">
|
||||
<div class="ct-chart" id="websiteViewsChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Email Subscriptions</h4>
|
||||
<p class="card-category">Last Campaign Performance</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-danger">
|
||||
<div class="ct-chart" id="completedTasksChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Completed Tasks</h4>
|
||||
<p class="card-category">Last Campaign Performance</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-tabs card-header-primary">
|
||||
<div class="nav-tabs-navigation">
|
||||
<div class="nav-tabs-wrapper">
|
||||
<span class="nav-tabs-title">Tasks:</span>
|
||||
<ul class="nav nav-tabs" data-tabs="tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#profile" data-toggle="tab">
|
||||
<i class="material-icons">bug_report</i> Bugs
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#messages" data-toggle="tab">
|
||||
<i class="material-icons">code</i> Website
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#settings" data-toggle="tab">
|
||||
<i class="material-icons">cloud</i> Server
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profile">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<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>Sign contract for "What are conference organizers afraid of?"</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Create 4 Invisible User Experiences you Never Knew About</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<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>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Sign contract for "What are conference organizers afraid of?"</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings">
|
||||
<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>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>Sign contract for "What are conference organizers afraid of?"</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-warning">
|
||||
<h4 class="card-title">Employees Stats</h4>
|
||||
<p class="card-category">New employees on 15th September, 2016</p>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead class="text-warning">
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Salary</th>
|
||||
<th>Country</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Dakota Rice</td>
|
||||
<td>$36,738</td>
|
||||
<td>Niger</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Minerva Hooper</td>
|
||||
<td>$23,789</td>
|
||||
<td>Curaçao</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Sage Rodriguez</td>
|
||||
<td>$56,142</td>
|
||||
<td>Netherlands</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Philip Chaney</td>
|
||||
<td>$38,735</td>
|
||||
<td>Korea, South</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Javascript method's body can be found in assets/js/demos.js
|
||||
md.initDashboardPageCharts();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
527
html/mat-dashboard/examples/icons.html
Normal file
527
html/mat-dashboard/examples/icons.html
Normal file
|
|
@ -0,0 +1,527 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Icons</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title">Material Design Icons</h4>
|
||||
<p class="card-category">Handcrafted by our friends from
|
||||
<a target="_blank" href="https://design.google.com/icons/">Google</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card-body">
|
||||
<div class="iframe-container d-none d-lg-block">
|
||||
<iframe src="https://design.google.com/icons/">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
|
||||
<h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
|
||||
<a href="https://design.google.com/icons/" target="_blank">Material Icons</a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
469
html/mat-dashboard/examples/map.html
Normal file
469
html/mat-dashboard/examples/map.html
Normal file
|
|
@ -0,0 +1,469 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Map</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div id="map"></div>
|
||||
</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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Javascript method's body can be found in assets/js/demos.js
|
||||
demo.initGoogleMaps();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
626
html/mat-dashboard/examples/notifications.html
Normal file
626
html/mat-dashboard/examples/notifications.html
Normal file
|
|
@ -0,0 +1,626 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Notifications</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h3 class="card-title">Notifications</h3>
|
||||
<p class="card-category">Handcrafted by our friend
|
||||
<a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
|
||||
<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4 class="card-title">Notifications Style</h4>
|
||||
<div class="alert alert-info">
|
||||
<span>This is a plain notification</span>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>This is a notification with close button.</span>
|
||||
</div>
|
||||
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||
<i class="material-icons" data-notify="icon">add_alert</i>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span data-notify="message">This is a notification with close button and icon.</span>
|
||||
</div>
|
||||
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||
<i class="material-icons" data-notify="icon">add_alert</i>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4 class="card-title">Notification states</h4>
|
||||
<div class="alert alert-info">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
|
||||
</div>
|
||||
<div class="alert alert-primary">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="places-buttons">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto mr-auto text-center">
|
||||
<h4 class="card-title">
|
||||
Notifications Places
|
||||
<p class="category">Click to view notifications</p>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','left')">Top Left</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','center')">Top Center</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','right')">Top Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','left')">Bottom Left</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','center')">Bottom Center</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','right')">Bottom Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
//init DateTimePickers
|
||||
md.initFormExtendedDatetimepickers();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
726
html/mat-dashboard/examples/rtl.html
Normal file
726
html/mat-dashboard/examples/rtl.html
Normal file
|
|
@ -0,0 +1,726 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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="fa" dir="rtl">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
داشبورد متریال توسط تیم خلاق
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
|
||||
/>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
|
||||
<!-- Markazi Text font include just for persian demo purpose, don't include it in your project -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Cairo&subset=arabic" rel="stylesheet">
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
|
||||
<link href="../assets/css/material-dashboard-rtl.css?v=1.1" rel="stylesheet" />
|
||||
<!-- CSS Just for demo purpose, don't include it in your project -->
|
||||
<link href="../assets/demo/demo.css" rel="stylesheet" />
|
||||
|
||||
<!-- Style Just for persian demo purpose, don't include it in your project -->
|
||||
<style>
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4 {
|
||||
font-family: "Cairo";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
تیم خلاق
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>داشبورد</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>پروفایل کاربر</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>جدول</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>تایپوگرافی</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>آیکنها</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>نقشه</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>اعلانها</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>پشتیبانی از راست به چپ</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">داشبورد</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="جستجو...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
آمارها
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">۵</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
اعلانها
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">محمدرضا به ایمیل شما پاسخ داد</a>
|
||||
<a class="dropdown-item" href="#">شما ۵ وظیفه جدید دارید</a>
|
||||
<a class="dropdown-item" href="#">از حالا شما با علیرضا دوست هستید</a>
|
||||
<a class="dropdown-item" href="#">اعلان دیگر</a>
|
||||
<a class="dropdown-item" href="#">اعلان دیگر</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
حساب کاربری
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-warning card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">content_copy</i>
|
||||
</div>
|
||||
<p class="card-category">فضا مصرف شده</p>
|
||||
<h3 class="card-title">49/50
|
||||
<small>GB</small>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons text-danger">warning</i>
|
||||
<a href="#pablo">فضای بیشتری داشته باشید...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-success card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">store</i>
|
||||
</div>
|
||||
<p class="card-category">سود</p>
|
||||
<h3 class="card-title">$34,245</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">date_range</i>۲۴ ساعت اخیر
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-danger card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">info_outline</i>
|
||||
</div>
|
||||
<p class="card-category">مشکلات حل شده</p>
|
||||
<h3 class="card-title">75</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">local_offer</i> توسط گیتهاب
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="card card-stats">
|
||||
<div class="card-header card-header-info card-header-icon">
|
||||
<div class="card-icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</div>
|
||||
<p class="card-category">دنبالکننده</p>
|
||||
<h3 class="card-title">+245</h3>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">update</i> هماکنون
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-success">
|
||||
<div class="ct-chart" id="dailySalesChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">فروش روزانه</h4>
|
||||
<p class="card-category">
|
||||
<span class="text-success">
|
||||
<i class="fa fa-long-arrow-up"></i> 55% </span> رشد در فروش امروز.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> ۴ دقیقه پیش
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-warning">
|
||||
<div class="ct-chart" id="websiteViewsChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">دنبال کنندههای ایمیلی</h4>
|
||||
<p class="card-category">کارایی آخرین کمپین</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> کمپین دو روز پیش ارسال شد
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-chart">
|
||||
<div class="card-header card-header-danger">
|
||||
<div class="ct-chart" id="completedTasksChart"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">وظایف انجام شده</h4>
|
||||
<p class="card-category">کارایی آخرین کمپین</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="stats">
|
||||
<i class="material-icons">access_time</i> کمپین دو روز پیش ارسال شد
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-tabs card-header-primary">
|
||||
<div class="nav-tabs-navigation">
|
||||
<div class="nav-tabs-wrapper">
|
||||
<span class="nav-tabs-title">وظایف:</span>
|
||||
<ul class="nav nav-tabs" data-tabs="tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#profile" data-toggle="tab">
|
||||
<i class="material-icons">bug_report</i> باگها
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#messages" data-toggle="tab">
|
||||
<i class="material-icons">code</i> وبسایت
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#settings" data-toggle="tab">
|
||||
<i class="material-icons">cloud</i> سرور
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profile">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<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>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن؟</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>نخست از متنهای آزمایشی و بیمعنی استفاده میکنند تا صرفا به مشتری یا صاحب کار خود نشان دهند؟</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>همان حال کار آنها به نوعی وابسته به متن میباشد
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحهآرایی میکنند</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<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>بعد از اینکه متن در آن قرار گیرد چگونه به نظر میرسد و قلمها و اندازهبندیها چگونه در نظر گرفته
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید؟</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings">
|
||||
<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>گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحهآرایی، نخست از متنهای آزمایشی؟</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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> از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحهآرایی، نخست از متنهای آزمایشی ؟
|
||||
</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</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>از متنهای آزمایشی و بیمعنی استفاده میکنند تا صرفا به مشتری یا صاحب کار خود نشان دهند؟</td>
|
||||
<td class="td-actions text-right">
|
||||
<button type="button" rel="tooltip" title="ویرایش وظیفه" class="btn btn-primary btn-link btn-sm">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="حذف" class="btn btn-danger btn-link btn-sm">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-warning">
|
||||
<h4 class="card-title">آمار کارکنان</h4>
|
||||
<p class="card-category">کارکنان جدید از ۱۵ آبان ۱۳۹۶</p>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead class="text-warning">
|
||||
<th>کد</th>
|
||||
<th>نام</th>
|
||||
<th>حقوق</th>
|
||||
<th>استان</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>احمد حسینی</td>
|
||||
<td>$36,738</td>
|
||||
<td>مازندران</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>مینا رضایی</td>
|
||||
<td>$23,789</td>
|
||||
<td>گلستان</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>مبینا احمدپور</td>
|
||||
<td>$56,142</td>
|
||||
<td>تهران</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>جلال آقایی</td>
|
||||
<td>$38,735</td>
|
||||
<td>شهرکرد</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h3 class="card-title">اعلان ها</h3>
|
||||
<p class="card-category">ایجاد شده توسط دوست ما
|
||||
<a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. لطفا
|
||||
<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">مستندات کامل </a> را مشاهده بکنید.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-warning">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
این یک اعلان است که با کلاس "alert-warning" ایجاد شده است.</span>
|
||||
</div>
|
||||
<div class="alert alert-primary">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span>
|
||||
این یک اعلان است که با کلاس "alert-primary" ایجاد شده است.</span>
|
||||
</div>
|
||||
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||
<i class="material-icons" data-notify="icon">add_alert</i>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<span data-notify="پیام">این یک اعلان با دکمه بستن و آیکن است</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card card-profile">
|
||||
<div class="card-avatar">
|
||||
<a href="#pablo">
|
||||
<img class="img" src="../assets/img/faces/marc.jpg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-category text-gray">مدیرعامل / مدیرفنی</h6>
|
||||
<h4 class="card-title">خداداد عزیزی</h4>
|
||||
<p class="card-description">
|
||||
طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحهآرایی، نخست از متنهای آزمایشی و بیمعنی استفاده میکنند ...
|
||||
</p>
|
||||
<a href="#pablo" class="btn btn-primary btn-round">دنبالکردن</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
تیم خلاق
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
درباره ما
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
بلاگ
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
اجازه نامه
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, ساخته شده با
|
||||
<i class="material-icons">favorite</i> توسط
|
||||
<a href="https://www.creative-tim.com" target="_blank">تیم خلاق</a> برای وب بهتر.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/demo/demo.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Javascript method's body can be found in assets/js/demos.js
|
||||
md.initDashboardPageCharts();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
773
html/mat-dashboard/examples/tables.html
Normal file
773
html/mat-dashboard/examples/tables.html
Normal file
|
|
@ -0,0 +1,773 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Table List</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title ">Simple Table</h4>
|
||||
<p class="card-category"> Here is a subtitle for this table</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead class=" text-primary">
|
||||
<th>
|
||||
ID
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Country
|
||||
</th>
|
||||
<th>
|
||||
City
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>
|
||||
Dakota Rice
|
||||
</td>
|
||||
<td>
|
||||
Niger
|
||||
</td>
|
||||
<td>
|
||||
Oud-Turnhout
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$36,738
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>
|
||||
Minerva Hooper
|
||||
</td>
|
||||
<td>
|
||||
Curaçao
|
||||
</td>
|
||||
<td>
|
||||
Sinaai-Waas
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$23,789
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>
|
||||
Sage Rodriguez
|
||||
</td>
|
||||
<td>
|
||||
Netherlands
|
||||
</td>
|
||||
<td>
|
||||
Baileux
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$56,142
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>
|
||||
Philip Chaney
|
||||
</td>
|
||||
<td>
|
||||
Korea, South
|
||||
</td>
|
||||
<td>
|
||||
Overland Park
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$38,735
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>
|
||||
Doris Greene
|
||||
</td>
|
||||
<td>
|
||||
Malawi
|
||||
</td>
|
||||
<td>
|
||||
Feldkirchen in Kärnten
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$63,542
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
6
|
||||
</td>
|
||||
<td>
|
||||
Mason Porter
|
||||
</td>
|
||||
<td>
|
||||
Chile
|
||||
</td>
|
||||
<td>
|
||||
Gloucester
|
||||
</td>
|
||||
<td class="text-primary">
|
||||
$78,615
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title mt-0"> Table on Plain Background</h4>
|
||||
<p class="card-category"> Here is a subtitle for this table</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead class="">
|
||||
<th>
|
||||
ID
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Country
|
||||
</th>
|
||||
<th>
|
||||
City
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>
|
||||
Dakota Rice
|
||||
</td>
|
||||
<td>
|
||||
Niger
|
||||
</td>
|
||||
<td>
|
||||
Oud-Turnhout
|
||||
</td>
|
||||
<td>
|
||||
$36,738
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>
|
||||
Minerva Hooper
|
||||
</td>
|
||||
<td>
|
||||
Curaçao
|
||||
</td>
|
||||
<td>
|
||||
Sinaai-Waas
|
||||
</td>
|
||||
<td>
|
||||
$23,789
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>
|
||||
Sage Rodriguez
|
||||
</td>
|
||||
<td>
|
||||
Netherlands
|
||||
</td>
|
||||
<td>
|
||||
Baileux
|
||||
</td>
|
||||
<td>
|
||||
$56,142
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>
|
||||
Philip Chaney
|
||||
</td>
|
||||
<td>
|
||||
Korea, South
|
||||
</td>
|
||||
<td>
|
||||
Overland Park
|
||||
</td>
|
||||
<td>
|
||||
$38,735
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>
|
||||
Doris Greene
|
||||
</td>
|
||||
<td>
|
||||
Malawi
|
||||
</td>
|
||||
<td>
|
||||
Feldkirchen in Kärnten
|
||||
</td>
|
||||
<td>
|
||||
$63,542
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
6
|
||||
</td>
|
||||
<td>
|
||||
Mason Porter
|
||||
</td>
|
||||
<td>
|
||||
Chile
|
||||
</td>
|
||||
<td>
|
||||
Gloucester
|
||||
</td>
|
||||
<td>
|
||||
$78,615
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
596
html/mat-dashboard/examples/typography.html
Normal file
596
html/mat-dashboard/examples/typography.html
Normal file
|
|
@ -0,0 +1,596 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Typography</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title">Material Dashboard Heading</h4>
|
||||
<p class="card-category">Created using Roboto Font Family</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="typography">
|
||||
<div class="card-title">
|
||||
<h2>Typography</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tim-typo">
|
||||
<h1>
|
||||
<span class="tim-note">Header 1</span>The Life of Material Dashboard </h1>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h2>
|
||||
<span class="tim-note">Header 2</span>The Life of Material Dashboard</h2>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h3>
|
||||
<span class="tim-note">Header 3</span>The Life of Material Dashboard</h3>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h4>
|
||||
<span class="tim-note">Header 4</span>The Life of Material Dashboard</h4>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h5>
|
||||
<span class="tim-note">Header 5</span>The Life of Material Dashboard</h5>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h6>
|
||||
<span class="tim-note">Header 6</span>The Life of Material Dashboard</h6>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<p>
|
||||
<span class="tim-note">Paragraph</span>
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Quote</span>
|
||||
<blockquote class="blockquote">
|
||||
<p>
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
|
||||
</p>
|
||||
<small>
|
||||
Kanye West, Musician
|
||||
</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Muted Text</span>
|
||||
<p class="text-muted">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||
</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Primary Text</span>
|
||||
<p class="text-primary">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Info Text</span>
|
||||
<p class="text-info">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Success Text</span>
|
||||
<p class="text-success">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Warning Text</span>
|
||||
<p class="text-warning">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||
</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Danger Text</span>
|
||||
<p class="text-danger">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h2>
|
||||
<span class="tim-note">Small Tag</span>
|
||||
Header with small subtitle
|
||||
<br>
|
||||
<small>Use "small" tag for the headers</small>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
575
html/mat-dashboard/examples/upgrade.html
Normal file
575
html/mat-dashboard/examples/upgrade.html
Normal file
|
|
@ -0,0 +1,575 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Upgrade to PRO</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8 ml-auto mr-auto">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title">Material Dashboard PRO</h4>
|
||||
<p class="card-category">Are you looking for more components? Please check our Premium Version of Material Dashboard.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-upgrade">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-center">Free</th>
|
||||
<th class="text-center">PRO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Components</td>
|
||||
<td class="text-center">60</td>
|
||||
<td class="text-center">200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plugins</td>
|
||||
<td class="text-center">2</td>
|
||||
<td class="text-center">15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Example Pages</td>
|
||||
<td class="text-center">3</td>
|
||||
<td class="text-center">27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Login, Register, Pricing, Lock Pages</td>
|
||||
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...</td>
|
||||
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mini Sidebar</td>
|
||||
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Premium Support</td>
|
||||
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="text-center">Free</td>
|
||||
<td class="text-center">Just $49</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"></td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="btn btn-round btn-fill btn-default disabled">Current Version</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a target="_blank" href="http://www.creative-tim.com/product/material-dashboard-pro/?ref=md-free-upgrade-live" class="btn btn-round btn-fill btn-info">Upgrade to PRO</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
607
html/mat-dashboard/examples/user.html
Normal file
607
html/mat-dashboard/examples/user.html
Normal file
|
|
@ -0,0 +1,607 @@
|
|||
<!--
|
||||
=========================================================
|
||||
Material Dashboard - v2.1.1
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
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" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>
|
||||
Material Dashboard by Creative Tim
|
||||
</title>
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
||||
<!-- CSS Files -->
|
||||
<link href="../assets/css/material-dashboard.css?v=2.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="">
|
||||
<div class="wrapper ">
|
||||
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
||||
|
||||
Tip 2: you can also add an image using data-image tag
|
||||
-->
|
||||
<div class="logo">
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./tables.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./map.html">
|
||||
<i class="material-icons">location_ons</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./notifications.html">
|
||||
<i class="material-icons">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="./rtl.html">
|
||||
<i class="material-icons">language</i>
|
||||
<p>RTL Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active-pro ">
|
||||
<a class="nav-link" href="./upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">User Profile</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
<span class="navbar-toggler-icon icon-bar"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
<form class="navbar-form">
|
||||
<div class="input-group no-border">
|
||||
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pablo">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Stats
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Some Actions
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||
<a class="dropdown-item" href="#">Another Notification</a>
|
||||
<a class="dropdown-item" href="#">Another One</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="d-lg-none d-md-block">
|
||||
Account
|
||||
</p>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-primary">
|
||||
<h4 class="card-title">Edit Profile</h4>
|
||||
<p class="card-category">Complete your profile</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Company (disabled)</label>
|
||||
<input type="text" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Username</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Email address</label>
|
||||
<input type="email" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Fist Name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Last Name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Adress</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">City</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Country</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Postal Code</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label>About Me</label>
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
|
||||
<textarea class="form-control" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary pull-right">Update Profile</button>
|
||||
<div class="clearfix"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-profile">
|
||||
<div class="card-avatar">
|
||||
<a href="#pablo">
|
||||
<img class="img" src="../assets/img/faces/marc.jpg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
|
||||
<h4 class="card-title">Alec Thompson</h4>
|
||||
<p class="card-description">
|
||||
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
||||
</p>
|
||||
<a href="#pablo" class="btn btn-primary btn-round">Follow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="float-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/presentation">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.creative-tim.com">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright float-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>, made with <i class="material-icons">favorite</i> by
|
||||
<a href="https://www.creative-tim.com" 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 Filters</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger active-color">
|
||||
<div class="badge-colors ml-auto mr-auto">
|
||||
<span class="badge filter badge-purple" data-color="purple"></span>
|
||||
<span class="badge filter badge-azure" data-color="azure"></span>
|
||||
<span class="badge filter badge-green" data-color="green"></span>
|
||||
<span class="badge filter badge-warning" data-color="orange"></span>
|
||||
<span class="badge filter badge-danger" data-color="danger"></span>
|
||||
<span class="badge filter badge-rose active" data-color="rose"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-title">Images</li>
|
||||
<li class="active">
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-1.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-2.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-3.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="img-holder switch-trigger" href="javascript:void(0)">
|
||||
<img src="../assets/img/sidebar-4.jpg" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
|
||||
</li>
|
||||
<!-- <li class="header-title">Want more components?</li>
|
||||
<li class="button-container">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
|
||||
Get the pro version
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="button-container">
|
||||
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
View Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</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-twitter"><i class="fa fa-twitter"></i> · 45</button>
|
||||
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
|
||||
<br>
|
||||
<br>
|
||||
</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-material-design.min.js"></script>
|
||||
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Plugin for the momentJs -->
|
||||
<script src="../assets/js/plugins/moment.min.js"></script>
|
||||
<!-- Plugin for Sweet Alert -->
|
||||
<script src="../assets/js/plugins/sweetalert2.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.min.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.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>
|
||||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||||
<!-- Library for adding dinamically elements -->
|
||||
<script src="../assets/js/plugins/arrive.min.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Chartist JS -->
|
||||
<script src="../assets/js/plugins/chartist.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
||||
<!-- Material 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');
|
||||
|
||||
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
||||
|
||||
$full_page = $('.full-page');
|
||||
|
||||
$sidebar_responsive = $('body > .navbar-collapse');
|
||||
|
||||
window_width = $(window).width();
|
||||
|
||||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||||
|
||||
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
|
||||
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
|
||||
$('.fixed-plugin .dropdown').addClass('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.fixed-plugin a').click(function(event) {
|
||||
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
||||
if ($(this).hasClass('switch-trigger')) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else if (window.event) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .active-color span').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-color', new_color);
|
||||
}
|
||||
|
||||
if ($full_page.length != 0) {
|
||||
$full_page.attr('filter-color', new_color);
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.attr('data-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .background-color .badge').click(function() {
|
||||
$(this).siblings().removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var new_color = $(this).data('background-color');
|
||||
|
||||
if ($sidebar.length != 0) {
|
||||
$sidebar.attr('data-background-color', new_color);
|
||||
}
|
||||
});
|
||||
|
||||
$('.fixed-plugin .img-holder').click(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$(this).parent('li').siblings().removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
|
||||
|
||||
var new_image = $(this).find("img").attr('src');
|
||||
|
||||
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
$sidebar_img_container.fadeOut('fast', function() {
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$full_page_background.fadeOut('fast', function() {
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
$full_page_background.fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.switch-sidebar-image input:checked').length == 0) {
|
||||
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
||||
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
||||
|
||||
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
||||
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
||||
}
|
||||
|
||||
if ($sidebar_responsive.length != 0) {
|
||||
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-image input').change(function() {
|
||||
$full_page_background = $('.full-page-background');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if ($input.is(':checked')) {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar_img_container.fadeIn('fast');
|
||||
$sidebar.attr('data-image', '#');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page_background.fadeIn('fast');
|
||||
$full_page.attr('data-image', '#');
|
||||
}
|
||||
|
||||
background_image = true;
|
||||
} else {
|
||||
if ($sidebar_img_container.length != 0) {
|
||||
$sidebar.removeAttr('data-image');
|
||||
$sidebar_img_container.fadeOut('fast');
|
||||
}
|
||||
|
||||
if ($full_page_background.length != 0) {
|
||||
$full_page.removeAttr('data-image', '#');
|
||||
$full_page_background.fadeOut('fast');
|
||||
}
|
||||
|
||||
background_image = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.switch-sidebar-mini input').change(function() {
|
||||
$body = $('body');
|
||||
|
||||
$input = $(this);
|
||||
|
||||
if (md.misc.sidebar_mini_active == true) {
|
||||
$('body').removeClass('sidebar-mini');
|
||||
md.misc.sidebar_mini_active = false;
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
|
||||
|
||||
} else {
|
||||
|
||||
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').addClass('sidebar-mini');
|
||||
|
||||
md.misc.sidebar_mini_active = true;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue