You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1253 lines
70 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Profile | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
<!-- ========== Left Sidebar Start ========== -->
<div class="left-side-menu">
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm.png" alt="" height="16">
</span>
</a>
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm_dark.png" alt="" height="16">
</span>
</a>
<div class="h-100" id="left-side-menu-container" data-simplebar>
<!--- Sidemenu -->
<ul class="metismenu side-nav">
<li class="side-nav-title side-nav-item">Navigation</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-home-alt"></i>
<span class="badge badge-success float-right">4</span>
<span> Dashboards </span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="dashboard-analytics.html">Analytics</a>
</li>
<li>
<a href="dashboard-crm.html">CRM</a>
</li>
<li>
<a href="index.html">Ecommerce</a>
</li>
<li>
<a href="dashboard-projects.html">Projects</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Apps</li>
<li class="side-nav-item">
<a href="apps-calendar.html" class="side-nav-link">
<i class="uil-calender"></i>
<span> Calendar </span>
</a>
</li>
<li class="side-nav-item">
<a href="apps-chat.html" class="side-nav-link">
<i class="uil-comments-alt"></i>
<span> Chat </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-store"></i>
<span> Ecommerce </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-ecommerce-products.html">Products</a>
</li>
<li>
<a href="apps-ecommerce-products-details.html">Products Details</a>
</li>
<li>
<a href="apps-ecommerce-orders.html">Orders</a>
</li>
<li>
<a href="apps-ecommerce-orders-details.html">Order Details</a>
</li>
<li>
<a href="apps-ecommerce-customers.html">Customers</a>
</li>
<li>
<a href="apps-ecommerce-shopping-cart.html">Shopping Cart</a>
</li>
<li>
<a href="apps-ecommerce-checkout.html">Checkout</a>
</li>
<li>
<a href="apps-ecommerce-sellers.html">Sellers</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-envelope"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-email-inbox.html">Inbox</a>
</li>
<li>
<a href="apps-email-read.html">Read Email</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-briefcase"></i>
<span> Projects </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-projects-list.html">List</a>
</li>
<li>
<a href="apps-projects-details.html">Details</a>
</li>
<li>
<a href="apps-projects-gantt.html">Gantt <span class="badge badge-pill badge-light-lighten font-10 float-right">New</span></a>
</li>
<li>
<a href="apps-projects-add.html">Create Project <span class="badge badge-pill badge-success-lighten font-10 float-right">New</span></a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="apps-social-feed.html" class="side-nav-link">
<i class="uil-rss"></i>
<span> Social Feed </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-clipboard-alt"></i>
<span> Tasks </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-tasks.html">List</a>
</li>
<li>
<a href="apps-tasks-details.html">Details</a>
</li>
<li>
<a href="apps-kanban.html">Kanban Board</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Custom</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-copy-alt"></i>
<span> Pages </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="pages-profile.html">Profile</a>
</li>
<li>
<a href="pages-profile-2.html">Profile 2</a>
</li>
<li>
<a href="pages-invoice.html">Invoice</a>
</li>
<li>
<a href="pages-faq.html">FAQ</a>
</li>
<li>
<a href="pages-pricing.html">Pricing</a>
</li>
<li>
<a href="pages-maintenance.html">Maintenance</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Authentication
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-login.html">Login</a>
</li>
<li>
<a href="pages-login-2.html">Login 2</a>
</li>
<li>
<a href="pages-register.html">Register</a>
</li>
<li>
<a href="pages-register-2.html">Register 2</a>
</li>
<li>
<a href="pages-logout.html">Logout</a>
</li>
<li>
<a href="pages-logout-2.html">Logout 2</a>
</li>
<li>
<a href="pages-recoverpw.html">Recover Password</a>
</li>
<li>
<a href="pages-recoverpw-2.html">Recover Password 2</a>
</li>
<li>
<a href="pages-lock-screen.html">Lock Screen</a>
</li>
<li>
<a href="pages-lock-screen-2.html">Lock Screen 2</a>
</li>
<li>
<a href="pages-confirm-mail.html">Confirm Mail</a>
</li>
<li>
<a href="pages-confirm-mail-2.html">Confirm Mail 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Error
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-404.html">Error 404</a>
</li>
<li>
<a href="pages-404-alt.html">Error 404-alt</a>
</li>
<li>
<a href="pages-500.html">Error 500</a>
</li>
</ul>
</li>
<li>
<a href="pages-starter.html">Starter Page</a>
</li>
<li>
<a href="pages-preloader.html">With Preloader</a>
</li>
<li>
<a href="pages-timeline.html">Timeline</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="landing.html" target="_blank" class="side-nav-link">
<i class="uil-globe"></i>
<span class="badge badge-light float-right">New</span>
<span> Landing </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-window"></i>
<span> Layouts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="layouts-horizontal.html">Horizontal</a>
</li>
<li>
<a href="layouts-detached.html">Detached</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item mt-1">Components</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-box"></i>
<span> Base UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="ui-accordions.html">Accordions</a>
</li>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-avatars.html">Avatars</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-cards.html">Cards</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-embed-video.html">Embed Video</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-list-group.html">List Group</a>
</li>
<li>
<a href="ui-media-object.html">Media Object</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-notifications.html">Notifications</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-ribbons.html">Ribbons</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-package"></i>
<span> Extended UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="extended-dragula.html">Dragula</a>
</li>
<li>
<a href="extended-range-slider.html">Range Slider</a>
</li>
<li>
<a href="extended-ratings.html">Ratings</a>
</li>
<li>
<a href="extended-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="extended-scrollspy.html">Scrollspy</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="widgets.html" class="side-nav-link">
<i class="uil-layer-group"></i>
<span> Widgets </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-streering"></i>
<span> Icons </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="icons-dripicons.html">Dripicons</a>
</li>
<li>
<a href="icons-mdi.html">Material Design</a>
</li>
<li>
<a href="icons-unicons.html">Unicons</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-document-layout-center"></i>
<span> Forms </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="form-elements.html">Basic Elements</a>
</li>
<li>
<a href="form-advanced.html">Form Advanced</a>
</li>
<li>
<a href="form-validation.html">Validation</a>
</li>
<li>
<a href="form-wizard.html">Wizard</a>
</li>
<li>
<a href="form-fileuploads.html">File Uploads</a>
</li>
<li>
<a href="form-editors.html">Editors</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-chart"></i>
<span> Charts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Apex Charts
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="charts-apex-area.html">Area</a>
</li>
<li>
<a href="charts-apex-bar.html">Bar</a>
</li>
<li>
<a href="charts-apex-bubble.html">Bubble</a>
</li>
<li>
<a href="charts-apex-candlestick.html">Candlestick</a>
</li>
<li>
<a href="charts-apex-column.html">Column</a>
</li>
<li>
<a href="charts-apex-heatmap.html">Heatmap</a>
</li>
<li>
<a href="charts-apex-line.html">Line</a>
</li>
<li>
<a href="charts-apex-mixed.html">Mixed</a>
</li>
<li>
<a href="charts-apex-pie.html">Pie</a>
</li>
<li>
<a href="charts-apex-radar.html">Radar</a>
</li>
<li>
<a href="charts-apex-radialbar.html">RadialBar</a>
</li>
<li>
<a href="charts-apex-scatter.html">Scatter</a>
</li>
<li>
<a href="charts-apex-sparklines.html">Sparklines</a>
</li>
</ul>
</li>
<li>
<a href="charts-brite.html">Britecharts</a>
</li>
<li>
<a href="charts-chartjs.html">Chartjs</a>
</li>
<li>
<a href="charts-sparkline.html">Sparklines</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-table"></i>
<span> Tables </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="tables-basic.html">Basic Tables</a>
</li>
<li>
<a href="tables-datatable.html">Data Tables</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-location-point"></i>
<span> Maps </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="maps-google.html">Google Maps</a>
</li>
<li>
<a href="maps-vector.html">Vector Maps</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-folder-plus"></i>
<span> Multi Level </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Second Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Third Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Item 2
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-forth-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 2.1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Help Box -->
<div class="help-box text-white text-center">
<a href="javascript: void(0);" class="float-right close-btn text-white">
<i class="mdi mdi-close"></i>
</a>
<img src="assets/images/help-icon.svg" height="90" alt="Helper Icon Image" />
<h5 class="mt-3">Unlimited Access</h5>
<p class="mb-3">Upgrade to plan to get access to unlimited reports</p>
<a href="javascript: void(0);" class="btn btn-outline-light btn-sm">Upgrade</a>
</div>
<!-- end Help Box -->
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Topbar Start -->
<div class="navbar-custom">
<ul class="list-unstyled topbar-right-menu float-right mb-0">
<li class="notification-list">
<a class="nav-link right-bar-toggle" href="javascript: void(0);">
<i class="dripicons-gear noti-icon"></i>
</a>
</li>
<li class="dropdown notification-list topbar-dropdown">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us.jpg" alt="user-image" class="mr-0 mr-sm-1" height="12">
<span class="align-middle d-none d-sm-inline-block">English</span> <i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/germany.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">German</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/italy.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Italian</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/spain.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Spanish</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/russia.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Russian</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="noti-icon-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5 class="m-0">
<span class="float-right">
<a href="javascript: void(0);" class="text-dark">
<small>Clear All</small>
</a>
</span>Notification
</h5>
</div>
<div style="max-height: 230px;" data-simplebar>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">1 min ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-account-plus"></i>
</div>
<p class="notify-details">New user registered.
<small class="text-muted">5 hours ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Cristina Pride</p>
<p class="text-muted mb-0 user-msg">
<small>Hi, How are you? What about our next meeting</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">4 days ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Karen Robinson</p>
<p class="text-muted mb-0 user-msg">
<small>Wow ! this admin looks good and awesome design</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-heart"></i>
</div>
<p class="notify-details">Carlos Crouch liked
<b>Admin</b>
<small class="text-muted">13 days ago</small>
</p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
View All
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user arrow-none mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<span class="account-user-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
</span>
<span>
<span class="account-user-name">Dominic Keller</span>
<span class="account-position">Founder</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
<!-- item-->
<div class=" dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome !</h6>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-circle mr-1"></i>
<span>My Account</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-edit mr-1"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lifebuoy mr-1"></i>
<span>Support</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lock-outline mr-1"></i>
<span>Lock Screen</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-logout mr-1"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
<button class="button-menu-mobile open-left disable-btn">
<i class="mdi mdi-menu"></i>
</button>
<div class="app-search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="mdi mdi-magnify"></span>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</div>
<!-- end Topbar -->
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
<li class="breadcrumb-item active">Profile</li>
</ol>
</div>
<h4 class="page-title">Profile</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-sm-12">
<!-- Profile -->
<div class="card bg-primary">
<div class="card-body profile-user-box">
<div class="row">
<div class="col-sm-8">
<div class="media">
<span class="float-left m-2 mr-4"><img src="assets/images/users/avatar-2.jpg" style="height: 100px;" alt="" class="rounded-circle img-thumbnail"></span>
<div class="media-body">
<h4 class="mt-1 mb-1 text-white">Michael Franklin</h4>
<p class="font-13 text-white-50"> Authorised Brand Seller</p>
<ul class="mb-0 list-inline text-light">
<li class="list-inline-item mr-3">
<h5 class="mb-1">$ 25,184</h5>
<p class="mb-0 font-13 text-white-50">Total Revenue</p>
</li>
<li class="list-inline-item">
<h5 class="mb-1">5482</h5>
<p class="mb-0 font-13 text-white-50">Number of Orders</p>
</li>
</ul>
</div> <!-- end media-body-->
</div>
</div> <!-- end col-->
<div class="col-sm-4">
<div class="text-center mt-sm-0 mt-3 text-sm-right">
<button type="button" class="btn btn-light">
<i class="mdi mdi-account-edit mr-1"></i> Edit Profile
</button>
</div>
</div> <!-- end col-->
</div> <!-- end row -->
</div> <!-- end card-body/ profile-user-box-->
</div><!--end profile/ card -->
</div> <!-- end col-->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-4">
<!-- Personal-Information -->
<div class="card">
<div class="card-body">
<h4 class="header-title mt-0 mb-3">Seller Information</h4>
<p class="text-muted font-13">
Hye, Im Michael Franklin residing in this beautiful world. I create websites and mobile apps with great UX and UI design. I have done work with big companies like Nokia, Google and Yahoo. Meet me or Contact me for any queries. One Extra line for filling space. Fill as many you want.
</p>
<hr/>
<div class="text-left">
<p class="text-muted"><strong>Full Name :</strong> <span class="ml-2">Michael A. Franklin</span></p>
<p class="text-muted"><strong>Mobile :</strong><span class="ml-2">(+12) 123 1234 567</span></p>
<p class="text-muted"><strong>Email :</strong> <span class="ml-2">coderthemes@gmail.com</span></p>
<p class="text-muted"><strong>Location :</strong> <span class="ml-2">USA</span></p>
<p class="text-muted"><strong>Languages :</strong>
<span class="ml-2"> English, German, Spanish </span>
</p>
<p class="text-muted mb-0"><strong>Elsewhere :</strong>
<a class="d-inline-block ml-2 text-muted" title="" data-placement="top" data-toggle="tooltip" href="" data-original-title="Facebook"><i class="mdi mdi-facebook"></i></a>
<a class="d-inline-block ml-2 text-muted" title="" data-placement="top" data-toggle="tooltip" href="" data-original-title="Twitter"><i class="mdi mdi-twitter"></i></a>
<a class="d-inline-block ml-2 text-muted" title="" data-placement="top" data-toggle="tooltip" href="" data-original-title="Skype"><i class="mdi mdi-skype"></i></a>
</p>
</div>
</div>
</div>
<!-- Personal-Information -->
<!-- Toll free number box-->
<div class="card text-white bg-info overflow-hidden">
<div class="card-body">
<div class="toll-free-box text-center">
<h4> <i class="mdi mdi-deskphone"></i> Toll Free : 1-234-567-8901</h4>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
<!-- End Toll free number box-->
<!-- Messages-->
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Messages</h4>
<div class="inbox-widget">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/users/avatar-2.jpg" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Tomaslau</p>
<p class="inbox-item-text">I've finished it! See you so...</p>
<p class="inbox-item-date">
<a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
</p>
</div>
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/users/avatar-3.jpg" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Stillnotdavid</p>
<p class="inbox-item-text">This theme is awesome!</p>
<p class="inbox-item-date">
<a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
</p>
</div>
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Kurafire</p>
<p class="inbox-item-text">Nice to meet you</p>
<p class="inbox-item-date">
<a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
</p>
</div>
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/users/avatar-5.jpg" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Shahedk</p>
<p class="inbox-item-text">Hey! there I'm available...</p>
<p class="inbox-item-date">
<a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
</p>
</div>
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/users/avatar-6.jpg" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Adhamdannaway</p>
<p class="inbox-item-text">This theme is awesome!</p>
<p class="inbox-item-date">
<a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
</p>
</div>
</div> <!-- end inbox-widget -->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-lg-8">
<!-- Chart-->
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Orders & Revenue</h4>
<div style="height: 260px;" class="chartjs-chart">
<canvas id="high-performing-product"></canvas>
</div>
</div>
</div>
<!-- End Chart-->
<div class="row">
<div class="col-sm-4">
<div class="card tilebox-one">
<div class="card-body">
<i class="dripicons-basket float-right text-muted"></i>
<h6 class="text-muted text-uppercase mt-0">Orders</h6>
<h2 class="m-b-20">1,587</h2>
<span class="badge badge-primary"> +11% </span> <span class="text-muted">From previous period</span>
</div> <!-- end card-body-->
</div> <!--end card-->
</div><!-- end col -->
<div class="col-sm-4">
<div class="card tilebox-one">
<div class="card-body">
<i class="dripicons-box float-right text-muted"></i>
<h6 class="text-muted text-uppercase mt-0">Revenue</h6>
<h2 class="m-b-20">$<span>46,782</span></h2>
<span class="badge badge-danger"> -29% </span> <span class="text-muted">From previous period</span>
</div> <!-- end card-body-->
</div> <!--end card-->
</div><!-- end col -->
<div class="col-sm-4">
<div class="card tilebox-one">
<div class="card-body">
<i class="dripicons-jewel float-right text-muted"></i>
<h6 class="text-muted text-uppercase mt-0">Product Sold</h6>
<h2 class="m-b-20">1,890</h2>
<span class="badge badge-primary"> +89% </span> <span class="text-muted">Last year</span>
</div> <!-- end card-body-->
</div> <!--end card-->
</div><!-- end col -->
</div>
<!-- end row -->
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">My Products</h4>
<div class="table-responsive">
<table class="table table-hover table-centered mb-0">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>ASOS Ridley High Waist</td>
<td>$79.49</td>
<td><span class="badge badge-primary">82 Pcs</span></td>
<td>$6,518.18</td>
</tr>
<tr>
<td>Marco Lightweight Shirt</td>
<td>$128.50</td>
<td><span class="badge badge-primary">37 Pcs</span></td>
<td>$4,754.50</td>
</tr>
<tr>
<td>Half Sleeve Shirt</td>
<td>$39.99</td>
<td><span class="badge badge-primary">64 Pcs</span></td>
<td>$2,559.36</td>
</tr>
<tr>
<td>Lightweight Jacket</td>
<td>$20.00</td>
<td><span class="badge badge-primary">184 Pcs</span></td>
<td>$3,680.00</td>
</tr>
<tr>
<td>Marco Shoes</td>
<td>$28.49</td>
<td><span class="badge badge-primary">69 Pcs</span></td>
<td>$1,965.81</td>
</tr>
</tbody>
</table>
</div> <!-- end table responsive-->
</div> <!-- end col-->
</div> <!-- end row-->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div> <!-- container -->
</div> <!-- content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
2018 - 2020 © Hyper - Coderthemes.com
</div>
<div class="col-md-6">
<div class="text-md-right footer-links d-none d-md-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Right Sidebar -->
<div class="right-bar">
<div class="rightbar-title">
<a href="javascript:void(0);" class="right-bar-toggle float-right">
<i class="dripicons-cross noti-icon"></i>
</a>
<h5 class="m-0">Settings</h5>
</div>
<div class="rightbar-content h-100" data-simplebar>
<div class="p-3">
<div class="alert alert-warning" role="alert">
<strong>Customize </strong> the overall color scheme, sidebar menu, etc.
</div>
<!-- Settings -->
<h5 class="mt-3">Color Scheme</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="light"
id="light-mode-check" checked />
<label class="custom-control-label" for="light-mode-check">Light Mode</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="dark"
id="dark-mode-check" />
<label class="custom-control-label" for="dark-mode-check">Dark Mode</label>
</div>
<!-- Width -->
<h5 class="mt-4">Width</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="fluid" id="fluid-check" checked />
<label class="custom-control-label" for="fluid-check">Fluid</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="boxed" id="boxed-check" />
<label class="custom-control-label" for="boxed-check">Boxed</label>
</div>
<!-- Left Sidebar-->
<h5 class="mt-4">Left Sidebar</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="default" id="default-check"
checked />
<label class="custom-control-label" for="default-check">Default</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="light" id="light-check" />
<label class="custom-control-label" for="light-check">Light</label>
</div>
<div class="custom-control custom-switch mb-3">
<input type="radio" class="custom-control-input" name="theme" value="dark" id="dark-check" />
<label class="custom-control-label" for="dark-check">Dark</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="fixed" id="fixed-check"
checked />
<label class="custom-control-label" for="fixed-check">Fixed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="condensed"
id="condensed-check" />
<label class="custom-control-label" for="condensed-check">Condensed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="scrollable"
id="scrollable-check" />
<label class="custom-control-label" for="scrollable-check">Scrollable</label>
</div>
<button class="btn btn-primary btn-block mt-4" id="resetBtn">Reset to Default</button>
<a href="https://themes.getbootstrap.com/product/hyper-responsive-admin-dashboard-template/"
class="btn btn-danger btn-block mt-3" target="_blank"><i class="mdi mdi-basket mr-1"></i> Purchase Now</a>
</div> <!-- end padding-->
</div>
</div>
<div class="rightbar-overlay"></div>
<!-- /Right-bar -->
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- third party js -->
<script src="assets/js/vendor/Chart.bundle.min.js"></script>
<!-- third party js ends -->
<!-- demo app -->
<script src="assets/js/pages/demo.profile.js"></script>
<!-- end demo js-->
</body>
</html>