mirror of
https://gitlab.com/TheGamecraft/c-cms.git
synced 2026-04-21 10:49:10 -04:00
1073 lines
50 KiB
HTML
1073 lines
50 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 active ">
|
|
<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">Panels</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-6">
|
|
<div class="card ">
|
|
<div class="card-header ">
|
|
<h4 class="card-title">Navigation Pills -
|
|
<small class="description">Horizontal Tabs</small>
|
|
</h4>
|
|
</div>
|
|
<div class="card-body ">
|
|
<ul class="nav nav-pills nav-pills-warning" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
|
|
Profile
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
|
|
Settings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link3" role="tablist">
|
|
Options
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content tab-space">
|
|
<div class="tab-pane active" id="link1">
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br />
|
|
<br /> Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br/>
|
|
<br/> This is very nice.
|
|
</div>
|
|
<div class="tab-pane" id="link2">
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<br />
|
|
<br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
</div>
|
|
<div class="tab-pane" id="link3">
|
|
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
|
<br />
|
|
<br />Dynamically innovate resource-leveling customer service for state of the art customer service.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card ">
|
|
<div class="card-header ">
|
|
<h4 class="card-title">Navigation Pills -
|
|
<small class="description">Vertical Tabs</small>
|
|
</h4>
|
|
</div>
|
|
<div class="card-body ">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<ul class="nav nav-pills nav-pills-rose flex-column" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#link4" role="tablist">
|
|
Profile
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link5" role="tablist">
|
|
Settings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link6" role="tablist">
|
|
Options
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="link4">
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br>
|
|
<br> Dramatically maintain clicks-and-mortar solutions without functional solutions. Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. This is very nice.
|
|
</div>
|
|
<div class="tab-pane" id="link5">
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<br>
|
|
<br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
</div>
|
|
<div class="tab-pane" id="link6">
|
|
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
|
<br>
|
|
<br>Dynamically innovate resource-leveling customer service for state of the art customer service.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Collapsible Accordion</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="accordion" role="tablist">
|
|
<div class="card-collapse">
|
|
<div class="card-header" role="tab" id="headingOne">
|
|
<h5 class="mb-0">
|
|
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="collapsed">
|
|
Collapsible Group Item #1
|
|
<i class="material-icons">keyboard_arrow_down</i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style="">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-collapse">
|
|
<div class="card-header" role="tab" id="headingTwo">
|
|
<h5 class="mb-0">
|
|
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Collapsible Group Item #2
|
|
<i class="material-icons">keyboard_arrow_down</i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-collapse">
|
|
<div class="card-header" role="tab" id="headingThree">
|
|
<h5 class="mb-0">
|
|
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
Collapsible Group Item #3
|
|
<i class="material-icons">keyboard_arrow_down</i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card ">
|
|
<div class="card-header ">
|
|
<h4 class="card-title">Navigation Pills Icons -
|
|
<small class="description">Vertical Tabs</small>
|
|
</h4>
|
|
</div>
|
|
<div class="card-body ">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6">
|
|
<!--
|
|
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
|
|
-->
|
|
<ul class="nav nav-pills nav-pills-rose nav-pills-icons flex-column" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#link110" role="tablist">
|
|
<i class="material-icons">dashboard</i> Home
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link111" role="tablist">
|
|
<i class="material-icons">schedule</i> Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="link110">
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br>
|
|
<br> Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br/>
|
|
<br/> Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
</div>
|
|
<div class="tab-pane" id="link111">
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<br>
|
|
<br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8 ml-auto mr-auto">
|
|
<div class="page-categories">
|
|
<h3 class="title text-center">Page Subcategories</h3>
|
|
<br />
|
|
<ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link7" role="tablist">
|
|
<i class="material-icons">info</i> Description
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#link8" role="tablist">
|
|
<i class="material-icons">location_on</i> Location
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link9" role="tablist">
|
|
<i class="material-icons">gavel</i> Legal Info
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#link10" role="tablist">
|
|
<i class="material-icons">help_outline</i> Help Center
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content tab-space tab-subcategories">
|
|
<div class="tab-pane" id="link7">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Description about product</h4>
|
|
<p class="card-category">
|
|
More information here
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br>
|
|
<br> Dramatically visualize customer directed convergence without revolutionary ROI.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane active" id="link8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Location of the product</h4>
|
|
<p class="card-category">
|
|
More information here
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<br>
|
|
<br> Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="link9">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Legal info of the product</h4>
|
|
<p class="card-category">
|
|
More information here
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
|
<br>
|
|
<br>Dynamically innovate resource-leveling customer service for state of the art customer service.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="link10">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Help center</h4>
|
|
<p class="card-category">
|
|
More information here
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
|
|
<br>
|
|
<br> Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<nav class="float-left">
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.creative-tim.com">
|
|
Creative Tim
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://creative-tim.com/presentation">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://blog.creative-tim.com">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.creative-tim.com/license">
|
|
Licenses
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="copyright float-right">
|
|
©
|
|
<script>
|
|
document.write(new Date().getFullYear())
|
|
</script>, made with <i class="material-icons">favorite</i> by
|
|
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="fixed-plugin">
|
|
<div class="dropdown show-dropdown">
|
|
<a href="#" data-toggle="dropdown">
|
|
<i class="fa fa-cog fa-2x"> </i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header-title"> Sidebar Filters</li>
|
|
<li class="adjustments-line">
|
|
<a href="javascript:void(0)" class="switch-trigger active-color">
|
|
<div class="badge-colors ml-auto mr-auto">
|
|
<span class="badge filter badge-purple" data-color="purple"></span>
|
|
<span class="badge filter badge-azure" data-color="azure"></span>
|
|
<span class="badge filter badge-green" data-color="green"></span>
|
|
<span class="badge filter badge-warning" data-color="orange"></span>
|
|
<span class="badge filter badge-danger" data-color="danger"></span>
|
|
<span class="badge filter badge-rose active" data-color="rose"></span>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</a>
|
|
</li>
|
|
<li class="header-title">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>
|
|
</body>
|
|
|
|
</html> |