4026 lines
215 KiB
HTML
4026 lines
215 KiB
HTML
<!doctype html>
|
||
|
||
<html
|
||
lang="en"
|
||
class=" layout-navbar-fixed layout-menu-fixed layout-compact "
|
||
dir="ltr"
|
||
data-skin="default"
|
||
data-bs-theme="light"
|
||
data-assets-path="../../assets/"
|
||
data-template="vertical-menu-template-no-customizer">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<title>Demo: Modals - UI elements | Vuexy - Bootstrap Dashboard PRO</title>
|
||
|
||
<meta name="description" content="" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||
rel="stylesheet" />
|
||
|
||
<link rel="stylesheet" href="../../assets/vendor/fonts/iconify-icons.css" />
|
||
|
||
<script src="../../assets/vendor/libs/@algolia/autocomplete-js.js"></script>
|
||
|
||
<!-- Core CSS -->
|
||
<!-- build:css assets/vendor/css/theme.css -->
|
||
|
||
<link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
|
||
|
||
<link rel="stylesheet" href="../../assets/vendor/css/core.css" />
|
||
<link rel="stylesheet" href="../../assets/css/demo.css" />
|
||
|
||
<!-- Vendors CSS -->
|
||
|
||
<link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||
|
||
<!-- endbuild -->
|
||
|
||
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
|
||
<link rel="stylesheet" href="../../assets/vendor/libs/@form-validation/form-validation.css" />
|
||
<link rel="stylesheet" href="../../assets/vendor/libs/bs-stepper/bs-stepper.css" />
|
||
|
||
<!-- Page CSS -->
|
||
|
||
<!-- Helpers -->
|
||
<script src="../../assets/vendor/js/helpers.js"></script>
|
||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||
|
||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||
|
||
<script src="../../assets/js/config.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Layout wrapper -->
|
||
<div class="layout-wrapper layout-content-navbar ">
|
||
<div class="layout-container">
|
||
<!-- Menu -->
|
||
|
||
<aside id="layout-menu" class="layout-menu menu-vertical menu">
|
||
<div class="app-brand demo ">
|
||
<a href="index.html" class="app-brand-link">
|
||
<span class="app-brand-logo demo">
|
||
<span class="text-primary">
|
||
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
|
||
fill="currentColor" />
|
||
<path
|
||
opacity="0.06"
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
|
||
fill="#161616" />
|
||
<path
|
||
opacity="0.06"
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
|
||
fill="#161616" />
|
||
<path
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
|
||
fill="currentColor" />
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
<span class="app-brand-text demo menu-text fw-bold ms-3">Vuexy</span>
|
||
</a>
|
||
|
||
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
|
||
<i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
|
||
<i class="icon-base ti tabler-x d-block d-xl-none"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="menu-inner-shadow"></div>
|
||
|
||
<ul class="menu-inner py-1">
|
||
<!-- Dashboards -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-smart-home"></i>
|
||
<div data-i18n="Dashboards">Dashboards</div>
|
||
<div class="badge text-bg-danger rounded-pill ms-auto">5</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="index.html" class="menu-link">
|
||
<div data-i18n="Analytics">Analytics</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="dashboards-crm.html" class="menu-link">
|
||
<div data-i18n="CRM">CRM</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-dashboard.html" class="menu-link">
|
||
<div data-i18n="eCommerce">eCommerce</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-logistics-dashboard.html" class="menu-link">
|
||
<div data-i18n="Logistics">Logistics</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-academy-dashboard.html" class="menu-link">
|
||
<div data-i18n="Academy">Academy</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Layouts -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-layout-sidebar"></i>
|
||
<div data-i18n="Layouts">Layouts</div>
|
||
</a>
|
||
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="layouts-collapsed-menu.html" class="menu-link">
|
||
<div data-i18n="Collapsed menu">Collapsed menu</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-content-navbar.html" class="menu-link">
|
||
<div data-i18n="Content navbar">Content navbar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-content-navbar-with-sidebar.html" class="menu-link">
|
||
<div data-i18n="Content nav + Sidebar">Content nav + Sidebar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="../horizontal-menu-template/" class="menu-link" target="_blank">
|
||
<div data-i18n="Horizontal">Horizontal</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-without-menu.html" class="menu-link">
|
||
<div data-i18n="Without menu">Without menu</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-without-navbar.html" class="menu-link">
|
||
<div data-i18n="Without navbar">Without navbar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-fluid.html" class="menu-link">
|
||
<div data-i18n="Fluid">Fluid</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-container.html" class="menu-link">
|
||
<div data-i18n="Container">Container</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="layouts-blank.html" class="menu-link">
|
||
<div data-i18n="Blank">Blank</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Front Pages -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-files"></i>
|
||
<div data-i18n="Front Pages">Front Pages</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="../front-pages/landing-page.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Landing">Landing</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="../front-pages/pricing-page.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Pricing">Pricing</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="../front-pages/payment-page.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Payment">Payment</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="../front-pages/checkout-page.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Checkout">Checkout</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="../front-pages/help-center-landing.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Help Center">Help Center</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Apps & Pages -->
|
||
<li class="menu-header small">
|
||
<span class="menu-header-text" data-i18n="Apps & Pages">Apps & Pages</span>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-email.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-mail"></i>
|
||
<div data-i18n="Email">Email</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-chat.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-messages"></i>
|
||
<div data-i18n="Chat">Chat</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-calendar.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-calendar"></i>
|
||
<div data-i18n="Calendar">Calendar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-kanban.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-layout-kanban"></i>
|
||
<div data-i18n="Kanban">Kanban</div>
|
||
</a>
|
||
</li>
|
||
<!-- e-commerce-app menu start -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-shopping-cart"></i>
|
||
<div data-i18n="eCommerce">eCommerce</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-dashboard.html" class="menu-link">
|
||
<div data-i18n="Dashboard">Dashboard</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Products">Products</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-product-list.html" class="menu-link">
|
||
<div data-i18n="Product List">Product List</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-product-add.html" class="menu-link">
|
||
<div data-i18n="Add Product">Add Product</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-category-list.html" class="menu-link">
|
||
<div data-i18n="Category List">Category List</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Order">Order</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-order-list.html" class="menu-link">
|
||
<div data-i18n="Order List">Order List</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-order-details.html" class="menu-link">
|
||
<div data-i18n="Order Details">Order Details</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Customer">Customer</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-customer-all.html" class="menu-link">
|
||
<div data-i18n="All Customers">All Customers</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Customer Details">Customer Details</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-customer-details-overview.html" class="menu-link">
|
||
<div data-i18n="Overview">Overview</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-customer-details-security.html" class="menu-link">
|
||
<div data-i18n="Security">Security</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-customer-details-billing.html" class="menu-link">
|
||
<div data-i18n="Address & Billing">Address & Billing</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-customer-details-notifications.html" class="menu-link">
|
||
<div data-i18n="Notifications">Notifications</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-manage-reviews.html" class="menu-link">
|
||
<div data-i18n="Manage Reviews">Manage Reviews</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-referral.html" class="menu-link">
|
||
<div data-i18n="Referrals">Referrals</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Settings">Settings</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-detail.html" class="menu-link">
|
||
<div data-i18n="Store Details">Store Details</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-payments.html" class="menu-link">
|
||
<div data-i18n="Payments">Payments</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-checkout.html" class="menu-link">
|
||
<div data-i18n="Checkout">Checkout</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-shipping.html" class="menu-link">
|
||
<div data-i18n="Shipping & Delivery">Shipping & Delivery</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-locations.html" class="menu-link">
|
||
<div data-i18n="Locations">Locations</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-ecommerce-settings-notifications.html" class="menu-link">
|
||
<div data-i18n="Notifications">Notifications</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- e-commerce-app menu end -->
|
||
<!-- Academy menu start -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-book"></i>
|
||
<div data-i18n="Academy">Academy</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-academy-dashboard.html" class="menu-link">
|
||
<div data-i18n="Dashboard">Dashboard</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-academy-course.html" class="menu-link">
|
||
<div data-i18n="My Course">My Course</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-academy-course-details.html" class="menu-link">
|
||
<div data-i18n="Course Details">Course Details</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- Academy menu end -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-truck"></i>
|
||
<div data-i18n="Logistics">Logistics</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-logistics-dashboard.html" class="menu-link">
|
||
<div data-i18n="Dashboard">Dashboard</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-logistics-fleet.html" class="menu-link">
|
||
<div data-i18n="Fleet">Fleet</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-file-dollar"></i>
|
||
<div data-i18n="Invoice">Invoice</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-invoice-list.html" class="menu-link">
|
||
<div data-i18n="List">List</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-invoice-preview.html" class="menu-link">
|
||
<div data-i18n="Preview">Preview</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-invoice-edit.html" class="menu-link">
|
||
<div data-i18n="Edit">Edit</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-invoice-add.html" class="menu-link">
|
||
<div data-i18n="Add">Add</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-users"></i>
|
||
<div data-i18n="Users">Users</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-user-list.html" class="menu-link">
|
||
<div data-i18n="List">List</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="View">View</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-user-view-account.html" class="menu-link">
|
||
<div data-i18n="Account">Account</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-user-view-security.html" class="menu-link">
|
||
<div data-i18n="Security">Security</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-user-view-billing.html" class="menu-link">
|
||
<div data-i18n="Billing & Plans">Billing & Plans</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-user-view-notifications.html" class="menu-link">
|
||
<div data-i18n="Notifications">Notifications</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-user-view-connections.html" class="menu-link">
|
||
<div data-i18n="Connections">Connections</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-settings"></i>
|
||
<div data-i18n="Roles & Permissions">Roles & Permissions</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="app-access-roles.html" class="menu-link">
|
||
<div data-i18n="Roles">Roles</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="app-access-permission.html" class="menu-link">
|
||
<div data-i18n="Permission">Permission</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-file"></i>
|
||
<div data-i18n="Pages">Pages</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="User Profile">User Profile</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="pages-profile-user.html" class="menu-link">
|
||
<div data-i18n="Profile">Profile</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-profile-teams.html" class="menu-link">
|
||
<div data-i18n="Teams">Teams</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-profile-projects.html" class="menu-link">
|
||
<div data-i18n="Projects">Projects</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-profile-connections.html" class="menu-link">
|
||
<div data-i18n="Connections">Connections</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Account Settings">Account Settings</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="pages-account-settings-account.html" class="menu-link">
|
||
<div data-i18n="Account">Account</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-account-settings-security.html" class="menu-link">
|
||
<div data-i18n="Security">Security</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-account-settings-billing.html" class="menu-link">
|
||
<div data-i18n="Billing & Plans">Billing & Plans</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-account-settings-notifications.html" class="menu-link">
|
||
<div data-i18n="Notifications">Notifications</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-account-settings-connections.html" class="menu-link">
|
||
<div data-i18n="Connections">Connections</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-faq.html" class="menu-link">
|
||
<div data-i18n="FAQ">FAQ</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-pricing.html" class="menu-link">
|
||
<div data-i18n="Pricing">Pricing</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Misc">Misc</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="pages-misc-error.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Error">Error</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-misc-under-maintenance.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Under Maintenance">Under Maintenance</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-misc-comingsoon.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Coming Soon">Coming Soon</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="pages-misc-not-authorized.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Not Authorized">Not Authorized</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-lock"></i>
|
||
<div data-i18n="Authentications">Authentications</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Login">Login</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-login-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-login-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Register">Register</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-register-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-register-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-register-multisteps.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Multi-steps">Multi-steps</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Verify Email">Verify Email</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-verify-email-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-verify-email-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Reset Password">Reset Password</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-reset-password-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-reset-password-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Forgot Password">Forgot Password</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-forgot-password-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-forgot-password-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Two Steps">Two Steps</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="auth-two-steps-basic.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="auth-two-steps-cover.html" class="menu-link" target="_blank">
|
||
<div data-i18n="Cover">Cover</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-forms"></i>
|
||
<div data-i18n="Wizard Examples">Wizard Examples</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="wizard-ex-checkout.html" class="menu-link">
|
||
<div data-i18n="Checkout">Checkout</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="wizard-ex-property-listing.html" class="menu-link">
|
||
<div data-i18n="Property Listing">Property Listing</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="wizard-ex-create-deal.html" class="menu-link">
|
||
<div data-i18n="Create Deal">Create Deal</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item active">
|
||
<a href="modal-examples.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-square"></i>
|
||
<div data-i18n="Modal Examples">Modal Examples</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Components -->
|
||
<li class="menu-header small">
|
||
<span class="menu-header-text" data-i18n="Components">Components</span>
|
||
</li>
|
||
<!-- Cards -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-id"></i>
|
||
<div data-i18n="Cards">Cards</div>
|
||
<div class="badge text-bg-primary rounded-pill ms-auto">5</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="cards-basic.html" class="menu-link">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="cards-advance.html" class="menu-link">
|
||
<div data-i18n="Advance">Advance</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="cards-statistics.html" class="menu-link">
|
||
<div data-i18n="Statistics">Statistics</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="cards-analytics.html" class="menu-link">
|
||
<div data-i18n="Analytics">Analytics</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="cards-actions.html" class="menu-link">
|
||
<div data-i18n="Actions">Actions</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- User interface -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-color-swatch"></i>
|
||
<div data-i18n="User interface">User interface</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="ui-accordion.html" class="menu-link">
|
||
<div data-i18n="Accordion">Accordion</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-alerts.html" class="menu-link">
|
||
<div data-i18n="Alerts">Alerts</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-badges.html" class="menu-link">
|
||
<div data-i18n="Badges">Badges</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-buttons.html" class="menu-link">
|
||
<div data-i18n="Buttons">Buttons</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-carousel.html" class="menu-link">
|
||
<div data-i18n="Carousel">Carousel</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-collapse.html" class="menu-link">
|
||
<div data-i18n="Collapse">Collapse</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-dropdowns.html" class="menu-link">
|
||
<div data-i18n="Dropdowns">Dropdowns</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-footer.html" class="menu-link">
|
||
<div data-i18n="Footer">Footer</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-list-groups.html" class="menu-link">
|
||
<div data-i18n="List Groups">List groups</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-modals.html" class="menu-link">
|
||
<div data-i18n="Modals">Modals</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-navbar.html" class="menu-link">
|
||
<div data-i18n="Navbar">Navbar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-offcanvas.html" class="menu-link">
|
||
<div data-i18n="Offcanvas">Offcanvas</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-pagination-breadcrumbs.html" class="menu-link">
|
||
<div data-i18n="Pagination & Breadcrumbs">Pagination & Breadcrumbs</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-progress.html" class="menu-link">
|
||
<div data-i18n="Progress">Progress</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-spinners.html" class="menu-link">
|
||
<div data-i18n="Spinners">Spinners</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-tabs-pills.html" class="menu-link">
|
||
<div data-i18n="Tabs & Pills">Tabs & Pills</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-toasts.html" class="menu-link">
|
||
<div data-i18n="Toasts">Toasts</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-tooltips-popovers.html" class="menu-link">
|
||
<div data-i18n="Tooltips & Popovers">Tooltips & Popovers</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="ui-typography.html" class="menu-link">
|
||
<div data-i18n="Typography">Typography</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Extended components -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-components"></i>
|
||
<div data-i18n="Extended UI">Extended UI</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="extended-ui-avatar.html" class="menu-link">
|
||
<div data-i18n="Avatar">Avatar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-blockui.html" class="menu-link">
|
||
<div data-i18n="BlockUI">BlockUI</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-drag-and-drop.html" class="menu-link">
|
||
<div data-i18n="Drag & Drop">Drag & Drop</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-media-player.html" class="menu-link">
|
||
<div data-i18n="Media Player">Media Player</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-perfect-scrollbar.html" class="menu-link">
|
||
<div data-i18n="Perfect Scrollbar">Perfect Scrollbar</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-star-ratings.html" class="menu-link">
|
||
<div data-i18n="Star Ratings">Star Ratings</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-sweetalert2.html" class="menu-link">
|
||
<div data-i18n="SweetAlert2">SweetAlert2</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-text-divider.html" class="menu-link">
|
||
<div data-i18n="Text Divider">Text Divider</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<div data-i18n="Timeline">Timeline</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="extended-ui-timeline-basic.html" class="menu-link">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-timeline-fullscreen.html" class="menu-link">
|
||
<div data-i18n="Fullscreen">Fullscreen</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-tour.html" class="menu-link">
|
||
<div data-i18n="Tour">Tour</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-treeview.html" class="menu-link">
|
||
<div data-i18n="Treeview">Treeview</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="extended-ui-misc.html" class="menu-link">
|
||
<div data-i18n="Miscellaneous">Miscellaneous</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Icons -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-brand-tabler"></i>
|
||
<div data-i18n="Icons">Icons</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="icons-tabler.html" class="menu-link">
|
||
<div data-i18n="Tabler">Tabler</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="icons-font-awesome.html" class="menu-link">
|
||
<div data-i18n="Font Awesome">Font Awesome</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Forms & Tables -->
|
||
<li class="menu-header small">
|
||
<span class="menu-header-text" data-i18n="Forms & Tables">Forms & Tables</span>
|
||
</li>
|
||
<!-- Forms -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-toggle-left"></i>
|
||
<div data-i18n="Form Elements">Form Elements</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="forms-basic-inputs.html" class="menu-link">
|
||
<div data-i18n="Basic Inputs">Basic Inputs</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-input-groups.html" class="menu-link">
|
||
<div data-i18n="Input groups">Input groups</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-custom-options.html" class="menu-link">
|
||
<div data-i18n="Custom Options">Custom Options</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-editors.html" class="menu-link">
|
||
<div data-i18n="Editors">Editors</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-file-upload.html" class="menu-link">
|
||
<div data-i18n="File Upload">File Upload</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-pickers.html" class="menu-link">
|
||
<div data-i18n="Pickers">Pickers</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-selects.html" class="menu-link">
|
||
<div data-i18n="Select & Tags">Select & Tags</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-sliders.html" class="menu-link">
|
||
<div data-i18n="Sliders">Sliders</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-switches.html" class="menu-link">
|
||
<div data-i18n="Switches">Switches</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="forms-extras.html" class="menu-link">
|
||
<div data-i18n="Extras">Extras</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-layout-navbar"></i>
|
||
<div data-i18n="Form Layouts">Form Layouts</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="form-layouts-vertical.html" class="menu-link">
|
||
<div data-i18n="Vertical Form">Vertical Form</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="form-layouts-horizontal.html" class="menu-link">
|
||
<div data-i18n="Horizontal Form">Horizontal Form</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="form-layouts-sticky.html" class="menu-link">
|
||
<div data-i18n="Sticky Actions">Sticky Actions</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-text-wrap-disabled"></i>
|
||
<div data-i18n="Form Wizard">Form Wizard</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="form-wizard-numbered.html" class="menu-link">
|
||
<div data-i18n="Numbered">Numbered</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="form-wizard-icons.html" class="menu-link">
|
||
<div data-i18n="Icons">Icons</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="form-validation.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-checkbox"></i>
|
||
<div data-i18n="Form Validation">Form Validation</div>
|
||
</a>
|
||
</li>
|
||
<!-- Tables -->
|
||
<li class="menu-item">
|
||
<a href="tables-basic.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-table"></i>
|
||
<div data-i18n="Tables">Tables</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-layout-grid"></i>
|
||
<div data-i18n="Datatables">Datatables</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="tables-datatables-basic.html" class="menu-link">
|
||
<div data-i18n="Basic">Basic</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="tables-datatables-advanced.html" class="menu-link">
|
||
<div data-i18n="Advanced">Advanced</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="tables-datatables-extensions.html" class="menu-link">
|
||
<div data-i18n="Extensions">Extensions</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Charts & Maps -->
|
||
<li class="menu-header small">
|
||
<span class="menu-header-text" data-i18n="Charts & Maps">Charts & Maps</span>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-chart-pie"></i>
|
||
<div data-i18n="Charts">Charts</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="charts-apex.html" class="menu-link">
|
||
<div data-i18n="Apex Charts">Apex Charts</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="charts-chartjs.html" class="menu-link">
|
||
<div data-i18n="ChartJS">ChartJS</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="maps-leaflet.html" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-map"></i>
|
||
<div data-i18n="Leaflet Maps">Leaflet Maps</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Misc -->
|
||
<li class="menu-header small">
|
||
<span class="menu-header-text" data-i18n="Misc">Misc</span>
|
||
</li>
|
||
|
||
<!-- Multi Level Menu -->
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link menu-toggle">
|
||
<i class="menu-icon icon-base ti tabler-layout-board"></i>
|
||
<div data-i18n="Multi Level">Multi Level</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link menu-toggle">
|
||
<div data-i18n="Level 2">Level 2</div>
|
||
</a>
|
||
<ul class="menu-sub">
|
||
<li class="menu-item">
|
||
<a href="javascript:void(0)" class="menu-link">
|
||
<div data-i18n="Level 3">Level 3</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="https://pixinvent.ticksy.com/" target="_blank" class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-lifebuoy"></i>
|
||
<div data-i18n="Support">Support</div>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a
|
||
href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
|
||
target="_blank"
|
||
class="menu-link">
|
||
<i class="menu-icon icon-base ti tabler-file-description"></i>
|
||
<div data-i18n="Documentation">Documentation</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<div class="menu-mobile-toggler d-xl-none rounded-1">
|
||
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large text-bg-secondary p-2 rounded-1">
|
||
<i class="ti tabler-menu icon-base"></i>
|
||
<i class="ti tabler-chevron-right icon-base"></i>
|
||
</a>
|
||
</div>
|
||
<!-- / Menu -->
|
||
|
||
<!-- Layout container -->
|
||
<div class="layout-page">
|
||
<!-- Navbar -->
|
||
|
||
<nav
|
||
class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme"
|
||
id="layout-navbar">
|
||
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none ">
|
||
<a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
|
||
<i class="icon-base ti tabler-menu-2 icon-md"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
|
||
<!-- Search -->
|
||
<div class="navbar-nav align-items-center">
|
||
<div class="nav-item navbar-search-wrapper px-md-0 px-2 mb-0">
|
||
<a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
|
||
<span class="d-inline-block text-body-secondary fw-normal" id="autocomplete"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- /Search -->
|
||
|
||
<ul class="navbar-nav flex-row align-items-center ms-md-auto">
|
||
<!-- Quick links -->
|
||
<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown">
|
||
<a
|
||
class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
|
||
href="javascript:void(0);"
|
||
data-bs-toggle="dropdown"
|
||
data-bs-auto-close="outside"
|
||
aria-expanded="false">
|
||
<i class="icon-base ti tabler-layout-grid-add icon-22px text-heading"></i>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end p-0">
|
||
<div class="dropdown-menu-header border-bottom">
|
||
<div class="dropdown-header d-flex align-items-center py-3">
|
||
<h6 class="mb-0 me-auto">Shortcuts</h6>
|
||
<a
|
||
href="javascript:void(0)"
|
||
class="dropdown-shortcuts-add py-2 btn btn-text-secondary rounded-pill btn-icon"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="top"
|
||
title="Add shortcuts"
|
||
><i class="icon-base ti tabler-plus icon-20px text-heading"></i
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-shortcuts-list scrollable-container">
|
||
<div class="row row-bordered overflow-visible g-0">
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-calendar icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="app-calendar.html" class="stretched-link">Calendar</a>
|
||
<small>Appointments</small>
|
||
</div>
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-file-dollar icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
|
||
<small>Manage Accounts</small>
|
||
</div>
|
||
</div>
|
||
<div class="row row-bordered overflow-visible g-0">
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-user icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="app-user-list.html" class="stretched-link">User App</a>
|
||
<small>Manage Users</small>
|
||
</div>
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-users icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="app-access-roles.html" class="stretched-link">Role Management</a>
|
||
<small>Permission</small>
|
||
</div>
|
||
</div>
|
||
<div class="row row-bordered overflow-visible g-0">
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-device-desktop-analytics icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="index.html" class="stretched-link">Dashboard</a>
|
||
<small>User Dashboard</small>
|
||
</div>
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-settings icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
|
||
<small>Account Settings</small>
|
||
</div>
|
||
</div>
|
||
<div class="row row-bordered overflow-visible g-0">
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-help-circle icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="pages-faq.html" class="stretched-link">FAQs</a>
|
||
<small>FAQs & Articles</small>
|
||
</div>
|
||
<div class="dropdown-shortcuts-item col">
|
||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
||
<i class="icon-base ti tabler-square icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="modal-examples.html" class="stretched-link">Modals</a>
|
||
<small>Useful Popups</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- Quick links -->
|
||
|
||
<!-- Notification -->
|
||
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
|
||
<a
|
||
class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
|
||
href="javascript:void(0);"
|
||
data-bs-toggle="dropdown"
|
||
data-bs-auto-close="outside"
|
||
aria-expanded="false">
|
||
<span class="position-relative">
|
||
<i class="icon-base ti tabler-bell icon-22px text-heading"></i>
|
||
<span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-end p-0">
|
||
<li class="dropdown-menu-header border-bottom">
|
||
<div class="dropdown-header d-flex align-items-center py-3">
|
||
<h6 class="mb-0 me-auto">Notification</h6>
|
||
<div class="d-flex align-items-center h6 mb-0">
|
||
<span class="badge bg-label-primary me-2">8 New</span>
|
||
<a
|
||
href="javascript:void(0)"
|
||
class="dropdown-notifications-all p-2 btn btn-icon"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="top"
|
||
title="Mark all as read"
|
||
><i class="icon-base ti tabler-mail-opened text-heading"></i
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-notifications-list scrollable-container">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="small mb-1">Congratulation Lettie 🎉</h6>
|
||
<small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
|
||
<small class="text-body-secondary">1h ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<span class="avatar-initial rounded-circle bg-label-danger">CF</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">Charles Franklin</h6>
|
||
<small class="mb-1 d-block text-body">Accepted your connection</small>
|
||
<small class="text-body-secondary">12hr ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<img src="../../assets/img/avatars/2.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">New Message ✉️</h6>
|
||
<small class="mb-1 d-block text-body">You have new message from Natalie</small>
|
||
<small class="text-body-secondary">1h ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<span class="avatar-initial rounded-circle bg-label-success"
|
||
><i class="icon-base ti tabler-shopping-cart"></i
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">Whoo! You have new order 🛒</h6>
|
||
<small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
|
||
<small class="text-body-secondary">1 day ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<img src="../../assets/img/avatars/9.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">Application has been approved 🚀</h6>
|
||
<small class="mb-1 d-block text-body"
|
||
>Your ABC project application has been approved.</small
|
||
>
|
||
<small class="text-body-secondary">2 days ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<span class="avatar-initial rounded-circle bg-label-success"
|
||
><i class="icon-base ti tabler-chart-pie"></i
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">Monthly report is generated</h6>
|
||
<small class="mb-1 d-block text-body">July monthly financial report is generated </small>
|
||
<small class="text-body-secondary">3 days ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<img src="../../assets/img/avatars/5.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">Send connection request</h6>
|
||
<small class="mb-1 d-block text-body">Peter sent you connection request</small>
|
||
<small class="text-body-secondary">4 days ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<img src="../../assets/img/avatars/6.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">New message from Jane</h6>
|
||
<small class="mb-1 d-block text-body">Your have new message from Jane</small>
|
||
<small class="text-body-secondary">5 days ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 me-3">
|
||
<div class="avatar">
|
||
<span class="avatar-initial rounded-circle bg-label-warning"
|
||
><i class="icon-base ti tabler-alert-triangle"></i
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1 small">CPU is running high</h6>
|
||
<small class="mb-1 d-block text-body"
|
||
>CPU Utilization Percent is currently at 88.63%,</small
|
||
>
|
||
<small class="text-body-secondary">5 days ago</small>
|
||
</div>
|
||
<div class="flex-shrink-0 dropdown-notifications-actions">
|
||
<a href="javascript:void(0)" class="dropdown-notifications-read"
|
||
><span class="badge badge-dot"></span
|
||
></a>
|
||
<a href="javascript:void(0)" class="dropdown-notifications-archive"
|
||
><span class="icon-base ti tabler-x"></span
|
||
></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="border-top">
|
||
<div class="d-grid p-4">
|
||
<a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
|
||
<small class="align-middle">View all notifications</small>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!--/ Notification -->
|
||
|
||
<!-- User -->
|
||
<li class="nav-item navbar-dropdown dropdown-user dropdown">
|
||
<a
|
||
class="nav-link dropdown-toggle hide-arrow p-0"
|
||
href="javascript:void(0);"
|
||
data-bs-toggle="dropdown">
|
||
<div class="avatar avatar-online">
|
||
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
|
||
</div>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item mt-0" href="pages-account-settings-account.html">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar avatar-online">
|
||
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-0">John Doe</h6>
|
||
<small class="text-body-secondary">Admin</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div class="dropdown-divider my-1 mx-n2"></div>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="pages-profile-user.html">
|
||
<i class="icon-base ti tabler-user me-3 icon-md"></i
|
||
><span class="align-middle">My Profile</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="pages-account-settings-account.html">
|
||
<i class="icon-base ti tabler-settings me-3 icon-md"></i
|
||
><span class="align-middle">Settings</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="pages-account-settings-billing.html">
|
||
<span class="d-flex align-items-center align-middle">
|
||
<i class="flex-shrink-0 icon-base ti tabler-file-dollar me-3 icon-md"></i
|
||
><span class="flex-grow-1 align-middle">Billing</span>
|
||
<span class="flex-shrink-0 badge bg-danger d-flex align-items-center justify-content-center"
|
||
>4</span
|
||
>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div class="dropdown-divider my-1 mx-n2"></div>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="pages-pricing.html">
|
||
<i class="icon-base ti tabler-currency-dollar me-3 icon-md"></i
|
||
><span class="align-middle">Pricing</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="pages-faq.html">
|
||
<i class="icon-base ti tabler-question-mark me-3 icon-md"></i
|
||
><span class="align-middle">FAQ</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div class="d-grid px-2 pt-2 pb-1">
|
||
<a class="btn btn-sm btn-danger d-flex" href="auth-login-cover.html" target="_blank">
|
||
<small class="align-middle">Logout</small>
|
||
<i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!--/ User -->
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- / Navbar -->
|
||
|
||
<!-- Content wrapper -->
|
||
<div class="content-wrapper">
|
||
<!-- Content -->
|
||
<div class="container-xxl flex-grow-1 container-p-y">
|
||
<div class="row mb-6">
|
||
<!-- Pricing -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-chart-bar"></i>
|
||
<h5>Pricing</h5>
|
||
<p>Elegant pricing options modal popup example, easy to use in any page.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#pricingModal">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Pricing -->
|
||
|
||
<!-- Add New Credit Card -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-credit-card"></i>
|
||
<h5>Add New Credit Card</h5>
|
||
<p>Quickly collect the credit card details, built in input mask and form validation support.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#addNewCCModal">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Add New Credit Card -->
|
||
|
||
<!-- Add New Address -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-building-community"></i>
|
||
<h5>Add New Address</h5>
|
||
<p>Ready to use form to collect user address data with validation and custom input support.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#addNewAddress">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Add New Address -->
|
||
|
||
<!-- Refer & Earn -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-gift"></i>
|
||
<h5>Refer & Earn</h5>
|
||
<p>Use Refer & Earn modal to encourage your exiting customers refer their friends & colleague.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#referAndEarn">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Refer & Earn -->
|
||
|
||
<!-- Edit User -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-user"></i>
|
||
<h5>Edit User</h5>
|
||
<p>Easily update the user data on the go, built in form validation and custom controls.</p>
|
||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editUser">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Edit User -->
|
||
|
||
<!-- Enable OTP -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-md-0 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-device-mobile"></i>
|
||
<h5>Enable OTP</h5>
|
||
<p>Use this modal to enhance your application security by enabling authentication with OTP.</p>
|
||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enableOTP">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Enable OTP -->
|
||
|
||
<!-- Share Project -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-file-text"></i>
|
||
<h5>Share Project</h5>
|
||
<p>Elegant Share Project options modal popup example, easy to use in any page.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#shareProject">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Share Project -->
|
||
|
||
<!-- Create App -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-6 ti icon-md tabler-cube"></i>
|
||
<h5>Create App</h5>
|
||
<p>Provide application data with this form to create your app, easy to use in page.</p>
|
||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createApp">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Create App -->
|
||
|
||
<!-- Two Factor Auth -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-4 icon-base ti tabler-lock icon-md"></i>
|
||
<h5>Two Factor Auth</h5>
|
||
<p>Enhance your application security by enabling two factor authentication.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#twoFactorAuth">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Two Factor Auth -->
|
||
|
||
<!-- Payment providers -->
|
||
<div class="col-12 col-sm-6 col-lg-4 mb-6 mb-sm-0">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-4 icon-base ti tabler-brand-mastercard icon-md"></i>
|
||
<h5>Payment providers</h5>
|
||
<p>Elegant payment options modal popup example, easy to use in any page.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#paymentProvider">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Payment providers -->
|
||
|
||
<!-- Payment methods -->
|
||
<div class="col-12 col-sm-6 col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<i class="mb-4 icon-base ti tabler-credit-card icon-md"></i>
|
||
<h5>Add Payment Method</h5>
|
||
<p>Elegant payment methods modal popup example, easy to use in any page.</p>
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#paymentMethods">
|
||
Show
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Payment methods -->
|
||
</div>
|
||
|
||
<!-- All Modals -->
|
||
<!-- Pricing Modal -->
|
||
<div class="modal fade" id="pricingModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-xl modal-simple modal-pricing">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<!-- Pricing Plans -->
|
||
<div class="rounded-top">
|
||
<h4 class="text-center mb-2">Pricing Plans</h4>
|
||
<p class="text-center mb-0">
|
||
All plans include 40+ advanced tools and features to boost your product. Choose the best plan
|
||
to fit your needs.
|
||
</p>
|
||
<div class="d-flex align-items-center justify-content-center flex-wrap gap-2 pt-12 pb-4">
|
||
<label class="switch switch-sm ms-sm-12 ps-sm-12 me-0">
|
||
<span class="switch-label fs-6 text-body">Monthly</span>
|
||
<input type="checkbox" class="switch-input price-duration-toggler" checked />
|
||
<span class="switch-toggle-slider">
|
||
<span class="switch-on"></span>
|
||
<span class="switch-off"></span>
|
||
</span>
|
||
<span class="switch-label fs-6 text-body">Annually</span>
|
||
</label>
|
||
<div class="mt-n5 ms-n10 ml-2 mb-12 d-none d-sm-flex align-items-center gap-1">
|
||
<i
|
||
class="icon-base ti tabler-corner-left-down icon-lg text-body-secondary scaleX-n1-rtl"></i>
|
||
<span class="badge badge-sm bg-label-primary rounded-1 mb-2 ">Save up to 10%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row gy-6">
|
||
<!-- Basic -->
|
||
<div class="col-xl mb-md-0">
|
||
<div class="card border rounded shadow-none">
|
||
<div class="card-body pt-12 p-5">
|
||
<div class="mt-3 mb-5 text-center">
|
||
<img
|
||
src="../../assets/img/illustrations/page-pricing-basic.png"
|
||
alt="Basic Image"
|
||
height="120" />
|
||
</div>
|
||
<h4 class="card-title text-center text-capitalize mb-1">Basic</h4>
|
||
<p class="text-center mb-5">A simple start for everyone</p>
|
||
<div class="text-center h-px-50">
|
||
<div class="d-flex justify-content-center">
|
||
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
|
||
<h1 class="mb-0 text-primary">0</h1>
|
||
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="list-group ps-6 my-5 pt-9">
|
||
<li class="mb-4">100 responses a month</li>
|
||
<li class="mb-4">Unlimited forms and surveys</li>
|
||
<li class="mb-4">Unlimited fields</li>
|
||
<li class="mb-4">Basic form creation tools</li>
|
||
<li class="mb-0">Up to 2 subdomains</li>
|
||
</ul>
|
||
|
||
<button
|
||
type="button"
|
||
class="btn btn-label-success d-grid w-100"
|
||
data-bs-dismiss="modal">
|
||
Your Current Plan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pro -->
|
||
<div class="col-xl mb-md-0">
|
||
<div class="card border-primary border shadow-none">
|
||
<div class="card-body position-relative pt-4 p-5">
|
||
<div class="position-absolute end-0 me-5 top-0 mt-4">
|
||
<span class="badge bg-label-primary rounded-1">Popular</span>
|
||
</div>
|
||
<div class="my-5 pt-6 text-center">
|
||
<img
|
||
src="../../assets/img/illustrations/page-pricing-standard.png"
|
||
alt="Standard Image"
|
||
height="120" />
|
||
</div>
|
||
<h4 class="card-title text-center text-capitalize mb-1">Standard</h4>
|
||
<p class="text-center mb-5">For small to medium businesses</p>
|
||
<div class="text-center h-px-50">
|
||
<div class="d-flex justify-content-center">
|
||
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
|
||
<h1 class="price-toggle price-yearly text-primary mb-0">7</h1>
|
||
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">9</h1>
|
||
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
|
||
</div>
|
||
<small class="price-yearly price-yearly-toggle text-body-secondary"
|
||
>USD 480 / year</small
|
||
>
|
||
</div>
|
||
|
||
<ul class="list-group ps-6 my-5 pt-9">
|
||
<li class="mb-4">Unlimited responses</li>
|
||
<li class="mb-4">Unlimited forms and surveys</li>
|
||
<li class="mb-4">Instagram profile page</li>
|
||
<li class="mb-4">Google Docs integration</li>
|
||
<li class="mb-0">Custom “Thank you” page</li>
|
||
</ul>
|
||
|
||
<button type="button" class="btn btn-primary d-grid w-100" data-bs-dismiss="modal">
|
||
Upgrade
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Enterprise -->
|
||
<div class="col-xl">
|
||
<div class="card border rounded shadow-none">
|
||
<div class="card-body pt-12 p-5">
|
||
<div class="mt-3 mb-5 text-center">
|
||
<img
|
||
src="../../assets/img/illustrations/page-pricing-enterprise.png"
|
||
alt="Enterprise Image"
|
||
height="120" />
|
||
</div>
|
||
<h4 class="card-title text-center text-capitalize mb-1">Enterprise</h4>
|
||
<p class="text-center mb-5">Solution for big organizations</p>
|
||
|
||
<div class="text-center h-px-50">
|
||
<div class="d-flex justify-content-center">
|
||
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
|
||
<h1 class="price-toggle price-yearly text-primary mb-0">16</h1>
|
||
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">19</h1>
|
||
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
|
||
</div>
|
||
<small class="price-yearly price-yearly-toggle text-body-secondary"
|
||
>USD 960 / year</small
|
||
>
|
||
</div>
|
||
|
||
<ul class="list-group ps-6 my-5 pt-9">
|
||
<li class="mb-4">PayPal payments</li>
|
||
<li class="mb-4">Logic Jumps</li>
|
||
<li class="mb-4">File upload with 5GB storage</li>
|
||
<li class="mb-4">Custom domain support</li>
|
||
<li class="mb-0">Stripe integration</li>
|
||
</ul>
|
||
|
||
<button
|
||
type="button"
|
||
class="btn btn-label-primary d-grid w-100"
|
||
data-bs-dismiss="modal">
|
||
Upgrade
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Pricing Plans -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Pricing Modal -->
|
||
<script src="../../assets//js/pages-pricing.js"></script>
|
||
<!-- Add New Credit Card Modal -->
|
||
<div class="modal fade" id="addNewCCModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered1 modal-simple modal-add-new-cc">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Add New Card</h4>
|
||
<p>Add new card to complete payment</p>
|
||
</div>
|
||
<form id="addNewCCForm" class="row g-6" onsubmit="return false">
|
||
<div class="col-12 form-control-validation">
|
||
<label class="form-label w-100" for="modalAddCard">Card Number</label>
|
||
<div class="input-group input-group-merge">
|
||
<input
|
||
id="modalAddCard"
|
||
name="modalAddCard"
|
||
class="form-control credit-card-mask"
|
||
type="text"
|
||
placeholder="1356 3215 6548 7898"
|
||
aria-describedby="modalAddCard2" />
|
||
<span class="input-group-text cursor-pointer p-1" id="modalAddCard2"
|
||
><span class="card-type"></span
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalAddCardName">Name</label>
|
||
<input type="text" id="modalAddCardName" class="form-control" placeholder="John Doe" />
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<label class="form-label" for="modalAddCardExpiryDate">Exp. Date</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddCardExpiryDate"
|
||
class="form-control expiry-date-mask"
|
||
placeholder="MM/YY" />
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<label class="form-label" for="modalAddCardCvv">CVV Code</label>
|
||
<div class="input-group input-group-merge">
|
||
<input
|
||
type="text"
|
||
id="modalAddCardCvv"
|
||
class="form-control cvv-code-mask pe-0"
|
||
maxlength="3"
|
||
placeholder="654" />
|
||
<span class="input-group-text cursor-pointer ps-0" id="modalAddCardCvv2"
|
||
><i
|
||
class="text-body-secondary icon-base ti tabler-help"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="top"
|
||
title="Card Verification Value"></i
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check form-switch">
|
||
<input type="checkbox" class="form-check-input" id="futureAddress" />
|
||
<label for="futureAddress" class="switch-label">Save card for future billing?</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center">
|
||
<button type="submit" class="btn btn-primary me-3">Submit</button>
|
||
<button
|
||
type="reset"
|
||
class="btn btn-label-secondary btn-reset"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close">
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Add New Credit Card Modal -->
|
||
|
||
<!-- Add New Address Modal -->
|
||
<div class="modal fade" id="addNewAddress" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-simple modal-add-new-address">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="address-title mb-2">Add New Address</h4>
|
||
<p class="address-subtitle">Add new address for express delivery</p>
|
||
</div>
|
||
<form id="addNewAddressForm" class="row g-6" onsubmit="return false">
|
||
<div class="col-12 form-control-validation">
|
||
<div class="row">
|
||
<div class="col-md mb-md-0 mb-4">
|
||
<div class="form-check custom-option custom-option-icon">
|
||
<label class="form-check-label custom-option-content" for="customRadioHome">
|
||
<span class="custom-option-body">
|
||
<svg
|
||
width="28"
|
||
height="28"
|
||
viewBox="0 0 28 28"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
opacity="0.2"
|
||
d="M16.625 23.625V16.625H11.375V23.625H4.37501V12.6328C4.37437 12.5113 4.39937 12.391 4.44837 12.2798C4.49737 12.1686 4.56928 12.069 4.65939 11.9875L13.4094 4.03592C13.5689 3.88911 13.7778 3.80762 13.9945 3.80762C14.2113 3.80762 14.4202 3.88911 14.5797 4.03592L23.3406 11.9875C23.4287 12.0706 23.4992 12.1706 23.548 12.2814C23.5969 12.3922 23.6231 12.5117 23.625 12.6328V23.625H16.625Z" />
|
||
<path
|
||
d="M23.625 23.625V12.6328C23.623 12.5117 23.5969 12.3922 23.548 12.2814C23.4992 12.1706 23.4287 12.0706 23.3406 11.9875L14.5797 4.03592C14.4202 3.88911 14.2113 3.80762 13.9945 3.80762C13.7777 3.80762 13.5689 3.88911 13.4094 4.03592L4.65937 11.9875C4.56926 12.069 4.49736 12.1686 4.44836 12.2798C4.39936 12.391 4.37436 12.5113 4.375 12.6328V23.625M1.75 23.625H26.25M16.625 23.625V17.5C16.625 17.2679 16.5328 17.0454 16.3687 16.8813C16.2046 16.7172 15.9821 16.625 15.75 16.625H12.25C12.0179 16.625 11.7954 16.7172 11.6313 16.8813C11.4672 17.0454 11.375 17.2679 11.375 17.5V23.625"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round" />
|
||
</svg>
|
||
<span class="custom-option-title">Home</span>
|
||
<small> Delivery time (9am – 9pm) </small>
|
||
</span>
|
||
<input
|
||
name="customRadioIcon"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
id="customRadioHome"
|
||
checked />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md mb-md-0 mb-4">
|
||
<div class="form-check custom-option custom-option-icon">
|
||
<label class="form-check-label custom-option-content" for="customRadioOffice">
|
||
<span class="custom-option-body">
|
||
<svg
|
||
width="28"
|
||
height="28"
|
||
viewBox="0 0 28 28"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
opacity="0.2"
|
||
d="M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625" />
|
||
<path
|
||
d="M1.75 23.625H26.25M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625M24.5 23.625V11.375C24.5 11.1429 24.4078 10.9204 24.2437 10.7563C24.0796 10.5922 23.8571 10.5 23.625 10.5H15.75M7 7.875H10.5M8.75 14.875H12.25M7 19.25H10.5M19.25 19.25H21M19.25 14.875H21"
|
||
stroke-opacity="0.9"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round" />
|
||
</svg>
|
||
<span class="custom-option-title"> Office </span>
|
||
<small> Delivery time (9am – 5pm) </small>
|
||
</span>
|
||
<input
|
||
name="customRadioIcon"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
id="customRadioOffice" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 form-control-validation col-md-6">
|
||
<label class="form-label" for="modalAddressFirstName">First Name</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressFirstName"
|
||
name="modalAddressFirstName"
|
||
class="form-control"
|
||
placeholder="John" />
|
||
</div>
|
||
<div class="col-12 form-control-validation col-md-6">
|
||
<label class="form-label" for="modalAddressLastName">Last Name</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressLastName"
|
||
name="modalAddressLastName"
|
||
class="form-control"
|
||
placeholder="Doe" />
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="modalAddressCountry">Country</label>
|
||
<select
|
||
id="modalAddressCountry"
|
||
name="modalAddressCountry"
|
||
class="select2 form-select"
|
||
data-allow-clear="true">
|
||
<option value="">Select</option>
|
||
<option value="Australia">Australia</option>
|
||
<option value="Bangladesh">Bangladesh</option>
|
||
<option value="Belarus">Belarus</option>
|
||
<option value="Brazil">Brazil</option>
|
||
<option value="Canada">Canada</option>
|
||
<option value="China">China</option>
|
||
<option value="France">France</option>
|
||
<option value="Germany">Germany</option>
|
||
<option value="India">India</option>
|
||
<option value="Indonesia">Indonesia</option>
|
||
<option value="Israel">Israel</option>
|
||
<option value="Italy">Italy</option>
|
||
<option value="Japan">Japan</option>
|
||
<option value="Korea">Korea, Republic of</option>
|
||
<option value="Mexico">Mexico</option>
|
||
<option value="Philippines">Philippines</option>
|
||
<option value="Russia">Russian Federation</option>
|
||
<option value="South Africa">South Africa</option>
|
||
<option value="Thailand">Thailand</option>
|
||
<option value="Turkey">Turkey</option>
|
||
<option value="Ukraine">Ukraine</option>
|
||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||
<option value="United Kingdom">United Kingdom</option>
|
||
<option value="United States">United States</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="modalAddressAddress1">Address Line 1</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressAddress1"
|
||
name="modalAddressAddress1"
|
||
class="form-control"
|
||
placeholder="12, Business Park" />
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="modalAddressAddress2">Address Line 2</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressAddress2"
|
||
name="modalAddressAddress2"
|
||
class="form-control"
|
||
placeholder="Mall Road" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalAddressLandmark">Landmark</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressLandmark"
|
||
name="modalAddressLandmark"
|
||
class="form-control"
|
||
placeholder="Nr. Hard Rock Cafe" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalAddressCity">City</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressCity"
|
||
name="modalAddressCity"
|
||
class="form-control"
|
||
placeholder="Los Angeles" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalAddressLandmark">State</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressState"
|
||
name="modalAddressState"
|
||
class="form-control"
|
||
placeholder="California" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalAddressZipCode">Zip Code</label>
|
||
<input
|
||
type="text"
|
||
id="modalAddressZipCode"
|
||
name="modalAddressZipCode"
|
||
class="form-control"
|
||
placeholder="99950" />
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check form-switch">
|
||
<input type="checkbox" class="form-check-input" id="billingAddress" />
|
||
<label for="billingAddress" class="form-switch-label">Use as a billing address?</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center">
|
||
<button type="submit" class="btn btn-primary me-3">Submit</button>
|
||
<button
|
||
type="reset"
|
||
class="btn btn-label-secondary"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close">
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Add New Address Modal -->
|
||
|
||
<!-- Refer & Earn Modal -->
|
||
<div class="modal fade" id="referAndEarn" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Refer & Earn</h4>
|
||
<p class="text-center mb-12 m-auto">
|
||
Invite your friend to Vuexy, if they sign up, you and your friend will get 30 days free trial.
|
||
</p>
|
||
</div>
|
||
<div class="row row-gap-6">
|
||
<div class="col-12 col-lg-4 px-6">
|
||
<div class="d-flex justify-content-center mb-4">
|
||
<div class="modal-refer-and-earn-step bg-label-primary">
|
||
<svg
|
||
width="40"
|
||
height="40"
|
||
viewBox="0 0 40 40"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
opacity="0.2"
|
||
d="M32.8594 5.60945L3.73443 13.8126C3.4865 13.8804 3.2655 14.0229 3.10152 14.2208C2.93754 14.4188 2.83857 14.6624 2.81807 14.9186C2.79757 15.1748 2.85655 15.4311 2.98698 15.6526C3.11741 15.8741 3.31293 16.05 3.54693 16.1563L16.9219 22.4844C17.1839 22.6058 17.3943 22.8162 17.5157 23.0782L23.8438 36.4532C23.9501 36.6872 24.126 36.8827 24.3475 37.0131C24.569 37.1436 24.8253 37.2026 25.0815 37.1821C25.3377 37.1616 25.5814 37.0626 25.7793 36.8986C25.9772 36.7346 26.1198 36.5136 26.1876 36.2657L34.3907 7.1407C34.4528 6.92816 34.4567 6.70282 34.4018 6.48829C34.3469 6.27375 34.2354 6.07794 34.0788 5.92135C33.9222 5.76477 33.7264 5.6532 33.5118 5.59832C33.2973 5.54344 33.072 5.54729 32.8594 5.60945Z"
|
||
fill="#7367F0" />
|
||
<path
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M33.7595 4.62951C33.3731 4.53065 32.9672 4.53707 32.5841 4.64806L3.47059 12.848L3.46635 12.8491C3.0218 12.9716 2.62557 13.2277 2.33135 13.5829C2.03619 13.9391 1.85803 14.3777 1.82113 14.8389C1.78424 15.3001 1.89041 15.7614 2.12517 16.1601C2.35845 16.5562 2.70742 16.8713 3.12507 17.0631L16.4941 23.3884L16.4941 23.3884L16.5016 23.3919C16.5486 23.4136 16.5864 23.4514 16.6081 23.4984L16.6081 23.4984L16.6116 23.5059L22.9369 36.8749C23.1287 37.2926 23.4438 37.6416 23.8399 37.8748C24.2386 38.1096 24.6999 38.2158 25.1611 38.1789C25.6223 38.142 26.0609 37.9638 26.4171 37.6687C26.7723 37.3744 27.0284 36.9782 27.1509 36.5337L27.152 36.5294L35.3503 7.42141L35.3521 7.41553C35.4629 7.03254 35.4693 6.62681 35.3705 6.24047C35.2712 5.85214 35.0692 5.49768 34.7858 5.21425C34.5023 4.93082 34.1479 4.72885 33.7595 4.62951ZM33.1304 6.572L32.8593 5.60954L33.14 6.56924C33.1804 6.55744 33.2232 6.55671 33.2639 6.56713C33.3046 6.57754 33.3418 6.59873 33.3715 6.62846C33.4013 6.65819 33.4225 6.69537 33.4329 6.73611C33.4433 6.77684 33.4426 6.81963 33.4308 6.85998L33.4307 6.85997L33.428 6.86959L25.2249 35.9946L25.2249 35.9946L25.2228 36.002C25.2093 36.0516 25.1808 36.0958 25.1412 36.1285C25.1016 36.1613 25.0529 36.1811 25.0016 36.1852C24.9504 36.1893 24.8991 36.1775 24.8548 36.1515C24.8105 36.1254 24.7754 36.0863 24.7541 36.0395L24.7476 36.0255L18.53 22.8842L25.0977 16.3166C25.4882 15.926 25.4882 15.2929 25.0977 14.9023C24.7072 14.5118 24.074 14.5118 23.6835 14.9023L17.1158 21.47L3.97449 15.2524L3.96054 15.2459C3.91374 15.2247 3.87463 15.1895 3.84854 15.1452C3.82246 15.1009 3.81066 15.0496 3.81476 14.9984C3.81886 14.9471 3.83866 14.8984 3.87145 14.8588C3.90425 14.8192 3.94845 14.7907 3.99803 14.7772L3.99804 14.7772L4.00541 14.7751L33.1304 6.572Z"
|
||
fill="#7367F0" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<h5 class="mb-2">Send Invitation 👍🏻</h5>
|
||
<p class="mb-lg-0">Send your referral link to your friend</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-4 px-6">
|
||
<div class="d-flex justify-content-center mb-4">
|
||
<div class="modal-refer-and-earn-step bg-label-primary">
|
||
<svg
|
||
width="40"
|
||
height="40"
|
||
viewBox="0 0 40 40"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
opacity="0.2"
|
||
d="M34.9219 8.75H5.07812C4.34462 8.75 3.75 9.34462 3.75 10.0781V29.9219C3.75 30.6554 4.34462 31.25 5.07812 31.25H34.9219C35.6554 31.25 36.25 30.6554 36.25 29.9219V10.0781C36.25 9.34462 35.6554 8.75 34.9219 8.75Z"
|
||
fill="#7367F0" />
|
||
<path
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M4.75 10.0781C4.75 9.89691 4.89691 9.75 5.07812 9.75H34.9219C35.1031 9.75 35.25 9.89691 35.25 10.0781V29.9219C35.25 30.1031 35.1031 30.25 34.9219 30.25H5.07812C4.89691 30.25 4.75 30.1031 4.75 29.9219V10.0781ZM5.07812 7.75C3.79234 7.75 2.75 8.79234 2.75 10.0781V29.9219C2.75 31.2077 3.79234 32.25 5.07812 32.25H34.9219C36.2077 32.25 37.25 31.2077 37.25 29.9219V10.0781C37.25 8.79234 36.2077 7.75 34.9219 7.75H5.07812ZM8.75 14C8.19772 14 7.75 14.4477 7.75 15C7.75 15.5523 8.19772 16 8.75 16H31.25C31.8023 16 32.25 15.5523 32.25 15C32.25 14.4477 31.8023 14 31.25 14H8.75ZM8.75 19C8.19772 19 7.75 19.4477 7.75 20C7.75 20.5523 8.19772 21 8.75 21H31.25C31.8023 21 32.25 20.5523 32.25 20C32.25 19.4477 31.8023 19 31.25 19H8.75ZM7.75 25C7.75 24.4477 8.19772 24 8.75 24H10C10.5523 24 11 24.4477 11 25C11 25.5523 10.5523 26 10 26H8.75C8.19772 26 7.75 25.5523 7.75 25ZM15 24C14.4477 24 14 24.4477 14 25C14 25.5523 14.4477 26 15 26H25C25.5523 26 26 25.5523 26 25C26 24.4477 25.5523 24 25 24H15ZM29 25C29 24.4477 29.4477 24 30 24H31.25C31.8023 24 32.25 24.4477 32.25 25C32.25 25.5523 31.8023 26 31.25 26H30C29.4477 26 29 25.5523 29 25Z"
|
||
fill="#7367F0" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<h5 class="mb-2">Registration 😎</h5>
|
||
<p class="mb-lg-0">Let them register to our services</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-4 px-6">
|
||
<div class="d-flex justify-content-center mb-4">
|
||
<div class="modal-refer-and-earn-step bg-label-primary">
|
||
<svg
|
||
width="40"
|
||
height="40"
|
||
viewBox="0 0 40 40"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
opacity="0.2"
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M33.2656 23.1875L28.3594 17.2969C28.5469 20.9062 27.6562 25.1094 24.9062 29.9062L29.5937 33.6562C29.7604 33.7886 29.9581 33.8762 30.1682 33.9108C30.3782 33.9453 30.5936 33.9257 30.7939 33.8537C30.9942 33.7817 31.1728 33.6598 31.3128 33.4995C31.4527 33.3391 31.5495 33.1457 31.5937 32.9375L33.5156 24.25C33.562 24.0658 33.5634 23.8732 33.5199 23.6883C33.4764 23.5034 33.3892 23.3317 33.2656 23.1875ZM6.64061 23.2813L11.5469 17.4062C11.3594 21.0156 12.25 25.2188 15 30L10.3125 33.75C10.1469 33.8823 9.95029 33.9704 9.74127 34.0058C9.53225 34.0413 9.31764 34.023 9.11764 33.9527C8.91763 33.8824 8.73879 33.7623 8.59794 33.6039C8.4571 33.4454 8.35887 33.2537 8.31249 33.0469L6.39061 24.3438C6.34428 24.1596 6.3428 23.967 6.3863 23.7821C6.4298 23.5972 6.51701 23.4255 6.64061 23.2813Z"
|
||
fill="#7367F0" />
|
||
<path
|
||
fill-rule="evenodd"
|
||
clip-rule="evenodd"
|
||
d="M18.5868 2.31872C18.9844 1.99031 19.484 1.81055 19.9999 1.81055C20.5174 1.81055 21.0185 1.99141 21.4166 2.32172C22.9521 3.57204 26.2759 6.67263 28.1129 11.4477C28.7422 13.0835 29.1922 14.9038 29.3415 16.8978L34.1239 22.6367C34.3488 22.9011 34.5076 23.2152 34.5871 23.5532C34.666 23.8883 34.6646 24.2372 34.5832 24.5716L32.664 33.2626L32.6633 33.2657C32.5798 33.6381 32.403 33.9831 32.1495 34.2684C31.8959 34.5536 31.574 34.7696 31.214 34.8962C30.854 35.0228 30.4677 35.0557 30.0915 34.9919C29.7152 34.928 29.3614 34.7696 29.0633 34.5314L29.0628 34.531L24.6492 31.0001H15.3508L10.9372 34.531L10.9367 34.5314C10.6386 34.7696 10.2847 34.928 9.90851 34.9919C9.53227 35.0557 9.14598 35.0228 8.78597 34.8962C8.42596 34.7696 8.10406 34.5536 7.85053 34.2684C7.597 33.9831 7.42019 33.6381 7.33671 33.2657L7.33601 33.2626L5.4168 24.5716C5.33541 24.2372 5.33403 23.8883 5.41289 23.5532C5.49245 23.215 5.65141 22.9007 5.87655 22.6362L10.5662 17.0205C10.7036 14.9754 11.1625 13.1108 11.8119 11.4389C13.667 6.66274 17.0333 3.56278 18.5868 2.31872ZM27.372 17.4408C27.3612 17.3736 27.3574 17.3057 27.3603 17.2381C27.2407 15.3587 26.8236 13.6664 26.2463 12.1658C24.585 7.84765 21.5539 5.01206 20.15 3.86949L20.1401 3.86146L20.1401 3.8614C20.1008 3.82855 20.0512 3.81055 19.9999 3.81055C19.9487 3.81055 19.899 3.82855 19.8597 3.8614L19.8434 3.87475C18.4249 5.00948 15.3534 7.84484 13.6762 12.163C13.0763 13.7076 12.6489 15.4559 12.5469 17.4027C12.547 17.4384 12.5453 17.4741 12.5416 17.5098C12.3904 20.7895 13.1636 24.6279 15.5833 29.0001H24.4106C26.7972 24.5972 27.5428 20.7358 27.372 17.4408ZM32.5912 23.9216L29.326 20.0033C29.081 22.9478 28.1679 26.2039 26.2812 29.7444L30.3117 32.9689L30.312 32.9691C30.3451 32.9954 30.3843 33.013 30.426 33.02C30.4678 33.0271 30.5107 33.0235 30.5507 33.0094C30.5907 32.9953 30.6265 32.9713 30.6546 32.9396C30.6826 32.9082 30.7021 32.8702 30.7115 32.8292L30.7117 32.8282L32.6329 24.1282C32.635 24.1188 32.6372 24.1093 32.6396 24.0999C32.6469 24.0708 32.6471 24.0404 32.6403 24.0112C32.6334 23.982 32.6196 23.9549 32.6001 23.9322L32.5911 23.9216L32.5912 23.9216ZM10.6056 20.0936L7.40817 23.9224L7.39994 23.9322L7.39987 23.9322C7.38036 23.9549 7.36659 23.982 7.35972 24.0112C7.35285 24.0404 7.35309 24.0708 7.3604 24.0999C7.36277 24.1093 7.365 24.1188 7.36709 24.1282L9.28827 32.8282L9.28849 32.8292C9.29786 32.8702 9.31741 32.9082 9.34536 32.9397C9.37353 32.9713 9.40929 32.9953 9.4493 33.0094C9.4893 33.0235 9.53222 33.0271 9.57403 33.02C9.61574 33.013 9.65498 32.9954 9.68806 32.969L9.68827 32.9689L13.7131 29.749C11.8077 26.2443 10.8721 23.0167 10.6056 20.0936ZM16.5 35.0001C16.5 34.4478 16.9477 34.0001 17.5 34.0001H22.5C23.0523 34.0001 23.5 34.4478 23.5 35.0001C23.5 35.5524 23.0523 36.0001 22.5 36.0001H17.5C16.9477 36.0001 16.5 35.5524 16.5 35.0001ZM21.875 15.0001C21.875 16.0357 21.0355 16.8751 20 16.8751C18.9645 16.8751 18.125 16.0357 18.125 15.0001C18.125 13.9646 18.9645 13.1251 20 13.1251C21.0355 13.1251 21.875 13.9646 21.875 15.0001Z"
|
||
fill="#7367F0" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<h5 class="mb-2">Free Trial 🎉</h5>
|
||
<p class="mb-0">Your friend will get 30 days free trial</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr class="mt-12 mb-6" />
|
||
<h5 class="mb-6">Invite your friends</h5>
|
||
<form class="row g-4" onsubmit="return false">
|
||
<div class="col-lg-10">
|
||
<label class="form-label" for="modalRnFEmail"
|
||
>Enter your friend’s email address and invite them to join Vuexy 😍</label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="modalRnFEmail"
|
||
class="form-control"
|
||
placeholder="example@domain.com"
|
||
aria-label="example@domain.com" />
|
||
</div>
|
||
<div class="col-lg-2 d-flex align-items-end justify-content-end">
|
||
<button type="button" class="btn btn-primary w-100">Send</button>
|
||
</div>
|
||
</form>
|
||
<h5 class="my-6">Share the referral link</h5>
|
||
<form class="row g-4" onsubmit="return false">
|
||
<div class="col-lg-9">
|
||
<label class="form-label" for="modalRnFLink"
|
||
>You can also copy and send it or share it on your social media. 🚀</label
|
||
>
|
||
<div class="input-group input-group-merge">
|
||
<input
|
||
type="text"
|
||
id="modalRnFLink"
|
||
class="form-control"
|
||
readonly
|
||
value="https://pixinvent.com" />
|
||
<span class="input-group-text text-primary cursor-pointer" id="basic-addon33"
|
||
>Copy link</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 d-flex align-items-end">
|
||
<div class="btn-social d-flex justify-content-between w-100">
|
||
<button type="button" class="btn btn-icon btn-facebook">
|
||
<i class="icon-base ti tabler-brand-facebook icon-22px"></i>
|
||
</button>
|
||
<button type="button" class="btn btn-icon btn-twitter">
|
||
<i class="icon-base ti tabler-brand-twitter icon-22px"></i>
|
||
</button>
|
||
<button type="button" class="btn btn-icon btn-linkedin">
|
||
<i class="icon-base ti tabler-brand-linkedin icon-22px"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Refer & Earn Modal -->
|
||
|
||
<!-- Edit User Modal -->
|
||
<div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-simple modal-edit-user">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Edit User Information</h4>
|
||
<p>Updating user details will receive a privacy audit.</p>
|
||
</div>
|
||
<form id="editUserForm" class="row g-6" onsubmit="return false">
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserFirstName">First Name</label>
|
||
<input
|
||
type="text"
|
||
id="modalEditUserFirstName"
|
||
name="modalEditUserFirstName"
|
||
class="form-control"
|
||
placeholder="John"
|
||
value="John" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserLastName">Last Name</label>
|
||
<input
|
||
type="text"
|
||
id="modalEditUserLastName"
|
||
name="modalEditUserLastName"
|
||
class="form-control"
|
||
placeholder="Doe"
|
||
value="Doe" />
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="modalEditUserName">Username</label>
|
||
<input
|
||
type="text"
|
||
id="modalEditUserName"
|
||
name="modalEditUserName"
|
||
class="form-control"
|
||
placeholder="johndoe007"
|
||
value="johndoe007" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserEmail">Email</label>
|
||
<input
|
||
type="text"
|
||
id="modalEditUserEmail"
|
||
name="modalEditUserEmail"
|
||
class="form-control"
|
||
placeholder="example@domain.com"
|
||
value="example@domain.com" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserStatus">Status</label>
|
||
<select
|
||
id="modalEditUserStatus"
|
||
name="modalEditUserStatus"
|
||
class="select2 form-select"
|
||
aria-label="Default select example">
|
||
<option selected>Status</option>
|
||
<option value="1">Active</option>
|
||
<option value="2">Inactive</option>
|
||
<option value="3">Suspended</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditTaxID">Tax ID</label>
|
||
<input
|
||
type="text"
|
||
id="modalEditTaxID"
|
||
name="modalEditTaxID"
|
||
class="form-control modal-edit-tax-id"
|
||
placeholder="123 456 7890"
|
||
value="123 456 7890" />
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserPhone">Phone Number</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text">US (+1)</span>
|
||
<input
|
||
type="text"
|
||
id="modalEditUserPhone"
|
||
name="modalEditUserPhone"
|
||
class="form-control phone-number-mask"
|
||
placeholder="202 555 0111"
|
||
value="202 555 0111" />
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserLanguage">Language</label>
|
||
<select
|
||
id="modalEditUserLanguage"
|
||
name="modalEditUserLanguage"
|
||
class="select2 form-select"
|
||
multiple>
|
||
<option value="">Select</option>
|
||
<option value="english" selected>English</option>
|
||
<option value="spanish">Spanish</option>
|
||
<option value="french">French</option>
|
||
<option value="german">German</option>
|
||
<option value="dutch">Dutch</option>
|
||
<option value="hebrew">Hebrew</option>
|
||
<option value="sanskrit">Sanskrit</option>
|
||
<option value="hindi">Hindi</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label" for="modalEditUserCountry">Country</label>
|
||
<select
|
||
id="modalEditUserCountry"
|
||
name="modalEditUserCountry"
|
||
class="select2 form-select"
|
||
data-allow-clear="true">
|
||
<option value="">Select</option>
|
||
<option value="Australia">Australia</option>
|
||
<option value="Bangladesh">Bangladesh</option>
|
||
<option value="Belarus">Belarus</option>
|
||
<option value="Brazil">Brazil</option>
|
||
<option value="Canada">Canada</option>
|
||
<option value="China">China</option>
|
||
<option value="France">France</option>
|
||
<option value="Germany">Germany</option>
|
||
<option value="India" selected>India</option>
|
||
<option value="Indonesia">Indonesia</option>
|
||
<option value="Israel">Israel</option>
|
||
<option value="Italy">Italy</option>
|
||
<option value="Japan">Japan</option>
|
||
<option value="Korea">Korea, Republic of</option>
|
||
<option value="Mexico">Mexico</option>
|
||
<option value="Philippines">Philippines</option>
|
||
<option value="Russia">Russian Federation</option>
|
||
<option value="South Africa">South Africa</option>
|
||
<option value="Thailand">Thailand</option>
|
||
<option value="Turkey">Turkey</option>
|
||
<option value="Ukraine">Ukraine</option>
|
||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||
<option value="United Kingdom">United Kingdom</option>
|
||
<option value="United States">United States</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check form-switch">
|
||
<input type="checkbox" class="form-check-input" id="editBillingAddress" />
|
||
<label for="editBillingAddress" class="switch-label">Use as a billing address?</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center">
|
||
<button type="submit" class="btn btn-primary me-3">Submit</button>
|
||
<button
|
||
type="reset"
|
||
class="btn btn-label-secondary"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close">
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Edit User Modal -->
|
||
|
||
<!-- Enable OTP Modal -->
|
||
<div class="modal fade" id="enableOTP" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Enable One Time Password</h4>
|
||
<p>Verify Your Mobile Number for SMS</p>
|
||
</div>
|
||
<p>Enter your mobile phone number with country code and we will send you a verification code.</p>
|
||
<form id="enableOTPForm" class="row g-5" onsubmit="return false">
|
||
<div class="col-12 form-control-validation">
|
||
<label class="form-label" for="modalEnableOTPPhone">Phone Number</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text">US (+1)</span>
|
||
<input
|
||
type="text"
|
||
id="modalEnableOTPPhone"
|
||
name="modalEnableOTPPhone"
|
||
class="form-control phone-number-otp-mask"
|
||
placeholder="202 555 0111" />
|
||
</div>
|
||
</div>
|
||
<div class="col-12 d-flex gap-4 flex-wrap">
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
<button
|
||
type="reset"
|
||
class="btn btn-label-secondary"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close">
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Enable OTP Modal -->
|
||
|
||
<!-- Share Project Modal -->
|
||
<div class="modal fade" id="shareProject" tabindex="-1" aria-hidden="true">
|
||
<div
|
||
class="modal-dialog modal-lg modal-simple modal-enable-otp modal-share-project modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center">
|
||
<h4 class="mb-2">Share Project</h4>
|
||
<p>Share project with a team member</p>
|
||
</div>
|
||
</div>
|
||
<div class="mb-6 mx-4 mx-md-0">
|
||
<label for="select2Basic" class="form-label">Add Members</label>
|
||
<select
|
||
id="select2Basic"
|
||
class="form-select form-select-lg share-project-select"
|
||
data-allow-clear="true">
|
||
<option data-name="Adelaide Nichols" data-image="img/avatars/13.png" selected>
|
||
Adelaide Nichols
|
||
</option>
|
||
<option data-name="Julian Murphy" data-image="img/avatars/9.png">Julian Murphy</option>
|
||
<option data-name="Sophie Gilbert" data-image="img/avatars/10.png">Sophie Gilbert</option>
|
||
<option data-name="Marvin Wheeler" data-image="img/avatars/7.png">Marvin Wheeler</option>
|
||
</select>
|
||
</div>
|
||
<h5 class="ms-4 ms-md-0">8 Members</h5>
|
||
<ul class="p-0 m-0 mx-4 mx-md-0">
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/1.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Lester Palmer</p>
|
||
<p class="small mb-0">pe@vogeiz.net</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can Edit</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/2.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Mattie Blair</p>
|
||
<p class="small mb-0">peromak@zukedohik.gov</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Owner</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/3.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Marvin Wheeler</p>
|
||
<p class="small mb-0">rumet@jujpejah.net</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can Edit</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/4.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Nannie Ford</p>
|
||
<p class="small mb-0">negza@nuv.io</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can Comment</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/5.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Julian Murphy</p>
|
||
<p class="small mb-0">lunebame@umdomgu.net</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can View</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/6.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Sophie Gilbert</p>
|
||
<p class="small mb-0">ha@sugit.gov</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can View</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap mb-4">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/7.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Chris Watkins</p>
|
||
<p class="small mb-0">zokap@mak.org</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can Comment</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex flex-wrap">
|
||
<div class="avatar me-4">
|
||
<img src="../../assets/img/avatars/8.png" alt="avatar" class="rounded-circle" />
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-2">
|
||
<p class="mb-0 text-heading">Adelaide Nichols</p>
|
||
<p class="small mb-0">ujinomu@jigo.com</p>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button
|
||
type="button"
|
||
class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<span class="d-none d-sm-inline-block">Can Edit</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="d-flex align-items-start mt-6 align-items-sm-center mx-4 mx-md-0 mb-4 mb-md-0">
|
||
<i class="icon-base ti tabler-users me-2 text-heading"></i>
|
||
<div class="d-flex justify-content-between flex-grow-1 align-items-center flex-wrap gap-2">
|
||
<h6 class="mb-0">Public to Vuexy - Pixinvent</h6>
|
||
<button class="btn btn-primary">
|
||
<i class="icon-base ti tabler-link icon-xs me-2"></i>Copy Project Link
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Share Project Modal -->
|
||
|
||
<!-- Create App Modal -->
|
||
<div class="modal fade" id="createApp" tabindex="-1" aria-modal="true" role="dialog">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple modal-upgrade-plan">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center">
|
||
<h4 class="mb-2">Create App</h4>
|
||
<p class="mb-5">Provide data with this form to create your app.</p>
|
||
</div>
|
||
<div id="wizard-create-app" class="bs-stepper vertical mt-2 shadow-none">
|
||
<div class="bs-stepper-header border-0 p-1">
|
||
<div class="step" data-target="#details">
|
||
<button type="button" class="step-trigger">
|
||
<span class="bs-stepper-circle"
|
||
><i class="icon-base ti tabler-file-text icon-md"></i
|
||
></span>
|
||
<span class="bs-stepper-label">
|
||
<span class="bs-stepper-title text-uppercase">Details</span>
|
||
<span class="bs-stepper-subtitle">Enter Details</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="step" data-target="#frameworks">
|
||
<button type="button" class="step-trigger">
|
||
<span class="bs-stepper-circle"><i class="icon-base ti tabler-box icon-md"></i></span>
|
||
<span class="bs-stepper-label">
|
||
<span class="bs-stepper-title text-uppercase">Frameworks</span>
|
||
<span class="bs-stepper-subtitle">Select Framework</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="step" data-target="#database">
|
||
<button type="button" class="step-trigger">
|
||
<span class="bs-stepper-circle"
|
||
><i class="icon-base ti tabler-database icon-md"></i
|
||
></span>
|
||
<span class="bs-stepper-label">
|
||
<span class="bs-stepper-title text-uppercase">Database</span>
|
||
<span class="bs-stepper-subtitle">Select Database</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="step" data-target="#billing">
|
||
<button type="button" class="step-trigger">
|
||
<span class="bs-stepper-circle"
|
||
><i class="icon-base ti tabler-credit-card icon-md"></i
|
||
></span>
|
||
<span class="bs-stepper-label">
|
||
<span class="bs-stepper-title text-uppercase">Billing</span>
|
||
<span class="bs-stepper-subtitle">Payment Details</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="step" data-target="#submit">
|
||
<button type="button" class="step-trigger">
|
||
<span class="bs-stepper-circle"><i class="icon-base ti tabler-check icon-md"></i></span>
|
||
<span class="bs-stepper-label">
|
||
<span class="bs-stepper-title text-uppercase">Submit</span>
|
||
<span class="bs-stepper-subtitle">Submit</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="bs-stepper-content p-1">
|
||
<form onSubmit="return false">
|
||
<!-- Details -->
|
||
<div id="details" class="content pt-4 pt-lg-0">
|
||
<div class="mb-6">
|
||
<label for="exampleInputEmail1" class="form-label">Application Name</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="exampleInputEmail1"
|
||
placeholder="Application Name" />
|
||
</div>
|
||
<h5>Category</h5>
|
||
<ul class="p-0 m-0">
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-info p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-file-text icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">CRM Application</h6>
|
||
<small>Scales with any business</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="details-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-success p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-shopping-cart icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">eCommerce Platforms</h6>
|
||
<small>Grow Your Business With App</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input
|
||
name="details-radio"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
checked />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start">
|
||
<div class="badge bg-label-danger p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-device-laptop icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">Online Learning platform</h6>
|
||
<small>Start learning today</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="details-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="col-12 d-flex justify-content-between mt-6">
|
||
<button class="btn btn-label-secondary btn-prev" disabled>
|
||
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
|
||
<span class="align-middle d-sm-inline-block d-none">Previous</span>
|
||
</button>
|
||
<button class="btn btn-primary btn-next">
|
||
<span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span>
|
||
<i class="icon-base ti tabler-arrow-right icon-xs"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Frameworks -->
|
||
<div id="frameworks" class="content pt-4 pt-lg-0">
|
||
<h5>Select Framework</h5>
|
||
<ul class="p-0 m-0">
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-info p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-react-native icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">React Native</h6>
|
||
<small>Create truly native apps</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-danger p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-angular icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">Angular</h6>
|
||
<small>Most suited for your application</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input
|
||
name="frameworks-radio"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
checked="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-warning p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-html5 icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">HTML</h6>
|
||
<small>Progressive Framework</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input
|
||
name="frameworks-radio"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
checked />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start">
|
||
<div class="badge bg-label-success p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-vue icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">VueJs</h6>
|
||
<small>JS web frameworks</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="col-12 d-flex justify-content-between mt-6">
|
||
<button class="btn btn-label-secondary btn-prev">
|
||
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
|
||
<span class="align-middle d-sm-inline-block d-none">Previous</span>
|
||
</button>
|
||
<button class="btn btn-primary btn-next">
|
||
<span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span>
|
||
<i class="icon-base ti tabler-arrow-right icon-xs"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Database -->
|
||
<div id="database" class="content pt-4 pt-lg-0">
|
||
<div class="mb-6">
|
||
<label for="exampleInputEmail2" class="form-label">Database Name</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="exampleInputEmail2"
|
||
placeholder="Database Name" />
|
||
</div>
|
||
<h5>Select Database Engine</h5>
|
||
<ul class="p-0 m-0">
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-danger p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-firebase icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">Firebase</h6>
|
||
<small>Cloud Firestone</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="database-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<div class="badge bg-label-warning p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-brand-amazon icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">AWS</h6>
|
||
<small>Amazon Fast NoSQL Database</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input
|
||
name="database-radio"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
checked />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start">
|
||
<div class="badge bg-label-info p-2 me-3 rounded">
|
||
<i class="icon-base ti tabler-database icon-30px"></i>
|
||
</div>
|
||
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
|
||
<div class="me-2">
|
||
<h6 class="mb-1">MySQL</h6>
|
||
<small>Basic MySQL database</small>
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<div class="form-check form-check-inline">
|
||
<input name="database-radio" class="form-check-input" type="radio" value="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="col-12 d-flex justify-content-between mt-6">
|
||
<button class="btn btn-label-secondary btn-prev">
|
||
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
|
||
<span class="align-middle d-sm-inline-block d-none">Previous</span>
|
||
</button>
|
||
<button class="btn btn-primary btn-next">
|
||
<span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span>
|
||
<i class="icon-base ti tabler-arrow-right icon-xs"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- billing -->
|
||
<div id="billing" class="content">
|
||
<h5 class="mb-6">Payment Details</h5>
|
||
<div id="AppNewCCForm" class="row g-6 pt-3 pt-lg-0 mb-6" onsubmit="return false">
|
||
<div class="col-12">
|
||
<label for="modalAppCardNumber" class="form-label">Card Number</label>
|
||
<div class="input-group input-group-merge">
|
||
<input
|
||
class="form-control app-credit-card-mask"
|
||
type="text"
|
||
placeholder="1356 3215 6548 7898"
|
||
aria-describedby="modalAppAddCard"
|
||
id="modalAppCardNumber" />
|
||
<span class="input-group-text cursor-pointer p-1" id="modalAppAddCard"
|
||
><span class="app-card-type"></span
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label for="modalAppUserName" class="form-label">Name on Card</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
placeholder="John Doe"
|
||
id="modalAppUserName" />
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<label for="modalAppExpiry" class="form-label">Expiry</label>
|
||
<input
|
||
type="text"
|
||
class="form-control app-expiry-date-mask"
|
||
placeholder="MM/YY"
|
||
id="modalAppExpiry" />
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<label for="modalAppAddCardCvv" class="form-label">CVV</label>
|
||
<div class="input-group input-group-merge">
|
||
<input
|
||
type="text"
|
||
id="modalAppAddCardCvv"
|
||
class="form-control app-cvv-code-mask pe-0"
|
||
maxlength="3"
|
||
placeholder="654" />
|
||
<span class="input-group-text cursor-pointer ps-0" id="modalAppAddCardCvv2"
|
||
><i
|
||
class="text-body-secondary icon-base ti tabler-help"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="top"
|
||
title="Card Verification Value"></i
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check form-switch">
|
||
<input type="checkbox" class="form-check-input" id="appFutureAddress" />
|
||
<label for="appFutureAddress" class="form-label"
|
||
>Save card for future billing?</label
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 d-flex justify-content-between mt-6">
|
||
<button class="btn btn-label-secondary btn-prev">
|
||
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
|
||
<span class="align-middle d-sm-inline-block d-none">Previous</span>
|
||
</button>
|
||
<button class="btn btn-primary btn-next">
|
||
<span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span>
|
||
<i class="icon-base ti tabler-arrow-right icon-xs"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- submit -->
|
||
<div id="submit" class="content text-center pt-4 pt-lg-0">
|
||
<h5 class="mb-1">Submit</h5>
|
||
<p class="small">Submit to kick start your project.</p>
|
||
<!-- image -->
|
||
<img
|
||
src="../../assets/img/illustrations/girl-with-laptop.png"
|
||
class="img-fluid"
|
||
alt="Create App img"
|
||
width="175" />
|
||
<div class="col-12 d-flex justify-content-between mt-6">
|
||
<button class="btn btn-label-secondary btn-prev">
|
||
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
|
||
<span class="align-middle d-sm-inline-block d-none">Previous</span>
|
||
</button>
|
||
<button
|
||
class="btn btn-success btn-next btn-submit"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close">
|
||
<span class="align-middle">Submit</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Create App Modal -->
|
||
|
||
<!-- Two Factor Auth Modal -->
|
||
|
||
<div class="modal fade" id="twoFactorAuth" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Select Authentication Method</h4>
|
||
<p>You also need to select a method by which the proxy authenticates to the directory serve.</p>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 mb-6">
|
||
<div class="form-check custom-option custom-option-basic">
|
||
<label
|
||
class="form-check-label custom-option-content"
|
||
for="customRadioTemp1"
|
||
data-bs-target="#twoFactorAuthOne"
|
||
data-bs-toggle="modal">
|
||
<input
|
||
name="customRadioTemp"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
id="customRadioTemp1"
|
||
checked />
|
||
<span class="custom-option-header">
|
||
<span class="h6 mb-0 d-flex align-items-center"
|
||
><i class="icon-base ti tabler-settings me-1"></i>Authenticator Apps</span
|
||
>
|
||
</span>
|
||
<span class="custom-option-body">
|
||
<small
|
||
>Get code from an app like Google Authenticator or Microsoft Authenticator.</small
|
||
>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check custom-option custom-option-basic">
|
||
<label
|
||
class="form-check-label custom-option-content"
|
||
for="customRadioTemp2"
|
||
data-bs-target="#twoFactorAuthTwo"
|
||
data-bs-toggle="modal">
|
||
<input
|
||
name="customRadioTemp"
|
||
class="form-check-input"
|
||
type="radio"
|
||
value=""
|
||
id="customRadioTemp2" />
|
||
<span class="custom-option-header">
|
||
<span class="h6 mb-0 d-flex align-items-center"
|
||
><i class="icon-base ti tabler-message me-1"></i>SMS</span
|
||
>
|
||
</span>
|
||
<span class="custom-option-body">
|
||
<small>We will send a code via SMS if you need to use your backup login method.</small>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Authentication App -->
|
||
<div class="modal fade" id="twoFactorAuthOne" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-0">Add Authenticator App</h4>
|
||
</div>
|
||
<h5 class="mb-2 text-break">Authenticator Apps</h5>
|
||
<p class="mb-6">
|
||
Using an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or
|
||
1Password, scan the QR code. It will generate a 6-digit code for you to enter below.
|
||
</p>
|
||
<div class="text-center">
|
||
<img src="../../assets/img/icons/misc/authentication-QR.png" alt="QR Code" width="150" />
|
||
</div>
|
||
<div class="alert alert-warning alert-dismissible mb-4 mt-6" role="alert">
|
||
<h5 class="alert-heading mb-1 text-break">ASDLKNASDA9AHS678dGhASD78AB</h5>
|
||
<p class="mb-0">If you're having trouble using the QR code, select manual entry on your app</p>
|
||
</div>
|
||
<div class="mb-6">
|
||
<label for="twoFactorAuthInput" class="form-label">Enter Authentication Code</label>
|
||
<input
|
||
type="email"
|
||
class="form-control"
|
||
id="twoFactorAuthInput"
|
||
name="twoFactorAuthInput"
|
||
placeholder="123 456" />
|
||
</div>
|
||
<div class="text-end">
|
||
<button
|
||
type="button"
|
||
class="btn btn-label-secondary me-3"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#twoFactorAuth">
|
||
<span class="align-middle">Cancel</span>
|
||
</button>
|
||
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close">
|
||
<span class="align-middle">Submit</span><i class="icon-base ti tabler-check icon-xs ms-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Authentication via SMS -->
|
||
<div class="modal fade" id="twoFactorAuthTwo" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<h5 class="mb-2">Verify Your Mobile Number for SMS</h5>
|
||
<p class="mb-6">
|
||
Enter your mobile phone number with country code, and we will send you a verification code.
|
||
</p>
|
||
<div class="mb-6">
|
||
<label for="twoFactorAuthInputSms" class="form-label">Phone number</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="twoFactorAuthInputSms"
|
||
name="twoFactorAuthInputSms"
|
||
placeholder="202 555 0111" />
|
||
</div>
|
||
<div class="text-end">
|
||
<button
|
||
type="button"
|
||
class="btn btn-label-secondary me-3"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#twoFactorAuth">
|
||
<span class="align-middle">Cancel</span>
|
||
</button>
|
||
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close">
|
||
<span class="align-middle">Submit</span><i class="icon-base ti tabler-check ms-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ Two Factor Auth Modal -->
|
||
<script>
|
||
// Check selected custom option
|
||
window.Helpers.initCustomOptionCheck();
|
||
</script>
|
||
|
||
<!-- Payment provider modal -->
|
||
<div class="modal fade" id="paymentProvider" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Select payment providers</h4>
|
||
<p>Third-party payment providers</p>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom py-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0 me-12">Adyen</h6>
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">2Checkout</h6>
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Airpay</h6>
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Authorize.net</h6>
|
||
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Bambora</h6>
|
||
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Cayan</h6>
|
||
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Chase Paymentech (Orbital)</h6>
|
||
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between pb-4">
|
||
<h6 class="m-0 mb-2 mb-md-0">Checkout.com</h6>
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- / Payment provider modal -->
|
||
|
||
<!-- Payment Methods modal -->
|
||
<div class="modal fade" id="paymentMethods" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="text-center mb-6">
|
||
<h4 class="mb-2">Select payment methods</h4>
|
||
<p>Supported payment methods</p>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between align-items-center border-bottom py-4 mb-4">
|
||
<div class="d-flex gap-4 align-items-center">
|
||
<img
|
||
src="../../assets/img/icons/payments/visa-img.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="visa-card" />
|
||
<h6 class="m-0">Visa</h6>
|
||
</div>
|
||
<p class="m-0 d-none d-sm-block">Credit Card</p>
|
||
</div>
|
||
<div class="d-flex justify-content-sm-between align-items-center border-bottom pb-4 mb-4">
|
||
<div class="d-flex gap-4 align-items-center">
|
||
<img
|
||
src="../../assets/img/icons/payments/ae-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="american-express-card"
|
||
data-app-light-img="icons/payments/ae-light.png"
|
||
data-app-dark-img="icons/payments/ae-dark.png" />
|
||
|
||
<h6 class="m-0">American Express</h6>
|
||
</div>
|
||
<p class="m-0 d-none d-sm-block">Credit Card</p>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
|
||
<div class="d-flex gap-4 align-items-center">
|
||
<img
|
||
src="../../assets/img/icons/payments/master-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="master-card"
|
||
data-app-light-img="icons/payments/master-light.png"
|
||
data-app-dark-img="icons/payments/master-dark.png" />
|
||
|
||
<h6 class="m-0">Mastercard</h6>
|
||
</div>
|
||
<p class="m-0 d-none d-sm-block">Credit Card</p>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
|
||
<div class="d-flex gap-4 align-items-center">
|
||
<img
|
||
src="../../assets/img/icons/payments/jcb-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="jcb-card"
|
||
data-app-light-img="icons/payments/jcb-light.png"
|
||
data-app-dark-img="icons/payments/jcb-dark.png" />
|
||
<h6 class="m-0">JCB</h6>
|
||
</div>
|
||
<p class="m-0 d-none d-sm-block">Credit Card</p>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center pb-4">
|
||
<div class="d-flex gap-4 align-items-center">
|
||
<img
|
||
src="../../assets/img/icons/payments/dc-light.png"
|
||
class="img-fluid w-px-50 h-px-30"
|
||
alt="diners-club-card"
|
||
data-app-light-img="icons/payments/dc-light.png"
|
||
data-app-dark-img="icons/payments/dc-dark.png" />
|
||
<h6 class="m-0">Diners Club</h6>
|
||
</div>
|
||
<p class="m-0 d-none d-sm-block">Credit Card</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- / Payment Methods modal -->
|
||
</div>
|
||
<!-- / Content -->
|
||
|
||
<!-- Footer -->
|
||
<footer class="content-footer footer bg-footer-theme">
|
||
<div class="container-xxl">
|
||
<div
|
||
class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
|
||
<div class="text-body">
|
||
©
|
||
<script>
|
||
document.write(new Date().getFullYear());
|
||
</script>
|
||
, made with ❤️ by <a href="https://pixinvent.com" target="_blank" class="footer-link">Pixinvent</a>
|
||
</div>
|
||
<div class="d-none d-lg-inline-block">
|
||
<a href="https://themeforest.net/licenses/standard" class="footer-link me-4" target="_blank"
|
||
>License</a
|
||
>
|
||
<a href="https://themeforest.net/user/pixinvent/portfolio" target="_blank" class="footer-link me-4"
|
||
>More Themes</a
|
||
>
|
||
|
||
<a
|
||
href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
|
||
target="_blank"
|
||
class="footer-link me-4"
|
||
>Documentation</a
|
||
>
|
||
|
||
<a href="https://pixinvent.ticksy.com/" target="_blank" class="footer-link d-none d-sm-inline-block"
|
||
>Support</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- / Footer -->
|
||
|
||
<div class="content-backdrop fade"></div>
|
||
</div>
|
||
<!-- Content wrapper -->
|
||
</div>
|
||
<!-- / Layout page -->
|
||
</div>
|
||
|
||
<!-- Overlay -->
|
||
<div class="layout-overlay layout-menu-toggle"></div>
|
||
|
||
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
|
||
<div class="drag-target"></div>
|
||
</div>
|
||
<!-- / Layout wrapper -->
|
||
|
||
<!-- Core JS -->
|
||
<!-- build:js assets/vendor/js/theme.js -->
|
||
|
||
<script src="../../assets/vendor/libs/jquery/jquery.js"></script>
|
||
|
||
<script src="../../assets/vendor/libs/popper/popper.js"></script>
|
||
<script src="../../assets/vendor/js/bootstrap.js"></script>
|
||
<script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
|
||
|
||
<script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||
|
||
<script src="../../assets/vendor/libs/hammer/hammer.js"></script>
|
||
|
||
<script src="../../assets/vendor/libs/i18n/i18n.js"></script>
|
||
|
||
<script src="../../assets/vendor/js/menu.js"></script>
|
||
|
||
<!-- endbuild -->
|
||
|
||
<!-- Vendors JS -->
|
||
<script src="../../assets/vendor/libs/cleave-zen/cleave-zen.js"></script>
|
||
<script src="../../assets/vendor/libs/select2/select2.js"></script>
|
||
<script src="../../assets/vendor/libs/@form-validation/popular.js"></script>
|
||
<script src="../../assets/vendor/libs/@form-validation/bootstrap5.js"></script>
|
||
<script src="../../assets/vendor/libs/@form-validation/auto-focus.js"></script>
|
||
<script src="../../assets/vendor/libs/bs-stepper/bs-stepper.js"></script>
|
||
|
||
<!-- Main JS -->
|
||
|
||
<script src="../../assets/js/main.js"></script>
|
||
|
||
<!-- Page JS -->
|
||
<script src="../../assets/js/pages-pricing.js"></script>
|
||
<script src="../../assets/js/modal-create-app.js"></script>
|
||
<script src="../../assets/js/modal-add-new-cc.js"></script>
|
||
<script src="../../assets/js/modal-add-new-address.js"></script>
|
||
<script src="../../assets/js/modal-edit-user.js"></script>
|
||
<script src="../../assets/js/modal-enable-otp.js"></script>
|
||
<script src="../../assets/js/modal-share-project.js"></script>
|
||
<script src="../../assets/js/modal-two-factor-auth.js"></script>
|
||
</body>
|
||
</html>
|