mirror of
https://gitlab.com/TheGamecraft/c-cms.git
synced 2026-04-22 11:09:11 -04:00
1036 lines
48 KiB
HTML
1036 lines
48 KiB
HTML
<!--
|
|
=========================================================
|
|
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 ">
|
|
<a class="nav-link" data-toggle="collapse" href="#pagesExamples">
|
|
<i class="material-icons">image</i>
|
|
<p> Pages
|
|
<b class="caret"></b>
|
|
</p>
|
|
</a>
|
|
<div class="collapse" 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 ">
|
|
<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 active ">
|
|
<a class="nav-link" data-toggle="collapse" href="#componentsExamples" aria-expanded="true">
|
|
<i class="material-icons">apps</i>
|
|
<p> Components
|
|
<b class="caret"></b>
|
|
</p>
|
|
</a>
|
|
<div class="collapse show" id="componentsExamples">
|
|
<ul class="nav">
|
|
<li class="nav-item active ">
|
|
<a class="nav-link" data-toggle="collapse" href="#componentsCollapse" aria-expanded="true">
|
|
<span class="sidebar-mini"> MLT </span>
|
|
<span class="sidebar-normal"> Multi Level Collapse
|
|
<b class="caret"></b>
|
|
</span>
|
|
</a>
|
|
<div class="collapse show" 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 active ">
|
|
<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">Notifications</a>
|
|
</div>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end">
|
|
<form class="navbar-form">
|
|
<div class="input-group no-border">
|
|
<input type="text" value="" class="form-control" placeholder="Search...">
|
|
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
|
<i class="material-icons">search</i>
|
|
<div class="ripple-container"></div>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pablo">
|
|
<i class="material-icons">dashboard</i>
|
|
<p class="d-lg-none d-md-block">
|
|
Stats
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="material-icons">notifications</i>
|
|
<span class="notification">5</span>
|
|
<p class="d-lg-none d-md-block">
|
|
Some Actions
|
|
</p>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
|
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
|
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
|
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
|
<a class="dropdown-item" href="#">Another Notification</a>
|
|
<a class="dropdown-item" href="#">Another One</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="material-icons">person</i>
|
|
<p class="d-lg-none d-md-block">
|
|
Account
|
|
</p>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
|
|
<a class="dropdown-item" href="#">Profile</a>
|
|
<a class="dropdown-item" href="#">Settings</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Log out</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="header text-center ml-auto mr-auto">
|
|
<h3 class="title">Notifications</h3>
|
|
<p class="category">Handcrafted by our friend
|
|
<a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
|
|
<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Notifications Style</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info">
|
|
<span>This is a plain notification</span>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>This is a notification with close button.</span>
|
|
</div>
|
|
<div class="alert alert-info alert-with-icon" data-notify="container">
|
|
<i class="material-icons" data-notify="icon">notifications</i>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span data-notify="icon" class="now-ui-icons ui-1_bell-53"></span>
|
|
<span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
|
|
</div>
|
|
<div class="alert alert-rose alert-with-icon" data-notify="container">
|
|
<i class="material-icons" data-notify="icon">notifications</i>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span data-notify="message">This is a notification with close button and icon and is made with ".alert-rose". You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Notification states</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
|
|
</div>
|
|
<div class="alert alert-danger">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
|
|
</div>
|
|
<div class="alert alert-primary">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
|
|
</div>
|
|
<div class="alert alert-rose">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
<span>
|
|
<b> Rose - </b> This is a regular notification made with ".alert-rose"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="places-buttons">
|
|
<div class="row">
|
|
<div class="col-md-6 ml-auto mr-auto text-center">
|
|
<h4 class="card-title">
|
|
Notifications Places
|
|
<p class="category">Click to view notifications</p>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','left')">Top Left</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','center')">Top Center</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('top','right')">Top Right</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','left')">Bottom Left</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','center')">Bottom Center</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block" onclick="md.showNotification('bottom','right')">Bottom Right</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Modal</h4>
|
|
</div>
|
|
<button class="btn btn-primary btn-round" data-toggle="modal" data-target="#myModal">
|
|
Classic modal
|
|
</button>
|
|
<button class="btn btn-info btn-round" data-toggle="modal" data-target="#noticeModal">
|
|
Notice modal
|
|
</button>
|
|
<button class="btn btn-rose btn-round" data-toggle="modal" data-target="#myModal10">
|
|
Small alert modal
|
|
</button>
|
|
<!-- Classic Modal -->
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Modal title</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<i class="material-icons">clear</i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
|
|
</p>
|
|
<div class="form-group bmd-form-group is-filled">
|
|
<label class="label-control">Datetime Picker</label>
|
|
<input type="text" class="form-control datetimepicker" value="07/02/2018">
|
|
<span class="material-input"></span>
|
|
<span class="material-input"></span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-link">Nice Button</button>
|
|
<button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Modal -->
|
|
<!-- notice modal -->
|
|
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-notice">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="myModalLabel">How Do You Become an Affiliate?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="instruction">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<strong>1. Register</strong>
|
|
<p class="description">The first step is to create an account at
|
|
<a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="picture">
|
|
<img src="../../assets/img/card-1.jpg" alt="Thumbnail Image" class="rounded img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="instruction">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<strong>2. Apply</strong>
|
|
<p class="description">The first step is to create an account at
|
|
<a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="picture">
|
|
<img src="../../assets/img/card-2.jpg" alt="Thumbnail Image" class="rounded img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center">
|
|
<button type="button" class="btn btn-info btn-round" data-dismiss="modal">Sounds good!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end notice modal -->
|
|
<!-- small modal -->
|
|
<div class="modal fade modal-mini modal-primary" id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-small">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="material-icons">clear</i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to do this?</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center">
|
|
<button type="button" class="btn btn-link" data-dismiss="modal">Never mind</button>
|
|
<button type="button" class="btn btn-success btn-link">Yes
|
|
<div class="ripple-container"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end small modal -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<nav class="float-left">
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.creative-tim.com">
|
|
Creative Tim
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://creative-tim.com/presentation">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://blog.creative-tim.com">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.creative-tim.com/license">
|
|
Licenses
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="copyright float-right">
|
|
©
|
|
<script>
|
|
document.write(new Date().getFullYear())
|
|
</script>, made with <i class="material-icons">favorite</i> by
|
|
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="fixed-plugin">
|
|
<div class="dropdown show-dropdown">
|
|
<a href="#" data-toggle="dropdown">
|
|
<i class="fa fa-cog fa-2x"> </i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header-title"> Sidebar Filters</li>
|
|
<li class="adjustments-line">
|
|
<a href="javascript:void(0)" class="switch-trigger active-color">
|
|
<div class="badge-colors ml-auto mr-auto">
|
|
<span class="badge filter badge-purple" data-color="purple"></span>
|
|
<span class="badge filter badge-azure" data-color="azure"></span>
|
|
<span class="badge filter badge-green" data-color="green"></span>
|
|
<span class="badge filter badge-warning" data-color="orange"></span>
|
|
<span class="badge filter badge-danger" data-color="danger"></span>
|
|
<span class="badge filter badge-rose active" data-color="rose"></span>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</a>
|
|
</li>
|
|
<li class="header-title">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() {
|
|
//init DateTimePickers
|
|
md.initFormExtendedDatetimepickers();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |