ekoetki/public/template/setting.html

3303 lines
242 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
name="description">
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
name="keywords">
<meta content="la-themes" name="author">
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>Setting | ki-admin - Premium Admin Template</title>
<!--font-awesome-css-->
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<!-- tabler icons-->
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
<!-- Bootstrap css-->
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- glight css -->
<link href="../assets/vendor/glightbox/glightbox.min.css" rel="stylesheet">
<!-- simplebar css-->
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
<!-- apexcharts css-->
<link href="../assets/vendor/apexcharts/apexcharts.css" rel="stylesheet" type="text/css">
<!-- Select2 css -->
<link href="../assets/vendor/select/select2.min.css" rel="stylesheet" type="text/css">
<!-- App css-->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
<!-- Responsive css-->
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app-wrapper">
<div class="loader-wrapper">
<div class="loader_24"></div>
</div>
<!-- Menu Navigation starts -->
<nav>
<div class="app-logo">
<a class="logo d-inline-block" href="index.html">
<img alt="#" src="../assets/images/logo/1.png">
</a>
<span class="bg-light-primary toggle-semi-nav d-flex-center">
<i class="ti ti-chevron-right"></i>
</span>
<div class="d-flex align-items-center nav-profile p-3">
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
<p class="text-muted f-s-12 mb-0">Web Developer</p>
</div>
<div class="dropdown profile-menu-dropdown">
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
role="button">
<i class="ti ti-settings fs-5"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="f-w-500" href="profile.html" target="_blank">
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
</a>
</li>
<li class="dropdown-item">
<a class="f-w-500" href="setting.html" target="_blank">
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
</a>
</li>
<li class="dropdown-item">
<div class="d-flex align-items-center justify-content-between">
<div>
<a class="f-w-500" href="setting.html#">
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
</a>
</div>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary" id="incognitoSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li class="dropdown-item">
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
</a>
</li>
<li class="app-divider-v dotted py-1"></li>
<li class="dropdown-item">
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="app-nav" id="app-simple-bar">
<ul class="main-nav p-0 mt-2">
<li class="menu-title">
<span>Dashboard</span>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#dashboard">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
</svg>
dashboard
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="index.html">Ecommerce</a></li>
<li><a href="project_dashboard.html">Project</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#apps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
</svg>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="calendar.html">Calender</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#Profile-page">
Profile
</a>
<ul class="collapse" id="Profile-page">
<li><a href="profile.html">Profile</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#projects-page">
Projects Page
</a>
<ul class="collapse" id="projects-page">
<li><a href="project_app.html">projects</a></li>
<li><a href="project_details.html">projects Details</a></li>
</ul>
</li>
<li><a href="to_do.html">To-Do</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="api.html">API</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#ticket-page">
Ticket
</a>
<ul class="collapse" id="ticket-page">
<li><a href="ticket.html">Ticket</a></li>
<li><a href="ticket_details.html">Ticket Details</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#email-page">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="email.html"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#e-shop">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="cart.html">Cart</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="add_product.html">Add Product</a></li>
<li><a href="product_details.html">Product-Details</a></li>
<li><a href="product_list.html">Product list</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="orders_details.html">Orders Details</a></li>
<li><a href="orders_list.html">Orders List</a></li>
<li><a href="checkout.html">Check out</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="bookmark.html">Bookmark</a></li>
<li><a href="kanban_board.html">Kanban board</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#blog-page">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
<li><a href="add_blog.html">Add Blog</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="widget.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
</svg>
Widgets
</a>
</li>
<li class="menu-title"><span>Component</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#ui-kits">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
</svg>
UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="cheatsheet.html">Cheatsheet</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="avatar.html">Avatar</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordions.html">Accordions</a></li>
<li><a href="progress.html">Progress</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="list.html">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="divider.html">Divider</a></li>
<li><a href="ribbons.html">Ribbons</a></li>
<li><a href="editor.html">Editor </a></li>
<li><a href="collapse.html">Collapse</a></li>
<li><a href="footer-page.html">Footer</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="placeholder.html">Placeholder</a></li>
<li><a href="alignment.html">Alignment Thing</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#advance-ui">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
</svg>
Advance UI
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="modals.html">Modals</a></li>
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
<li><a href="sweetalert.html">Sweat Alert</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="video_embed.html">Video Embed</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="slick.html">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="scrollpy.html">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="ratings.html">Rating</a></li>
<li><a href="prismjs.html">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="count_up.html"> Count up </a></li>
<li><a href="draggable.html">Draggable</a></li>
<li><a href="tree-view.html">Tree View</a></li>
<li><a href="block_ui.html">Block Ui </a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#icons">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
</svg>
Icons
</a>
<ul class="collapse" id="icons">
<li><a href="fontawesome.html">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="tabler-icons.html">Tabler</a></li>
<li><a href="weather_icon.html">Weather</a></li>
<li><a href="animated_icon.html">Animated</a></li>
<li><a href="iconoir_icon.html">Iconoir</a></li>
<li><a href="phosphor.html">Phosphor</a></li>
</ul>
</li>
<li class="no-sub">
<a href="misc.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
</svg>
Misc
</a>
</li>
<li class="menu-title"><span>Map & Charts </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#maps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
</svg>
Map
</a>
<ul class="collapse" id="maps">
<li><a href="google-map.html">Google Maps</a></li>
<li><a href="leaflet-map.html">Leaflet map</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#chart">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
</svg>
Chart
</a>
<ul class="collapse" id="chart">
<li><a href="chart_js.html">Chart js</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#apexcharts-page">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="line.html">Line</a></li>
<li><a href="area_charts.html">Area</a></li>
<li><a href="column.html">Column</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="mixed.html">Mixed</a></li>
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
<li><a href="candlestick_charts.html">Candlestick</a></li>
<li><a href="boxplot.html">Boxplot</a></li>
<li><a href="bubble.html">Bubble</a></li>
<li><a href="scatter.html">Scatter</a></li>
<li><a href="heatmap.html">Heatmap</a></li>
<li><a href="treemap.html">Treemap</a></li>
<li><a href="pie_charts.html">Pie</a></li>
<li><a href="radial_bar.html">Radial bar</a></li>
<li><a href="radar_chart.html">Radar</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title"><span>Table & forms </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#table">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
</svg>
Table
</a>
<ul class="collapse" id="table">
<li><a href="basic_table.html">BasicTable</a></li>
<li><a href="data_table.html">Data Table</a></li>
<li><a href="list_table.html">List Js</a></li>
<li><a href="advance_table.html">Advance Table</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#forms">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
</svg>
Forms elements
</a>
<ul class="collapse" id="forms">
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="base_inputs.html">Base Input</a></li>
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
<li><a href="input_groups.html">Input Groups</a></li>
<li><a href="input_masks.html">Input Masks</a></li>
<li><a href="floating_labels.html">Floating Labels</a></li>
<li><a href="date_picker.html">Datetimepicker</a></li>
<li><a href="touch_spin.html">Touch spin</a></li>
<li><a href="select.html">Select2</a></li>
<li><a href="switch.html">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="typeahead.html">Typeahead</a></li>
<li><a href="textarea.html">Textarea</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#ready_to_use">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
</svg>
Ready to use
<span class="badge text-bg-success badge-notification ms-2">2</span>
</a>
<ul class="collapse" id="ready_to_use">
<li><a href="form_wizards.html">Form wizards</a></li>
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
</ul>
</li>
<li class="menu-title"><span>Pages</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#auth_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
</svg>
Auth Pages
</a>
<ul class="collapse" id="auth_pages">
<li><a href="sign_in.html">Sign In</a></li>
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
<li><a href="sign_up.html">Sign Up</a></li>
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
<li><a href="password_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
<li><a href="password_create.html">Password Create</a></li>
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#error_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
</svg>
Error Pages
</a>
<ul class="collapse" id="error_pages">
<li><a href="error_400.html">Bad Request </a></li>
<li><a href="error_403.html">Forbidden </a></li>
<li><a href="error_404.html">Not Found</a></li>
<li><a href="error_500.html">Internal Server</a></li>
<li><a href="error_503.html">Service Unavailable</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#other_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
</svg>
Other Pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="blank.html">Blank</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="landing.html">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="privacy_policy.html">Privacy Policy</a></li>
<li><a href="terms_condition.html">Terms &amp; Condition</a></li>
</ul>
</li>
<li class="menu-title"><span>Others</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#level">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
</svg>
2 level
</a>
<ul class="collapse" id="level">
<li><a href="setting.html#">Blank</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="setting.html#level2">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="blank.html">Blank</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
</svg>
Document
</a>
</li>
<li class="no-sub">
<a href="mailto:teqlathemes@gmail.com">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
</svg>
Support
</a>
</li>
</ul>
</div>
<div class="menu-navs">
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
</div>
</nav>
<!-- Menu Navigation ends -->
<div class="app-content">
<div class="">
<!-- Header Section starts -->
<header class="header-main">
<div class="container-fluid">
<div class="row">
<div class="col-8 col-sm-6 d-flex align-items-center header-left p-0">
<span class="header-toggle ">
<i class="ph ph-squares-four"></i>
</span>
<div class="header-searchbar w-100">
<form action="setting.html#" class="mx-sm-3 app-form app-icon-form ">
<div class="position-relative">
<input aria-label="Search" class="form-control" placeholder="Search..."
type="search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
</div>
</div>
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
<ul class="d-flex align-items-center">
<li class="header-language">
<div class="flex-shrink-0 dropdown" id="lang_selector">
<a aria-expanded="false" class="d-block head-icon ps-0"
data-bs-toggle="dropdown"
href="setting.html#">
<div class="lang-flag lang-en ">
<span class="flag rounded-circle overflow-hidden">
<i class=""></i>
</span>
</div>
</a>
<ul class="dropdown-menu language-dropdown header-card border-0">
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
data-bs-toggle="tooltip" title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">US</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2" title="FR">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-fra flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">France</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="UK">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-gbr flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">UK</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="IT">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-ita flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">Italy</span>
</span>
</li>
</ul>
</div>
</li>
<li class="header-apps">
<a aria-controls="appscanvasRights"
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
href="setting.html#" role="button">
<i class="ph ph-bounding-box"></i>
</a>
<div aria-labelledby="appscanvasRightsLabel"
class="offcanvas offcanvas-end header-apps-canvas"
id="appscanvasRights"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
data-bs-toggle="dropdown"
href="setting.html#"
role="button">
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Privacy Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Account Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Accessibility
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item border-0">
<a aria-expanded="false" data-bs-toggle="dropdown" href="setting.html#"
role="button">
More Settings
</a>
<ul class="dropdown-menu sub-menu">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Backup and Restore
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Data Usage</span>
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Theme</span>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="setting.html#">
<p class="mb-0">Notification</p>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="notificationSwitch"
type="checkbox">
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="offcanvas-body app-scroll">
<div class="row row-cols-3 g-2">
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="product.html"
target="_blank">
<span>
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">E-shop</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="email.html"
target="_blank">
<span>
<i class="ph-light ph-envelope f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Email</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="chat.html"
target="_blank">
<span>
<i class="ph-light ph-chat-circle-text f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Chat</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="project_app.html"
target="_blank">
<span>
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Project</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
href="invoice.html"
target="_blank">
<span>
<i class="ph-light ph-scroll f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
href="blog.html"
target="_blank">
<span>
<i class="ph-light ph-notebook f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Blog</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="calendar.html"
target="_blank">
<span>
<i class="ph-light ph-calendar f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Calender</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="file_manager.html"
target="_blank">
<span>
<i class="ph-light ph-folder-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
Manager</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="gallery.html"
target="_blank">
<span>
<i class="ph-light ph-google-photos-logo f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Gallery</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="profile.html"
target="_blank">
<span>
<i class="ph-light ph-users-three f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Profile</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-selection-foreground f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Task Board</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-plus f-s-30"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="header-cart">
<a aria-controls="cartcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#cartcanvasRight"
data-bs-toggle="offcanvas"
href="setting.html#" role="button">
<i class="ph ph-shopping-cart-simple"></i>
<span
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
</a>
<div aria-labelledby="cartcanvasRightLabel"
class="offcanvas offcanvas-end header-cart-canvas"
id="cartcanvasRight"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/01.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Backpacks (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)
</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : M</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Pink</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/05.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Women's Watch (4<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : S</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Rose Gold</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/04.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank">Sandals (5 <i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 8</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/03.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Jackets (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : XL</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Blue</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/02.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Shoes (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 9</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
<h6 class="mb-0">Your Cart is Empty</h6>
<p class="text-secondary mb-0">Add some items :)</p>
<a class="btn btn-light-primary btn-xs mt-2"
href="product_details.html">Shop
Now</a>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer">
<div class="head-box-footer p-3">
<div class="mb-4">
<h6 class="text-muted f-w-600">Total <span
class="float-end text-primary">$3,468.00</span></h6>
</div>
<div class="header-cart-btn">
<a class="btn btn-primary" href="cart.html" role="button"
target="_blank">
<i class="ti ti-eye"></i> View Cart</a>
<a class="btn btn-success" href="checkout.html" role="button"
target="_blank">
Checkout <i class="ti ti-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="header-dark">
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-moon-stars"></i>
</div>
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-sun-dim"></i>
</div>
</li>
<li class="header-notification">
<a aria-controls="notificationcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#notificationcanvasRight"
data-bs-toggle="offcanvas"
href="setting.html#"
role="button">
<i class="ph ph-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
</a>
<div aria-labelledby="notificationcanvasRightLabel"
class="offcanvas offcanvas-end header-notification-canvas"
id="notificationcanvasRight" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
Notification</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Gene Hart</span> wants to
edit <span
class="f-w-500 text-dark">Report.doc</span></a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="setting.html#">Approve</a>
<a class="d-inline-block f-w-500 text-danger"
href="setting.html#">Deny</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
<span
class="f-w-500 text-dark">Emery McKenzie</span>,
get ready: Your order from <span
class="f-w-500 text-dark">@Shopper.com</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Simon Young</span> shared
a file called <span
class="f-w-500 text-dark">Dropdown.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 30 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Becky G. Hayes</span> has
added a comment to <span
class="f-w-500 text-dark">Final_Report.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 45 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0 "
href="read_email.html"><span
class="f-w-600 text-dark">@Romaine</span>
invited you to a meeting
</a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="setting.html#">Join</a>
<a class="d-inline-block f-w-500 text-danger" href="setting.html#">Decline</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 1 hour ago </span>
</div>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
</div>
<div>
<h6 class="mb-0">Notification Not Found</h6>
<p class="text-dark">When you have any notifications added
here,will
appear here.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->
<!-- Body main section starts -->
<main>
<div class="container-fluid">
<!-- Breadcrumb start -->
<div class="row m-1">
<div class="col-12 ">
<h4 class="main-title">Setting</h4>
<ul class="app-line-breadcrumbs mb-3">
<li class="">
<a class="f-s-14 f-w-500" href="setting.html#">
<span>
<i class="ph-duotone ph-stack f-s-16 "></i> Apps
</span>
</a>
</li>
<li>
<a class="f-s-14 f-w-500" href="setting.html#">Profile</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="setting.html#">Setting</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<!-- setting-app start -->
<div class="row">
<div class="col-lg-4 col-xxl-3">
<div class="card">
<div class="card-header">
<h5>Settings</h5>
</div>
<div class="card-body">
<div class="vertical-tab setting-tab">
<ul class="nav nav-tabs app-tabs-primary " id="v-bg" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="profile-tab-pane" aria-selected="true"
class="nav-link active" data-bs-target="#profile-tab-pane"
data-bs-toggle="tab" id="profile-tab" role="tab"
type="button"><i
class="ph-bold ph-user-circle-gear pe-2"></i>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="activity-tab-pane" aria-selected="true"
class="nav-link"
data-bs-target="#activity-tab-pane" data-bs-toggle="tab"
id="activity-tab"
role="tab" type="button"><i
class="ph-bold ph-alarm pe-2"></i>
Activity
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="security-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#security-tab-pane" data-bs-toggle="tab"
id="security-tab"
role="tab" type="button"><i
class="ph-bold ph-shield-check pe-2"></i>Security
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="privacy-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#privacy-tab-pane" data-bs-toggle="tab"
id="privacy-tab"
role="tab" type="button"><i
class="ph-bold ph-lock-open pe-2"></i>Privacy
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="notification-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#notification-tab-pane" data-bs-toggle="tab"
id="notification-tab"
role="tab" type="button"><i
class="ph-bold ph-notification pe-2"></i>Notification
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="subscription-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#subscription-tab-pane" data-bs-toggle="tab"
id="subscription-tab"
role="tab" type="button"><i
class="ph-bold ph-bell-simple pe-2"></i>Subscription
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="Connection-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#Connection-tab-pane" data-bs-toggle="tab"
id="Connection-tab"
role="tab" type="button"><i
class="ph-bold ph-graph pe-2"></i>Connection
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="account_delete" type="button"><i
class="ph-bold ph-trash pe-2"></i>Delete
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Time Spent</h5>
</div>
<div class="card-body">
<div>
<div id="timeSpent"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card hover-effect card-light-primary mt-4">
<div class="card-body">
<h5>Used space</h5>
<p class="mt-2 text-secondary f-s-16">Your team has used 80% of your
available space. Need more?</p>
<div aria-valuemax="100" aria-valuemin="0"
aria-valuenow="0" class="progress w-100 mt-3 mb-3" role="progressbar">
<div class="progress-bar bg-primary progress-bar-striped"
style="width: 78.5%"></div>
</div>
<span class="mt-4">
<a class="me-3 text-secondary" href="setting.html">Dismiss</a>
<a class="text-d-underline" href="setting.html">Upgrade plan</a>
</span>
</div>
</div>
<div class="app-divider-v"></div>
<div class="d-flex align-items-center">
<span class="h-45 w-45 d-flex-center bg-warning b-r-50 position-relative">
<img alt="avatar" class="img-fluid b-r-50"
src="../assets/images/avatar/09.png">
<span
class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2 log-out-profile">
<div class="f-w-600 fs-6"> Ninfa Monaldo</div>
<div class="text-secondary f-s-12">Web Developer</div>
</div>
<div>
<a href="profile.html">
<span>
<i class="ph-bold ph-arrow-square-out f-s-20"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-xxl-9">
<div class="tab-content">
<div aria-labelledby="profile-tab" class="tab-pane fade active show"
id="profile-tab-pane"
role="tabpanel" tabindex="0">
<div class="card setting-profile-tab">
<div class="card-header">
<h5>Profile</h5>
</div>
<div class="card-body">
<div class="profile-tab profile-container">
<div class="image-details">
<div class="profile-image"></div>
<div class="profile-pic">
<div class="avatar-upload">
<div class="avatar-edit">
<input accept=".png, .jpg, .jpeg" id="imageUpload"
type="file">
<label for="imageUpload"><i
class="ti ti-photo-heart"></i></label>
</div>
<div class="avatar-preview">
<div id="imgPreview">
</div>
</div>
</div>
</div>
</div>
<div class="person-details">
<h5 class="f-w-600">Ninfa Monaldo
<img alt="instagram-check-mark" height="20"
src="../assets/images/profile-app/01.png"
width="20">
</h5>
<p>Web designer &amp; Developer</p>
</div>
<form class="app-form">
<h5 class="mb-2 text-dark f-w-600">User Info</h5>
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="form-label">Username</label>
<input class="form-control" placeholder="Maria C. Eck"
type="text">
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Email address</label>
<input class="form-control"
placeholder="MariaCEck@teleworm.us"
type="email">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Password</label>
<input class="form-control" placeholder="*******"
type="password">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Confirm Password</label>
<input class="form-control" placeholder="*******"
type="password">
</div>
</div>
<div class="col-12">
<div class="app-divider-v dotted"></div>
</div>
<h5 class="mb-2 text-dark f-w-600">Personal Info</h5>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Address</label>
<textarea class="form-control"
placeholder="1098 Asylum Avenu New Haven, CT 06510"></textarea>
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Address 2</label>
<textarea class="form-control"
placeholder="51244 Ankunding Villages, Reicheltown, IL 84366"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label"
for="inputCity">City</label>
<input class="form-control" id="inputCity"
placeholder="oregon" type="text">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label"
for="inputState">State</label>
<select class="form-select" id="inputState">
<option selected>Choose...</option>
<option>USA</option>
<option>Canada</option>
<option>Australia</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="mb-3">
<label class="form-label" for="inputZip">Zip</label>
<input class="form-control" id="inputZip"
placeholder="CT 06510" type="text">
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="">
<label class="form-label">language</label>
<select
class="select-langauge form-select select-basic"
name="state">
<option value="EN">English</option>
<option value="GU">Gujarati</option>
<option value="HI">Hindi</option>
<option value="DU">Dutch</option>
<option value="FR">French</option>
<option value="RU">Russian</option>
<option value="KO">Korean</option>
<option value="TA">Tamil</option>
<option value="SP">Spanish</option>
</select>
</div>
</div>
<div class="col-12">
<div class="text-end">
<button class="btn btn-primary"
type="submit">Submit
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div aria-labelledby="activity-tab" class="tab-pane fade" id="activity-tab-pane"
role="tabpanel" tabindex="0">
<div class="card equal-card month-timeline">
<div class="card-header">
<div class="activity-time">
<h5>Activity</h5>
<div class="activity-tab-section">
<ul class="nav nav-tabs tab-light-primary" id="Outline"
role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="today-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#today-tab-pane"
data-bs-toggle="tab"
id="today-tab" role="tab"
type="button">Today
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="week-tab-pane" aria-selected="false"
class="nav-link" data-bs-target="#week-tab-pane"
data-bs-toggle="tab" id="week-tab"
role="tab"
type="button">Week
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="month-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#month-tab-pane"
data-bs-toggle="tab"
id="month-tab" role="tab"
type="button">Month
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content" id="OutlineContent">
<div aria-labelledby="today-tab" class="tab-pane fade show active"
id="today-tab-pane" role="tabpanel" tabindex="0">
<ul class="app-timeline-box activity-timeline">
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-primary h-35 w-35 d-flex-center b-r-50">
W
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-primary f-s-16 mb-0">Wilson<span
class="text-secondary ms-2">added reaction in <span
class="badge text-outline-primary me-2">#product website</span>post</span></span>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>09.00AM
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-info h-35 w-35 d-flex-center b-r-50 icon-direction">
<i class="ph-duotone ph-image f-s-18"></i>
</span>
</div>
<div class="timeline-content">
<p class=" f-s-16 text-info mb-0">2 image files and 2
videos uploaded</p>
<div class="app-timeline-info-text timeline-border-box me-2 ms-0 mt-3 p-3">
<div class="row">
<div class="col-sm-4">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/02.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/02.jpg">
</a>
</div>
<div class="col-sm-4">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/04.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/04.jpg">
</a>
</div>
<div class="col-sm-4">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/01.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/01.jpg">
</a>
</div>
</div>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>Updated
at 12:45 pm
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-success h-35 w-35 d-flex-center b-r-50">
D
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-secondary"><span
class="text-success f-s-16 mb-0">Dane Wiza</span> added reaction in <span
class="badge text-outline-success me-2">#product website</span>post</span>
</div>
<div class="timeline-border-box me-2 ms-0 mt-3">
<h6 class="mb-0">Need a feature</h6>
<p class="mb-4 text-secondary">Hello everyone,
question on email marketing. What are some
tips/tricks to avoid going to promotion
spam/ junk for automated marketing emails
going to promotion spam/ junk for automated
marketing emails</p>
<span class="badge text-outline-success me-2 timeline-badge">#🙂❤10Reactions</span>
<span class="badge text-outline-success me-2">#✨12Replies</span>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>09.00AM
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-danger h-35 w-35 d-flex-center b-r-50">
B
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-danger f-s-16 mb-0">Betty Mante <span
class="text-secondary ms-2">Request joined <span
class="badge text-outline-danger me-2">#reaserchteam</span>groups</span></span>
</div>
<div class="mt-3">
<button class="btn btn-danger"
type="button">Accept
</button>
<button class="btn btn-outline-danger"
type="button">Rejects
</button>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>4 days
ago
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-primary h-35 w-35 d-flex-center b-r-50">
P
</span>
</div>
<div class="timeline-content">
<div class=" f-s-16">
<span class="text-primary f-s-16 mb-0">Pinkie
<span class="text-secondary ms-2">uploaded
<span class="text-dark f-w-600 me-2 ms-2">2</span>attachment <span
class="badge text-outline-primary me-2">#reaserchteam</span></span>
</span>
</div>
<div class="mt-3">
<button class="btn btn-primary"
type="button">Accept
</button>
<button class="btn btn-outline-primary"
type="button">Rejects
</button>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>4 days
ago
</p>
</div>
</li>
</ul>
</div>
<div aria-labelledby="week-tab-pane" class="tab-pane" id="week-tab-pane"
role="tabpanel" tabindex="0">
<ul class="app-timeline-box activity-timeline">
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-success h-35 w-35 d-flex-center b-r-50">
D
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-secondary"><span
class="text-success f-s-16 mb-0">Dane Wiza</span> added reaction in <span
class="badge text-outline-success me-2">#product website</span>post</span>
</div>
<div class="timeline-border-box me-2 ms-0 mt-3">
<h6 class="mb-0">Need a feature</h6>
<p class="mb-4 text-secondary">Hello everyone,
question on email marketing. What are some
tips/tricks to avoid going to promotion
spam/ junk for automated marketing emails
going to promotion spam/ junk for automated
marketing emails</p>
<span class="badge text-outline-success me-2 timeline-badge">#🙂❤10Reactions</span>
<span class="badge text-outline-success me-2">#✨12Replies</span>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>09.00AM
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-danger h-35 w-35 d-flex-center b-r-50">
B
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-danger f-s-16 mb-0">Betty Mante <span
class="text-secondary ms-2">Request joined <span
class="badge text-outline-danger me-2">#reaserchteam</span>groups</span></span>
</div>
<div class="mt-3">
<button class="btn btn-danger"
type="button">Accept
</button>
<button class="btn btn-outline-danger"
type="button">Rejects
</button>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>4 days
ago
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-primary h-35 w-35 d-flex-center b-r-50">
P
</span>
</div>
<div class="timeline-content">
<div class=" f-s-16">
<span class="text-primary f-s-16 mb-0">Pinkie
<span class="text-secondary ms-2">uploaded
<span class="text-dark f-w-600 me-2 ms-2">2</span>attachment <span
class="badge text-outline-primary me-2">#reaserchteam</span></span>
</span>
</div>
<div class="mt-3">
<button class="btn btn-primary"
type="button">Accept
</button>
<button class="btn btn-outline-primary"
type="button">Rejects
</button>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>4 days
ago
</p>
</div>
</li>
</ul>
</div>
<div aria-labelledby="month-tab-pane" class="tab-pane"
id="month-tab-pane"
role="tabpanel" tabindex="0">
<ul class="app-timeline-box activity-timeline">
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-success h-35 w-35 d-flex-center b-r-50">
D
</span>
</div>
<div class="timeline-content">
<div class="f-s-16">
<span class="text-secondary"><span
class="text-success f-s-16 mb-0">Dane Wiza</span> added reaction in <span
class="badge text-outline-success me-2">#product website</span>post</span>
</div>
<div class="timeline-border-box me-2 ms-0 mt-3">
<h6 class="mb-0">Need a feature</h6>
<p class="mb-4 text-secondary">Hello everyone,
question on email marketing. What are some
tips/tricks to avoid going to promotion
spam/ junk for automated marketing emails
going to promotion spam/ junk for automated
marketing emails</p>
<span class="badge text-outline-success me-2 timeline-badge">#🙂❤10Reactions</span>
<span class="badge text-outline-success me-2">#✨12Replies</span>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>09.00AM
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-info h-35 w-35 d-flex-center b-r-50 icon-direction">
<i class="ph-duotone ph-image f-s-18"></i>
</span>
</div>
<div class="timeline-content">
<p class=" f-s-16 text-info mb-0">2 image files and 2
videos uploaded</p>
<div class="app-timeline-info-text timeline-border-box me-2 ms-0 mt-3 p-3">
<div class="row">
<div class="col-sm-4">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/02.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/02.jpg">
</a>
</div>
<div class="col-sm-4">
<div class="img-hover-zoom">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/04.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/04.jpg">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="img-hover-zoom">
<a class="glightbox img-hover-zoom"
data-glightbox="type: image; zoomable: true;"
href="../assets/images/draggable/01.jpg">
<img alt=""
class="w-100 rounded"
src="../assets/images/draggable/01.jpg">
</a>
</div>
</div>
</div>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>Updated
at 12:45 pm
</p>
</div>
</li>
<li class="timeline-section">
<div class="timeline-icon">
<span class="text-light-primary h-35 w-35 d-flex-center b-r-50">
P
</span>
</div>
<div class="timeline-content">
<div class=" f-s-16">
<span class="text-primary f-s-16 mb-0">Pinkie
<span class="text-secondary ms-2">uploaded
<span class="text-dark f-w-600 me-2 ms-2">2</span>attachment <span
class="badge text-outline-primary me-2">#reaserchteam</span></span>
</span>
</div>
<div class="mt-3">
<button class="btn btn-primary"
type="button">Accept
</button>
<button class="btn btn-outline-primary"
type="button">Rejects
</button>
</div>
<p class="f-w-500 mt-2 mb-0">
<i class="ph ph-clock me-1 align-middle"></i>4 days
ago
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="security-tab" class="tab-pane fade" id="security-tab-pane"
role="tabpanel" tabindex="0">
<div class="card security-card-content">
<div class="card-body">
<div class="account-security">
<div class="row align-items-center">
<div class="col-sm-8">
<h5 class="text-primary f-w-600">Account Security</h5>
<p class=" account-discription text-secondary f-s-16 mt-2 mb-0">
your account is valuable to
hackers. to make 2-step verification very secure, use
your phone's built-in security key</p>
</div>
<div class="col-sm-4 account-security-img">
<img alt="" class="w-180"
src="../assets/images/setting-app/account.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row security-box-card align-items-center">
<div class="col-md-3 position-relative">
<span><img alt="" class="w-35 h-35 anti-code"
src="../assets/images/setting-app/google.png"></span>
<p
class="security-box-title text-dark f-w-500 f-s-16 ms-5 security-code">
Authentication</p>
</div>
<div class="col-md-6 security-discription">
<p class=" text-secondary f-s-16">It encompasses various methods
to ensure that the person requesting access is indeed who
they claim to be. Here are the key components and features
of Google Authentication:
</p>
<span class="badge text-light-secondary p-2"> <i
class="ph-fill ph-check-circle me-1 text-success"></i>secondary</span>
</div>
<div class="col-md-3 text-end">
<button class="btn btn-outline-success" type="button">Turn
off
</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row security-box-card align-items-center">
<div class="col-md-3 position-relative">
<span
class="bg-primary h-35 w-35 d-flex-center b-r-50 anti-code">
<i class="ph-light ph-codepen-logo f-s-18"></i></span>
<p
class="security-box-title text-dark f-w-500 f-s-16 ms-5 security-code">
Anti-
Code</p>
</div>
<div class="col-md-6 security-discription">
<p class="text-secondary f-s-16">An anti-phishing code is a
security feature used by various online platforms,<br>
especially in financial and cryptocurrency services,
</p>
<span class="badge text-light-secondary p-2"> <i
class="ph-fill ph-x-circle me-1 text-primary"></i>secondary</span>
</div>
<div class="col-md-3 text-end">
<button class="btn btn-primary" type="button">Turn On</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row security-box-card align-items-center">
<div class="col-md-3 position-relative">
<span
class="bg-success h-35 w-35 d-flex-center b-r-50 anti-code">
<i class="ph-light ph-file-archive f-s-18"></i></span>
<p
class="security-box-title text-dark f-w-500 f-s-16 ms-5 security-code">
Whitelist
</p>
</div>
<div class="col-md-6 security-discription">
<p class="text-secondary f-s-16">An anti-phishing code is a
security feature used by various online platforms,<br>
especially in financial and cryptocurrency services,
</p>
</div>
<div class="col-md-3 text-end">
<p>In development</p>
</div>
</div>
</div>
</div>
<div class="card security-card-content">
<div class="card-body">
<div class="account-security">
<div class="row align-items-center">
<div class="col-sm-9">
<h5 class="text-primary f-w-600">Devices and active
sessions</h5>
<p class="account-discription text-secondary f-s-16 mt-3">
your account is valuable to
hackers. to make 2-step verifivcation very secure, use
your phone's built-in security key</p>
</div>
<div class="col-sm-3 account-security-img">
<img alt="" class="w-150"
src="../assets/images/setting-app/device.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xxl-6">
<ul class="active-device-session active-device-list" id="shareMenuLeft">
<li>
<div class="card share-menu-active">
<div class="card-body">
<div class="device-menu-item" draggable="false">
<span class="device-menu-img">
<i class="ph-duotone ph-laptop f-s-40 text-success"></i>
</span>
<div class="device-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Apple Mac
10.15.7</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
switzerland 201.36.24.108</p>
</div>
<div class="device-menu-icons">
<span
class="badge text-light-secondary p-2 f-s-16">
<i
class="ph-fill ph-check-circle me-1 text-success"></i>Online</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<div class="device-menu-item " draggable="false">
<span class="device-menu-img">
<i class="ph-duotone ph-device-mobile f-s-40 text-primary"></i>
</span>
<div class="device-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Apple Iphone ios
15.0.2</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
Ukraine
176.38.19.14</p>
</div>
<div class="device-menu-icons">
<span
class="badge text-light-secondary p-2 f-s-16">
<i
class="ph-fill ph-x-circle me-1 text-primary"></i>Offline</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<div class="device-menu-item " draggable="false">
<span class="device-menu-img">
<i class="ph-duotone ph-device-mobile f-s-40 text-primary"></i>
</span>
<div class="device-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Apple Iphone ios
15.0.2</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">Africa
176.49.19.13</p>
</div>
<div class="device-menu-icons">
<span
class="badge text-light-secondary p-2 f-s-16">
<i
class="ph-fill ph-x-circle me-1 text-primary"></i>Offline</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-12 col-xxl-6">
<ul class="active-device-session active-device-list"
id="shareMenuRight">
<li>
<div class="card">
<div class="card-body">
<div class="device-menu-item " draggable="false">
<span class="device-menu-img">
<i class="ph-duotone ph-device-mobile f-s-40 text-primary"></i>
</span>
<div class="device-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Apple Mac
10.15.7</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
America 201.136.24.108</p>
</div>
<div class="device-menu-icons">
<span
class="badge text-light-secondary p-2 f-s-16">
<i
class="ph-fill ph-x-circle me-1 text-primary"></i>Offline</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<div class="device-menu-item " draggable="false">
<span class="device-menu-img">
<i class="ph-duotone ph-device-mobile f-s-40 text-primary"></i>
</span>
<div class="device-menu-content">
<h6 class="mb-0">Windows 10</h6>
<p class="mb-0 text-secondary">
portuguese 176.38.19.14</p>
</div>
<div class="device-menu-icons">
<span
class="badge text-light-secondary p-2 f-s-16">
<i
class="ph-fill ph-x-circle me-1 text-primary"></i>Offline</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card security-card-content">
<div class="card-body">
<div class="account-security mb-2">
<div class="row align-items-center">
<div class="col-sm-9">
<h5 class="text-primary f-w-600">Change Password</h5>
<p class="account-discription text-secondary f-s-16 mt-3">To
change your password,
please fill in the fields below. your password must
contain at least 8 character, it must also include at
least one upper case letter, one lower case letter, one
number and one special character.</p>
</div>
<div class="col-sm-3 account-security-img">
<img alt="" class="w-150"
src="../assets/images/setting-app/password.jpg">
</div>
</div>
</div>
<div class="app-form">
<div class="row">
<div class="col-sm-12">
<label class="form-label" for="password">Current
Password</label>
<div class="input-group input-group-password mb-3">
<span class="input-group-text b-r-left"><i
class="ph-bold ph-lock f-s-20"></i></span>
<input aria-label="Amount (to the nearest dollar)"
class="form-control"
id="password" placeholder="********"
type="password">
<!-- <span class="input-group-text b-r-right"><i
class="ph ph-eye-slash f-s-20 eyes-icon1" onclick="togglePasswordVisibility()"></i></span> -->
<span class="input-group-text b-r-right"><i
class="ph ph-eye-slash f-s-20 eyes-icon "
id="showPassword"></i></span>
</div>
</div>
<div class="col-sm-12">
<label class="form-label" for="password">New
Password</label>
<div class="input-group input-group-password mb-3">
<span class="input-group-text b-r-left"><i
class="ph-bold ph-lock f-s-20"></i></span>
<input aria-label="Amount (to the nearest dollar)"
class="form-control"
id="password1" placeholder="********"
type="password">
<span class="input-group-text b-r-right"><i
class="ph ph-eye-slash f-s-20 eyes-icon1 "
id="showPassword1"></i></span>
</div>
</div>
<div class="col-sm-12">
<label class="form-label" for="password">Confirm
Password</label>
<div class="input-group input-group-password mb-3">
<span class="input-group-text b-r-left"><i
class="ph-bold ph-lock f-s-20"></i></span>
<input aria-label="Amount (to the nearest dollar)"
class="form-control"
id="password2" placeholder="********"
type="password">
<span class="input-group-text b-r-right"><i
class="ph ph-eye-slash f-s-20 eyes-icon2"
id="showPassword2"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="privacy-tab" class="tab-pane fade" id="privacy-tab-pane"
role="tabpanel" tabindex="0">
<div class="card equal-card privacy-card">
<div class="card-header">
<h5>Privacy </h5>
</div>
<div class="card-body">
<h6>ACCESS</h6>
<div class="row">
<div class="col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item">
<label class="form-check-label" for="inlineCheckbox1">
<span class="d-flex align-items-center position-relative">
<span
class="privacy-img bg-success h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph-bold ph-lock f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Private</span>
<span class="mb-0 text-secondary f-s-16"> only users you choose can access</span>
</span>
</span>
</label>
<input checked
class="form-check-input form-check- b-r-100 w-25 h-25"
id="inlineCheckbox1" name="option"
type="radio" value="option1">
</div>
</div>
</div>
<div class=" col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item ">
<label class="form-check-label" for="inlineCheckbox2">
<span
class="d-flex align-items-center position-relative">
<span
class="privacy-img bg-primary h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph ph-globe f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Public</span>
<span class="mb-0 text-secondary f-s-16">anyone
with the link can access </span>
</span>
</span>
</label>
<input class="form-check-input b-r-100 w-25 h-25"
id="inlineCheckbox2" name="option" type="radio"
value="option2">
</div>
</div>
</div>
</div>
<h6>USERS</h6>
<div class="row">
<div class=" col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item">
<label class="form-check-label" for="inlineCheckbox3">
<span
class="d-flex align-items-center position-relative">
<span
class="privacy-img bg-primary h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph-bold ph-lock f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">users in the table
</span>
<span class="mb-0 text-secondary f-s-16">
users in the table can sign in</span>
</span>
</span>
</label>
<input checked
class="form-check-input b-r-100 w-25 h-25"
id="inlineCheckbox3" name="useroption"
type="radio" value="useroption1">
</div>
</div>
</div>
<div class=" col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item">
<label class="form-check-label" for="inlineCheckbox4">
<span
class="d-flex align-items-center position-relative">
<span
class=" privacy-img bg-secondary h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph-bold ph-lock f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500"> production team
</span>
<span class="mb-0 text-secondary f-s-16">
team member can sign in
</span>
</span>
</span>
</label>
<input checked
class="form-check-input b-r-100 w-25 h-25"
id="inlineCheckbox4" name="useroption"
type="radio" value="useroption2">
</div>
</div>
</div>
<div class=" col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item">
<label class="form-check-label" for="inlineCheckbox5">
<span
class="d-flex align-items-center position-relative">
<span
class="privacy-img bg-info h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph-bold ph-lock f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Anyone from domain</span>
<span class="mb-0 text-secondary f-s-16">
users
with your email domain</span>
</span>
</span>
</label>
<input checked
class="form-check-input b-r-100 w-25 h-25"
id="inlineCheckbox5" name="useroption"
type="radio" value="useroption3">
</div>
</div>
</div>
<div class=" col-xxl-6">
<div class="setting-privacy-card form-selectgroup">
<div class="select-item">
<label class="form-check-label" for="inlineCheckbox6">
<span
class="d-flex align-items-center position-relative">
<span
class="privacy-img bg-danger h-40 w-40 d-flex-center b-r-50 position-absolute">
<i class="ph-bold ph-lock f-s-18"></i>
</span>
<span class="privacy-content ms-5 me-2">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Any email in table</span>
<span class="mb-0 text-secondary f-s-16">Anyone
included email in a table</span>
</span>
</span>
</label>
<input checked
class="form-check-input b-r-100 w-25 h-25"
id="inlineCheckbox6" name="useroption"
type="radio" value="useroption4">
</div>
</div>
</div>
<div class=" col-xxl-12">
<div class="publishe-card">
<div>
<h6 class="m-0">Publishing</h6>
<p class="mb-0 f-s-16 text-secondary">your project is
published</p>
</div>
<div>
<button class="btn btn-light-primary"
type="button">Unpublish
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="notification-tab" class="tab-pane fade" id="notification-tab-pane"
role="tabpanel" tabindex="0">
<div class="card ">
<div class="card-header">
<h5>Notification</h5>
</div>
<div class="card-body">
<div class="notification-content">
<div class="row">
<div class="col-lg-6">
<div class="notification-email">
<h6>By Email</h6>
<div class="select-item">
<input class="form-check-input form-check-primary w-25 h-25"
id="checkbox-email" type="checkbox"
value="option1">
<label class="form-check-label"
for="checkbox-email">
<span
class="d-flex align-items-center position-relative">
<span class="ms-3 privacy-content">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Comments</span>
<span class="text-secondary mb-0"> notified
posts on comment
</span>
</span>
</span>
</label>
</div>
<div class="select-item">
<input class="form-check-input form-check-primary w-25 h-25"
id="checkbox-email1" type="checkbox"
value="option2">
<label class="form-check-label"
for="checkbox-email1">
<span class="d-flex align-items-center">
<span class="ms-3 privacy-content">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Condidates</span>
<span class="text-secondary mb-0"> notified
candidate applies </span>
</span>
</span>
</label>
</div>
<div class="select-item">
<input class="form-check-input form-check-primary w-25 h-25"
id="checkbox-email2" type="checkbox"
value="option3">
<label class="form-check-label"
for="checkbox-email2">
<span class="d-flex align-items-center">
<span class="ms-3 privacy-content">
<span class="mb-0 text-dark txt-ellipsis-1 f-s-16 f-w-500">Offers</span>
<span class="text-secondary mb-0"> notified
accepts or rejects</span>
</span>
</span>
</label>
</div>
</div>
</div>
<div class="col-lg-6 mt-lg-0 mt-3">
<div class="notification-push">
<h6 class="mb-0">Push Notification</h6>
<p class="mb-0">These are delivered via sms to your
mobile phone.</p>
<div class="d-flex align-items-center gap-1 mt-3">
<input class="form-check-input form-check-primary f-s-18 mb-1 m-1"
id="radio_default1" name="flexRadioDefault"
type="radio">
<label class="form-check-label"
for="radio_default1">
<span class="mb-0 f-s-16 f-w-500"> Everything </span>
</label>
</div>
<div class="d-flex align-items-center gap-1 mt-3">
<input class="form-check-input form-check-primary f-s-18 mb-1 m-1"
id="radio_default2" name="flexRadioDefault"
type="radio">
<label class="form-check-label"
for="radio_default2">
<span class="mb-0 f-s-16 f-w-500"> Same as a email</span>
</label>
</div>
<div class="d-flex align-items-center gap-1 mt-3">
<input class="form-check-input form-check-primary f-s-18 mb-1 m-1"
id="radio_default3" name="flexRadioDefault"
type="radio">
<label class="form-check-label"
for="radio_default3">
<span class="mb-0 f-s-16 f-w-500"> No push notification</span>
</label>
</div>
</div>
</div>
</div>
<div class="app-divider-v"></div>
<div class="col-12">
<ul class="notified-contet share-menu-list">
<li>
<div class="share-menu-item mb-4">
<span
class="share-menu-img text-outline-primary h-45 w-45 d-flex-center b-r-10">
<i
class="ph-bold ph-device-mobile-speaker f-s-30"></i>
</span>
<div class="share-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Mobile push
notification</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
Receive the all
notifications via your mobile app</p>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked
class="form-check-input form-check-primary ms-3 fs-3 me-3"
id="basic-switch-6" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-6"></label>
</div>
</div>
</li>
<li>
<div class="share-menu-item mb-4">
<span
class="share-menu-img text-outline-success h-45 w-45 d-flex-center b-r-10">
<i class="ph-bold ph-desktop f-s-30"></i>
</span>
<div class="share-menu-content">
<h6 class="mb-0 txt-ellipsis-1">desktop push
notification</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
Receive the all
notifications via your desktop app</p>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked
class="form-check-input form-check-primary ms-3 fs-3 me-3"
id="basic-switch-4" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-4"></label>
</div>
</div>
</li>
<li>
<div class="share-menu-item mb-4">
<span
class="share-menu-img text-outline-danger h-45 w-45 d-flex-center b-r-10">
<i class="ph-bold ph-watch f-s-30"></i>
</span>
<div class="share-menu-content">
<h6 class="mb-0 txt-ellipsis-1">Smartwatch push
notification
</h6>
<p class="mb-0 txt-ellipsis-1 text-secondary">
Receive the all
notifications via your smartwatch app</p>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked
class="form-check-input form-check-primary ms-3 fs-3 me-3"
id="basic-switch-5" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-5"></label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="subscription-tab" class="tab-pane fade" id="subscription-tab-pane"
role="tabpanel" tabindex="0">
<div class="card">
<div class="card-header">
<h5>Subscription</h5>
</div>
<div class="card-body">
<div class="subscription-plan">
<div class="row">
<div class="col-xxl-6">
<div class="plan-choose">
<h6 class="mb-0">Choose plan</h6>
<div>
<button class="btn btn-light-primary"
type="button">Quartely
</button>
<button class="btn btn-light-secondary"
type="button">Yearly
</button>
</div>
</div>
<div class="form-selectgroup mt-5">
<div class="select-item">
<input checked
class="form-check-input form-check-primary w-20 h-20"
id="planCheckbox1"
name="planoption" type="radio"
value="planoption1">
<label class="form-check-label"
for="planCheckbox1">
<span class="d-flex align-items-center">
<span class="ms-2">
<span class="fs-6 mb-0">Mark Moen</span>
<span class="d-block text-secondary mb-0">
UI/UX
Designer</span>
</span>
</span>
</label>
<div class="select-item-2 ms-2">
<h6 class="fs-6 mb-0">$69.44</h6>
<p class="text-secondary">1 users/quartly</p>
</div>
</div>
</div>
<div class="form-selectgroup mt-4">
<div class="select-item">
<input class="form-check-input form-check-primary w-20 h-20"
id="planCheckbox2" name="planoption"
type="radio" value="planoption2">
<label class="form-check-label"
for="planCheckbox2">
<span class="d-flex align-items-center">
<span class="ms-2">
<span class="fs-6 mb-0">Mark Moen</span>
<span class="d-block text-secondary">UI/UX
Designer</span>
</span>
</span>
</label>
<div class="select-item-2 ms-2">
<h6 class="fs-6 mb-0">$69.44</h6>
<p class="text-secondary">1 users/quartly</p>
</div>
</div>
<ul class="feachers-list">
<li class="f-s-16 text-secondary"><i
class="ph-bold ph-check-circle me-2 f-s-16 text-success"></i>40
doenload per day.
</li>
<li class="f-s-16 text-secondary"><i
class="ph-bold ph-check-circle me-2 f-s-16 text-success"></i>access
to all products or bundles.
</li>
<li class="f-s-16 text-secondary"><i
class="ph-bold ph-check-circle me-2 f-s-16 text-success"></i>early
access to new/beta relese features.
</li>
</ul>
<div class="app-divider-v mt-4 mb-4"></div>
<div class="team-accounts mb-4">
<span class="privacy-content">
<span class="mb-0 f-s-16 f-w-500">Team Accounts</span>
<span class="text-secondary f-s-14 mb-0">starting
at 5
users in team plan , you can increase.</span>
</span>
<div class="simplespin ms-3">
<button
class="circle-btn btn-light-primary decrement">
-
</button>
<input class="app-small-touchspin count"
type="text"
value="25">
<button
class="circle-btn btn-light-primary increment">
+
</button>
</div>
</div>
</div>
<div class="form-selectgroup mt-4">
<div class="select-item">
<input class="form-check-input form-check-primary w-20 h-20"
id="planCheckbox3" name="planoption"
type="radio" value="planoption3">
<label class="form-check-label"
for="planCheckbox3">
<span class="d-flex align-items-center">
<span class="ms-2">
<span class="fs-6 mb-0">Business Pro</span>
<span class="d-block text-secondary mb-0">
for
big teams</span>
</span>
</span>
</label>
<div class="feachers-list ms-2">
<h6 class="fs-6 mb-0">$250.44</h6>
<p class="text-secondary">31 users/quartly</p>
</div>
</div>
</div>
</div>
<div class="col-xxl-6 mt-xxl-0 mt-5">
<div class="plan-choose">
<h6 class="mb-0">Payment plan</h6>
<div>
<button class="btn btn-light-primary"
type="button">Credit
card
</button>
<button class="btn btn-light-secondary"
type="button">Paypal
</button>
</div>
</div>
<div class="form-selectgroup mt-5">
<div class="select-item d-flex">
<input class="form-check-input form-check-primary w-20 h-20"
id="paymentCheckbox1" name="paymentoption"
type="radio" value="paymentoption1">
<label class="form-check-label"
for="paymentCheckbox1">
<span class="d-flex align-items-center">
<span class="ms-2">
<span class="f-s-16 mb-0 f-w-500">**** 4426</span>
<span
class="d-block text-secondary f-s-16 mb-0">
visa card</span>
</span>
</span>
</label>
<div class="ms-2">
<img alt=""
src="../assets/images/setting-app/visa-icon.png">
</div>
</div>
</div>
<div class="form-selectgroup mt-4">
<div class="select-item d-flex">
<input checked
class="form-check-input form-check-primary w-20 h-20"
id="paymentCheckbox2"
name="paymentoption" type="radio"
value="paymentoption2">
<label class="form-check-label"
for="paymentCheckbox2">
<span class="d-flex align-items-center">
<span class="ms-2">
<span class="f-s-16 mb-0 f-w-500">**** 6790</span>
<span
class="d-block text-secondary f-s-16 mb-0">
Master card</span>
</span>
</span>
</label>
<div class="ms-2">
<img alt=""
src="../assets/images/setting-app/master-icon.png">
</div>
</div>
</div>
<button class="btn btn-success w-100 mt-4" type="button">+
Add New Card
</button>
<div class="form-selectgroup p-3 mt-4">
<h6 class="mb-2">Discount code</h6>
<div class="input-group mb-3">
<input aria-describedby="button-addon2"
aria-label="Recipient's username"
class="form-control form-check-primary b-r-left"
placeholder="20FGJKYSD"
type="text">
<button class="btn btn-secondary b-r-right"
id="button-addon2" type="button">Apply
</button>
</div>
<P class="text-success f-s-16 mb-0">30% discount code
applied
</P>
<div class="team-accounts mt-3 mb-4 p-0">
<span class="privacy-content me-2">
<span class="mb-0 f-s-16 f-w-500">Team Plan</span>
<span class="text-secondary f-s-14 mb-0">5 Users
Quartely</span>
</span>
<h4>$789.0</h4>
</div>
<div class="app-divider-v mt-4 mb-4"></div>
<div class="plan-choose">
<h6 class="mb-0">Payment plan</h6>
<h5 class="text-success f-s-18">-$57.90</h5>
</div>
<div class="app-divider-v mt-4 "></div>
<div class="team-accounts mt-3 mb-4 p-0">
<span class="privacy-content">
<span class="mb-0 f-s-16 f-w-500">Total</span>
<span class="text-secondary f-s-14 mb-0">Next
payment
will charge 10th of january 2030</span>
</span>
<h6>$789.0</h6>
</div>
<div class="app-divider-v mt-4"></div>
<button class="btn btn-success w-100 " type="button">PAY
NOW
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="Connection-tab" class="tab-pane fade" id="Connection-tab-pane"
role="tabpanel" tabindex="0">
<div class="row">
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/geethub.png">
</span>
<h5 class="ms-5 mt-1">GitHub</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-7" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-7"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">GitHub can be connected to
various continuous integration</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/slack.png">
</span>
<h5 class="ms-5 mt-1">Slack</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-8" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-8"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">send notifications to
channels and create various projects</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/google.png">
</span>
<h5 class="ms-5 mt-1">Google</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-9" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-9"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">The core mission of Google
is to organize the world's information.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/figma.png">
</span>
<h5 class="ms-5 mt-1">Figma</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-10" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-10"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Figma is a web-based
design tool focused on collaborative design.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/drive.png">
</span>
<h5 class="ms-5 mt-1">Drive</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-11" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-11"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Google Drive is a
comprehensive file storage and service.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/drop-box.png">
</span>
<h5 class="ms-5 mt-1">Drop Box</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-12" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-12"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">The service is designed to
safeguard files malfunctions</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/facebook.png">
</span>
<h5 class="ms-5 mt-1">Facebook</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-13" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-13"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Facebook's journey from a
university network to a global social media.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/instagram.png">
</span>
<h5 class="ms-5 mt-1">Instagram</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-14" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-14"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Instagram's mission is to
bring people closer to the things and people.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/twitter.png">
</span>
<h5 class="ms-5 mt-1">Twitter</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-15" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-15"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Twitter, now known as X,
is a social media different platform</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/dribble.png">
</span>
<h5 class="ms-5 mt-1">Dribble</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-16" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-16"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">Dribble is a
self-promotion and social networking platform.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/linkdin.png">
</span>
<h5 class="ms-5 mt-1">Linkedin</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-17" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-17"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4"> LinkedIn boasts over 1
billion registered members globally.</p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-4">
<div class="card conection-setting">
<div class="card-body">
<div class="conection-item">
<div class="position-relative">
<span class="position-absolute">
<img alt=""
class="w-35 h-35"
src="../assets/images/setting-app/behance.png">
</span>
<h5 class="ms-5 mt-1">Behance</h5>
</div>
<div class="form-check form-switch d-flex mt-1">
<input checked=""
class="form-check-input form-check-primary fs-3"
id="basic-switch-18" type="checkbox">
<label class="form-check-label pt-2"
for="basic-switch-18"></label>
</div>
</div>
<p class="text-secondary f-s-16 mt-4">The platform allows
creative professionals across various industries. </p>
</div>
<div class="card-footer text-end text-d-underline link-primary">
<a href="setting.html#">View integration</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--setting app end -->
</div>
</main>
<!-- Body main section ends -->
<!-- tap on top -->
<div class="go-top">
<span class="progress-value">
<i class="ti ti-arrow-up"></i>
</span>
</div>
<!-- Footer Section starts-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-12">
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖
V1.0.0</p>
</div>
<div class="col-md-3">
<div class="footer-text text-end">
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
class="ti ti-help"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->
</div>
</div>
</div>
<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/jquery-3.6.3.min.js"></script>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- apexcharts-->
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- sweetalert js-->
<script src="../assets/vendor/sweetalert/sweetalert.js"></script>
<!-- Glight js -->
<script src="../assets/vendor/glightbox/glightbox.min.js"></script>
<!-- Customizer js-->
<script src="../assets/js/customizer.js"></script>
<!-- select2 -->
<script src="../assets/vendor/select/select2.min.js"></script>
<!--setting js -->
<script src="../assets/js/setting.js"></script>
<!-- App js-->
<script src="../assets/js/script.js"></script>
</body>
</html>