mirror of
https://gitlab.com/TheGamecraft/c-cms.git
synced 2026-04-21 10:49:10 -04:00
Add Material Design for Public and Admin
This commit is contained in:
Mathieu Lagace
347
resources/theme/material-dashboard/examples/pages/error.html
Normal file
347
resources/theme/material-dashboard/examples/pages/error.html
Normal file
@@ -0,0 +1,347 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="off-canvas-sidebar">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Error Page</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">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="../dashboard.html" class="nav-link">
|
||||
<i class="material-icons">dashboard</i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/register.html" class="nav-link">
|
||||
<i class="material-icons">person_add</i> Register
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/login.html" class="nav-link">
|
||||
<i class="material-icons">fingerprint</i> Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/lock.html" class="nav-link">
|
||||
<i class="material-icons">lock_open</i> Lock
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="wrapper wrapper-full-page">
|
||||
<div class="page-header error-page header-filter" style="background-image: url('../../assets/img/clint-mckoy.jpg')">
|
||||
<!-- you can change the color of the filter page using: data-color="blue | green | orange | red | purple" -->
|
||||
<div class="content-center">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="title">404</h1>
|
||||
<h2>Page not found :(</h2>
|
||||
<h4>Ooooups! Looks like you got lost.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
339
resources/theme/material-dashboard/examples/pages/lock.html
Normal file
339
resources/theme/material-dashboard/examples/pages/lock.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="off-canvas-sidebar">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Lock Page</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">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="../dashboard.html" class="nav-link">
|
||||
<i class="material-icons">dashboard</i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/register.html" class="nav-link">
|
||||
<i class="material-icons">person_add</i> Register
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/login.html" class="nav-link">
|
||||
<i class="material-icons">fingerprint</i> Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a href="../pages/lock.html" class="nav-link">
|
||||
<i class="material-icons">lock_open</i> Lock
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="wrapper wrapper-full-page">
|
||||
<div class="page-header lock-page header-filter" style="background-image: url('../../assets/img/lock.jpg')">
|
||||
<!-- you can change the color of the filter page using: data-color="blue | green | orange | red | purple" -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 ml-auto mr-auto">
|
||||
<div class="card card-profile text-center card-hidden">
|
||||
<div class="card-header ">
|
||||
<div class="card-avatar">
|
||||
<a href="#pablo">
|
||||
<img class="img" src="../../assets/img/faces/avatar.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
<h4 class="card-title">Tania Andrew</h4>
|
||||
<div class="form-group">
|
||||
<label for="exampleInput1" class="bmd-label-floating">Enter Password</label>
|
||||
<input type="password" class="form-control" id="exampleInput1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center">
|
||||
<a href="#pablo" class="btn btn-rose btn-round">Unlock</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
setTimeout(function() {
|
||||
// after 1000 ms we add the class animated to the login/register card
|
||||
$('.card').removeClass('card-hidden');
|
||||
}, 700);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
374
resources/theme/material-dashboard/examples/pages/login.html
Normal file
374
resources/theme/material-dashboard/examples/pages/login.html
Normal file
@@ -0,0 +1,374 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="off-canvas-sidebar">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Login Page</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">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="../dashboard.html" class="nav-link">
|
||||
<i class="material-icons">dashboard</i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/register.html" class="nav-link">
|
||||
<i class="material-icons">person_add</i> Register
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a href="../pages/login.html" class="nav-link">
|
||||
<i class="material-icons">fingerprint</i> Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/lock.html" class="nav-link">
|
||||
<i class="material-icons">lock_open</i> Lock
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="wrapper wrapper-full-page">
|
||||
<div class="page-header login-page header-filter" filter-color="black" style="background-image: url('../../assets/img/login.jpg'); background-size: cover; background-position: top center;">
|
||||
<!-- you can change the color of the filter page using: data-color="blue | purple | green | orange | red | rose " -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">
|
||||
<form class="form" method="" action="">
|
||||
<div class="card card-login card-hidden">
|
||||
<div class="card-header card-header-rose text-center">
|
||||
<h4 class="card-title">Login</h4>
|
||||
<div class="social-line">
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
<p class="card-description text-center">Or Be Classical</p>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">face</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="First Name...">
|
||||
</div>
|
||||
</span>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">email</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="email" class="form-control" placeholder="Email...">
|
||||
</div>
|
||||
</span>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">lock_outline</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="password" class="form-control" placeholder="Password...">
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center">
|
||||
<a href="#pablo" class="btn btn-rose btn-link btn-lg">Lets Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
setTimeout(function() {
|
||||
// after 1000 ms we add the class animated to the login/register card
|
||||
$('.card').removeClass('card-hidden');
|
||||
}, 700);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
379
resources/theme/material-dashboard/examples/pages/pricing.html
Normal file
379
resources/theme/material-dashboard/examples/pages/pricing.html
Normal file
@@ -0,0 +1,379 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="off-canvas-sidebar">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Pricing Page</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">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="../dashboard.html" class="nav-link">
|
||||
<i class="material-icons">dashboard</i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/register.html" class="nav-link">
|
||||
<i class="material-icons">person_add</i> Register
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/login.html" class="nav-link">
|
||||
<i class="material-icons">fingerprint</i> Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/lock.html" class="nav-link">
|
||||
<i class="material-icons">lock_open</i> Lock
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="wrapper wrapper-full-page">
|
||||
<div class="page-header pricing-page header-filter" style="background-image: url('../../assets/img/bg-pricing.jpg')">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto mr-auto text-center">
|
||||
<h2 class="title">Pick the best plan for you</h2>
|
||||
<h5 class="description">You have Free Unlimited Updates and Premium Support on each package.</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card card-pricing card-plain">
|
||||
<h6 class="card-category"> Freelancer</h6>
|
||||
<div class="card-body">
|
||||
<div class="card-icon icon-white ">
|
||||
<i class="material-icons">weekend</i>
|
||||
</div>
|
||||
<h3 class="card-title">Free</h3>
|
||||
<p class="card-description">This is good if your company size is between 2 and 10 Persons.</p>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center ">
|
||||
<a href="#pablo" class="btn btn-round btn-white">Choose Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card card-pricing ">
|
||||
<h6 class="card-category"> Small Company</h6>
|
||||
<div class="card-body">
|
||||
<div class="card-icon icon-rose ">
|
||||
<i class="material-icons">home</i>
|
||||
</div>
|
||||
<h3 class="card-title">29$</h3>
|
||||
<p class="card-description">This is good if your company size is between 2 and 10 Persons.</p>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center ">
|
||||
<a href="#pablo" class="btn btn-round btn-rose">Choose Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card card-pricing card-plain">
|
||||
<h6 class="card-category"> Medium Company</h6>
|
||||
<div class="card-body">
|
||||
<div class="card-icon icon-white ">
|
||||
<i class="material-icons">business</i>
|
||||
</div>
|
||||
<h3 class="card-title">69$</h3>
|
||||
<p class="card-description">This is good if your company size is between 11 and 99 Persons.</p>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center ">
|
||||
<a href="#pablo" class="btn btn-round btn-white">Choose Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card card-pricing card-plain">
|
||||
<h6 class="card-category"> Extra Pack</h6>
|
||||
<div class="card-body">
|
||||
<div class="card-icon icon-white ">
|
||||
<i class="material-icons">account_balance</i>
|
||||
</div>
|
||||
<h3 class="card-title">159$</h3>
|
||||
<p class="card-description">This is good if your company size is 99+ Persons.</p>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center ">
|
||||
<a href="#pablo" class="btn btn-round btn-white">Choose Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
416
resources/theme/material-dashboard/examples/pages/register.html
Normal file
416
resources/theme/material-dashboard/examples/pages/register.html
Normal file
@@ -0,0 +1,416 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="off-canvas-sidebar">
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<a class="navbar-brand" href="#pablo">Register Page</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">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="../dashboard.html" class="nav-link">
|
||||
<i class="material-icons">dashboard</i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a href="../pages/register.html" class="nav-link">
|
||||
<i class="material-icons">person_add</i> Register
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/login.html" class="nav-link">
|
||||
<i class="material-icons">fingerprint</i> Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a href="../pages/lock.html" class="nav-link">
|
||||
<i class="material-icons">lock_open</i> Lock
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="wrapper wrapper-full-page">
|
||||
<div class="page-header register-page header-filter" filter-color="black" style="background-image: url('../../assets/img/register.jpg')">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 ml-auto mr-auto">
|
||||
<div class="card card-signup">
|
||||
<h2 class="card-title text-center">Register</h2>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5 ml-auto">
|
||||
<div class="info info-horizontal">
|
||||
<div class="icon icon-rose">
|
||||
<i class="material-icons">timeline</i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Marketing</h4>
|
||||
<p class="description">
|
||||
We've created the marketing campaign of the website. It was a very interesting collaboration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info info-horizontal">
|
||||
<div class="icon icon-primary">
|
||||
<i class="material-icons">code</i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Fully Coded in HTML5</h4>
|
||||
<p class="description">
|
||||
We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info info-horizontal">
|
||||
<div class="icon icon-info">
|
||||
<i class="material-icons">group</i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Built Audience</h4>
|
||||
<p class="description">
|
||||
There is also a Fully Customizable CMS Admin Dashboard for this product.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 mr-auto">
|
||||
<div class="social text-center">
|
||||
<button class="btn btn-just-icon btn-round btn-twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</button>
|
||||
<button class="btn btn-just-icon btn-round btn-dribbble">
|
||||
<i class="fa fa-dribbble"></i>
|
||||
</button>
|
||||
<button class="btn btn-just-icon btn-round btn-facebook">
|
||||
<i class="fa fa-facebook"> </i>
|
||||
</button>
|
||||
<h4 class="mt-3"> or be classical </h4>
|
||||
</div>
|
||||
<form class="form" method="" action="">
|
||||
<div class="form-group has-default">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">face</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="First Name...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group has-default">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">mail</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Email...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group has-default">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">lock_outline</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="password" placeholder="Password..." class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
I agree to the
|
||||
<a href="#something">terms and conditions</a>.
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a href="#pablo" class="btn btn-primary btn-round mt-4">Get Started</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1198
resources/theme/material-dashboard/examples/pages/rtl.html
Normal file
1198
resources/theme/material-dashboard/examples/pages/rtl.html
Normal file
File diff suppressed because it is too large
Load Diff
864
resources/theme/material-dashboard/examples/pages/timeline.html
Normal file
864
resources/theme/material-dashboard/examples/pages/timeline.html
Normal file
@@ -0,0 +1,864 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="rose" data-background-color="black" 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-mini">
|
||||
CT
|
||||
</a>
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="user">
|
||||
<div class="photo">
|
||||
<img src="../../assets/img/faces/avatar.jpg" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<a data-toggle="collapse" href="#collapseExample" class="username">
|
||||
<span>
|
||||
Tania Andrew
|
||||
<b class="caret"></b>
|
||||
</span>
|
||||
</a>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> MP </span>
|
||||
<span class="sidebar-normal"> My Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> EP </span>
|
||||
<span class="sidebar-normal"> Edit Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> S </span>
|
||||
<span class="sidebar-normal"> Settings </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p> Dashboard </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" data-toggle="collapse" href="#pagesExamples" aria-expanded="true">
|
||||
<i class="material-icons">image</i>
|
||||
<p> Pages
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse show" id="pagesExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/pricing.html">
|
||||
<span class="sidebar-mini"> P </span>
|
||||
<span class="sidebar-normal"> Pricing </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/rtl.html">
|
||||
<span class="sidebar-mini"> RS </span>
|
||||
<span class="sidebar-normal"> RTL Support </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="../../examples/pages/timeline.html">
|
||||
<span class="sidebar-mini"> T </span>
|
||||
<span class="sidebar-normal"> Timeline </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/login.html">
|
||||
<span class="sidebar-mini"> LP </span>
|
||||
<span class="sidebar-normal"> Login Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/register.html">
|
||||
<span class="sidebar-mini"> RP </span>
|
||||
<span class="sidebar-normal"> Register Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/lock.html">
|
||||
<span class="sidebar-mini"> LSP </span>
|
||||
<span class="sidebar-normal"> Lock Screen Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/user.html">
|
||||
<span class="sidebar-mini"> UP </span>
|
||||
<span class="sidebar-normal"> User Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/error.html">
|
||||
<span class="sidebar-mini"> E </span>
|
||||
<span class="sidebar-normal"> Error Page </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#componentsExamples">
|
||||
<i class="material-icons">apps</i>
|
||||
<p> Components
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="componentsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#componentsCollapse">
|
||||
<span class="sidebar-mini"> MLT </span>
|
||||
<span class="sidebar-normal"> Multi Level Collapse
|
||||
<b class="caret"></b>
|
||||
</span>
|
||||
</a>
|
||||
<div class="collapse" id="componentsCollapse">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="#0">
|
||||
<span class="sidebar-mini"> E </span>
|
||||
<span class="sidebar-normal"> Example </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/buttons.html">
|
||||
<span class="sidebar-mini"> B </span>
|
||||
<span class="sidebar-normal"> Buttons </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/grid.html">
|
||||
<span class="sidebar-mini"> GS </span>
|
||||
<span class="sidebar-normal"> Grid System </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/panels.html">
|
||||
<span class="sidebar-mini"> P </span>
|
||||
<span class="sidebar-normal"> Panels </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/sweet-alert.html">
|
||||
<span class="sidebar-mini"> SA </span>
|
||||
<span class="sidebar-normal"> Sweet Alert </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/notifications.html">
|
||||
<span class="sidebar-mini"> N </span>
|
||||
<span class="sidebar-normal"> Notifications </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/icons.html">
|
||||
<span class="sidebar-mini"> I </span>
|
||||
<span class="sidebar-normal"> Icons </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/typography.html">
|
||||
<span class="sidebar-mini"> T </span>
|
||||
<span class="sidebar-normal"> Typography </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#formsExamples">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p> Forms
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="formsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/regular.html">
|
||||
<span class="sidebar-mini"> RF </span>
|
||||
<span class="sidebar-normal"> Regular Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/extended.html">
|
||||
<span class="sidebar-mini"> EF </span>
|
||||
<span class="sidebar-normal"> Extended Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/validation.html">
|
||||
<span class="sidebar-mini"> VF </span>
|
||||
<span class="sidebar-normal"> Validation Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/wizard.html">
|
||||
<span class="sidebar-mini"> W </span>
|
||||
<span class="sidebar-normal"> Wizard </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#tablesExamples">
|
||||
<i class="material-icons">grid_on</i>
|
||||
<p> Tables
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="tablesExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/regular.html">
|
||||
<span class="sidebar-mini"> RT </span>
|
||||
<span class="sidebar-normal"> Regular Tables </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/extended.html">
|
||||
<span class="sidebar-mini"> ET </span>
|
||||
<span class="sidebar-normal"> Extended Tables </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/datatables.net.html">
|
||||
<span class="sidebar-mini"> DT </span>
|
||||
<span class="sidebar-normal"> DataTables.net </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#mapsExamples">
|
||||
<i class="material-icons">place</i>
|
||||
<p> Maps
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="mapsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/google.html">
|
||||
<span class="sidebar-mini"> GM </span>
|
||||
<span class="sidebar-normal"> Google Maps </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/fullscreen.html">
|
||||
<span class="sidebar-mini"> FSM </span>
|
||||
<span class="sidebar-normal"> Full Screen Map </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/vector.html">
|
||||
<span class="sidebar-mini"> VM </span>
|
||||
<span class="sidebar-normal"> Vector Map </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/widgets.html">
|
||||
<i class="material-icons">widgets</i>
|
||||
<p> Widgets </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/charts.html">
|
||||
<i class="material-icons">timeline</i>
|
||||
<p> Charts </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/calendar.html">
|
||||
<i class="material-icons">date_range</i>
|
||||
<p> Calendar </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">
|
||||
<div class="navbar-minimize">
|
||||
<button id="minimizeSidebar" class="btn btn-just-icon btn-white btn-fab btn-round">
|
||||
<i class="material-icons text_align-center visible-on-sidebar-regular">more_vert</i>
|
||||
<i class="material-icons design_bullet-list-67 visible-on-sidebar-mini">view_list</i>
|
||||
</button>
|
||||
</div>
|
||||
<a class="navbar-brand" href="#pablo">Timeline</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="header text-center">
|
||||
<h3 class="title">Timeline</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-timeline card-plain">
|
||||
<div class="card-body">
|
||||
<ul class="timeline">
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-badge danger">
|
||||
<i class="material-icons">card_travel</i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<span class="badge badge-pill badge-danger">Some Title</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Wifey made the best Father's Day meal ever. So thankful so happy so blessed. Thank you for making my family We just had fun with the “future” theme !!! It was a fun night all together ... The always rude Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in downtown.</p>
|
||||
</div>
|
||||
<h6>
|
||||
<i class="ti-time"></i> 11 hours ago via Twitter
|
||||
</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-badge success">
|
||||
<i class="material-icons">extension</i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<span class="badge badge-pill badge-success">Another One</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Thank God for the support of my wife and real friends. I also wanted to point out that it’s the first album to go number 1 off of streaming!!! I love you Ellen and also my number one design rule of anything I do from shoes to music to homes is that Kim has to like it....</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-badge info">
|
||||
<i class="material-icons">fingerprint</i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<span class="badge badge-pill badge-info">Another Title</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Called I Miss the Old Kanye That’s all it was Kanye And I love you like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown LA 11:10PM</p>
|
||||
<p>What if Kanye made a song about Kanye Royère doesn't make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own It wasn’t any Kanyes Set on his goals Kanye</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-round btn-info dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">build</i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-badge warning">
|
||||
<i class="material-icons">flight_land</i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<span class="badge badge-pill badge-warning">Another One</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Tune into Big Boy's 92.3 I'm about to play the first single from Cruel Winter also to Kim’s hair and makeup Lorraine jewelry and the whole style squad at Balmain and the Yeezy team. Thank you Anna for the invite thank you to the whole Vogue team</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</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">Sidebar Background</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger background-color">
|
||||
<div class="ml-auto mr-auto">
|
||||
<span class="badge filter badge-black active" data-background-color="black"></span>
|
||||
<span class="badge filter badge-white" data-background-color="white"></span>
|
||||
<span class="badge filter badge-red" data-background-color="red"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger">
|
||||
<p>Sidebar Mini</p>
|
||||
<label class="ml-auto">
|
||||
<div class="togglebutton switch-sidebar-mini">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger">
|
||||
<p>Sidebar Images</p>
|
||||
<label class="switch-mini ml-auto">
|
||||
<div class="togglebutton switch-sidebar-image">
|
||||
<label>
|
||||
<input type="checkbox" checked="">
|
||||
<span class="toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<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-pro" target="_blank" class="btn btn-rose btn-block btn-fill">Buy Now</a>
|
||||
<a href="https://demos.creative-tim.com/material-dashboard-pro/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
Documentation
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-info btn-block">
|
||||
Get Free Demo!
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/ct-material-dashboard-pro" 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
892
resources/theme/material-dashboard/examples/pages/user.html
Normal file
892
resources/theme/material-dashboard/examples/pages/user.html
Normal file
@@ -0,0 +1,892 @@
|
||||
<!--
|
||||
=========================================================
|
||||
Material Dashboard PRO - v2.1.0
|
||||
=========================================================
|
||||
|
||||
Product Page: https://www.creative-tim.com/product/material-dashboard-pro
|
||||
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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 PRO 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.0" 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="rose" data-background-color="black" 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-mini">
|
||||
CT
|
||||
</a>
|
||||
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="user">
|
||||
<div class="photo">
|
||||
<img src="../../assets/img/faces/avatar.jpg" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<a data-toggle="collapse" href="#collapseExample" class="username">
|
||||
<span>
|
||||
Tania Andrew
|
||||
<b class="caret"></b>
|
||||
</span>
|
||||
</a>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> MP </span>
|
||||
<span class="sidebar-normal"> My Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> EP </span>
|
||||
<span class="sidebar-normal"> Edit Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="sidebar-mini"> S </span>
|
||||
<span class="sidebar-normal"> Settings </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/dashboard.html">
|
||||
<i class="material-icons">dashboard</i>
|
||||
<p> Dashboard </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" data-toggle="collapse" href="#pagesExamples" aria-expanded="true">
|
||||
<i class="material-icons">image</i>
|
||||
<p> Pages
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse show" id="pagesExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/pricing.html">
|
||||
<span class="sidebar-mini"> P </span>
|
||||
<span class="sidebar-normal"> Pricing </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/rtl.html">
|
||||
<span class="sidebar-mini"> RS </span>
|
||||
<span class="sidebar-normal"> RTL Support </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/timeline.html">
|
||||
<span class="sidebar-mini"> T </span>
|
||||
<span class="sidebar-normal"> Timeline </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/login.html">
|
||||
<span class="sidebar-mini"> LP </span>
|
||||
<span class="sidebar-normal"> Login Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/register.html">
|
||||
<span class="sidebar-mini"> RP </span>
|
||||
<span class="sidebar-normal"> Register Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/lock.html">
|
||||
<span class="sidebar-mini"> LSP </span>
|
||||
<span class="sidebar-normal"> Lock Screen Page </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active ">
|
||||
<a class="nav-link" href="../../examples/pages/user.html">
|
||||
<span class="sidebar-mini"> UP </span>
|
||||
<span class="sidebar-normal"> User Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/pages/error.html">
|
||||
<span class="sidebar-mini"> E </span>
|
||||
<span class="sidebar-normal"> Error Page </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#componentsExamples">
|
||||
<i class="material-icons">apps</i>
|
||||
<p> Components
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="componentsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#componentsCollapse">
|
||||
<span class="sidebar-mini"> MLT </span>
|
||||
<span class="sidebar-normal"> Multi Level Collapse
|
||||
<b class="caret"></b>
|
||||
</span>
|
||||
</a>
|
||||
<div class="collapse" id="componentsCollapse">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="#0">
|
||||
<span class="sidebar-mini"> E </span>
|
||||
<span class="sidebar-normal"> Example </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/buttons.html">
|
||||
<span class="sidebar-mini"> B </span>
|
||||
<span class="sidebar-normal"> Buttons </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/grid.html">
|
||||
<span class="sidebar-mini"> GS </span>
|
||||
<span class="sidebar-normal"> Grid System </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/panels.html">
|
||||
<span class="sidebar-mini"> P </span>
|
||||
<span class="sidebar-normal"> Panels </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/sweet-alert.html">
|
||||
<span class="sidebar-mini"> SA </span>
|
||||
<span class="sidebar-normal"> Sweet Alert </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/notifications.html">
|
||||
<span class="sidebar-mini"> N </span>
|
||||
<span class="sidebar-normal"> Notifications </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/icons.html">
|
||||
<span class="sidebar-mini"> I </span>
|
||||
<span class="sidebar-normal"> Icons </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/components/typography.html">
|
||||
<span class="sidebar-mini"> T </span>
|
||||
<span class="sidebar-normal"> Typography </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#formsExamples">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p> Forms
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="formsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/regular.html">
|
||||
<span class="sidebar-mini"> RF </span>
|
||||
<span class="sidebar-normal"> Regular Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/extended.html">
|
||||
<span class="sidebar-mini"> EF </span>
|
||||
<span class="sidebar-normal"> Extended Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/validation.html">
|
||||
<span class="sidebar-mini"> VF </span>
|
||||
<span class="sidebar-normal"> Validation Forms </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/forms/wizard.html">
|
||||
<span class="sidebar-mini"> W </span>
|
||||
<span class="sidebar-normal"> Wizard </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#tablesExamples">
|
||||
<i class="material-icons">grid_on</i>
|
||||
<p> Tables
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="tablesExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/regular.html">
|
||||
<span class="sidebar-mini"> RT </span>
|
||||
<span class="sidebar-normal"> Regular Tables </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/extended.html">
|
||||
<span class="sidebar-mini"> ET </span>
|
||||
<span class="sidebar-normal"> Extended Tables </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/tables/datatables.net.html">
|
||||
<span class="sidebar-mini"> DT </span>
|
||||
<span class="sidebar-normal"> DataTables.net </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" data-toggle="collapse" href="#mapsExamples">
|
||||
<i class="material-icons">place</i>
|
||||
<p> Maps
|
||||
<b class="caret"></b>
|
||||
</p>
|
||||
</a>
|
||||
<div class="collapse" id="mapsExamples">
|
||||
<ul class="nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/google.html">
|
||||
<span class="sidebar-mini"> GM </span>
|
||||
<span class="sidebar-normal"> Google Maps </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/fullscreen.html">
|
||||
<span class="sidebar-mini"> FSM </span>
|
||||
<span class="sidebar-normal"> Full Screen Map </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/maps/vector.html">
|
||||
<span class="sidebar-mini"> VM </span>
|
||||
<span class="sidebar-normal"> Vector Map </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/widgets.html">
|
||||
<i class="material-icons">widgets</i>
|
||||
<p> Widgets </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/charts.html">
|
||||
<i class="material-icons">timeline</i>
|
||||
<p> Charts </p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../../examples/calendar.html">
|
||||
<i class="material-icons">date_range</i>
|
||||
<p> Calendar </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">
|
||||
<div class="navbar-minimize">
|
||||
<button id="minimizeSidebar" class="btn btn-just-icon btn-white btn-fab btn-round">
|
||||
<i class="material-icons text_align-center visible-on-sidebar-regular">more_vert</i>
|
||||
<i class="material-icons design_bullet-list-67 visible-on-sidebar-mini">view_list</i>
|
||||
</button>
|
||||
</div>
|
||||
<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-icon card-header-rose">
|
||||
<div class="card-icon">
|
||||
<i class="material-icons">perm_identity</i>
|
||||
</div>
|
||||
<h4 class="card-title">Edit Profile -
|
||||
<small class="category">Complete your profile</small>
|
||||
</h4>
|
||||
</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-rose 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-rose 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">Sidebar Background</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger background-color">
|
||||
<div class="ml-auto mr-auto">
|
||||
<span class="badge filter badge-black active" data-background-color="black"></span>
|
||||
<span class="badge filter badge-white" data-background-color="white"></span>
|
||||
<span class="badge filter badge-red" data-background-color="red"></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger">
|
||||
<p>Sidebar Mini</p>
|
||||
<label class="ml-auto">
|
||||
<div class="togglebutton switch-sidebar-mini">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="adjustments-line">
|
||||
<a href="javascript:void(0)" class="switch-trigger">
|
||||
<p>Sidebar Images</p>
|
||||
<label class="switch-mini ml-auto">
|
||||
<div class="togglebutton switch-sidebar-image">
|
||||
<label>
|
||||
<input type="checkbox" checked="">
|
||||
<span class="toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<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-pro" target="_blank" class="btn btn-rose btn-block btn-fill">Buy Now</a>
|
||||
<a href="https://demos.creative-tim.com/material-dashboard-pro/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
|
||||
Documentation
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-info btn-block">
|
||||
Get Free Demo!
|
||||
</a>
|
||||
</li>
|
||||
<li class="button-container github-star">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/ct-material-dashboard-pro" 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.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() {
|
||||
$().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() {
|
||||
md.checkFullPageBackgroundImage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user