equation-admin-template

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"> <title>Dragula Drag and Drop | Equation - Multipurpose Bootstrap Dashboard Template </title> <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>  <link href="assets/css/loader.css" rel="stylesheet" type="text/css" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />   <link href="plugins/drag-and-drop/dragula/dragula.css" rel="stylesheet" type="text/css" /> <link href="plugins/drag-and-drop/dragula/example.css" rel="stylesheet" type="text/css" />  </head> <body> <div id="eq-loader"> <div class="eq-loader-div"> <div class="eq-loading dual-loader mx-auto mb-5"></div> </div> </div>  <header class="desktop-nav header navbar fixed-top"> <div class="nav-logo mr-sm-5 ml-sm-4"> <a href="javascript:void(0);" class="nav-link sidebarCollapse d-inline-block mr-sm-5" data-placement="bottom"> <i class="flaticon-menu-line-3"></i> </a> <a href="index.html" class=""> <img src="assets/img/1.png" class="img-fluid" alt="logo"></a> </div> <ul class="navbar-nav flex-row mr-auto"> <li class="nav-item ml-4 d-lg-none d-sm-block d-none"> <form class="form-inline search-full form-inline search animated-search" role="search"> <i class="flaticon-search-1 d-lg-none d-block"></i> <input type="text" class="form-control search-form-control ml-lg-auto" placeholder="Search..."> </form> </li> <li class="nav-item d-lg-block d-none"> <form class="form-inline form-inline search animated-search" role="search"> <i class="flaticon-search-1 d-lg-none d-block"></i> <input type="text" class="form-control search-form-control" placeholder="Search here..."> </form> </li> </ul> <ul class="navbar-nav flex-row ml-lg-auto"> <li class="nav-item dropdown language-dropdown ml-4 mr-4 pr-3 pl-3 align-self-center d-lg-inline-block d-none"> <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="flagDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="">EN</span> </a> <div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="flagDropdown"> <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/fr.svg" class="flag-width" alt="">  FR</a> <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/jp.svg" class="flag-width" alt="">  JP</a> <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ru.svg" class="flag-width" alt="">  RU</a> <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ca.svg" class="flag-width" alt="">  EN</a> </div> </li> <li class="nav-item dropdown message-dropdown ml-lg-4 mr-lg-4 d-sm-block d-none align-self-center"> <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="message-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="icon flaticon-mail-25"></span><span class="badge badge-primary">13</span> </a> <div class="dropdown-menu position-absolute p-0 eq-animated eq-fadeInUp" aria-labelledby="message-dropdown"> <div class=""> <a class="dropdown-item"> <div class=""> <div class="media notification-new"> <div class="usr-img align-self-center mr-3"> <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <p class="meta-user-name mr-3 mb-0">Kara Young</p> <p class="meta-time align-self-center mb-0">04.02.19</p> </div> <p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p> </div> </div> </div> </a> <a class="dropdown-item"> <div class=""> <div class="media notification-new"> <div class="notification-icon align-self-center mr-3"> <i class="flaticon-mailbox"></i> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <p class="meta-title mr-3 mb-0">1 new email</p> <p class="meta-time align-self-center mb-0">04.02.19</p> </div> <p class="message-text mb-0 ">Anderson.Daisy@mail.com</p> </div> </div> </div> </a> <a class="dropdown-item"> <div class=""> <div class="media"> <div class="usr-img align-self-center mr-3"> <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile"> </div> <div class="media-body"> <div class="d-flex justify-content-between"> <p class="meta-user-name mr-3 mb-0">Oscar Garner</p> <p class="meta-time align-self-center mb-0">04.02.19</p> </div> <p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p> </div> </div> </div> </a> </div> </div> </li> <li class="nav-item dropdown notification-dropdown ml-3 mr-lg-4 align-self-center"> <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="icon flaticon-bell-4"></span><span class="badge badge-success">15</span> </a> <div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="notification-dropdown"> <div class="notification-scroll"> <div class="dropdown-item"> <a href=""> <div class="media"> <div class="user-profile"> <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid"> </div> <div class="media-body"> <span>Alan Green</span> </div> </div> </a> </div> <div class="dropdown-item"> <a href=""> <div class="media"> <div class="user-profile"> <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid"> </div> <div class="media-body"> <span>Irene Collins</span> </div> </div> </a> </div> <div class="dropdown-item"> <a href=""> <div class="media"> <div class="user-profile"> <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid"> </div> <div class="media-body"> <span>Sonia Shaw</span> </div> </div> </a> </div> <div class="dropdown-item"> <a href=""> <div class="media"> <div class="user-profile"> <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid"> </div> <div class="media-body"> <span>Xavier</span> </div> </div> </a> </div> </div> </div> </li> <li class="nav-item dropdown user-profile-dropdown pl-4 pr-lg-0 pr-2 ml-lg-2 mr-lg-4 align-self-center"> <a href="javascript:void(0);" class="nav-link dropdown-toggle user"> <div class="user-profile d-lg-block d-none"> <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid"> </div> <i class="flaticon-user-7 d-lg-none d-block"></i> </a> </li> </ul> </header>   <div class="main-container" id="container"> <div class="overlay"></div> <div class="ps-overlay"></div> <div class="search-overlay"></div>  <div class="modernSidebar-nav header navbar"> <div class=""> <nav id="modernSidebar"> <ul class="menu-categories pl-0 m-0" id="topAccordion"> <li class="menu"> <a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> <div class=""> <i class="flaticon-computer-6"></i> <span>Dashboard</span> </div> </a> <div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="dashboard" data-parent="#topAccordion"> <ul class="submenu-scroll"> <li> <ul class="list-unstyled sub-submenu" id="dashboards"> <li> <a href="index.html"> <div><i class="flaticon-computer-4"></i> Default</div> </a> </li> <li> <a href="ecommerce_dashboard.html"> <div><i class="flaticon-cart-2"></i> Ecommerce</div> </a> </li> <li> <a href="accounting_dashboard.html"> <div><i class="flaticon-chart-line"></i> Accounting</div> </a> </li> <li> <a href="analytics_dashboard.html"> <div><i class="flaticon-computer-2"></i> Analytics</div> </a> </li> <li> <a href="car_dashboard.html"> <div><i class="flaticon-car"></i> Car</div> </a> </li> <li> <a href="classic_dashboard.html"> <div><i class="flaticon-computer-8"></i> Classic</div> </a> </li> <li> <a href="stock_market_dashboard.html"> <div><i class="flaticon-up-chart"></i> Stock Market</div> </a> </li> <li> <a href="cryptocurrency_dashboard.html"> <div><i class="flaticon-bitcoin-circle"></i> Cryptocurrency</div> </a> </li> </ul> </li> </ul> </div> </li> <li class="menu"> <a href="#uiAndComponents" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed"> <div class=""> <i class="flaticon-3d-cube"></i> <span>Components</span> </div> </a> <div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="uiAndComponents" data-parent="#topAccordion"> <div class="submenu-scroll"> <ul class="list-unstyled"> <li> <a href="#ui-features" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">UI KIT</span> </a> <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ui-features"> <li> <a href="ui_helper_classes.html"> Helper Classes </a> </li> <li> <a href="ui_color_library.html"> Color Library </a> </li> <li> <a href="ui_grid.html"> Grid System </a> </li> <li> <a href="ui_typography.html"> Typography </a> </li> <li> <a href="ui_shadows.html"> Shadow </a> </li> <li> <a href="ui_miscellaneous.html"> Miscellaneous </a> </li> <li> <a href="ui_pagination.html">Pagination</a> </li> <li> <a href="ui_alert.html"> Alerts </a> </li> <li> <a href="ui_tooltips_and_popovers.html"> Tooltips And Popovers </a> </li> <li> <a href="ui_loader.html"> Loaders </a> </li> <li class="sub-sub-submenu-list"> <a href="#ui-buttons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Buttons <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-buttons" data-parent="#ui-features"> <li> <a href="ui_buttons.html"> Bootstrap </a> </li> <li> <a href="ui_creative.html"> Creative </a> </li> <li> <a href="ui_switches.html"> Switches </a> </li> <li> <a href="ui_social_button.html"> Social </a> </li> </ul> </li> <li> <a href="ui_sweetalert.html"> Sweet Alerts </a> </li> <li class="sub-sub-submenu-list"> <a href="#ui-font-icons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Font Icons <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-font-icons" data-parent="#ui-features"> <li> <a href="ui_flaticon_icon.html"> Flaticon </a> </li> <li> <a href="ui_linea_icon.html"> Linea </a> </li> <li> <a href="ui_themify_icon.html"> Themify </a> </li> <li> <a href="ui_pixeden_icon.html"> Pixeden </a> </li> <li> <a href="ui_fontawesome_icon.html"> Fontawesome </a> </li> <li> <a href="ui_metro_icon.html"> Metro </a> </li> <li> <a href="ui_weather_icon.html"> Weather </a> </li> </ul> </li> <li> <a href="ui_tabs.html"> Tabs </a> </li> <li> <a href="ui_accordion.html"> Accordions </a> </li> <li> <a href="ui_modal.html"> Modals </a> </li> <li> <a href="ui_sliders.html"> Range Sliders </a> </li> <li> <a href="ui_timeline.html"> Timeline </a> </li> <li> <a href="ui_tree.html"> Tree View </a> </li> <li class="sub-sub-submenu-list"> <a href="#ui-progress" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Progress Bar <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-progress" data-parent="#ui-features"> <li> <a href="ui_bootstrap_progress_bar.html"> Bootstrap </a> </li> <li> <a href="ui_material_progress_bar.html"> Custom </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#ui-notification" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Notifications <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-notification" data-parent="#ui-features"> <li> <a href="ui_toastr.html"> Toastr </a> </li> <li> <a href="ui_notification.html"> Creative </a> </li> <li> <a href="ui_snackbar.html"> Snackbar </a> </li> </ul> </li> <li> <a href="ui_session_timeout.html"> Session Timeout </a> </li> <li> <a href="ui_media_object.html"> Media Object </a> </li> <li> <a href="ui_list_group.html"> List Group </a> </li> <li> <a href="ui_nestable_list.html"> Nested List </a> </li> </ul> </li> </ul> <ul class="list-unstyled"> <li> <a href="#components" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">COMPONENTS</span> </a> <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="components"> <li> <a href="component_portlet.html"> Portlets </a> </li> <li> <a href="component_keypad.html"> Keypad </a> </li> <li class="sub-sub-submenu-list"> <a href="#component-carousel" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Carousel <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-carousel" data-parent="#components"> <li> <a href="component_bootstrap_carousel.html">Bootstrap</a> </li> <li> <a href="component_carousel.html">Metro</a> </li> <li> <a href="component_sliders.html">Swiper</a> </li> </ul> </li> <li> <a href="component_rating.html"> Rating </a> </li> <li> <a href="component_blockui.html"> Block UI </a> </li> <li> <a href="component_popup.html"> Popup </a> </li> <li> <a href="component_scroll_bars_basic.html"> Scrollbar </a> </li> <li> <a href="component_todo_list.html"> Todo List </a> </li> <li> <a href="component_scrollspy.html"> Scrollspy </a> </li> <li> <a href="component_countdown.html"> Countdown </a> </li> <li> <a href="component_counter.html"> Counter </a> </li> <li> <a href="component_datetime_picker.html"> Date & Time Picker </a> </li> <li> <a href="component_lightbox.html"> LightBox </a> </li> <li> <a href="component_color_picker.html"> Color Picker </a> </li> <li class="sub-sub-submenu-list"> <a href="#component-media" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Media <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-media" data-parent="#components"> <li> <a href="component_video_player.html"> Video Player </a> </li> <li> <a href="component_audio_player.html"> Audio Player </a> </li> </ul> </li> <li> <a href="component_clipboard.html"> Clipboard </a> </li> <li> <a href="component_typeahead.html"> Typeahead </a> </li> <li class="sub-sub-submenu-list"> <a href="#component-search" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Search <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-search" data-parent="#components"> <li> <a href="component_search_multiple.html"> Multiple </a> </li> <li> <a href="component_search_web.html"> Web </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#component-animation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Animations <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-animation" data-parent="#components"> <li> <a href="component_animation_buttons.html"> Buttons </a> </li> <li> <a href="component_animation_css.html"> CSS </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#component-img-crop" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Image Cropping <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-img-crop" data-parent="#components"> <li> <a href="component_image_cropping_basic.html"> Basic </a> </li> <li> <a href="component_image_cropping_advanced.html"> Advanced </a> </li> </ul> </li> </ul> </li> </ul> <ul class="list-unstyled"> <li> <a href="#element" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ELEMENTS</span> </a> <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="element"> <li> <a href="element_steps.html"> Steps </a> </li> <li> <a href="element_ribbon.html"> Ribbons </a> </li> <li> <a href="element_testimonial.html"> Testimonials </a> </li> <li> <a href="element_team.html"> Team </a> </li> <li> <a href="element_contacts.html"> Contacts </a> </li> <li> <a href="element_blog.html"> Blog Elements </a> </li> <li> <a href="element_pricing_table.html"> Pricing Tables </a> </li> </ul> </li> </ul> </div> </div> </li> <li class="menu"> <a href="#tables-forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed"> <div class=""> <i class="flaticon-table"></i> <span>Tables & Forms</span> </div> </a> <div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="tables-forms" data-parent="#topAccordion"> <div class="submenu-scroll"> <ul class="list-unstyled"> <li> <a href="#tables" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">TABLES</span> </a> <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="tables"> <li> <a href="table_basic.html"> Basic </a> </li> <li> <a href="table_tablesaw.html"> Tablesaw</a> </li> <li> <a href="table_sticky_table_header.html"> Sticky Headers</a> </li> <li class="sub-sub-submenu-list"> <a href="#tables-editable" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Editable <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-editable" data-parent="#tables"> <li> <a href="table_jq_spreadsheet.html"> Spreadsheet </a> </li> <li> <a href="table_jquery_tabledit.html"> TableEdit </a> </li> <li> <a href="table_editablegrid.html"> Editable Grid </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#tables-data-tables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> DataTables <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-data-tables" data-parent="#tables"> <li> <a href="table_dt_zero_configuration.html"> Basic </a> </li> <li> <a href="table_dt_ordering_sorting.html"> Order Sorting </a> </li> <li> <a href="table_dt_multi-column_ordering.html"> Multi-Column </a> </li> <li> <a href="table_dt_multiple_tables.html"> Multiple Tables</a> </li> <li> <a href="table_dt_alternative_pagination.html"> Alternative Pagination</a> </li> <li> <a href="table_dt_miscellaneous.html"> Miscellaneous </a> </li> <li> <a href="table_dt_custom.html"> Custom </a> </li> <li> <a href="table_dt_scrollable.html"> Scrollable </a> </li> <li> <a href="table_dt_range_search.html"> Range Search </a> </li> <li> <a href="table_dt_html5.html"> HTML5 Export </a> </li> <li> <a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a> </li> </ul> </li> </ul> </li> </ul> <ul class="list-unstyled"> <li> <a href="#forms" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">FORMS</span> </a> <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="forms" style=""> <li class="sub-sub-submenu-list"> <a href="#forms-bootstrap" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Bootstrap <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-bootstrap" data-parent="#forms"> <li> <a href="form_bootstrap_basic.html"> Basic </a> </li> <li> <a href="form_bootstrap_rounded.html"> Rounded </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#forms-input-group" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Input Group <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-input-group" data-parent="#forms"> <li> <a href="form_input_group_basic.html"> Basic </a> </li> <li> <a href="form_input_group_rounded.html"> Rounded </a> </li> </ul> </li> <li> <a href="form_bootstrap_material.html"> Material </a> </li> <li class="sub-sub-submenu-list"> <a href="#forms-layout" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Layouts <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-layout" data-parent="#forms"> <li> <a href="form_layouts.html"> Basic </a> </li> <li> <a href="form_layouts_rounded.html"> Rounded </a> </li> </ul> </li> <li class="sub-sub-submenu-list"> <a href="#forms-validation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Validation <i class="flaticon-right-arrow"></i> </a> <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-validation" data-parent="#forms"> <li> <a href="form_validation.html"> Bootstrap </a> </li> <li> <a href="form_jqvalidation.html"> jQuery </a> </li> <li> <a href="form_validation_material.html"> Custom </a> </li> </ul> </li> <li> <a href="form_input_mask.html"> Input Mask </a> </li> <li> <a href="form_bootstrap_select.html"> Bootstrap Select </a> </li> <li> <a href="form_select2.html"> Select2 </a> </li> <li> <a href="form_bootstrap_touchspin.html"> TouchSpin </a> </li> <li> <a href="form_multiselect.html"> Multi Select </a> </li> <li> <a href="form_maxlength.html"> Maxlength </a> </li> <li> <a href="form_repeater.html"> Repeater </a> </li> <li>