Profile pages added

This commit is contained in:
2019-03-04 19:40:09 +00:00
parent c3154702f6
commit c9c9a9c61d
4 changed files with 1158 additions and 10 deletions
@@ -14,9 +14,9 @@ class Profile extends Provider_Controller {
$this->renderProviderSecurePage('profile/inbox', $data);
}
public function setttings() {
public function settings() {
$data = array();
$this->renderProviderSecurePage('profile/setttings', $data);
$this->renderProviderSecurePage('profile/settings', $data);
}
}
@@ -0,0 +1,646 @@
<!-- begin app-container -->
<div class="app-container">
<!-- begin app-nabar -->
<aside class="app-navbar">
<!-- begin sidebar-nav -->
<div class="sidebar-nav scrollbar scroll_light">
<ul class="metismenu " id="sidebarNav">
<li class="nav-static-title">Personal</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false">
<i class="nav-icon ti ti-rocket"></i>
<span class="nav-title">Dashboards</span>
<span class="nav-label label label-danger">9</span>
</a>
<ul aria-expanded="false">
<li> <a href='index.html'>Default</a> </li>
<li> <a href='index-ecommerce.html'>Ecommerce</a> </li>
<li> <a href='index-car-dealer.html'>Car Dealer</a> </li>
<li> <a href='index-stock-market.html'>Stock Market</a> </li>
<li> <a href='index-dating.html'>Dating</a> </li>
<li> <a href='index-job-portal.html'>Job Portal</a> </li>
<li> <a href='index-crm.html'>CRM</a> </li>
<li> <a href='index-real-estate.html'>Real Estate</a> </li>
<li> <a href='index-crypto-currency.html'>Crypto Currency</a> </li>
</ul>
</li>
<li><a href="app-chat.html" aria-expanded="false"><i class="nav-icon ti ti-comment"></i><span class="nav-title">Chat</span></a> </li>
<li><a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-calendar"></i><span class="nav-title">Calendar</span></a>
<ul aria-expanded="false">
<li> <a href='calendar-full.html'>Full Calendar</a> </li>
<li> <a href='calendar-list.html'>Calendar List</a> </li>
</ul>
</li>
<li class="active"><a href="mail-inbox.html" aria-expanded="false"><i class="nav-icon ti ti-email"></i><span class="nav-title">Mail</span></a> </li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-bag"></i> <span class="nav-title">UI Kit</span></a>
<ul aria-expanded="false">
<li> <a href="ui-alerts.html">Alerts</a> </li>
<li> <a href="ui-accordions.html">Accordions</a> </li>
<li> <a class="has-arrow" href="javascript: void(0);">Buttons</a>
<ul aria-expanded="false">
<li> <a href="ui-button.html">Default Buttons</a> </li>
<li> <a href="ui-button-icon.html">Icon Buttons</a> </li>
<li> <a href="ui-button-block.html">Block Buttons</a> </li>
<li> <a href="ui-button-social.html">Social Buttons</a> </li>
<li> <a href="ui-button-groups.html">Group Buttons</a> </li>
</ul>
</li>
<li> <a href="ui-badges.html">Badges</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-grid.html">Grid</a> </li>
<li> <a href="ui-list-group.html">List Group</a> </li>
<li> <a href="ui-lightbox.html">Light Box</a> </li>
<li> <a href="ui-modals.html">Modals</a> </li>
<li> <a href="ui-media.html">Media</a> </li>
<li> <a href="ui-nestable-list.html">Nestable List</a> </li>
<li> <a href="ui-pagination.html">Pagination</a> </li>
<li> <a href="ui-progressbars.html">Progress Bars</a> </li>
<li> <a href="ui-sweet-alert.html">Sweet Alert</a> </li>
<li> <a href="ui-tabs.html">Tabs</a> </li>
<li> <a href="ui-nav.html">Nav</a> </li>
<li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li>
<li> <a href="ui-typography.html">Typography</a> </li>
<li> <a href="ui-toastr.html">Toastr</a> </li>
<li> <a href="ui-video.html">Video</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-info"></i><span class="nav-title">Icons</span> </a>
<ul aria-expanded="false">
<li> <a href="icons-cryptocurrency.html">Cryptocurrency Icons</a> </li>
<li> <a href="icons-drip.html">Drip Icons</a> </li>
<li> <a href="icons-dash.html">Dash Icons</a> </li>
<li> <a href="icons-feather.html">Feather Icons</a> </li>
<li> <a href="icons-fontawesome.html">Font Awesome</a> </li>
<li> <a href="icons-ion.html">Ion Icons</a> </li>
<li> <a href="icons-weather.html">Weather Icons</a> </li>
<li> <a href="icons-material.html">Material Icons</a> </li>
<li> <a href="icons-themify.html">Themify Icons</a> </li>
</ul>
</li>
<li class="nav-static-title">Widgets, Tables & Layouts</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-layout-grid4-alt"></i> <span class="nav-title">Widgets</span> <span class="nav-label label label-success">New</span> </a>
<ul aria-expanded="false">
<li> <a href="widget-chart.html">Chart Widget</a> </li>
<li> <a href="widget-list.html">List Widget</a> </li>
<li> <a href="widget-social.html">Social Widget</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout-column3-alt"></i><span class="nav-title">Tables</span></a>
<ul aria-expanded="false">
<li> <a href="tables-basic.html">Basic Table</a> </li>
<li> <a href="tables-color.html">Color Table </a> </li>
<li> <a href="tables-datatable.html">Data Table</a> </li>
<li> <a href="tables-editable.html">Editable Table</a> </li>
<li> <a href="tables-export.html">Export Table</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout"></i> <span class="nav-title">Layouts</span></a>
<ul aria-expanded="false">
<li><a href="layout-mini.html">Sidebar Mini</a></li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-pie-chart"></i><span class="nav-title">Charts</span></a>
<ul aria-expanded="false">
<li> <a href="chart-apex.html">Apex Chart</a> </li>
<li> <a href="chart-flot.html">Flot Chart</a> </li>
<li> <a href="chart-morris.html">Morris Chart</a> </li>
<li> <a href="chart-chartist.html">Chartist Charts</a> </li>
<li> <a href="chart-chartjs.html">Chartjs Chart</a> </li>
<li> <a href="chart-c3.html">C3 Chart</a> </li>
<li> <a href="chart-sparkline.html">Sparkline Chart</a> </li>
<li> <a href="chart-knob.html">Knob Chart</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-pencil-alt"></i> <span class="nav-title">Forms</span> </a>
<ul aria-expanded="false">
<li> <a href="form-autonumeric.html">Autonumeric</a> </li>
<li> <a href="form-editors.html">Editors</a> </li>
<li> <a href="form-elements.html">Elements</a> </li>
<li> <a href="form-file-upload.html">Drop Zone
</a> </li>
<li> <a href="form-input-groups.html">Input Groups</a> </li>
<li> <a href="form-inputmask.html">Input Masks</a> </li>
<li> <a href="form-layouts.html">Forms Layouts</a> </li>
<li> <a href="form-listbox.html">Listbox</a> </li>
<li> <a href="form-pickers.html">Pickers</a> </li>
<li> <a href="form-range-slider.html">Range Slider</a> </li>
<li> <a href="form-selects.html">Selects</a> </li>
<li> <a href="form-switchers.html">Switchers</a> </li>
<li> <a href="form-validation.html">Validation</a> </li>
</ul>
</li>
<li class="nav-static-title">Extra Components</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-map-alt"></i><span class="nav-title">Maps</span></a>
<ul aria-expanded="false">
<li> <a href="maps-google.html">Google Maps</a> </li>
<li> <a href="maps-vector.html">Vector Maps</a> </li>
<li> <a href="maps-mapael.html">Mapael Maps</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layers"></i><span class="nav-title">Pages</span><span class="nav-label label label-primary">12</span></a>
<ul aria-expanded="false">
<li> <a href="page-account-settings.html">Account Settings</a> </li>
<li> <a href="page-clients.html">Clients</a> </li>
<li> <a href="page-contacts.html">Contacts</a> </li>
<li> <a href="page-employees.html">Employees</a> </li>
<li> <a href="page-faq.html">FAQ</a> </li>
<li> <a href="page-file-manager.html">File Manager</a> </li>
<li> <a href="page-gallery.html">Gallery</a> </li>
<li> <a href="page-pricing.html">Pricing</a> </li>
<li> <a href="page-task-list.html">Task List</a> </li>
<li> <a href="page-404.html">404</a> </li>
<li> <a href="page-500.html">500</a> </li>
<li> <a href="page-coming-soon.html">Coming Soon</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-key"></i><span class="nav-title">Auth</span></a>
<ul aria-expanded="false">
<li> <a href="auth-login.html">Login</a> </li>
<li> <a href="auth-register.html">Register</a> </li>
<li> <a href="auth-lockscreen.html">Lock Screen</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-list"></i><span class="nav-title">Multi Level</span></a>
<ul aria-expanded="false">
<li> <a href="javascript: void(0);">Level 1.1</a> </li>
<li class="scoop-hasmenu">
<a class="has-arrow" href="javascript: void(0);">Level 1.2</a>
<ul aria-expanded="false">
<li> <a href="javascript: void(0);">Level 2.1</a> </li>
<li> <a href="javascript: void(0);">Level 2.2</a> </li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
<h5 class="text-white mb-1">Mentor admin</h5>
<p class="font-13 text-white line-20">Multipurpose Bootstrap 4 Admin Template</p>
<a class="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" href="#"> Buy now</a>
</li>
</ul>
</div>
<!-- end sidebar-nav -->
</aside>
<!-- end app-navbar -->
<!-- begin app-main -->
<div class="app-main" id="main">
<!-- begin container-fluid -->
<div class="container-fluid">
<!-- begin row -->
<div class="row">
<div class="col-md-12 m-b-30">
<!-- begin page title -->
<div class="d-block d-sm-flex flex-nowrap align-items-center">
<div class="page-title mb-2 mb-sm-0">
<h1>Mail</h1>
</div>
<div class="ml-auto d-flex align-items-center">
<nav>
<ol class="breadcrumb p-0 m-b-0">
<li class="breadcrumb-item">
<a href="index.html"><i class="ti ti-home"></i></a>
</li>
<li class="breadcrumb-item active text-primary" aria-current="page">Mail</li>
</ol>
</nav>
</div>
</div>
<!-- end page title -->
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-12">
<div class="card card-statistics mail-contant">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-md-4 col-xxl-2 col-md-4">
<div class="mail-sidebar">
<div class="row justify-content-center">
<div class="col-12">
<div class="text-center mail-sidebar-title px-4">
<a href="javascript:void(0)" class="btn btn-primary btn-block py-3 font-weight-bold font-18">Compose <i class="fa fa-plus pl-2"></i></a>
</div>
</div>
<div class="col-12">
<div class="px-4 py-4">
<ul class="pl-0">
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-envelope-o text-primary pr-4"></i>
</span>
<span>
<span>Inbox</span>
</span>
<span class="nav-item ml-auto text-right">
<span class="badge badge-pill badge-primary float-right">99+</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-paper-plane-o pr-4"></i>
</span>
<span>
<span>Sent Mail</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-file-o pr-4"></i>
</span>
<span>
<span>Drafts</span>
</span>
<span class="nav-item ml-auto text-right">
<span class="badge badge-pill badge-primary float-right">20</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-trash-o pr-3 pr-4"></i>
</span>
<span>
<span>Deleted</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-clock-o pr-4"></i>
</span>
<span>
<span>Reminder</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-heart-o pr-4"></i>
</span>
<span>
<span>Favorite</span>
</span>
</span>
</a>
</li>
</ul>
<ul class="pl-0 mt-5">
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-circle-o text-danger pr-4"></i>
</span>
<span>
<span>Personal</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-circle-o pr-4 text-warning"></i>
</span>
<span>
<span>Work</span>
</span>
</span>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0)">
<span class="nav align-items-center">
<span>
<i class="fa fa-plus pr-4"></i>
</span>
<span>
<span>Add Category</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-xxl-4 border-md-t">
<div class="mail-content border-right border-n h-100">
<div class="mail-search border-bottom">
<div class="row align-items-center mx-0">
<div class="col-12">
<div class="form-group pt-3">
<input type="text" class="form-control" id="search" placeholder="Search..">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
<div class="mail-msg scrollbar scroll_dark">
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/01.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Martin smith</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Saas Designer</h5>
<p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/02.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>DutcaPatrick</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Mobile app Designer </h5>
<p>Very nice template, lots of pages and good documentation.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/03.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>m_morsch</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Landing page Designer</h5>
<p>Excellent and at a great price... thank you very much!</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/04.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>AnnaHorno</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Re-Design ios app</h5>
<p>Solved my theme problem in 10 minutes. We thank you.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/05.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Wdcorbitt</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Mobil UX/UI Designer</h5>
<p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/06.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Anne Smith</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Jobly Opportunity</h5>
<p>Mentor has so many features and layouts. Its a great choice.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/07.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Paul Flavius</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Saas Designer</h5>
<p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/08.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Sara Lisbon</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">UI Designer</h5>
<p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div class="mail-msg-item">
<a href="javascript:void(0)">
<div class="media align-items-center">
<div class="mr-3">
<div class="bg-img">
<img src="assets/img/avtar/09.jpg" class="img-fluid" alt="user">
</div>
</div>
<div class="w-100">
<div class="mail-msg-item-titel justify-content-between">
<p>Annahorno</p>
<p class="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 class="mb-0 my-2">Saas Designer</h5>
<p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
<p class="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-6 border-t border-xxl-t">
<div class="mail-chat py-5 px-5">
<div class="media align-items-center">
<div class="bg-img mr-3">
<img src="assets/img/avtar/03.jpg" class="img-fluid" alt="user">
</div>
<div>
<h4 class="mb-0">Dutca Patrick</h4>
<p>30 Min ago</p>
</div>
</div>
<div class="mt-4 d-flex justify-content-between">
<div>
<h3>Landing page Designer...</h3>
</div>
<div class="d-flex">
<a href="javascript:void(0)"><i class="fa fa-reply font-22 pr-3"></i></a>
<a href="javascript:void(0)"><i class="fa fa-print font-22"></i></a>
</div>
</div>
<div>
<p class="my-4">hey adminjon...</p>
<p class="mb-2">I truly believe Augustines words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
<div class="my-5">
<p>Have lovely Day,</p>
<p>adminjon</p>
</div>
</div>
</div>
<div class="d-md-flex px-5 py-4">
<div class="flex-fill align-items-center">
<div class="d-flex">
<i class="ti ti-clip pr-3 font-22"></i>
<p class="pr-3 font-weight-bold">Wireframe</p>
<p>(220.MB)</p>
</div>
</div>
<div class="flex-fill text-left text-md-right"><a href="javascript:void(0)" class="text-primary"><i class="ti ti-download pr-2"></i><span>Download</span></a></div>
</div>
<div class="bg-light mail-f px-4 py-3">
<div class="py-2 bg-white px-4 py-3 d-flex justify-content-between">
<p>Click here to <a href="#editer" data-toggle="collapse" class="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" class="text-primary px-1">Forward</a></p>
<a href="javascript:void(0)" class="text-primary"><i class="fa fa-microphone"></i></a>
</div>
<div class="collapse" id="editer">
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
</div>
</div>
<div class="collapse" id="forward">
<div class="form-group">
<input class="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
</div>
</div>
<div class="d-flex align-items-center justify-content-between py-2">
<div>
<ul class="nav">
<li class="nav-item pr-3"><a href="javascript:void(0)"><i class="ti ti-clip font-20"></i></a></li>
<li class="nav-item pr-3"><a href="javascript:void(0)"><i class="ti ti-face-smile font-20"></i></a></li>
<li class="nav-item"><a href="javascript:void(0)"><i class="ti ti-gallery font-20"></i></a></li>
</ul>
</div>
<div>
<a href="javascript:void(0)" class="btn btn-primary"><span>Send</span> <i class="fa fa-paper-plane"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end container-fluid -->
</div>
<!-- end app-main -->
</div>
<!-- end app-container -->
@@ -0,0 +1,502 @@
<!-- begin app-container -->
<div class="app-container">
<!-- begin app-nabar -->
<aside class="app-navbar">
<!-- begin sidebar-nav -->
<div class="sidebar-nav scrollbar scroll_light">
<ul class="metismenu " id="sidebarNav">
<li class="nav-static-title">Personal</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false">
<i class="nav-icon ti ti-rocket"></i>
<span class="nav-title">Dashboards</span>
<span class="nav-label label label-danger">9</span>
</a>
<ul aria-expanded="false">
<li> <a href='index.html'>Default</a> </li>
<li> <a href='index-ecommerce.html'>Ecommerce</a> </li>
<li> <a href='index-car-dealer.html'>Car Dealer</a> </li>
<li> <a href='index-stock-market.html'>Stock Market</a> </li>
<li> <a href='index-dating.html'>Dating</a> </li>
<li> <a href='index-job-portal.html'>Job Portal</a> </li>
<li> <a href='index-crm.html'>CRM</a> </li>
<li> <a href='index-real-estate.html'>Real Estate</a> </li>
<li> <a href='index-crypto-currency.html'>Crypto Currency</a> </li>
</ul>
</li>
<li><a href="app-chat.html" aria-expanded="false"><i class="nav-icon ti ti-comment"></i><span class="nav-title">Chat</span></a> </li>
<li><a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-calendar"></i><span class="nav-title">Calendar</span></a>
<ul aria-expanded="false">
<li> <a href='calendar-full.html'>Full Calendar</a> </li>
<li> <a href='calendar-list.html'>Calendar List</a> </li>
</ul>
</li>
<li><a href="mail-inbox.html" aria-expanded="false"><i class="nav-icon ti ti-email"></i><span class="nav-title">Mail</span></a> </li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-bag"></i> <span class="nav-title">UI Kit</span></a>
<ul aria-expanded="false">
<li> <a href="ui-alerts.html">Alerts</a> </li>
<li> <a href="ui-accordions.html">Accordions</a> </li>
<li> <a class="has-arrow" href="javascript: void(0);">Buttons</a>
<ul aria-expanded="false">
<li> <a href="ui-button.html">Default Buttons</a> </li>
<li> <a href="ui-button-icon.html">Icon Buttons</a> </li>
<li> <a href="ui-button-block.html">Block Buttons</a> </li>
<li> <a href="ui-button-social.html">Social Buttons</a> </li>
<li> <a href="ui-button-groups.html">Group Buttons</a> </li>
</ul>
</li>
<li> <a href="ui-badges.html">Badges</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-grid.html">Grid</a> </li>
<li> <a href="ui-list-group.html">List Group</a> </li>
<li> <a href="ui-lightbox.html">Light Box</a> </li>
<li> <a href="ui-modals.html">Modals</a> </li>
<li> <a href="ui-media.html">Media</a> </li>
<li> <a href="ui-nestable-list.html">Nestable List</a> </li>
<li> <a href="ui-pagination.html">Pagination</a> </li>
<li> <a href="ui-progressbars.html">Progress Bars</a> </li>
<li> <a href="ui-sweet-alert.html">Sweet Alert</a> </li>
<li> <a href="ui-tabs.html">Tabs</a> </li>
<li> <a href="ui-nav.html">Nav</a> </li>
<li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li>
<li> <a href="ui-typography.html">Typography</a> </li>
<li> <a href="ui-toastr.html">Toastr</a> </li>
<li> <a href="ui-video.html">Video</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-info"></i><span class="nav-title">Icons</span> </a>
<ul aria-expanded="false">
<li> <a href="icons-cryptocurrency.html">Cryptocurrency Icons</a> </li>
<li> <a href="icons-drip.html">Drip Icons</a> </li>
<li> <a href="icons-dash.html">Dash Icons</a> </li>
<li> <a href="icons-feather.html">Feather Icons</a> </li>
<li> <a href="icons-fontawesome.html">Font Awesome</a> </li>
<li> <a href="icons-ion.html">Ion Icons</a> </li>
<li> <a href="icons-weather.html">Weather Icons</a> </li>
<li> <a href="icons-material.html">Material Icons</a> </li>
<li> <a href="icons-themify.html">Themify Icons</a> </li>
</ul>
</li>
<li class="nav-static-title">Widgets, Tables & Layouts</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-layout-grid4-alt"></i> <span class="nav-title">Widgets</span> <span class="nav-label label label-success">New</span> </a>
<ul aria-expanded="false">
<li> <a href="widget-chart.html">Chart Widget</a> </li>
<li> <a href="widget-list.html">List Widget</a> </li>
<li> <a href="widget-social.html">Social Widget</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout-column3-alt"></i><span class="nav-title">Tables</span></a>
<ul aria-expanded="false">
<li> <a href="tables-basic.html">Basic Table</a> </li>
<li> <a href="tables-color.html">Color Table </a> </li>
<li> <a href="tables-datatable.html">Data Table</a> </li>
<li> <a href="tables-editable.html">Editable Table</a> </li>
<li> <a href="tables-export.html">Export Table</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout"></i> <span class="nav-title">Layouts</span></a>
<ul aria-expanded="false">
<li><a href="layout-mini.html">Sidebar Mini</a></li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-pie-chart"></i><span class="nav-title">Charts</span></a>
<ul aria-expanded="false">
<li> <a href="chart-apex.html">Apex Chart</a> </li>
<li> <a href="chart-flot.html">Flot Chart</a> </li>
<li> <a href="chart-morris.html">Morris Chart</a> </li>
<li> <a href="chart-chartist.html">Chartist Charts</a> </li>
<li> <a href="chart-chartjs.html">Chartjs Chart</a> </li>
<li> <a href="chart-c3.html">C3 Chart</a> </li>
<li> <a href="chart-sparkline.html">Sparkline Chart</a> </li>
<li> <a href="chart-knob.html">Knob Chart</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-pencil-alt"></i> <span class="nav-title">Forms</span> </a>
<ul aria-expanded="false">
<li> <a href="form-autonumeric.html">Autonumeric</a> </li>
<li> <a href="form-editors.html">Editors</a> </li>
<li> <a href="form-elements.html">Elements</a> </li>
<li> <a href="form-file-upload.html">Drop Zone
</a> </li>
<li> <a href="form-input-groups.html">Input Groups</a> </li>
<li> <a href="form-inputmask.html">Input Masks</a> </li>
<li> <a href="form-layouts.html">Forms Layouts</a> </li>
<li> <a href="form-listbox.html">Listbox</a> </li>
<li> <a href="form-pickers.html">Pickers</a> </li>
<li> <a href="form-range-slider.html">Range Slider</a> </li>
<li> <a href="form-selects.html">Selects</a> </li>
<li> <a href="form-switchers.html">Switchers</a> </li>
<li> <a href="form-validation.html">Validation</a> </li>
</ul>
</li>
<li class="nav-static-title">Extra Components</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-map-alt"></i><span class="nav-title">Maps</span></a>
<ul aria-expanded="false">
<li> <a href="maps-google.html">Google Maps</a> </li>
<li> <a href="maps-vector.html">Vector Maps</a> </li>
<li> <a href="maps-mapael.html">Mapael Maps</a> </li>
</ul>
</li>
<li class="active">
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layers"></i><span class="nav-title">Pages</span><span class="nav-label label label-primary">12</span></a>
<ul aria-expanded="false">
<li class="active"> <a href="page-account-settings.html">Account Settings</a> </li>
<li> <a href="page-clients.html">Clients</a> </li>
<li> <a href="page-contacts.html">Contacts</a> </li>
<li> <a href="page-employees.html">Employees</a> </li>
<li> <a href="page-faq.html">FAQ</a> </li>
<li> <a href="page-file-manager.html">File Manager</a> </li>
<li> <a href="page-gallery.html">Gallery</a> </li>
<li> <a href="page-pricing.html">Pricing</a> </li>
<li> <a href="page-task-list.html">Task List</a> </li>
<li> <a href="page-404.html">404</a> </li>
<li> <a href="page-500.html">500</a> </li>
<li> <a href="page-coming-soon.html">Coming Soon</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-key"></i><span class="nav-title">Auth</span></a>
<ul aria-expanded="false">
<li> <a href="auth-login.html">Login</a> </li>
<li> <a href="auth-register.html">Register</a> </li>
<li> <a href="auth-lockscreen.html">Lock Screen</a> </li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-list"></i><span class="nav-title">Multi Level</span></a>
<ul aria-expanded="false">
<li> <a href="javascript: void(0);">Level 1.1</a> </li>
<li class="scoop-hasmenu">
<a class="has-arrow" href="javascript: void(0);">Level 1.2</a>
<ul aria-expanded="false">
<li> <a href="javascript: void(0);">Level 2.1</a> </li>
<li> <a href="javascript: void(0);">Level 2.2</a> </li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
<h5 class="text-white mb-1">Mentor admin</h5>
<p class="font-13 text-white line-20">Multipurpose Bootstrap 4 Admin Template</p>
<a class="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" href="#"> Buy now</a>
</li>
</ul>
</div>
<!-- end sidebar-nav -->
</aside>
<!-- end app-navbar -->
<!-- begin app-main -->
<div class="app-main" id="main">
<!-- begin container-fluid -->
<div class="container-fluid">
<!-- begin row -->
<div class="row">
<div class="col-md-12 m-b-30">
<!-- begin page title -->
<div class="d-block d-sm-flex flex-nowrap align-items-center">
<div class="page-title mb-2 mb-sm-0">
<h1>Account Settings</h1>
</div>
<div class="ml-auto d-flex align-items-center">
<nav>
<ol class="breadcrumb p-0 m-b-0">
<li class="breadcrumb-item">
<a href="index.html"><i class="ti ti-home"></i></a>
</li>
<li class="breadcrumb-item">
Pages
</li>
<li class="breadcrumb-item active text-primary" aria-current="page">Account Settings</li>
</ol>
</nav>
</div>
</div>
<!-- end page title -->
</div>
</div>
<!-- end row -->
<!--mail-Compose-contant-start-->
<div class="row account-contant">
<div class="col-12">
<div class="card card-statistics">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-xl-3 pb-xl-0 pb-5 border-right">
<div class="page-account-profil pt-5">
<div class="profile-img text-center rounded-circle">
<div class="pt-5">
<div class="bg-img m-auto">
<img src="assets/img/avtar/01.jpg" class="img-fluid" alt="users-avatar">
</div>
<div class="profile pt-4">
<h4 class="mb-1">Alice Williams</h4>
<p>Enthusiast</p>
</div>
</div>
</div>
<div class="py-5 profile-counter">
<ul class="nav justify-content-center text-center">
<li class="nav-item border-right px-3">
<div>
<h4 class="mb-0">90</h4>
<p>Post</p>
</div>
</li>
<li class="nav-item border-right px-3">
<div>
<h4 class="mb-0">1.5K</h4>
<p>Messages</p>
</div>
</li>
<li class="nav-item px-3">
<div>
<h4 class="mb-0">4.4K</h4>
<p>Members</p>
</div>
</li>
</ul>
</div>
<div class="profile-btn text-center">
<div><button class="btn btn-light text-primary mb-2">Upload New Avatar</button></div>
<div><button class="btn btn-danger">Delete</button></div>
</div>
</div>
</div>
<div class="col-xl-5 col-md-6 col-12 border-t border-right">
<div class="page-account-form">
<div class="form-titel border-bottom p-3">
<h5 class="mb-0 py-2">Edit Your Personal Settings</h5>
</div>
<div class="p-4">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="name1">Full Name</label>
<input type="text" class="form-control" id="name1" value="Alice Williams">
</div>
<div class="form-group col-md-12">
<label for="title1">Title</label>
<input type="text" class="form-control" id="title1" value="Marketing expert">
</div>
<div class="form-group col-md-12">
<label for="phone1">Phone Number</label>
<input type="text" class="form-control" id="phone1" value="(01) 97 563 15613">
</div>
<div class="form-group col-md-12">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email1" value="alicewilliams@gmail.com">
</div>
</div>
<div class="form-group">
<label for="add1">Address</label>
<input type="text" class="form-control" id="add1" value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503">
</div>
<div class="form-group">
<label for="add2">Address 2</label>
<input type="text" class="form-control" id="add2" value="1234 North Avenue Luke Lane, South Bend, IN 360001">
</div>
<div class="form-row">
<div class="col-12">
<label class="mb-1">Birthday</label>
</div>
<div class="form-group col-md-4">
<select id="inputState" class="form-control">
<option>Date</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option selected="">11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="form-group col-md-4">
<select id="inputState1" class="form-control">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option selected="">May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="form-group col-md-4">
<select id="inputState2" class="form-control">
<option>Year</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option selected="">1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState3">City</label>
<select id="inputState3" class="form-control">
<option>Choose...</option>
<option selected="">London</option>
<option>Montreal</option>
<option>Delhi</option>
<option>Tokyo</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState4">State</label>
<select id="inputState4" class="form-control">
<option>Choose...</option>
<option selected="">England</option>
<option>California </option>
<option>Texas</option>
<option>Scotland </option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip" value="EC1A 1BB">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
I agree to receive email notification.
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Update Information</button>
</form>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 border-t col-12">
<div class="page-account-form">
<div class="form-titel border-bottom p-3">
<h5 class="mb-0 py-2">Your External Link</h5>
</div>
<div class="p-4">
<form>
<div class="form-group">
<label for="fb">Facebook URL:</label>
<input type="text" class="form-control" id="fb" value="https://www.facebook.com/">
</div>
<div class="form-group">
<label for="tr">Twitter URL:</label>
<input type="text" class="form-control" id="tr" value="https://twitter.com/">
</div>
<div class="form-group">
<label for="br">Blogger URL:</label>
<input type="text" class="form-control" id="br" value="https://www.blogger.com">
</div>
<div class="form-group">
<label for="go">Google+ URL:</label>
<input type="text" class="form-control" id="go" value="https://plus.google.com/discover">
</div>
<div class="form-group">
<label for="li">LinkedIn URL:</label>
<input type="text" class="form-control" id="li" value="https://in.linkedin.com/">
</div>
<div class="form-group">
<label for="we">Website URL:</label>
<input type="text" class="form-control" id="we" value="https://yourwebsite.com">
</div>
<button type="submit" class="btn btn-primary">Save & Update</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--mail-Compose-contant-end-->
</div>
<!-- end container-fluid -->
</div>
<!-- end app-main -->
</div>
<!-- end app-container -->
@@ -375,26 +375,26 @@
</div>
</div>
<div class="p-4">
<a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
<a class="dropdown-item d-flex nav-link" href="/profile">
<i class="fa fa-user pr-2 text-success"></i> Profile</a>
<a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
<a class="dropdown-item d-flex nav-link" href="/profile/inbox">
<i class="fa fa-envelope pr-2 text-primary"></i> Inbox
<span class="badge badge-primary ml-auto">6</span>
</a>
<a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
<a class="dropdown-item d-flex nav-link" href="/profile/settings">
<i class=" ti ti-settings pr-2 text-info"></i> Settings
</a>
<a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
<i class="fa fa-compass pr-2 text-warning"></i> Need help?</a>
<!-- a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
<i class="fa fa-compass pr-2 text-warning"></i> Need help?</a-->
<div class="row mt-2">
<div class="col">
<a class="bg-light p-3 text-center d-block" href="#">
<a class="bg-light p-3 text-center d-block" href="/profile/inbox">
<i class="fe fe-mail font-20 text-primary"></i>
<span class="d-block font-13 mt-2">My messages</span>
</a>
</div>
<div class="col">
<a class="bg-light p-3 text-center d-block" href="#">
<a class="bg-light p-3 text-center d-block" href="/profile/inbox?action=compose">
<i class="fe fe-plus font-20 text-primary"></i>
<span class="d-block font-13 mt-2">Compose new</span>
</a>
@@ -411,4 +411,4 @@
<!-- end navbar -->
</header>