2022-10-14 16:08:54 +08:00
<!DOCTYPE html>
2022-11-14 13:36:02 +08:00
<!--
Template Name: SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.5.1
Author: Sunnyat A.
Website: http://gootbootstrap.com
Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0?ref=myorange
License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
-->
<html lang="zh-hant-TW" class="root-text-lg">
2022-10-14 16:08:54 +08:00
<head>
2022-11-14 13:36:02 +08:00
<meta charset="utf-8">
<title>
Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
</title>
<meta name="description" content="Marketing Dashboard">
2022-10-14 16:08:54 +08:00
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2022-11-14 13:36:02 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
2022-10-14 16:08:54 +08:00
<!-- Call App Mode on ios devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- base css -->
2022-11-14 13:36:02 +08:00
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="~/Content/css/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="~/Content/css/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="#">
<link id="myskin" rel="stylesheet" media="screen, print" href="~/Content/css/skins/skin-master.css">
2022-10-14 16:08:54 +08:00
<!-- Place favicon.ico in the root directory -->
2022-11-14 13:36:02 +08:00
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="~/Content/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="~/Content/css/datagrid/datatables/datatables.bundle.css">
2022-10-14 16:08:54 +08:00
</head>
2022-11-14 13:36:02 +08:00
<!-- BEGIN Body -->
<!-- Possible Classes
* 'header-function-fixed' - header is in a fixed at all times
* 'nav-function-fixed' - left panel is fixed
* 'nav-function-minify' - skew nav to maximize space
* 'nav-function-hidden' - roll mouse on edge to reveal
* 'nav-function-top' - relocate left pane to top
* 'mod-main-boxed' - encapsulates to a container
* 'nav-mobile-push' - content pushed on menu reveal
* 'nav-mobile-no-overlay' - removes mesh on menu reveal
* 'nav-mobile-slide-out' - content overlaps menu
* 'mod-bigger-font' - content fonts are bigger for readability
* 'mod-high-contrast' - 4.5:1 text contrast ratio
* 'mod-color-blind' - color vision deficiency
* 'mod-pace-custom' - preloader will be inside content
* 'mod-clean-page-bg' - adds more whitespace
* 'mod-hide-nav-icons' - invisible navigation icons
* 'mod-disable-animation' - disables css based animations
* 'mod-hide-info-card' - hides info card from left panel
* 'mod-lean-subheader' - distinguished page header
* 'mod-nav-link' - clear breakdown of nav links
>>> more settings are described inside documentation page >>>
-->
<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
2022-10-14 16:08:54 +08:00
<!-- DOC: script to save and load page settings -->
<script>
/**
2022-11-14 13:36:02 +08:00
* This script should be placed right after the body tag for fast execution
* Note: the script is written in pure javascript and does not depend on thirdparty library
2022-10-14 16:08:54 +08:00
**/
2022-11-14 13:36:02 +08:00
'use strict';
var classHolder = document.getElementsByTagName("BODY")[0],
/**
* Load from localstorage
**/
themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
2022-10-14 16:08:54 +08:00
{},
2022-11-14 13:36:02 +08:00
themeURL = themeSettings.themeURL || '',
themeOptions = themeSettings.themeOptions || '';
/**
* Load theme options
**/
if (themeSettings.themeOptions)
{
classHolder.className = themeSettings.themeOptions;
console.log("%c✔ Theme settings loaded", "color: #148f32");
}
else
{
console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
}
if (themeSettings.themeURL && !document.getElementById('mytheme'))
{
var cssfile = document.createElement('link');
cssfile.id = 'mytheme';
cssfile.rel = 'stylesheet';
cssfile.href = themeURL;
document.getElementsByTagName('head')[0].appendChild(cssfile);
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
}
else if (themeSettings.themeURL && document.getElementById('mytheme'))
{
document.getElementById('mytheme').href = themeSettings.themeURL;
}
/**
* Save to localstorage
**/
var saveSettings = function()
{
themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item)
{
return /^(nav|header|footer|mod|display)-/i.test(item);
}).join(' ');
if (document.getElementById('mytheme'))
{
themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
};
localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
}
/**
* Reset settings
**/
var resetSettings = function()
{
localStorage.setItem("themeSettings", "");
}
2022-10-14 16:08:54 +08:00
</script>
<!-- BEGIN Page Wrapper -->
<div class="page-wrapper">
<div class="page-inner">
<!-- BEGIN Left Aside -->
2022-11-14 13:36:02 +08:00
<aside class="page-sidebar hidden-lg-up">
<div class="page-logo">
2022-10-14 16:08:54 +08:00
<a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
2022-11-14 13:36:02 +08:00
<img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
<span class="page-logo-text mr-1">System</span>
<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
2022-10-14 16:08:54 +08:00
</a>
</div>
<!-- BEGIN PRIMARY NAVIGATION -->
<nav id="js-primary-nav" class="primary-nav" role="navigation">
<div class="nav-filter">
<div class="position-relative">
<input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control" tabindex="0">
<a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
<i class="fal fa-chevron-up"></i>
</a>
</div>
</div>
2022-11-14 13:36:02 +08:00
<div class="info-card">
<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
<div class="info-card-text">
<a href="#" class="d-flex align-items-center text-white">
<span class="text-truncate text-truncate-sm d-inline-block">
Dr. Codex Lantern
</span>
</a>
<span class="d-inline-block text-truncate text-truncate-sm">Toronto, Canada</span>
</div>
<img src="img/card-backgrounds/cover-2-lg.png" class="cover" alt="cover">
<a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
<i class="fal fa-angle-down"></i>
</a>
</div>
<ul id="js-nav-menu" class="nav-menu">
<li class="active open">
<a href="#" title="Application Intel" data-filter-tags="application intel">
<i class="fal fa-info-circle"></i>
<span class="nav-link-text" data-i18n="nav.application_intel">Application Intel</span>
</a>
<ul>
<li>
<a href="intel_analytics_dashboard.html" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
<span class="nav-link-text" data-i18n="nav.application_intel_analytics_dashboard">Analytics Dashboard</span>
</a>
</li>
<li class="active">
<a href="intel_marketing_dashboard.html" title="Marketing Dashboard" data-filter-tags="application intel marketing dashboard">
<span class="nav-link-text" data-i18n="nav.application_intel_marketing_dashboard">Marketing Dashboard</span>
</a>
</li>
<li>
<a href="intel_introduction.html" title="Introduction" data-filter-tags="application intel introduction">
<span class="nav-link-text" data-i18n="nav.application_intel_introduction">Introduction</span>
</a>
</li>
<li>
<a href="intel_privacy.html" title="Privacy" data-filter-tags="application intel privacy">
<span class="nav-link-text" data-i18n="nav.application_intel_privacy">Privacy</span>
</a>
</li>
</ul>
</li>
2022-10-14 16:08:54 +08:00
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Theme Settings" data-filter-tags="theme settings">
<i class="fal fa-cog"></i>
<span class="nav-link-text" data-i18n="nav.theme_settings">Theme Settings</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="settings_how_it_works.html" title="How it works" data-filter-tags="theme settings how it works">
<span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">How it works</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="settings_layout_options.html" title="Layout Options" data-filter-tags="theme settings layout options">
<span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">Layout Options</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="settings_theme_modes.html" title="Theme Modes (beta)" data-filter-tags="theme settings theme modes (beta)">
<span class="nav-link-text" data-i18n="nav.theme_settings_theme_modes_(beta)">Theme Modes (beta)</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="settings_skin_options.html" title="Skin Options" data-filter-tags="theme settings skin options">
<span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">Skin Options</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="settings_saving_db.html" title="Saving to Database" data-filter-tags="theme settings saving to database">
<span class="nav-link-text" data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Documentation" data-filter-tags="documentation">
<i class="fal fa-book"></i>
<span class="nav-link-text" data-i18n="nav.documentation">Documentation</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="docs_general.html" title="General Docs" data-filter-tags="documentation general docs">
<span class="nav-link-text" data-i18n="nav.documentation_general_docs">General Docs</span>
</a>
</li>
<li>
<a href="docs_project_structure.html" title="Project Structure" data-filter-tags="documentation project structure">
<span class="nav-link-text" data-i18n="nav.documentation_project_structure">Project Structure</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="docs_flavors_editions.html" title="Flavors & Editions" data-filter-tags="documentation flavors & editions">
<span class="nav-link-text" data-i18n="nav.documentation_flavors_&_editions">Flavors & Editions</span>
</a>
</li>
<li>
<a href="docs_community_support.html" title="Community Support" data-filter-tags="documentation community support">
<span class="nav-link-text" data-i18n="nav.documentation_community_support">Community Support</span>
</a>
</li>
<li>
<a href="docs_premium_support.html" title="Premium Support" data-filter-tags="documentation premium support">
<span class="nav-link-text" data-i18n="nav.documentation_premium_support">Premium Support</span>
</a>
</li>
<li>
<a href="docs_licensing.html" title="Licensing" data-filter-tags="documentation licensing">
<span class="nav-link-text" data-i18n="nav.documentation_licensing">Licensing</span>
</a>
</li>
<li>
<a href="docs_buildnotes.html" title="Build Notes" data-filter-tags="documentation build notes">
<span class="nav-link-text" data-i18n="nav.documentation_build_notes">Build Notes</span>
<span class="">v4.5.1</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
2022-11-14 13:36:02 +08:00
<li class="nav-title">Tools & Components</li>
2022-10-14 16:08:54 +08:00
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="UI Components" data-filter-tags="ui components">
<i class="fal fa-window"></i>
<span class="nav-link-text" data-i18n="nav.ui_components">UI Components</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_alerts.html" title="Alerts" data-filter-tags="ui components alerts">
<span class="nav-link-text" data-i18n="nav.ui_components_alerts">Alerts</span>
</a>
</li>
<li>
<a href="ui_accordion.html" title="Accordions" data-filter-tags="ui components accordions">
<span class="nav-link-text" data-i18n="nav.ui_components_accordions">Accordions</span>
</a>
</li>
<li>
<a href="ui_badges.html" title="Badges" data-filter-tags="ui components badges">
<span class="nav-link-text" data-i18n="nav.ui_components_badges">Badges</span>
</a>
</li>
<li>
<a href="ui_breadcrumbs.html" title="Breadcrumbs" data-filter-tags="ui components breadcrumbs">
<span class="nav-link-text" data-i18n="nav.ui_components_breadcrumbs">Breadcrumbs</span>
</a>
</li>
<li>
<a href="ui_buttons.html" title="Buttons" data-filter-tags="ui components buttons">
<span class="nav-link-text" data-i18n="nav.ui_components_buttons">Buttons</span>
</a>
</li>
<li>
<a href="ui_button_group.html" title="Button Group" data-filter-tags="ui components button group">
<span class="nav-link-text" data-i18n="nav.ui_components_button_group">Button Group</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_cards.html" title="Cards" data-filter-tags="ui components cards">
<span class="nav-link-text" data-i18n="nav.ui_components_cards">Cards</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_carousel.html" title="Carousel" data-filter-tags="ui components carousel">
<span class="nav-link-text" data-i18n="nav.ui_components_carousel">Carousel</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_collapse.html" title="Collapse" data-filter-tags="ui components collapse">
<span class="nav-link-text" data-i18n="nav.ui_components_collapse">Collapse</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_dropdowns.html" title="Dropdowns" data-filter-tags="ui components dropdowns">
<span class="nav-link-text" data-i18n="nav.ui_components_dropdowns">Dropdowns</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="ui_list_filter.html" title="List Filter" data-filter-tags="ui components list filter">
<span class="nav-link-text" data-i18n="nav.ui_components_list_filter">List Filter</span>
</a>
</li>
<li>
<a href="ui_modal.html" title="Modal" data-filter-tags="ui components modal">
<span class="nav-link-text" data-i18n="nav.ui_components_modal">Modal</span>
</a>
</li>
<li>
<a href="ui_navbars.html" title="Navbars" data-filter-tags="ui components navbars">
<span class="nav-link-text" data-i18n="nav.ui_components_navbars">Navbars</span>
</a>
</li>
<li>
<a href="ui_panels.html" title="Panels" data-filter-tags="ui components panels">
<span class="nav-link-text" data-i18n="nav.ui_components_panels">Panels</span>
</a>
</li>
<li>
<a href="ui_pagination.html" title="Pagination" data-filter-tags="ui components pagination">
<span class="nav-link-text" data-i18n="nav.ui_components_pagination">Pagination</span>
</a>
</li>
<li>
<a href="ui_popovers.html" title="Popovers" data-filter-tags="ui components popovers">
<span class="nav-link-text" data-i18n="nav.ui_components_popovers">Popovers</span>
</a>
</li>
<li>
<a href="ui_progress_bars.html" title="Progress Bars" data-filter-tags="ui components progress bars">
<span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">Progress Bars</span>
</a>
</li>
<li>
<a href="ui_scrollspy.html" title="ScrollSpy" data-filter-tags="ui components scrollspy">
<span class="nav-link-text" data-i18n="nav.ui_components_scrollspy">ScrollSpy</span>
</a>
</li>
<li>
<a href="ui_side_panel.html" title="Side Panel" data-filter-tags="ui components side panel">
<span class="nav-link-text" data-i18n="nav.ui_components_side_panel">Side Panel</span>
</a>
</li>
<li>
<a href="ui_spinners.html" title="Spinners" data-filter-tags="ui components spinners">
<span class="nav-link-text" data-i18n="nav.ui_components_spinners">Spinners</span>
</a>
</li>
<li>
<a href="ui_tabs_pills.html" title="Tabs & Pills" data-filter-tags="ui components tabs & pills">
<span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">Tabs & Pills</span>
</a>
</li>
<li>
<a href="ui_toasts.html" title="Toasts" data-filter-tags="ui components toasts">
<span class="nav-link-text" data-i18n="nav.ui_components_toasts">Toasts</span>
</a>
</li>
<li>
<a href="ui_tooltips.html" title="Tooltips" data-filter-tags="ui components tooltips">
<span class="nav-link-text" data-i18n="nav.ui_components_tooltips">Tooltips</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Utilities" data-filter-tags="utilities">
<i class="fal fa-bolt"></i>
<span class="nav-link-text" data-i18n="nav.utilities">Utilities</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="utilities_borders.html" title="Borders" data-filter-tags="utilities borders">
<span class="nav-link-text" data-i18n="nav.utilities_borders">Borders</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="utilities_clearfix.html" title="Clearfix" data-filter-tags="utilities clearfix">
<span class="nav-link-text" data-i18n="nav.utilities_clearfix">Clearfix</span>
</a>
</li>
<li>
<a href="utilities_color_pallet.html" title="Color Pallet" data-filter-tags="utilities color pallet">
<span class="nav-link-text" data-i18n="nav.utilities_color_pallet">Color Pallet</span>
</a>
</li>
<li>
<a href="utilities_display_property.html" title="Display Property" data-filter-tags="utilities display property">
<span class="nav-link-text" data-i18n="nav.utilities_display_property">Display Property</span>
</a>
</li>
<li>
<a href="utilities_fonts.html" title="Fonts" data-filter-tags="utilities fonts">
<span class="nav-link-text" data-i18n="nav.utilities_fonts">Fonts</span>
</a>
</li>
<li>
<a href="utilities_flexbox.html" title="Flexbox" data-filter-tags="utilities flexbox">
<span class="nav-link-text" data-i18n="nav.utilities_flexbox">Flexbox</span>
</a>
</li>
<li>
<a href="utilities_helpers.html" title="Helpers" data-filter-tags="utilities helpers">
<span class="nav-link-text" data-i18n="nav.utilities_helpers">Helpers</span>
</a>
</li>
<li>
<a href="utilities_position.html" title="Position" data-filter-tags="utilities position">
<span class="nav-link-text" data-i18n="nav.utilities_position">Position</span>
</a>
</li>
<li>
<a href="utilities_responsive_grid.html" title="Responsive Grid" data-filter-tags="utilities responsive grid">
<span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">Responsive Grid</span>
</a>
</li>
<li>
<a href="utilities_sizing.html" title="Sizing" data-filter-tags="utilities sizing">
<span class="nav-link-text" data-i18n="nav.utilities_sizing">Sizing</span>
</a>
</li>
<li>
<a href="utilities_spacing.html" title="Spacing" data-filter-tags="utilities spacing">
<span class="nav-link-text" data-i18n="nav.utilities_spacing">Spacing</span>
</a>
</li>
<li>
<a href="utilities_typography.html" title="Typography" data-filter-tags="utilities typography fonts headings bold lead colors sizes link text states list styles truncate alignment">
<span class="nav-link-text" data-i18n="nav.utilities_typography">Typography</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Menu child" data-filter-tags="utilities menu child">
<span class="nav-link-text" data-i18n="nav.utilities_menu_child">Menu child</span>
</a>
<ul>
<li>
<a href="javascript:void(0);" title="Sublevel Item" data-filter-tags="utilities menu child sublevel item">
<span class="nav-link-text" data-i18n="nav.utilities_menu_child_sublevel_item">Sublevel Item</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Another Item" data-filter-tags="utilities menu child another item">
<span class="nav-link-text" data-i18n="nav.utilities_menu_child_another_item">Another Item</span>
</a>
</li>
</ul>
</li>
<li class="disabled">
<a href="javascript:void(0);" title="Disabled item" data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">Disabled item</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Font Icons" data-filter-tags="font icons">
<i class="fal fa-map-marker-alt"></i>
<span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span>
<span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" title="FontAwesome" data-filter-tags="font icons fontawesome">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">FontAwesome Pro</span>
2022-10-14 16:08:54 +08:00
</a>
2022-11-14 13:36:02 +08:00
<ul>
<li>
<a href="icons_fontawesome_light.html" title="Light" data-filter-tags="font icons fontawesome light">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_light">Light</span>
</a>
</li>
<li>
<a href="icons_fontawesome_regular.html" title="Regular" data-filter-tags="font icons fontawesome regular">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_regular">Regular</span>
</a>
</li>
<li>
<a href="icons_fontawesome_solid.html" title="Solid" data-filter-tags="font icons fontawesome solid">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_solid">Solid</span>
</a>
</li>
<li>
<a href="icons_fontawesome_duotone.html" title="Duotone" data-filter-tags="font icons fontawesome duotone">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_duotone">Duotone</span>
</a>
</li>
<li>
<a href="icons_fontawesome_brand.html" title="Brand" data-filter-tags="font icons fontawesome brand">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_brand">Brand</span>
</a>
</li>
</ul>
2022-10-14 16:08:54 +08:00
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" title="NextGen Icons" data-filter-tags="font icons nextgen icons">
<span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">NextGen Icons</span>
2022-10-14 16:08:54 +08:00
</a>
2022-11-14 13:36:02 +08:00
<ul>
<li>
<a href="icons_nextgen_general.html" title="General" data-filter-tags="font icons nextgen icons general">
<span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons_general">General</span>
</a>
</li>
<li>
<a href="icons_nextgen_base.html" title="Base" data-filter-tags="font icons nextgen icons base">
<span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons_base">Base</span>
</a>
</li>
</ul>
2022-10-14 16:08:54 +08:00
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" title="Stack Icons" data-filter-tags="font icons stack icons">
<span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">Stack Icons</span>
</a>
<ul>
<li>
<a href="icons_stack_showcase.html" title="Showcase" data-filter-tags="font icons stack icons showcase">
<span class="nav-link-text" data-i18n="nav.font_icons_stack_icons_showcase">Showcase</span>
</a>
</li>
<li>
<a href="icons_stack_generate.html?layers=3" title="Generate Stack" data-filter-tags="font icons stack icons generate stack">
<span class="nav-link-text" data-i18n="nav.font_icons_stack_icons_generate_stack">Generate Stack</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" title="Tables" data-filter-tags="tables">
<i class="fal fa-th-list"></i>
<span class="nav-link-text" data-i18n="nav.tables">Tables</span>
</a>
<ul>
<li>
<a href="tables_basic.html" title="Basic Tables" data-filter-tags="tables basic tables">
<span class="nav-link-text" data-i18n="nav.tables_basic_tables">Basic Tables</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="tables_generate_style.html" title="Generate Table Style" data-filter-tags="tables generate table style">
<span class="nav-link-text" data-i18n="nav.tables_generate_table_style">Generate Table Style</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Form Stuff" data-filter-tags="form stuff">
<i class="fal fa-edit"></i>
<span class="nav-link-text" data-i18n="nav.form_stuff">Form Stuff</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="form_basic_inputs.html" title="Basic Inputs" data-filter-tags="form stuff basic inputs">
<span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">Basic Inputs</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="form_checkbox_radio.html" title="Checkbox & Radio" data-filter-tags="form stuff checkbox & radio">
<span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">Checkbox & Radio</span>
</a>
</li>
<li>
<a href="form_input_groups.html" title="Input Groups" data-filter-tags="form stuff input groups">
<span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">Input Groups</span>
</a>
</li>
<li>
<a href="form_validation.html" title="Validation" data-filter-tags="form stuff validation">
<span class="nav-link-text" data-i18n="nav.form_stuff_validation">Validation</span>
</a>
</li>
</ul>
</li>
<li class="nav-title">Plugins & Addons</li>
<li>
<a href="#" title="Plugins" data-filter-tags="plugins">
<i class="fal fa-shield-alt"></i>
<span class="nav-link-text" data-i18n="nav.plugins">Core Plugins</span>
</a>
<ul>
<li>
<a href="plugins_faq.html" title="Plugins FAQ" data-filter-tags="plugins plugins faq">
<span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">Plugins FAQ</span>
</a>
</li>
<li>
<a href="plugins_waves.html" title="Waves" data-filter-tags="plugins waves">
<span class="nav-link-text" data-i18n="nav.plugins_waves">Waves</span>
<span class="dl-ref label bg-primary-400 ml-2">9 KB</span>
</a>
</li>
<li>
<a href="plugins_pacejs.html" title="PaceJS" data-filter-tags="plugins pacejs">
<span class="nav-link-text" data-i18n="nav.plugins_pacejs">PaceJS</span>
<span class="dl-ref label bg-primary-500 ml-2">13 KB</span>
</a>
</li>
<li>
<a href="plugins_smartpanels.html" title="SmartPanels" data-filter-tags="plugins smartpanels">
<span class="nav-link-text" data-i18n="nav.plugins_smartpanels">SmartPanels</span>
<span class="dl-ref label bg-primary-600 ml-2">9 KB</span>
</a>
</li>
<li>
<a href="plugins_bootbox.html" title="BootBox" data-filter-tags="plugins bootbox alert sound">
<span class="nav-link-text" data-i18n="nav.plugins_bootbox">BootBox</span>
<span class="dl-ref label bg-primary-600 ml-2">15 KB</span>
</a>
</li>
<li>
<a href="plugins_slimscroll.html" title="Slimscroll" data-filter-tags="plugins slimscroll">
<span class="nav-link-text" data-i18n="nav.plugins_slimscroll">Slimscroll</span>
<span class="dl-ref label bg-primary-700 ml-2">5 KB</span>
</a>
</li>
<li>
<a href="plugins_throttle.html" title="Throttle" data-filter-tags="plugins throttle">
<span class="nav-link-text" data-i18n="nav.plugins_throttle">Throttle</span>
<span class="dl-ref label bg-primary-700 ml-2">1 KB</span>
</a>
</li>
<li>
<a href="plugins_navigation.html" title="Navigation" data-filter-tags="plugins navigation">
<span class="nav-link-text" data-i18n="nav.plugins_navigation">Navigation</span>
<span class="dl-ref label bg-primary-700 ml-2">2 KB</span>
</a>
</li>
<li>
<a href="plugins_i18next.html" title="i18next" data-filter-tags="plugins i18next">
<span class="nav-link-text" data-i18n="nav.plugins_i18next">i18next</span>
<span class="dl-ref label bg-primary-700 ml-2">10 KB</span>
</a>
</li>
<li>
<a href="plugins_appcore.html" title="App.Core" data-filter-tags="plugins app.core">
<span class="nav-link-text" data-i18n="nav.plugins_app.core">App.Core</span>
<span class="dl-ref label bg-success-700 ml-2">14 KB</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Datatables" data-filter-tags="datatables datagrid">
<i class="fal fa-table"></i>
<span class="nav-link-text" data-i18n="nav.datatables">Datatables</span>
<span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">235 KB</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="datatables_basic.html" title="Basic" data-filter-tags="datatables datagrid basic">
<span class="nav-link-text" data-i18n="nav.datatables_basic">Basic</span>
</a>
</li>
<li>
<a href="datatables_autofill.html" title="Autofill" data-filter-tags="datatables datagrid autofill">
<span class="nav-link-text" data-i18n="nav.datatables_autofill">Autofill</span>
</a>
</li>
<li>
<a href="datatables_buttons.html" title="Buttons" data-filter-tags="datatables datagrid buttons">
<span class="nav-link-text" data-i18n="nav.datatables_buttons">Buttons</span>
</a>
</li>
<li>
<a href="datatables_export.html" title="Export" data-filter-tags="datatables datagrid export tables pdf excel print csv">
<span class="nav-link-text" data-i18n="nav.datatables_export">Export</span>
</a>
</li>
<li>
<a href="datatables_colreorder.html" title="ColReorder" data-filter-tags="datatables datagrid colreorder">
<span class="nav-link-text" data-i18n="nav.datatables_colreorder">ColReorder</span>
</a>
</li>
<li>
<a href="datatables_columnfilter.html" title="ColumnFilter" data-filter-tags="datatables datagrid columnfilter">
<span class="nav-link-text" data-i18n="nav.datatables_columnfilter">ColumnFilter</span>
</a>
</li>
<li>
<a href="datatables_fixedcolumns.html" title="FixedColumns" data-filter-tags="datatables datagrid fixedcolumns">
<span class="nav-link-text" data-i18n="nav.datatables_fixedcolumns">FixedColumns</span>
</a>
</li>
<li>
<a href="datatables_fixedheader.html" title="FixedHeader" data-filter-tags="datatables datagrid fixedheader">
<span class="nav-link-text" data-i18n="nav.datatables_fixedheader">FixedHeader</span>
</a>
</li>
<li>
<a href="datatables_keytable.html" title="KeyTable" data-filter-tags="datatables datagrid keytable">
<span class="nav-link-text" data-i18n="nav.datatables_keytable">KeyTable</span>
</a>
</li>
<li>
<a href="datatables_responsive.html" title="Responsive" data-filter-tags="datatables datagrid responsive">
<span class="nav-link-text" data-i18n="nav.datatables_responsive">Responsive</span>
</a>
</li>
<li>
<a href="datatables_responsive_alt.html" title="Responsive Alt" data-filter-tags="datatables datagrid responsive alt">
<span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">Responsive Alt</span>
</a>
</li>
<li>
<a href="datatables_rowgroup.html" title="RowGroup" data-filter-tags="datatables datagrid rowgroup">
<span class="nav-link-text" data-i18n="nav.datatables_rowgroup">RowGroup</span>
</a>
</li>
<li>
<a href="datatables_rowreorder.html" title="RowReorder" data-filter-tags="datatables datagrid rowreorder">
<span class="nav-link-text" data-i18n="nav.datatables_rowreorder">RowReorder</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="datatables_scroller.html" title="Scroller" data-filter-tags="datatables datagrid scroller">
<span class="nav-link-text" data-i18n="nav.datatables_scroller">Scroller</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="datatables_select.html" title="Select" data-filter-tags="datatables datagrid select">
<span class="nav-link-text" data-i18n="nav.datatables_select">Select</span>
</a>
</li>
<li>
<a href="datatables_alteditor.html" title="AltEditor" data-filter-tags="datatables datagrid alteditor">
<span class="nav-link-text" data-i18n="nav.datatables_alteditor">AltEditor</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Statistics" data-filter-tags="statistics chart graphs">
<i class="fal fa-chart-pie"></i>
<span class="nav-link-text" data-i18n="nav.statistics">Statistics</span>
2022-10-14 16:08:54 +08:00
</a>
2022-11-14 13:36:02 +08:00
<ul>
<li>
<a href="statistics_flot.html" title="Flot" data-filter-tags="statistics chart graphs flot bar pie">
<span class="nav-link-text" data-i18n="nav.statistics_flot">Flot</span>
<span class="dl-ref label bg-primary-500 ml-2">36 KB</span>
</a>
</li>
<li>
<a href="statistics_chartjs.html" title="Chart.js" data-filter-tags="statistics chart graphs chart.js bar pie">
<span class="nav-link-text" data-i18n="nav.statistics_chart.js">Chart.js</span>
<span class="dl-ref label bg-primary-500 ml-2">205 KB</span>
</a>
</li>
<li>
<a href="statistics_chartist.html" title="Chartist.js" data-filter-tags="statistics chart graphs chartist.js">
<span class="nav-link-text" data-i18n="nav.statistics_chartist.js">Chartist.js</span>
<span class="dl-ref label bg-primary-600 ml-2">39 KB</span>
</a>
</li>
<li>
<a href="statistics_c3.html" title="C3 Charts" data-filter-tags="statistics chart graphs c3 charts">
<span class="nav-link-text" data-i18n="nav.statistics_c3_charts">C3 Charts</span>
<span class="dl-ref label bg-primary-600 ml-2">197 KB</span>
</a>
</li>
<li>
<a href="statistics_peity.html" title="Peity" data-filter-tags="statistics chart graphs peity small">
<span class="nav-link-text" data-i18n="nav.statistics_peity">Peity</span>
<span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
</a>
</li>
<li>
<a href="statistics_sparkline.html" title="Sparkline" data-filter-tags="statistics chart graphs sparkline small tiny">
<span class="nav-link-text" data-i18n="nav.statistics_sparkline">Sparkline</span>
<span class="dl-ref label bg-primary-700 ml-2">42 KB</span>
</a>
</li>
<li>
<a href="statistics_easypiechart.html" title="Easy Pie Chart" data-filter-tags="statistics chart graphs easy pie chart">
<span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">Easy Pie Chart</span>
<span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
</a>
</li>
<li>
<a href="statistics_dygraph.html" title="Dygraph" data-filter-tags="statistics chart graphs dygraph complex">
<span class="nav-link-text" data-i18n="nav.statistics_dygraph">Dygraph</span>
<span class="dl-ref label bg-primary-700 ml-2">120 KB</span>
</a>
</li>
</ul>
2022-10-14 16:08:54 +08:00
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Notifications" data-filter-tags="notifications">
<i class="fal fa-exclamation-circle"></i>
<span class="nav-link-text" data-i18n="nav.notifications">Notifications</span>
2022-10-14 16:08:54 +08:00
</a>
2022-11-14 13:36:02 +08:00
<ul>
<li>
<a href="notifications_sweetalert2.html" title="SweetAlert2" data-filter-tags="notifications sweetalert2">
<span class="nav-link-text" data-i18n="nav.notifications_sweetalert2">SweetAlert2</span>
<span class="dl-ref label bg-primary-500 ml-2">40 KB</span>
</a>
</li>
<li>
<a href="notifications_toastr.html" title="Toastr" data-filter-tags="notifications toastr">
<span class="nav-link-text" data-i18n="nav.notifications_toastr">Toastr</span>
<span class="dl-ref label bg-primary-600 ml-2">5 KB</span>
</a>
</li>
</ul>
2022-10-14 16:08:54 +08:00
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="#" title="Form Plugins" data-filter-tags="form plugins">
<i class="fal fa-credit-card-front"></i>
<span class="nav-link-text" data-i18n="nav.form_plugins">Form Plugins</span>
2022-10-14 16:08:54 +08:00
</a>
<ul>
<li>
2022-11-14 13:36:02 +08:00
<a href="form_plugins_colorpicker.html" title="Color Picker" data-filter-tags="form plugins color picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">Color Picker</span>
</a>
</li>
<li>
<a href="form_plugins_datepicker.html" title="Date Picker" data-filter-tags="form plugins date picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">Date Picker</span>
</a>
</li>
<li>
<a href="form_plugins_daterange_picker.html" title="Date Range Picker" data-filter-tags="form plugins date range picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">Date Range Picker</span>
</a>
</li>
<li>
<a href="form_plugins_dropzone.html" title="Dropzone" data-filter-tags="form plugins dropzone">
<span class="nav-link-text" data-i18n="nav.form_plugins_dropzone">Dropzone</span>
</a>
</li>
<li>
<a href="form_plugins_ionrangeslider.html" title="Ion.RangeSlider" data-filter-tags="form plugins ion.rangeslider">
<span class="nav-link-text" data-i18n="nav.form_plugins_ion.rangeslider">Ion.RangeSlider</span>
</a>
</li>
<li>
<a href="form_plugins_inputmask.html" title="Inputmask" data-filter-tags="form plugins inputmask">
<span class="nav-link-text" data-i18n="nav.form_plugins_inputmask">Inputmask</span>
</a>
</li>
<li>
<a href="form_plugins_imagecropper.html" title="Image Cropper" data-filter-tags="form plugins image cropper">
<span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">Image Cropper</span>
</a>
</li>
<li>
<a href="form_plugins_select2.html" title="Select2" data-filter-tags="form plugins select2">
<span class="nav-link-text" data-i18n="nav.form_plugins_select2">Select2</span>
</a>
</li>
<li>
<a href="form_plugins_summernote.html" title="Summernote" data-filter-tags="form plugins summernote texteditor editor">
<span class="nav-link-text" data-i18n="nav.form_plugins_summernote">Summernote</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Miscellaneous" data-filter-tags="miscellaneous">
<i class="fal fa-globe"></i>
<span class="nav-link-text" data-i18n="nav.miscellaneous">Miscellaneous</span>
</a>
<ul>
<li>
<a href="miscellaneous_fullcalendar.html" title="FullCalendar" data-filter-tags="miscellaneous fullcalendar">
<span class="nav-link-text" data-i18n="nav.miscellaneous_fullcalendar">FullCalendar</span>
</a>
</li>
<li>
<a href="miscellaneous_lightgallery.html" title="Light Gallery" data-filter-tags="miscellaneous light gallery">
<span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">Light Gallery</span>
<span class="dl-ref label bg-primary-500 ml-2">61 KB</span>
</a>
</li>
</ul>
</li>
<li class="nav-title">Layouts & Apps</li>
<li>
<a href="#" title="Pages" data-filter-tags="pages">
<i class="fal fa-plus-circle"></i>
<span class="nav-link-text" data-i18n="nav.pages">Page Views</span>
</a>
<ul>
<li>
<a href="page_chat.html" title="Chat" data-filter-tags="pages chat">
<span class="nav-link-text" data-i18n="nav.pages_chat">Chat</span>
</a>
</li>
<li>
<a href="page_contacts.html" title="Contacts" data-filter-tags="pages contacts">
<span class="nav-link-text" data-i18n="nav.pages_contacts">Contacts</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Forum" data-filter-tags="pages forum">
<span class="nav-link-text" data-i18n="nav.pages_forum">Forum</span>
</a>
<ul>
<li>
<a href="page_forum_list.html" title="List" data-filter-tags="pages forum list">
<span class="nav-link-text" data-i18n="nav.pages_forum_list">List</span>
</a>
</li>
<li>
<a href="page_forum_threads.html" title="Threads" data-filter-tags="pages forum threads">
<span class="nav-link-text" data-i18n="nav.pages_forum_threads">Threads</span>
</a>
</li>
<li>
<a href="page_forum_discussion.html" title="Discussion" data-filter-tags="pages forum discussion">
<span class="nav-link-text" data-i18n="nav.pages_forum_discussion">Discussion</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="Inbox" data-filter-tags="pages inbox">
<span class="nav-link-text" data-i18n="nav.pages_inbox">Inbox</span>
</a>
<ul>
<li>
<a href="page_inbox_general.html" title="General" data-filter-tags="pages inbox general">
<span class="nav-link-text" data-i18n="nav.pages_inbox_general">General</span>
</a>
</li>
<li>
<a href="page_inbox_read.html" title="Read" data-filter-tags="pages inbox read">
<span class="nav-link-text" data-i18n="nav.pages_inbox_read">Read</span>
</a>
</li>
<li>
<a href="page_inbox_write.html" title="Write" data-filter-tags="pages inbox write">
<span class="nav-link-text" data-i18n="nav.pages_inbox_write">Write</span>
</a>
</li>
</ul>
</li>
<li>
<a href="page_invoice.html" title="Invoice (printable)" data-filter-tags="pages invoice (printable)">
<span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">Invoice (printable)</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Authentication" data-filter-tags="pages authentication">
<span class="nav-link-text" data-i18n="nav.pages_authentication">Authentication</span>
</a>
<ul>
<li>
<a href="page_forget.html" title="Forget Password" data-filter-tags="pages authentication forget password">
<span class="nav-link-text" data-i18n="nav.pages_authentication_forget_password">Forget Password</span>
</a>
</li>
<li>
<a href="page_locked.html" title="Locked Screen" data-filter-tags="pages authentication locked screen">
<span class="nav-link-text" data-i18n="nav.pages_authentication_locked_screen">Locked Screen</span>
</a>
</li>
<li>
<a href="page_login.html" title="Login" data-filter-tags="pages authentication login">
<span class="nav-link-text" data-i18n="nav.pages_authentication_login">Login</span>
</a>
</li>
<li>
<a href="page_login_alt.html" title="Login Alt" data-filter-tags="pages authentication login alt">
<span class="nav-link-text" data-i18n="nav.pages_authentication_login_alt">Login Alt</span>
</a>
</li>
<li>
<a href="page_register.html" title="Register" data-filter-tags="pages authentication register">
<span class="nav-link-text" data-i18n="nav.pages_authentication_register">Register</span>
</a>
</li>
<li>
<a href="page_confirmation.html" title="Confirmation" data-filter-tags="pages authentication confirmation">
<span class="nav-link-text" data-i18n="nav.pages_authentication_confirmation">Confirmation</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="Error Pages" data-filter-tags="pages error pages">
<span class="nav-link-text" data-i18n="nav.pages_error_pages">Error Pages</span>
</a>
<ul>
<li>
<a href="page_error.html" title="General Error" data-filter-tags="pages error pages general error">
<span class="nav-link-text" data-i18n="nav.pages_error_pages_general_error">General Error</span>
</a>
</li>
<li>
<a href="page_error_404.html" title="Server Error" data-filter-tags="pages error pages server error">
<span class="nav-link-text" data-i18n="nav.pages_error_pages_server_error">Server Error</span>
</a>
</li>
<li>
<a href="page_error_announced.html" title="Announced Error" data-filter-tags="pages error pages announced error">
<span class="nav-link-text" data-i18n="nav.pages_error_pages_announced_error">Announced Error</span>
</a>
</li>
</ul>
</li>
<li>
<a href="page_profile.html" title="Profile" data-filter-tags="pages profile">
<span class="nav-link-text" data-i18n="nav.pages_profile">Profile</span>
</a>
</li>
<li>
<a href="page_projects.html" title="Projects" data-filter-tags="pages projects">
<span class="nav-link-text" data-i18n="nav.pages_projects">Projects</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="page_search.html" title="Search Results" data-filter-tags="pages search results">
<span class="nav-link-text" data-i18n="nav.pages_search_results">Search Results</span>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</li>
2022-11-14 13:36:02 +08:00
</ul>
<div class="filter-message js-filter-message bg-success-600"></div>
</nav>
<!-- END PRIMARY NAVIGATION -->
<!-- NAV FOOTER -->
<div class="nav-footer shadow-top">
<a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify" class="hidden-md-down">
<i class="ni ni-chevron-right"></i>
<i class="ni ni-chevron-right"></i>
</a>
<ul class="list-table m-auto nav-footer-buttons">
2022-10-14 16:08:54 +08:00
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Chat logs">
<i class="fal fa-comments"></i>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Support Chat">
<i class="fal fa-life-ring"></i>
2022-10-14 16:08:54 +08:00
</a>
</li>
<li>
2022-11-14 13:36:02 +08:00
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Make a call">
<i class="fal fa-phone"></i>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
2022-11-14 13:36:02 +08:00
</div> <!-- END NAV FOOTER -->
2022-10-14 16:08:54 +08:00
</aside>
<!-- END Left Aside -->
<div class="page-content-wrapper">
<!-- BEGIN Page Header -->
2022-11-14 13:36:02 +08:00
<header class="page-header" role="banner">
2022-10-14 16:08:54 +08:00
<!-- we need this logo when user switches to nav-function-top -->
<div class="page-logo">
<a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
<img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
2022-11-14 13:36:02 +08:00
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>
<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
2022-10-14 16:08:54 +08:00
</a>
2022-11-14 13:36:02 +08:00
</div>
<!-- DOC: nav menu layout change shortcut -->
<div class="hidden-md-down dropdown-icon-menu position-relative">
<a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation">
<i class="ni ni-menu"></i>
</a>
<ul>
<li>
<a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
<i class="ni ni-minify-nav"></i>
2022-10-14 16:08:54 +08:00
</a>
</li>
2022-11-14 13:36:02 +08:00
<li>
<a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation">
<i class="ni ni-lock-nav"></i>
2022-10-14 16:08:54 +08:00
</a>
</li>
</ul>
</div>
2022-11-14 13:36:02 +08:00
<!-- DOC: mobile button appears during mobile width -->
<div class="hidden-lg-up">
<a href="#" class="header-btn btn press-scale-down" data-action="toggle" data-class="mobile-nav-on">
<i class="ni ni-menu"></i>
</a>
</div>
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
總公司
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">分公司一</a>
<a class="dropdown-item" href="#">分公司二</a>
<a class="dropdown-item" href="#">分公司三</a>
</div>
</div>
<div class="ml-auto d-flex">
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-home fa-2x"></i><br>首頁
</a>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-tv fa-2x"></i><br>系統監控
</a>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">電錶</button>
<button class="dropdown-item" type="button">照明系統</button>
<button class="dropdown-item" type="button">電梯系統</button>
<button class="dropdown-item" type="button">環境感測</button>
<button class="dropdown-item" type="button">空調系統</button>
</div>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-chart-area fa-2x"></i><br>歷史資料
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center blink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-bell fa-2x"></i><br>即時告警
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-server fa-2x"></i><br>運維管理
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-image fa-2x"></i><br>圖資管理
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-user fa-2x"></i><br>帳號管理
</a>
</div>
</div>
2022-10-14 16:08:54 +08:00
<div class="ml-auto d-flex">
2022-11-14 13:36:02 +08:00
<div><span class="js-get-date"></span></div>
<div>天氣</div>
2022-10-14 16:08:54 +08:00
<!-- app user menu -->
<div>
<a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" class="header-icon d-flex align-items-center justify-content-center ml-2">
<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
<!-- you can also add username next to the avatar with the codes below:
<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
<i class="ni ni-chevron-down hidden-xs-down"></i> -->
</a>
<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
<div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
<span class="mr-2">
<img src="img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
</span>
<div class="info-card-text">
<div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
<span class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
</div>
</div>
</div>
2022-11-14 13:36:02 +08:00
<div class="dropdown-divider m-0"></div>
<a href="#" class="dropdown-item" data-action="app-reset">
<span data-i18n="drpdwn.reset_layout">Reset Layout</span>
</a>
<a href="#" class="dropdown-item" data-toggle="modal" data-target=".js-modal-settings">
<span data-i18n="drpdwn.settings">Settings</span>
</a>
<div class="dropdown-divider m-0"></div>
<a href="#" class="dropdown-item" data-action="app-fullscreen">
<span data-i18n="drpdwn.fullscreen">Fullscreen</span>
<i class="float-right text-muted fw-n">F11</i>
</a>
<a href="#" class="dropdown-item" data-action="app-print">
<span data-i18n="drpdwn.print">Print</span>
<i class="float-right text-muted fw-n">Ctrl + P</i>
</a>
<div class="dropdown-multilevel dropdown-multilevel-left">
<div class="dropdown-item">
Language
</div>
<div class="dropdown-menu">
<a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
<a href="#?lang=en" class="dropdown-item active" data-action="lang" data-lang="en">English (US)</a>
<a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
<a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
<a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
<a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
</div>
</div>
2022-10-14 16:08:54 +08:00
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item fw-500 pt-3 pb-3" href="page_login.html">
<span data-i18n="drpdwn.page-logout">Logout</span>
<span class="float-right fw-n">@codexlantern</span>
</a>
</div>
</div>
</div>
</header>
<!-- END Page Header -->
<!-- BEGIN Page Content -->
<!-- the #js-page-content id is needed for some plugins to initialize -->
2022-11-14 13:36:02 +08:00
@RenderBody()
<!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
<!-- BEGIN Page Footer -->
<!--<footer class="page-footer" role="contentinfo">
<div class="d-flex align-items-center flex-1 text-muted">
<span class="hidden-md-down fw-700">2022 © SmartAdmin by <a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
</div>
<div>
<ul class="list-table m-0">
<li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
<li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
<li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
<li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
2022-10-14 16:08:54 +08:00
</ul>
</div>
2022-11-14 13:36:02 +08:00
</footer>-->
<!-- END Page Footer -->
<!-- BEGIN Shortcuts -->
<div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
<div class="modal-dialog modal-dialog-top modal-transparent" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="app-list w-auto h-auto p-0 text-left">
<li>
<a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
<i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
<i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
</div>
<span class="app-list-name">
Home
</span>
</a>
</li>
<li>
<a href="page_inbox_general.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
<i class="ni ni-envelope icon-stack-1x text-white"></i>
</div>
<span class="app-list-name">
Inbox
</span>
</a>
</li>
<li>
<a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
<i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
</div>
<span class="app-list-name">
Add More
</span>
</a>
</li>
</ul>
2022-10-14 16:08:54 +08:00
</div>
</div>
</div>
2022-11-14 13:36:02 +08:00
</div>
<!-- END Shortcuts -->
2022-10-14 16:08:54 +08:00
<!-- BEGIN Color profile -->
<!-- this area is hidden and will not be seen on screens or screen readers -->
<!-- we use this only for CSS color refernce for JS stuff -->
<p id="js-color-profile" class="d-none">
<span class="color-primary-50"></span>
<span class="color-primary-100"></span>
<span class="color-primary-200"></span>
<span class="color-primary-300"></span>
<span class="color-primary-400"></span>
<span class="color-primary-500"></span>
<span class="color-primary-600"></span>
<span class="color-primary-700"></span>
<span class="color-primary-800"></span>
<span class="color-primary-900"></span>
<span class="color-info-50"></span>
<span class="color-info-100"></span>
<span class="color-info-200"></span>
<span class="color-info-300"></span>
<span class="color-info-400"></span>
<span class="color-info-500"></span>
<span class="color-info-600"></span>
<span class="color-info-700"></span>
<span class="color-info-800"></span>
<span class="color-info-900"></span>
<span class="color-danger-50"></span>
<span class="color-danger-100"></span>
<span class="color-danger-200"></span>
<span class="color-danger-300"></span>
<span class="color-danger-400"></span>
<span class="color-danger-500"></span>
<span class="color-danger-600"></span>
<span class="color-danger-700"></span>
<span class="color-danger-800"></span>
<span class="color-danger-900"></span>
<span class="color-warning-50"></span>
<span class="color-warning-100"></span>
<span class="color-warning-200"></span>
<span class="color-warning-300"></span>
<span class="color-warning-400"></span>
<span class="color-warning-500"></span>
<span class="color-warning-600"></span>
<span class="color-warning-700"></span>
<span class="color-warning-800"></span>
<span class="color-warning-900"></span>
<span class="color-success-50"></span>
<span class="color-success-100"></span>
<span class="color-success-200"></span>
<span class="color-success-300"></span>
<span class="color-success-400"></span>
<span class="color-success-500"></span>
<span class="color-success-600"></span>
<span class="color-success-700"></span>
<span class="color-success-800"></span>
<span class="color-success-900"></span>
<span class="color-fusion-50"></span>
<span class="color-fusion-100"></span>
<span class="color-fusion-200"></span>
<span class="color-fusion-300"></span>
<span class="color-fusion-400"></span>
<span class="color-fusion-500"></span>
<span class="color-fusion-600"></span>
<span class="color-fusion-700"></span>
<span class="color-fusion-800"></span>
<span class="color-fusion-900"></span>
</p>
<!-- END Color profile -->
</div>
</div>
</div>
<!-- END Page Wrapper -->
<!-- BEGIN Messenger -->
<div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-right">
<div class="modal-content h-100">
<div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
<span class="mr-2">
<span class="rounded-circle profile-image d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
</span>
<div class="info-card-text">
<a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white" data-toggle="dropdown" aria-expanded="false">
Tracey Chang
<i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Send Email</a>
<a class="dropdown-item" href="#">Create Appointment</a>
<a class="dropdown-item" href="#">Block User</a>
</div>
<span class="text-truncate text-truncate-md opacity-80">IT Director</span>
</div>
</div>
<button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body p-0 h-100 d-flex">
<!-- BEGIN msgr-list -->
<div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
<div>
<div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
<i class="fal fa-search"></i>
</div>
<input type="text" class="form-control bg-white" id="msgr_listfilter_input" placeholder="Filter contacts" aria-label="FriendSearch" data-listfilter="#js-msgr-listfilter">
</div>
<div class="flex-1 h-100 custom-scroll">
<div class="w-100">
<ul id="js-msgr-listfilter" class="list-unstyled m-0">
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="tracey chang online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Tracey Chang
<small class="d-block font-italic text-success fs-xs">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="oliver kopyuv online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Oliver Kopyuv
<small class="d-block font-italic text-success fs-xs">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="dr john cook phd away">
<div class="d-table-cell align-middle status status-warning status-sm ">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Dr. John Cook PhD
<small class="d-block font-italic fs-xs">
Away
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Ali Amdaney
<small class="d-block font-italic fs-xs text-success">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="sarah mcbrook online">
<div class="d-table-cell align-middle status status-success status-sm">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Sarah McBrook
<small class="d-block font-italic fs-xs text-success">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
<div class="d-table-cell align-middle status status-sm">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs">
Offline
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney busy">
<div class="d-table-cell align-middle status status-danger status-sm">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs text-danger">
Busy
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
<div class="d-table-cell align-middle status status-sm">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs">
Offline
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney inactive">
<div class="d-table-cell align-middle">
<span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
+714651347790
<small class="d-block font-italic fs-xs opacity-50">
Missed Call
</small>
</div>
</div>
</a>
</li>
</ul>
<div class="filter-message js-filter-message"></div>
</div>
</div>
<div>
<a class="fs-xl d-flex align-items-center p-3">
<i class="fal fa-cogs"></i>
</a>
</div>
</div>
<!-- END msgr-list -->
<!-- BEGIN msgr -->
<div class="msgr d-flex h-100 flex-column bg-white">
<!-- BEGIN custom-scroll -->
<div class="custom-scroll flex-1 h-100">
<div id="chat_container" class="w-100 p-4">
<!-- start .chat-segment -->
<div class="chat-segment">
<div class="time-stamp text-center mb-2 fw-400">
Jun 19
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent">
<div class="chat-message">
<p>
Hey Tracey, did you get my files?
</p>
</div>
<div class="text-right fw-300 text-muted mt-1 fs-xs">
3:00 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get">
<div class="chat-message">
<p>
Hi
</p>
<p>
Sorry going through a busy time in office. Yes I analyzed the solution.
</p>
<p>
It will require some resource, which I could not manage.
</p>
</div>
<div class="fw-300 text-muted mt-1 fs-xs">
3:24 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent chat-start">
<div class="chat-message">
<p>
Okay
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent chat-end">
<div class="chat-message">
<p>
Sending you some dough today, you can allocate the resources to this project.
</p>
</div>
<div class="text-right fw-300 text-muted mt-1 fs-xs">
3:26 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get chat-start">
<div class="chat-message">
<p>
Perfect. Thanks a lot!
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get">
<div class="chat-message">
<p>
I will have them ready by tonight.
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get chat-end">
<div class="chat-message">
<p>
Cheers
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment for timestamp -->
<div class="chat-segment">
<div class="time-stamp text-center mb-2 fw-400">
Jun 20
</div>
</div>
<!-- end .chat-segment for timestamp -->
</div>
</div>
<!-- END custom-scroll -->
<!-- BEGIN msgr__chatinput -->
<div class="d-flex flex-column">
<div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
<div id="msgr_input" contenteditable="true" data-placeholder="Type your message here..." class="height-10 form-content-editable"></div>
</div>
</div>
<div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
<a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1" data-toggle="tooltip" data-original-title="More options" data-placement="top">
<i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
</a>
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Attach files" data-placement="top">
<i class="fal fa-paperclip color-fusion-300"></i>
</a>
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Insert photo" data-placement="top">
<i class="fal fa-camera color-fusion-300"></i>
</a>
<div class="ml-auto">
<a href="javascript:void(0);" class="btn btn-info">Send</a>
</div>
</div>
</div>
<!-- END msgr__chatinput -->
</div>
<!-- END msgr -->
</div>
</div>
</div>
</div>
<!-- END Messenger -->
<!-- BEGIN Page Settings -->
<div class="modal fade js-modal-settings modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-right modal-md">
<div class="modal-content">
<div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
<h4 class="m-0 text-center color-white">
Layout Settings
<small class="mb-0 opacity-80">User Interface Settings</small>
</h4>
<button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body p-0">
<div class="settings-panel">
<div class="mt-4 d-table w-100 px-5">
<div class="d-table-cell align-middle">
<h5 class="p-0">
App Layout
</h5>
</div>
</div>
<div class="list" id="fh">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="header-function-fixed"></a>
<span class="onoffswitch-title">Fixed Header</span>
<span class="onoffswitch-title-desc">header is in a fixed at all times</span>
</div>
<div class="list" id="nff">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-fixed"></a>
<span class="onoffswitch-title">Fixed Navigation</span>
<span class="onoffswitch-title-desc">left panel is fixed</span>
</div>
<div class="list" id="nfm">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-minify"></a>
<span class="onoffswitch-title">Minify Navigation</span>
<span class="onoffswitch-title-desc">Skew nav to maximize space</span>
</div>
<div class="list" id="nfh">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-hidden"></a>
<span class="onoffswitch-title">Hide Navigation</span>
<span class="onoffswitch-title-desc">roll mouse on edge to reveal</span>
</div>
<div class="list" id="nft">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-top"></a>
<span class="onoffswitch-title">Top Navigation</span>
<span class="onoffswitch-title-desc">Relocate left pane to top</span>
</div>
<div class="list" id="fff">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="footer-function-fixed"></a>
<span class="onoffswitch-title">Fixed Footer</span>
<span class="onoffswitch-title-desc">page footer is fixed</span>
</div>
<div class="list" id="mmb">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-main-boxed"></a>
<span class="onoffswitch-title">Boxed Layout</span>
<span class="onoffswitch-title-desc">Encapsulates to a container</span>
</div>
<div class="expanded">
<ul class="mb-3 mt-1">
<li>
<div class="bg-fusion-50" data-action="toggle" data-class="mod-bg-1"></div>
</li>
<li>
<div class="bg-warning-200" data-action="toggle" data-class="mod-bg-2"></div>
</li>
<li>
<div class="bg-primary-200" data-action="toggle" data-class="mod-bg-3"></div>
</li>
<li>
<div class="bg-success-300" data-action="toggle" data-class="mod-bg-4"></div>
</li>
<li>
<div class="bg-white border" data-action="toggle" data-class="mod-bg-none"></div>
</li>
</ul>
<div class="list" id="mbgf">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-fixed-bg"></a>
<span class="onoffswitch-title">Fixed Background</span>
</div>
</div>
<div class="mt-4 d-table w-100 px-5">
<div class="d-table-cell align-middle">
<h5 class="p-0">
Mobile Menu
</h5>
</div>
</div>
<div class="list" id="nmp">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-push"></a>
<span class="onoffswitch-title">Push Content</span>
<span class="onoffswitch-title-desc">Content pushed on menu reveal</span>
</div>
<div class="list" id="nmno">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-no-overlay"></a>
<span class="onoffswitch-title">No Overlay</span>
<span class="onoffswitch-title-desc">Removes mesh on menu reveal</span>
</div>
<div class="list" id="sldo">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-slide-out"></a>
<span class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span>
<span class="onoffswitch-title-desc">Content overlaps menu</span>
</div>
<div class="mt-4 d-table w-100 px-5">
<div class="d-table-cell align-middle">
<h5 class="p-0">
Accessibility
</h5>
</div>
</div>
<div class="list" id="mbf">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-bigger-font"></a>
<span class="onoffswitch-title">Bigger Content Font</span>
<span class="onoffswitch-title-desc">content fonts are bigger for readability</span>
</div>
<div class="list" id="mhc">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-high-contrast"></a>
<span class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
<span class="onoffswitch-title-desc">4.5:1 text contrast ratio</span>
</div>
<div class="list" id="mcb">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-color-blind"></a>
<span class="onoffswitch-title">Daltonism <sup>(beta)</sup> </span>
<span class="onoffswitch-title-desc">color vision deficiency</span>
</div>
<div class="list" id="mpc">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-pace-custom"></a>
<span class="onoffswitch-title">Preloader Inside</span>
<span class="onoffswitch-title-desc">preloader will be inside content</span>
</div>
<div class="list" id="mpi">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-panel-icon"></a>
<span class="onoffswitch-title">SmartPanel Icons (not Panels)</span>
<span class="onoffswitch-title-desc">smartpanel buttons will appear as icons</span>
</div>
<div class="mt-4 d-table w-100 px-5">
<div class="d-table-cell align-middle">
<h5 class="p-0">
Global Modifications
</h5>
</div>
</div>
<div class="list" id="mcbg">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-clean-page-bg"></a>
<span class="onoffswitch-title">Clean Page Background</span>
<span class="onoffswitch-title-desc">adds more whitespace</span>
</div>
<div class="list" id="mhni">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-nav-icons"></a>
<span class="onoffswitch-title">Hide Navigation Icons</span>
<span class="onoffswitch-title-desc">invisible navigation icons</span>
</div>
<div class="list" id="dan">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-disable-animation"></a>
<span class="onoffswitch-title">Disable CSS Animation</span>
<span class="onoffswitch-title-desc">Disables CSS based animations</span>
</div>
<div class="list" id="mhic">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-info-card"></a>
<span class="onoffswitch-title">Hide Info Card</span>
<span class="onoffswitch-title-desc">Hides info card from left panel</span>
</div>
<div class="list" id="mlph">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-lean-subheader"></a>
<span class="onoffswitch-title">Lean Subheader</span>
<span class="onoffswitch-title-desc">distinguished page header</span>
</div>
<div class="list" id="mnl">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-link"></a>
<span class="onoffswitch-title">Hierarchical Navigation</span>
<span class="onoffswitch-title-desc">Clear breakdown of nav links</span>
</div>
<div class="list" id="mdn">
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-dark"></a>
<span class="onoffswitch-title">Dark Navigation</span>
<span class="onoffswitch-title-desc">Navigation background is darkend</span>
</div>
<hr class="mb-0 mt-4">
<div class="mt-4 d-table w-100 pl-5 pr-3">
<div class="d-table-cell align-middle">
<h5 class="p-0">
Global Font Size
</h5>
</div>
</div>
<div class="list mt-1">
<div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm" data-target="html">
<input type="radio" name="changeFrontSize"> SM
</label>
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text" data-target="html">
<input type="radio" name="changeFrontSize" checked=""> MD
</label>
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg" data-target="html">
<input type="radio" name="changeFrontSize"> LG
</label>
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl" data-target="html">
<input type="radio" name="changeFrontSize"> XL
</label>
</div>
<span class="onoffswitch-title-desc d-block mb-0">
Change <strong>root</strong> font size to effect rem
values (resets on page refresh)
</span>
</div>
<hr class="mb-0 mt-4">
<div class="mt-4 d-table w-100 pl-5 pr-3">
<div class="d-table-cell align-middle">
<h5 class="p-0 pr-2 d-flex">
Theme colors
<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i class="fal fa-info-circle mr-1"></i> more info</a>
</h5>
</div>
</div>
<div class="expanded theme-colors pl-5 pr-3">
<ul class="m-0">
<li>
<a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme="" data-toggle="tooltip" data-placement="top" title="Wisteria (base css)" data-original-title="Wisteria (base css)"></a>
</li>
<li>
<a href="#" id="myapp-1" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-1.css" data-toggle="tooltip" data-placement="top" title="Tapestry" data-original-title="Tapestry"></a>
</li>
<li>
<a href="#" id="myapp-2" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-2.css" data-toggle="tooltip" data-placement="top" title="Atlantis" data-original-title="Atlantis"></a>
</li>
<li>
<a href="#" id="myapp-3" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-3.css" data-toggle="tooltip" data-placement="top" title="Indigo" data-original-title="Indigo"></a>
</li>
<li>
<a href="#" id="myapp-4" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-4.css" data-toggle="tooltip" data-placement="top" title="Dodger Blue" data-original-title="Dodger Blue"></a>
</li>
<li>
<a href="#" id="myapp-5" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-5.css" data-toggle="tooltip" data-placement="top" title="Tradewind" data-original-title="Tradewind"></a>
</li>
<li>
<a href="#" id="myapp-6" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-6.css" data-toggle="tooltip" data-placement="top" title="Cranberry" data-original-title="Cranberry"></a>
</li>
<li>
<a href="#" id="myapp-7" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-7.css" data-toggle="tooltip" data-placement="top" title="Oslo Gray" data-original-title="Oslo Gray"></a>
</li>
<li>
<a href="#" id="myapp-8" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-8.css" data-toggle="tooltip" data-placement="top" title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
</li>
<li>
<a href="#" id="myapp-9" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-9.css" data-toggle="tooltip" data-placement="top" title="Apricot" data-original-title="Apricot"></a>
</li>
<li>
<a href="#" id="myapp-10" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-10.css" data-toggle="tooltip" data-placement="top" title="Blue Smoke" data-original-title="Blue Smoke"></a>
</li>
<li>
<a href="#" id="myapp-11" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-11.css" data-toggle="tooltip" data-placement="top" title="Green Smoke" data-original-title="Green Smoke"></a>
</li>
<li>
<a href="#" id="myapp-12" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-12.css" data-toggle="tooltip" data-placement="top" title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
</li>
<li>
<a href="#" id="myapp-13" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-13.css" data-toggle="tooltip" data-placement="top" title="Emerald" data-original-title="Emerald"></a>
</li>
<li>
<a href="#" id="myapp-14" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-14.css" data-toggle="tooltip" data-placement="top" title="Supernova" data-original-title="Supernova"></a>
</li>
<li>
<a href="#" id="myapp-15" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-15.css" data-toggle="tooltip" data-placement="top" title="Hoki" data-original-title="Hoki"></a>
</li>
</ul>
</div>
<hr class="mb-0 mt-4">
<div class="mt-4 d-table w-100 pl-5 pr-3">
<div class="d-table-cell align-middle">
<h5 class="p-0 pr-2 d-flex">
Theme Modes (beta)
<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>" data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i class="fal fa-question-circle mr-1"></i> why beta?</a>
</h5>
</div>
</div>
<div class="pl-5 pr-3 py-3">
<div class="ie-only alert alert-warning d-none">
<h6>Internet Explorer Issue</h6>
This particular component may not work as expected in Internet Explorer. Please use with caution.
</div>
<div class="row no-gutters">
<div class="col-4 pr-2 text-center">
<div id="skin-default" data-action="toggle-replace" data-replaceclass="mod-skin-light mod-skin-dark" data-class="" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" data-original-title="Default Mode" style="height: 80px">
<div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
<div class="d-flex flex-column flex-1">
<div class="bg-white border-bottom border-primary py-1"></div>
<div class="bg-faded flex-1 pt-3 pb-3 px-2">
<div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
</div>
</div>
</div>
Default
</div>
<div class="col-4 px-1 text-center">
<div id="skin-light" data-action="toggle-replace" data-replaceclass="mod-skin-dark" data-class="mod-skin-light" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on" data-original-title="Light Mode" style="height: 80px">
<div class="bg-white px-2 pt-0 border-right border-"></div>
<div class="d-flex flex-column flex-1">
<div class="bg-white border-bottom border- py-1"></div>
<div class="bg-white flex-1 pt-3 pb-3 px-2">
<div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
</div>
</div>
</div>
Light
</div>
<div class="col-4 pl-2 text-center">
<div id="skin-dark" data-action="toggle-replace" data-replaceclass="mod-skin-light" data-class="mod-skin-dark" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on" data-original-title="Dark Mode" style="height: 80px">
<div class="bg-fusion-500 px-2 pt-0 border-right"></div>
<div class="d-flex flex-column flex-1">
<div class="bg-fusion-600 border-bottom py-1"></div>
<div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
<div class="py-3 opacity-30" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
</div>
</div>
</div>
Dark
</div>
</div>
</div>
<hr class="mb-0 mt-4">
<div class="pl-5 pr-3 py-3 bg-faded">
<div class="row no-gutters">
<div class="col-6 pr-1">
<a href="#" class="btn btn-outline-danger fw-500 btn-block" data-action="app-reset">Reset Settings</a>
</div>
<div class="col-6 pl-1">
<a href="#" class="btn btn-danger fw-500 btn-block" data-action="factory-reset">Factory Reset</a>
</div>
</div>
</div>
</div> <span id="saving"></span>
</div>
</div>
</div>
</div>
<!-- END Page Settings -->
2022-11-14 13:36:02 +08:00
<!-- base vendor bundle:
DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
+ pace.js (recommended)
+ jquery.js (core)
+ jquery-ui-cust.js (core)
+ popper.js (core)
+ bootstrap.js (core)
+ slimscroll.js (extension)
+ app.navigation.js (core)
+ ba-throttle-debounce.js (core)
+ waves.js (extension)
+ smartpanels.js (extension)
+ src/../jquery-snippets.js (core) -->
<script src="~/Content/js/vendors.bundle.js"></script>
<script src="~/Content/js/app.bundle.js"></script>
<script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
</script>
<!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
<script src="~/Content/js/statistics/peity/peity.bundle.js"></script>
<script src="~/Content/js/statistics/flot/flot.bundle.js"></script>
<script src="~/Content/js/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="~/Content/js/datagrid/datatables/datatables.bundle.js"></script>
2022-10-14 16:08:54 +08:00
<script>
2022-11-14 13:36:02 +08:00
/* defined datas */
var dataTargetProfit = [
[1354586000000, 153],
[1364587000000, 658],
[1374588000000, 198],
[1384589000000, 663],
[1394590000000, 801],
[1404591000000, 1080],
[1414592000000, 353],
[1424593000000, 749],
[1434594000000, 523],
[1444595000000, 258],
[1454596000000, 688],
[1464597000000, 364]
]
var dataProfit = [
[1354586000000, 53],
[1364587000000, 65],
[1374588000000, 98],
[1384589000000, 83],
[1394590000000, 980],
[1404591000000, 808],
[1414592000000, 720],
[1424593000000, 674],
[1434594000000, 23],
[1444595000000, 79],
[1454596000000, 88],
[1464597000000, 36]
]
var dataSignups = [
[1354586000000, 647],
[1364587000000, 435],
[1374588000000, 784],
[1384589000000, 346],
[1394590000000, 487],
[1404591000000, 463],
[1414592000000, 479],
[1424593000000, 236],
[1434594000000, 843],
[1444595000000, 657],
[1454596000000, 241],
[1464597000000, 341]
]
var dataSet1 = [
[0, 10],
[100, 8],
[200, 7],
[300, 5],
[400, 4],
[500, 6],
[600, 3],
[700, 2]
];
var dataSet2 = [
[0, 9],
[100, 6],
[200, 5],
[300, 3],
[400, 3],
[500, 5],
[600, 2],
[700, 1]
];
$(document).ready(function()
{
/* init datatables */
$('#dt-basic-example').dataTable(
{
responsive: true,
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [
{
extend: 'colvis',
text: 'Column Visibility',
titleAttr: 'Col visibility',
className: 'btn-outline-default'
},
{
extend: 'csvHtml5',
text: 'CSV',
titleAttr: 'Generate CSV',
className: 'btn-outline-default'
},
{
extend: 'copyHtml5',
text: 'Copy',
titleAttr: 'Copy to clipboard',
className: 'btn-outline-default'
},
{
extend: 'print',
text: '<i class="fal fa-print"></i>',
titleAttr: 'Print Table',
className: 'btn-outline-default'
}
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
],
columnDefs: [
{
targets: -1,
title: '',
orderable: false,
render: function(data, type, full, meta)
{
/*
-- ES6
-- convert using https://babeljs.io online transpiler
return `
<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>
<i class="fal fa-times"></i>
</a>
<div class='dropdown d-inline-block dropleft '>
<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>
<i class="fal fa-ellipsis-v"></i>
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>
<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>
</div>
</div>`;
ES5 example below:
*/
return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>";
},
},
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
]
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
});
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
/* flot toggle example */
var flot_toggle = function()
{
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
var data = [
{
label: "Target Profit",
data: dataTargetProfit,
color: color.info._400,
bars:
{
show: true,
align: "center",
barWidth: 30 * 30 * 60 * 1000 * 80,
lineWidth: 0,
/*fillColor: {
colors: [color.primary._500, color.primary._900]
},*/
fillColor:
{
colors: [
{
opacity: 0.9
},
{
opacity: 0.1
}]
}
},
highlightColor: 'rgba(255,255,255,0.3)',
shadowSize: 0
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
{
label: "Actual Profit",
data: dataProfit,
color: color.warning._500,
lines:
{
show: true,
lineWidth: 2
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
shadowSize: 0,
points:
{
show: true
}
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
{
label: "User Signups",
data: dataSignups,
color: color.success._500,
lines:
2022-10-14 16:08:54 +08:00
{
2022-11-14 13:36:02 +08:00
show: true,
lineWidth: 2
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
shadowSize: 0,
points:
{
show: true
}
}]
var options = {
grid:
{
hoverable: true,
clickable: true,
tickColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.05)'
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
tooltip: true,
tooltipOpts:
{
cssClass: 'tooltip-inner',
defaultTheme: false
},
xaxis:
{
mode: "time",
tickColor: 'rgba(0,0,0,0.05)',
},
yaxes:
{
tickColor: 'rgba(0,0,0,0.05)',
tickFormatter: function(val, axis)
{
return "$" + val;
2022-10-14 16:08:54 +08:00
},
2022-11-14 13:36:02 +08:00
max: 1200
2022-10-14 16:08:54 +08:00
}
2022-11-14 13:36:02 +08:00
};
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
var plot2 = null;
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
function plotNow()
{
var d = [];
$("#js-checkbox-toggles").find(':checkbox').each(function()
{
if ($(this).is(':checked'))
{
d.push(data[$(this).attr("name").substr(4, 1)]);
}
2022-10-14 16:08:54 +08:00
});
2022-11-14 13:36:02 +08:00
if (d.length > 0)
{
if (plot2)
{
plot2.setData(d);
plot2.draw();
}
else
{
plot2 = $.plot($("#flot-toggles"), d, options);
}
2022-10-14 16:08:54 +08:00
}
2022-11-14 13:36:02 +08:00
};
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
$("#js-checkbox-toggles").find(':checkbox').on('change', function()
{
plotNow();
2022-10-14 16:08:54 +08:00
});
2022-11-14 13:36:02 +08:00
plotNow()
2022-10-14 16:08:54 +08:00
}
2022-11-14 13:36:02 +08:00
flot_toggle();
/* flot toggle example -- end*/
/* flot area */
var flotArea = $.plot($('#flot-area'), [
{
data: dataSet1,
label: 'New Customer',
color: color.success._200
},
{
data: dataSet2,
label: 'Returning Customer',
color: color.info._200
}],
{
series:
{
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.5
}]
}
},
shadowSize: 0
},
points:
{
show: true,
},
legend:
{
noColumns: 1,
position: 'nw'
},
grid:
{
hoverable: true,
clickable: true,
borderColor: '#ddd',
tickColor: 'rgba(0,0,0,0.05)',
aboveData: true,
borderWidth: 0,
labelMargin: 5,
backgroundColor: 'transparent'
},
yaxis:
{
tickLength: 1,
min: 0,
max: 15,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 0,
color: '#999'
}
},
xaxis:
{
tickLength: 1,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 10,
color: '#999'
}
}
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
});
/* flot area -- end */
var flotVisit = $.plot('#flotVisit', [
{
data: [
[3, 0],
[4, 1],
[5, 3],
[6, 3],
[7, 10],
[8, 11],
[9, 12],
[10, 9],
[11, 12],
[12, 8],
[13, 5]
],
color: color.success._200
},
{
data: [
[1, 0],
[2, 0],
[3, 1],
[4, 2],
[5, 2],
[6, 5],
[7, 8],
[8, 12],
[9, 9],
[10, 11],
[11, 5]
],
color: color.info._200
}],
{
series:
{
shadowSize: 0,
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.12
}]
}
}
},
grid:
{
borderWidth: 0
},
yaxis:
{
min: 0,
max: 15,
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[0, ''],
[5, '100K'],
[10, '200K'],
[15, '300K']
],
font:
{
color: '#444',
size: 10
}
},
xaxis:
{
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[2, '2am'],
[3, '3am'],
[4, '4am'],
[5, '5am'],
[6, '6am'],
[7, '7am'],
[8, '8am'],
[9, '9am'],
[10, '1pm'],
[11, '2pm'],
[12, '3pm'],
[13, '4pm']
],
font:
{
color: '#999',
size: 9
}
}
});
2022-10-14 16:08:54 +08:00
2022-11-14 13:36:02 +08:00
});
2022-10-14 16:08:54 +08:00
</script>
</body>
<!-- END Body -->
</html>
