Refactor code structure for improved readability and maintainability
This commit is contained in:
606
includes/mdhomes/examples/dashboard.html
Normal file
606
includes/mdhomes/examples/dashboard.html
Normal file
@ -0,0 +1,606 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Material Dashboard </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<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" data-background-color="orange">
|
||||
<i class="material-icons">content_copy</i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="category">Used Space</p>
|
||||
<h3 class="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" data-background-color="green">
|
||||
<i class="material-icons">store</i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="category">Revenue</p>
|
||||
<h3 class="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" data-background-color="red">
|
||||
<i class="material-icons">info_outline</i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="category">Fixed Issues</p>
|
||||
<h3 class="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" data-background-color="blue">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="category">Followers</p>
|
||||
<h3 class="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">
|
||||
<div class="card-header card-chart" data-background-color="green">
|
||||
<div class="ct-chart" id="dailySalesChart"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4 class="title">Daily Sales</h4>
|
||||
<p class="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">
|
||||
<div class="card-header card-chart" data-background-color="orange">
|
||||
<div class="ct-chart" id="emailsSubscriptionChart"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4 class="title">Email Subscriptions</h4>
|
||||
<p class="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">
|
||||
<div class="card-header card-chart" data-background-color="red">
|
||||
<div class="ct-chart" id="completedTasksChart"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4 class="title">Completed Tasks</h4>
|
||||
<p class="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 card-nav-tabs">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<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="active">
|
||||
<a href="#profile" data-toggle="tab">
|
||||
<i class="material-icons">bug_report</i> Bugs
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#messages" data-toggle="tab">
|
||||
<i class="material-icons">code</i> Website
|
||||
<div class="ripple-container"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a 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-content">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profile">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" checked>
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes">
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes">
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" checked>
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<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="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" checked>
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes">
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<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="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes">
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" checked>
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes">
|
||||
</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-simple btn-xs">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
|
||||
<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" data-background-color="orange">
|
||||
<h4 class="title">Employees Stats</h4>
|
||||
<p class="category">New employees on 15th September, 2016</p>
|
||||
</div>
|
||||
<div class="card-content 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="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
// Javascript method's body can be found in assets/js/demos.js
|
||||
demo.initDashboardPageCharts();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
238
includes/mdhomes/examples/icons.html
Normal file
238
includes/mdhomes/examples/icons.html
Normal file
@ -0,0 +1,238 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Icons </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Material Design Icons</h4>
|
||||
<p class="category">Handcrafted by our friends from
|
||||
<a target="_blank" href="https://design.google.com/icons/">Google</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="iframe-container hidden-sm hidden-xs">
|
||||
<iframe src="https://design.google.com/icons/">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="col-md-6 hidden-lg hidden-md text-center">
|
||||
<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>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
187
includes/mdhomes/examples/maps.html
Normal file
187
includes/mdhomes/examples/maps.html
Normal file
@ -0,0 +1,187 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Map </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
if ($('.main-panel > .content').length == 0) {
|
||||
$('.main-panel').css('height', '100%');
|
||||
}
|
||||
|
||||
|
||||
// Javascript method's body can be found in assets/js/demos.js
|
||||
demo.initGoogleMaps();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
312
includes/mdhomes/examples/notifications.html
Normal file
312
includes/mdhomes/examples/notifications.html
Normal file
@ -0,0 +1,312 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Notifications </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Notifications</h4>
|
||||
<p class="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-content">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Notifications Style</h5>
|
||||
<div class="alert alert-info">
|
||||
<span>This is a plain notification</span>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>This is a notification with close button.</span>
|
||||
</div>
|
||||
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<i data-notify="icon" class="material-icons">add_alert</i>
|
||||
<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">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<i data-notify="icon" class="material-icons">add_alert</i>
|
||||
<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">
|
||||
<h5>Notification states</h5>
|
||||
<div class="alert alert-info">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>
|
||||
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>
|
||||
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>
|
||||
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>
|
||||
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
|
||||
</div>
|
||||
<div class="alert alert-primary">
|
||||
<button type="button" aria-hidden="true" class="close">×</button>
|
||||
<span>
|
||||
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="places-buttons">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<h5>Notifications Places
|
||||
<p class="category">Click to view notifications</p>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
335
includes/mdhomes/examples/table.html
Normal file
335
includes/mdhomes/examples/table.html
Normal file
@ -0,0 +1,335 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Table List </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Simple Table</h4>
|
||||
<p class="category">Here is a subtitle for this table</p>
|
||||
</div>
|
||||
<div class="card-content table-responsive">
|
||||
<table class="table">
|
||||
<thead class="text-primary">
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>City</th>
|
||||
<th>Salary</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dakota Rice</td>
|
||||
<td>Niger</td>
|
||||
<td>Oud-Turnhout</td>
|
||||
<td class="text-primary">$36,738</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Minerva Hooper</td>
|
||||
<td>Curaçao</td>
|
||||
<td>Sinaai-Waas</td>
|
||||
<td class="text-primary">$23,789</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sage Rodriguez</td>
|
||||
<td>Netherlands</td>
|
||||
<td>Baileux</td>
|
||||
<td class="text-primary">$56,142</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Philip Chaney</td>
|
||||
<td>Korea, South</td>
|
||||
<td>Overland Park</td>
|
||||
<td class="text-primary">$38,735</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Greene</td>
|
||||
<td>Malawi</td>
|
||||
<td>Feldkirchen in Kärnten</td>
|
||||
<td class="text-primary">$63,542</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mason Porter</td>
|
||||
<td>Chile</td>
|
||||
<td>Gloucester</td>
|
||||
<td class="text-primary">$78,615</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Table on Plain Background</h4>
|
||||
<p class="category">Here is a subtitle for this table</p>
|
||||
</div>
|
||||
<div class="card-content table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Salary</th>
|
||||
<th>Country</th>
|
||||
<th>City</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Dakota Rice</td>
|
||||
<td>$36,738</td>
|
||||
<td>Niger</td>
|
||||
<td>Oud-Turnhout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Minerva Hooper</td>
|
||||
<td>$23,789</td>
|
||||
<td>Curaçao</td>
|
||||
<td>Sinaai-Waas</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Sage Rodriguez</td>
|
||||
<td>$56,142</td>
|
||||
<td>Netherlands</td>
|
||||
<td>Baileux</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Philip Chaney</td>
|
||||
<td>$38,735</td>
|
||||
<td>Korea, South</td>
|
||||
<td>Overland Park</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Doris Greene</td>
|
||||
<td>$63,542</td>
|
||||
<td>Malawi</td>
|
||||
<td>Feldkirchen in Kärnten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Mason Porter</td>
|
||||
<td>$78,615</td>
|
||||
<td>Chile</td>
|
||||
<td>Gloucester</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
0
includes/mdhomes/examples/template.html
Normal file
0
includes/mdhomes/examples/template.html
Normal file
313
includes/mdhomes/examples/typography.html
Normal file
313
includes/mdhomes/examples/typography.html
Normal file
@ -0,0 +1,313 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Typography </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Material Dashboard Heading</h4>
|
||||
<p class="category">Created using Roboto Font Family</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="typography">
|
||||
<div class="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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<nav class="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
286
includes/mdhomes/examples/upgrade.html
Normal file
286
includes/mdhomes/examples/upgrade.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="card">
|
||||
<div class="card-header text-center" data-background-color="purple">
|
||||
<h4 class="title">Material Dashboard PRO</h3>
|
||||
<p class="category">Are you looking for more components? Please check our Premium Version of Material Dashboard.</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="table-responsive table-upgrade">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<th></th>
|
||||
<th class="text-center">Free</th>
|
||||
<th class="text-center">PRO</th>
|
||||
</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="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
320
includes/mdhomes/examples/user.html
Normal file
320
includes/mdhomes/examples/user.html
Normal file
@ -0,0 +1,320 @@
|
||||
<!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' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<!-- Material Dashboard CSS -->
|
||||
<link href="../assets/css/material-dashboard.css?v=1.2.0" rel="stylesheet" />
|
||||
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
<!-- Fonts and icons -->
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="sidebar" data-color="purple" data-image="../assets/img/sidebar-1.jpg">
|
||||
<!--
|
||||
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
|
||||
|
||||
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">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./user.html">
|
||||
<i class="material-icons">person</i>
|
||||
<p>User Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table.html">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Table List</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./typography.html">
|
||||
<i class="material-icons">library_books</i>
|
||||
<p>Typography</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./icons.html">
|
||||
<i class="material-icons">bubble_chart</i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./maps.html">
|
||||
<i class="material-icons">location_on</i>
|
||||
<p>Maps</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./notifications.html">
|
||||
<i class="material-icons text-gray">notifications</i>
|
||||
<p>Notifications</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-pro">
|
||||
<a href="upgrade.html">
|
||||
<i class="material-icons">unarchive</i>
|
||||
<p>Upgrade to PRO</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-panel">
|
||||
<nav class="navbar navbar-transparent navbar-absolute">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"> Profile </a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">notifications</i>
|
||||
<span class="notification">5</span>
|
||||
<p class="hidden-lg hidden-md">Notifications</p>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Mike John responded to your email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You have 5 new tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">You're now friend with Andrew</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another Notification</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">person</i>
|
||||
<p class="hidden-lg hidden-md">Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group is-empty">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<span class="material-input"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||
<i class="material-icons">search</i>
|
||||
<div class="ripple-container"></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header" data-background-color="purple">
|
||||
<h4 class="title">Edit Profile</h4>
|
||||
<p class="category">Complete your profile</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">Company (disabled)</label>
|
||||
<input type="text" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">Username</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">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-floating">
|
||||
<label class="control-label">Fist Name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">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-floating">
|
||||
<label class="control-label">Adress</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">City</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">Country</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label">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-floating">
|
||||
<label class="control-label"> 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="content">
|
||||
<h6 class="category text-gray">CEO / Co-Founder</h6>
|
||||
<h4 class="card-title">Alec Thompson</h4>
|
||||
<p class="card-content">
|
||||
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="pull-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Company
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="copyright pull-right">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script>
|
||||
<a href="http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/material.min.js" type="text/javascript"></script>
|
||||
<!-- Charts Plugin -->
|
||||
<script src="../assets/js/chartist.min.js"></script>
|
||||
<!-- Dynamic Elements plugin -->
|
||||
<script src="../assets/js/arrive.min.js"></script>
|
||||
<!-- PerfectScrollbar Library -->
|
||||
<script src="../assets/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="../assets/js/bootstrap-notify.js"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||||
<!-- Material Dashboard javascript methods -->
|
||||
<script src="../assets/js/material-dashboard.js?v=1.2.0"></script>
|
||||
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
||||
<script src="../assets/js/demo.js"></script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user