PNG %k25u25%fgd5n! /home/mkuwqnjx/www/dist/forms-img-crop.html
<!DOCTYPE html>
<html lang="en" dir="ltr" data-startbar="dark" data-bs-theme="light">
<head>
<meta charset="utf-8" />
<title>Forexo | Forexo - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/libs/cropperjs/cropper.min.css" rel="stylesheet" type="text/css" />
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
</head>
<!-- Top Bar Start -->
<body>
<!-- Top Bar Start -->
<div class="topbar d-print-none">
<div class="container-fluid">
<nav class="topbar-custom d-flex justify-content-between" id="topbar-custom">
<ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">
<li>
<button class="nav-link mobile-menu-btn nav-icon" id="togglemenu">
<i class="iconoir-menu-scale"></i>
</button>
</li>
<li class="hide-phone app-search">
<form role="search" action="#" method="get">
<input type="search" name="search" class="form-control top-search mb-0" placeholder="Search here...">
<button type="submit"><i class="iconoir-search"></i></button>
</form>
</li>
</ul>
<ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">
<li class="topbar-item">
<a class="btn btn-soft-primary" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#watchlist" aria-controls="watchlist">
Watchlist
</a>
</li>
<!-- <li class="topbar-item">
<a class=" btn btn-primary" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#watchlist" aria-controls="watchlist">
Watchlist
</a>
</li> -->
<li class="dropdown">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us_flag.jpg" alt="" class="thumb-sm rounded-circle">
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><img src="assets/images/flags/us_flag.jpg" alt="" height="15" class="me-2">English</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="15" class="me-2">Spanish</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/germany_flag.jpg" alt="" height="15" class="me-2">German</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="15" class="me-2">French</a>
</div>
</li><!--end topbar-language-->
<li class="topbar-item">
<a class="nav-link nav-icon" href="javascript:void(0);" id="light-dark-mode">
<i class="icofont-moon dark-mode"></i>
<i class="icofont-sun light-mode"></i>
</a>
</li>
<li class="dropdown topbar-item">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="icofont-bell-alt"></i>
<span class="alert-badge"></span>
</a>
<div class="dropdown-menu stop dropdown-menu-end dropdown-lg py-0">
<h5 class="dropdown-item-text m-0 py-3 d-flex justify-content-between align-items-center">
Notifications <a href="#" class="badge text-body-tertiary badge-pill">
<i class="iconoir-plus-circle fs-4"></i>
</a>
</h5>
<ul class="nav nav-tabs nav-tabs-custom nav-success nav-justified mb-1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link mx-0 active" data-bs-toggle="tab" href="#All" role="tab" aria-selected="true">
All <span class="badge bg-primary-subtle text-primary badge-pill ms-1">24</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link mx-0" data-bs-toggle="tab" href="#Projects" role="tab" aria-selected="false" tabindex="-1">
Projects
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link mx-0" data-bs-toggle="tab" href="#Teams" role="tab" aria-selected="false" tabindex="-1">
Team
</a>
</li>
</ul>
<div class="ms-0" style="max-height:230px;" data-simplebar>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="All" role="tabpanel" aria-labelledby="all-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-wolf fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">Dummy text of the printing and industry.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">10 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-apple-swift fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Meeting with designers</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">40 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-birthday-cake fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">UX 3 Task complete.</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
<div class="tab-pane fade" id="Projects" role="tabpanel" aria-labelledby="projects-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">40 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-birthday-cake fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">UX 3 Task complete.</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
<div class="tab-pane fade" id="Teams" role="tabpanel" aria-labelledby="teams-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
</div>
</div>
<!-- All-->
<a href="pages-notifications.html" class="dropdown-item text-center text-dark fs-13 py-2">
View All <i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown topbar-item">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-lg rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end py-0">
<div class="d-flex align-items-center dropdown-item py-2 bg-secondary-subtle">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-md rounded-circle">
</div>
<div class="flex-grow-1 ms-2 text-truncate align-self-center">
<h6 class="my-0 fw-medium text-dark fs-13">William Martin</h6>
<small class="text-muted mb-0">Front End Developer</small>
</div><!--end media-body-->
</div>
<div class="dropdown-divider mt-0"></div>
<small class="text-muted px-2 pb-1 d-block">Account</small>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-user fs-18 me-1 align-text-bottom"></i> Profile</a>
<a class="dropdown-item" href="pages-faq.html"><i class="las la-wallet fs-18 me-1 align-text-bottom"></i> Earning</a>
<small class="text-muted px-2 py-1 d-block">Settings</small>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-cog fs-18 me-1 align-text-bottom"></i>Account Settings</a>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-lock fs-18 me-1 align-text-bottom"></i> Security</a>
<a class="dropdown-item" href="pages-faq.html"><i class="las la-question-circle fs-18 me-1 align-text-bottom"></i> Help Center</a>
<div class="dropdown-divider mb-0"></div>
<a class="dropdown-item text-danger" href="auth-login.html"><i class="las la-power-off fs-18 me-1 align-text-bottom"></i> Logout</a>
</div>
</li>
</ul><!--end topbar-nav-->
</nav>
<!-- end navbar-->
</div>
</div>
<!-- Top Bar End -->
<!-- leftbar-tab-menu -->
<div class="startbar d-print-none">
<!--start brand-->
<div class="brand">
<a href="index.html" class="logo">
<span>
<img src="assets/images/logo-sm.png" alt="logo-small" class="logo-sm">
</span>
<span class="">
<img src="assets/images/logo-light.png" alt="logo-large" class="logo-lg logo-light">
<img src="assets/images/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">
</span>
</a>
</div>
<!--end brand-->
<!--start startbar-menu-->
<div class="startbar-menu" >
<div class="startbar-collapse" id="startbarCollapse" data-simplebar>
<div class="d-flex align-items-start flex-column w-100">
<!-- Navigation -->
<ul class="navbar-nav mb-auto w-100">
<li class="menu-label pt-0 mt-0">
<span>Main Menu</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarForex" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarForex">
<i class="iconoir-dollar-circle menu-icon"></i>
<span>Forex</span>
</a>
<div class="collapse " id="sidebarForex">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Dashboard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-accounts.html">My Accounts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-copy-accounts.html">Copy Accounts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-withdrawal.html">Withdrawal Request</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-transactions.html">Transactions</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarForex-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarCrypto" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarCrypto">
<i class="iconoir-bitcoin-circle menu-icon"></i>
<span>Crypto</span>
</a>
<div class="collapse " id="sidebarCrypto">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="crypto-index.html">Dashboard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-exchange.html">Exchange</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-portfolio.html">Portfolio</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-wallet.html">Wallet</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-news.html">Crypto News</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarCrypto-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-chat.html">
<i class="iconoir-chat-lines menu-icon"></i>
<span>Chat</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-contact-list.html">
<i class="iconoir-list menu-icon"></i>
<span>Contact List</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-calendar.html">
<i class="iconoir-calendar menu-icon"></i>
<span>Calendar</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-invoice.html">
<i class="iconoir-page menu-icon"></i>
<span>Ivoice</span>
</a>
</li><!--end nav-item-->
<li class="menu-label mt-2">
<small class="label-border">
<div class="border_left hidden-xs"></div>
<div class="border_right"></div>
</small>
<span>Components</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarElements" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarElements">
<i class="iconoir-compact-disc menu-icon"></i>
<span>UI Elements</span>
</a>
<div class="collapse " id="sidebarElements">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="ui-alerts.html">Alerts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-avatar.html">Avatar</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-buttons.html">Buttons</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-badges.html">Badges</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-cards.html">Cards</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-carousels.html">Carousels</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-dropdowns.html">Dropdowns</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-grids.html">Grids</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-images.html">Images</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-list.html">List</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-modals.html">Modals</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-navs.html">Navs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-navbar.html">Navbar</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-paginations.html">Paginations</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-popover-tooltips.html">Popover & Tooltips</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-progress.html">Progress</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-spinners.html">Spinners</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-tabs-accordions.html">Tabs & Accordions</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-typography.html">Typography</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-videos.html">Videos</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarElements-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarAdvancedUI" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarAdvancedUI">
<i class="iconoir-peace-hand menu-icon"></i>
<span>Advanced UI</span><span class="badge rounded text-success bg-success-subtle ms-1">New</span>
</a>
<div class="collapse " id="sidebarAdvancedUI">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="advanced-animation.html">Animation</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-clipboard.html">Clip Board</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-dragula.html">Dragula</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-files.html">File Manager</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-highlight.html">Highlight</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-rangeslider.html">Range Slider</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-ratings.html">Ratings</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-ribbons.html">Ribbons</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-sweetalerts.html">Sweet Alerts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-toasts.html">Toasts</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarAdvancedUI-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarForms" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarForms">
<i class="iconoir-journal-page menu-icon"></i>
<span>Forms</span>
</a>
<div class="collapse " id="sidebarForms">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="forms-elements.html">Basic Elements</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-advanced.html">Advance Elements</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-validation.html">Validation</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-wizard.html">Wizard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-editors.html">Editors</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-uploads.html">File Upload</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-img-crop.html">Image Crop</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarForms-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarCharts" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarCharts">
<i class="iconoir-candlestick-chart menu-icon"></i>
<span>Charts</span>
</a>
<div class="collapse " id="sidebarCharts">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="charts-apex.html">Apex</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-justgage.html">JustGage</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-chartjs.html">Chartjs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-toast-ui.html">Toast</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarCharts-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarTables" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarTables">
<i class="iconoir-table-rows menu-icon"></i>
<span>Tables</span>
</a>
<div class="collapse " id="sidebarTables">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="tables-basic.html">Basic</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="tables-datatable.html">Datatables</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="tables-editable.html">Editable</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarTables-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarIcons" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarIcons">
<i class="iconoir-trophy menu-icon"></i>
<span>Icons</span>
</a>
<div class="collapse " id="sidebarIcons">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="icons-fontawesome.html">Font Awesome</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-lineawesome.html">Line Awesome</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-icofont.html">Icofont</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-iconoir.html">Iconoir</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarIcons-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarMaps" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarMaps">
<i class="iconoir-navigator-alt menu-icon"></i>
<span>Maps</span>
</a>
<div class="collapse " id="sidebarMaps">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="maps-google.html">Google Maps</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="maps-leaflet.html">Leaflet Maps</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="maps-vector.html">Vector Maps</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarMaps-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarEmailTemplates" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarEmailTemplates">
<i class="iconoir-send-mail menu-icon"></i>
<span>Email Templates</span>
</a>
<div class="collapse " id="sidebarEmailTemplates">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="email-templates-basic.html">Basic Action Email</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="email-templates-alert.html">Alert Email</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="email-templates-billing.html">Billing Email</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarEmailTemplates-->
</li><!--end nav-item-->
<li class="menu-label mt-2">
<small class="label-border">
<div class="border_left hidden-xs"></div>
<div class="border_right"></div>
</small>
<span>Crafted</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarPages" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarPages">
<i class="iconoir-page-star menu-icon"></i>
<span>Pages</span>
</a>
<div class="collapse " id="sidebarPages">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-profile.html">Profile</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-notifications.html">Notifications</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-timeline.html">Timeline</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-treeview.html">Treeview</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-starter.html">Starter Page</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-pricing.html">Pricing</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-blogs.html">Blogs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-faq.html">FAQs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-gallery.html">Gallery</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarPages-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarAuthentication" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarAuthentication">
<i class="iconoir-fingerprint-lock-circle menu-icon"></i>
<span>Authentication</span>
</a>
<div class="collapse " id="sidebarAuthentication">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="auth-login.html">Log in</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-register.html">Register</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-recover-pw.html">Re-Password</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-lock-screen.html">Lock Screen</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-maintenance.html">Maintenance</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-404.html">Error 404</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-500.html">Error 500</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarAuthentication-->
</li><!--end nav-item-->
</ul><!--end navbar-nav--->
<div class="update-msg text-center">
<div class="d-flex justify-content-center align-items-center thumb-lg update-icon-box rounded-circle mx-auto">
<i class="iconoir-peace-hand h3 align-self-center mb-0 text-primary"></i>
</div>
<h5 class="mt-3">Mannat Themes</h5>
<p class="mb-3 text-muted">Forexo is a high quality web applications.</p>
<a href="javascript: void(0);" class="btn text-primary shadow-sm rounded-pill">Upgrade your plan</a>
</div>
</div>
</div><!--end startbar-collapse-->
</div><!--end startbar-menu-->
</div><!--end startbar-->
<div class="startbar-overlay d-print-none"></div>
<!-- end leftbar-tab-menu-->
<div class="page-wrapper">
<!-- Page Content-->
<div class="page-content">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Image Cropper</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="img-container mb-0">
<img id="image" src="assets/images/extra/card/img-1.jpg" alt="Picture">
</div>
</div><!--end card-body-->
</div><!--end card-->
<div id="actions">
<div class="card docs-buttons">
<div class="card-body">
<!-- <h3>Toolbar:</h3> -->
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="setDragMode" data-option="move" title="Move">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setDragMode", "move")">
<span class="fas fa-expand-arrows-alt"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="setDragMode" data-option="crop" title="Crop">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setDragMode", "crop")">
<span class="fas fa-crop"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)">
<span class="fas fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)">
<span class="fas fa-search-minus"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)">
<span class="fas fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="move" data-option="10" data-second-option="0" title="Move Right">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)">
<span class="fas fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)">
<span class="fas fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="move" data-option="0" data-second-option="10" title="Move Down">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="rotate" data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -45)">
<span class="fas fa-reply"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="rotate" data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 45)">
<span class="fas fa-share"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="scaleX" data-option="-1" title="Flip Horizontal">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("scaleX", -1)">
<span class="fa fa-arrows-alt-h"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="scaleY" data-option="-1" title="Flip Vertical">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("scaleY", -1)">
<span class="fas fa-arrows-alt-v"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="crop" title="Crop">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("crop")">
<span class="fas fa-check"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="clear" title="Clear">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("clear")">
<span class="fas fa-times"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="disable" title="Disable">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("disable")">
<span class="fas fa-lock"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="enable" title="Enable">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("enable")">
<span class="fas fa-unlock"></span>
</span>
</button>
</div>
<div class="btn-group mb-2 mr-1">
<button type="button" class="btn btn-light" data-method="reset" title="Reset">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("reset")">
<span class="fas fa-redo"></span>
</span>
</button>
<button type="button" class="btn btn-light btn-upload" title="Upload image file">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
<span class="fas fa-upload"></span>
</span>
</button>
<button type="button" class="btn btn-light" data-method="destroy" title="Destroy">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("destroy")">
<span class="fas fa-power-off"></span>
</span>
</button>
</div>
<div class="btn-group btn-group-crop mb-2 mr-1">
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })">
320×180
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
</div>
</div>
</div>
</div><!-- /.modal -->
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="getData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getData")">
Get Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="setData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setData", data)">
Set Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="getContainerData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getContainerData")">
Get Container Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="getImageData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getImageData")">
Get Image Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="getCanvasData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCanvasData")">
Get Canvas Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="setCanvasData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setCanvasData", data)">
Set Canvas Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="getCropBoxData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCropBoxData")">
Get Crop Box Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="setCropBoxData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setCropBoxData", data)">
Set Crop Box Data
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="moveTo" data-option="0">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.moveTo(0)">
Move to [0,0]
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="zoomTo" data-option="1">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.zoomTo(1)">
Zoom to 100%
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="rotateTo" data-option="180">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.rotateTo(180)">
Rotate 180°
</span>
</button>
<button type="button" class="btn btn-secondary mb-2 mr-1" data-method="scale" data-option="-2" data-second-option="-1">
<span class="docs-tooltip" data-bs-toggle="tooltip" title="cropper.scale(-2, -1)">
Scale (-2, -1)
</span>
</button>
<textarea class="form-control" id="putData" rows="3" placeholder="Get data to here or set data with this value"></textarea>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end action-->
</div> <!--end col-->
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
<div class="img-preview preview-xs"></div>
</div>
<!-- <h3>Data:</h3> -->
<div class="docs-data">
<div class="input-group mb-2">
<span class="input-group-text">X</span>
<input type="text" class="form-control" id="dataX" placeholder="x">
<span class="input-group-text">px</span>
</div>
<div class="input-group mb-2">
<span class="input-group-text">Y</span>
<input type="text" class="form-control" id="dataY" placeholder="y">
<span class="input-group-text">px</span>
</div>
<div class="input-group mb-2">
<span class="input-group-text">Width</span>
<input type="text" class="form-control" id="dataWidth" placeholder="width">
<span class="input-group-text">px</span>
</div>
<div class="input-group mb-2">
<span class="input-group-text">Height</span>
<input type="text" class="form-control" id="dataHeight" placeholder="height">
<span class="input-group-text">px</span>
</div>
<div class="input-group mb-2">
<span class="input-group-text">Rotate</span>
<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
<span class="input-group-text">deg</span>
</div>
<div class="input-group mb-2">
<span class="input-group-text">ScaleX</span>
<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
</div>
<div class="input-group mb-0">
<span class="input-group-text">ScaleY</span>
<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
</div>
</div>
</div><!--end card-body-->
</div><!--end card-->
<div class="card docs-toggles">
<div class="card-body">
<div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
<label class="btn btn-light mb-1 active">
<input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 16 / 9">
16:9
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 4 / 3">
4:3
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 1 / 1">
1:1
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 2 / 3">
2:3
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: NaN">
Free
</span>
</label>
</div>
<div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
<label class="btn btn-light mb-1 active">
<input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked>
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="View Mode 0">
VM0
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="View Mode 1">
VM1
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="View Mode 2">
VM2
</span>
</label>
<label class="btn btn-light mb-1">
<input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="View Mode 3">
VM3
</span>
</label>
</div>
<div class="dropdown dropup docs-options mt-2">
<button type="button" class="btn btn-secondary dropdown-toggle w-100" id="toggleOptions" data-bs-toggle="dropdown" aria-expanded="true">
Toggle Options
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="toggleOptions" role="menu">
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="responsive" type="checkbox" name="responsive" checked>
<label class="form-check-label" for="responsive">responsive</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="restore" type="checkbox" name="restore" checked>
<label class="form-check-label" for="restore">restore</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="checkCrossOrigin" type="checkbox" name="checkCrossOrigin" checked>
<label class="form-check-label" for="checkCrossOrigin">checkCrossOrigin</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="checkOrientation" type="checkbox" name="checkOrientation" checked>
<label class="form-check-label" for="checkOrientation">checkOrientation</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="modal" type="checkbox" name="modal" checked>
<label class="form-check-label" for="modal">modal</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="guides" type="checkbox" name="guides" checked>
<label class="form-check-label" for="guides">guides</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="center" type="checkbox" name="center" checked>
<label class="form-check-label" for="center">center</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="highlight" type="checkbox" name="highlight" checked>
<label class="form-check-label" for="highlight">highlight</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="background" type="checkbox" name="background" checked>
<label class="form-check-label" for="background">background</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="autoCrop" type="checkbox" name="autoCrop" checked>
<label class="form-check-label" for="autoCrop">autoCrop</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="movable" type="checkbox" name="movable" checked>
<label class="form-check-label" for="movable">movable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="rotatable" type="checkbox" name="rotatable" checked>
<label class="form-check-label" for="rotatable">rotatable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="scalable" type="checkbox" name="scalable" checked>
<label class="form-check-label" for="scalable">scalable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomable" type="checkbox" name="zoomable" checked>
<label class="form-check-label" for="zoomable">zoomable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomOnTouch" type="checkbox" name="zoomOnTouch" checked>
<label class="form-check-label" for="zoomOnTouch">zoomOnTouch</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomOnWheel" type="checkbox" name="zoomOnWheel" checked>
<label class="form-check-label" for="zoomOnWheel">zoomOnWheel</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="cropBoxMovable" type="checkbox" name="cropBoxMovable" checked>
<label class="form-check-label" for="cropBoxMovable">cropBoxMovable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="cropBoxResizable" type="checkbox" name="cropBoxResizable" checked>
<label class="form-check-label" for="cropBoxResizable">cropBoxResizable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="toggleDragModeOnDblclick" type="checkbox" name="toggleDragModeOnDblclick" checked>
<label class="form-check-label" for="toggleDragModeOnDblclick">toggleDragModeOnDblclick</label>
</div>
</li>
</ul>
</div><!-- /.dropdown -->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
</div><!-- container -->
<!--Start Rightbar-->
<!--Start Rightbar/offcanvas-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
<div class="offcanvas-header border-bottom justify-content-between">
<h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
<button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h6>Account Settings</h6>
<div class="p-2 text-start mt-3">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch1">
<label class="form-check-label" for="settings-switch1">Auto updates</label>
</div><!--end form-switch-->
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch2" checked>
<label class="form-check-label" for="settings-switch2">Location Permission</label>
</div><!--end form-switch-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="settings-switch3">
<label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
</div><!--end form-switch-->
</div><!--end /div-->
<h6>General Settings</h6>
<div class="p-2 text-start mt-3">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch4">
<label class="form-check-label" for="settings-switch4">Show me Online</label>
</div><!--end form-switch-->
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch5" checked>
<label class="form-check-label" for="settings-switch5">Status visible to all</label>
</div><!--end form-switch-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="settings-switch6">
<label class="form-check-label" for="settings-switch6">Notifications Popup</label>
</div><!--end form-switch-->
</div><!--end /div-->
</div><!--end offcanvas-body-->
</div>
<!--end Rightbar/offcanvas-->
<!--end Rightbar-->
<!--Start Footer-->
<footer class="footer text-center text-sm-start d-print-none">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card mb-0 rounded-bottom-0">
<div class="card-body">
<p class="text-muted mb-0">
©
<script> document.write(new Date().getFullYear()) </script>
Forexo
<span
class="text-muted d-none d-sm-inline-block float-end">
Crafted with
<i class="iconoir-heart text-danger"></i>
by Mannatthemes</span>
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
</div>
<!-- end page content -->
</div>
<!-- end page-wrapper -->
<!-- Javascript -->
<!-- vendor js -->
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/iconify-icon/iconify-icon.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/cropperjs/cropper.min.js"></script>
<script src="assets/js/pages/crop.init.js"></script>
<script src="assets/js/app.js"></script>
</body>
<!--end body-->
</html>