Files
Motula-Translate-Backend/public/backend/pages/forms/advanced-elements.html
2024-01-21 17:18:37 +01:00

1033 lines
49 KiB
HTML

<!DOCTYPE html>
<!--
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
Author: NobleUI
Website: https://www.nobleui.com
Portfolio: https://themeforest.net/user/nobleui/portfolio
Contact: nobleui123@gmail.com
Purchase: https://1.envato.market/nobleui_admin
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
<meta name="author" content="NobleUI">
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
<!-- 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=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- End fonts -->
<!-- core:css -->
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="../../../assets/vendors/select2/select2.min.css">
<link rel="stylesheet" href="../../../assets/vendors/jquery-tags-input/jquery.tagsinput.min.css">
<link rel="stylesheet" href="../../../assets/vendors/dropzone/dropzone.min.css">
<link rel="stylesheet" href="../../../assets/vendors/dropify/dist/dropify.min.css">
<link rel="stylesheet" href="../../../assets/vendors/pickr/themes/classic.min.css">
<link rel="stylesheet" href="../../../assets/vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../assets/vendors/flatpickr/flatpickr.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
</head>
<body>
<div class="main-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar">
<div class="sidebar-header">
<a href="#" class="sidebar-brand">
Noble<span>UI</span>
</a>
<div class="sidebar-toggler not-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="sidebar-body">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a href="../../dashboard.html" class="nav-link">
<i class="link-icon" data-feather="box"></i>
<span class="link-title">Dashboard</span>
</a>
</li>
<li class="nav-item nav-category">web apps</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
<i class="link-icon" data-feather="mail"></i>
<span class="link-title">Email</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="emails">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
</li>
<li class="nav-item">
<a href="../../pages/email/read.html" class="nav-link">Read</a>
</li>
<li class="nav-item">
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="../../pages/apps/chat.html" class="nav-link">
<i class="link-icon" data-feather="message-square"></i>
<span class="link-title">Chat</span>
</a>
</li>
<li class="nav-item">
<a href="../../pages/apps/calendar.html" class="nav-link">
<i class="link-icon" data-feather="calendar"></i>
<span class="link-title">Calendar</span>
</a>
</li>
<li class="nav-item nav-category">Components</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
<i class="link-icon" data-feather="feather"></i>
<span class="link-title">UI Kit</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="uiComponents">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
</li>
<li class="nav-item">
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
<i class="link-icon" data-feather="anchor"></i>
<span class="link-title">Advanced UI</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="advancedUI">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
</li>
<li class="nav-item">
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
</li>
<li class="nav-item">
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
</li>
<li class="nav-item">
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
<i class="link-icon" data-feather="inbox"></i>
<span class="link-title">Forms</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="forms">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
</li>
<li class="nav-item">
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
</li>
<li class="nav-item">
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
</li>
<li class="nav-item">
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
<i class="link-icon" data-feather="pie-chart"></i>
<span class="link-title">Charts</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="charts">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
</li>
<li class="nav-item">
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
</li>
<li class="nav-item">
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
</li>
<li class="nav-item">
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
</li>
<li class="nav-item">
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
</li>
<li class="nav-item">
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
<i class="link-icon" data-feather="layout"></i>
<span class="link-title">Table</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="tables">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
</li>
<li class="nav-item">
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
<i class="link-icon" data-feather="smile"></i>
<span class="link-title">Icons</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="icons">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
</li>
<li class="nav-item">
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
</li>
<li class="nav-item">
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
</li>
</ul>
</div>
</li>
<li class="nav-item nav-category">Pages</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
<i class="link-icon" data-feather="book"></i>
<span class="link-title">Special pages</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="general-pages">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
</li>
<li class="nav-item">
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
</li>
<li class="nav-item">
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
</li>
<li class="nav-item">
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
<i class="link-icon" data-feather="unlock"></i>
<span class="link-title">Authentication</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="authPages">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
<i class="link-icon" data-feather="cloud-off"></i>
<span class="link-title">Error</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse" id="errorPages">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="../../pages/error/404.html" class="nav-link">404</a>
</li>
<li class="nav-item">
<a href="../../pages/error/500.html" class="nav-link">500</a>
</li>
</ul>
</div>
</li>
<li class="nav-item nav-category">Docs</li>
<li class="nav-item">
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
<i class="link-icon" data-feather="hash"></i>
<span class="link-title">Documentation</span>
</a>
</li>
</ul>
</div>
</nav>
<nav class="settings-sidebar">
<div class="sidebar-body">
<a href="#" class="settings-sidebar-toggler">
<i data-feather="settings"></i>
</a>
<div class="theme-wrapper">
<h6 class="text-muted mb-2">Light Theme:</h6>
<a class="theme-item" href="../../../demo1/dashboard.html">
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
</a>
<h6 class="text-muted mb-2">Dark Theme:</h6>
<a class="theme-item active" href="../../../demo2/dashboard.html">
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
</a>
</div>
</div>
</nav>
<!-- partial -->
<div class="page-wrapper">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar">
<a href="#" class="sidebar-toggler">
<i data-feather="menu"></i>
</a>
<div class="navbar-content">
<form class="search-form">
<div class="input-group">
<div class="input-group-text">
<i data-feather="search"></i>
</div>
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
</a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="grid"></i>
</a>
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p class="mb-0 fw-bold">Web Apps</p>
<a href="javascript:;" class="text-muted">Edit</a>
</div>
<div class="row g-0 p-1">
<div class="col-3 text-center">
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
</div>
<div class="col-3 text-center">
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
</div>
<div class="col-3 text-center">
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
</div>
<div class="col-3 text-center">
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
</div>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="mail"></i>
</a>
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p>9 New Messages</p>
<a href="javascript:;" class="text-muted">Clear all</a>
</div>
<div class="p-1">
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Leonardo Payne</p>
<p class="tx-12 text-muted">Project status</p>
</div>
<p class="tx-12 text-muted">2 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Carl Henson</p>
<p class="tx-12 text-muted">Client meeting</p>
</div>
<p class="tx-12 text-muted">30 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Jensen Combs</p>
<p class="tx-12 text-muted">Project updates</p>
</div>
<p class="tx-12 text-muted">1 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Amiah Burton</p>
<p class="tx-12 text-muted">Project deatline</p>
</div>
<p class="tx-12 text-muted">2 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Yaretzi Mayo</p>
<p class="tx-12 text-muted">New record</p>
</div>
<p class="tx-12 text-muted">5 hrs ago</p>
</div>
</a>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="bell"></i>
<div class="indicator">
<div class="circle"></div>
</div>
</a>
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p>6 New Notifications</p>
<a href="javascript:;" class="text-muted">Clear all</a>
</div>
<div class="p-1">
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="gift"></i>
</div>
<div class="flex-grow-1 me-2">
<p>New Order Recieved</p>
<p class="tx-12 text-muted">30 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="alert-circle"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Server Limit Reached!</p>
<p class="tx-12 text-muted">1 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
</div>
<div class="flex-grow-1 me-2">
<p>New customer registered</p>
<p class="tx-12 text-muted">2 sec ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="layers"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Apps are ready for update</p>
<p class="tx-12 text-muted">5 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="download"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Download completed</p>
<p class="tx-12 text-muted">6 hrs ago</p>
</div>
</a>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
</a>
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
<div class="mb-3">
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
</div>
<div class="text-center">
<p class="tx-16 fw-bolder">Amiah Burton</p>
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
</div>
</div>
<ul class="list-unstyled p-1">
<li class="dropdown-item py-2">
<a href="../../pages/general/profile.html" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="user"></i>
<span>Profile</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="edit"></i>
<span>Edit Profile</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="repeat"></i>
<span>Switch User</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="log-out"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<!-- partial -->
<div class="page-content">
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Advanced Elements</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Form Validation</h4>
<p class="text-muted mb-3">Read the <a href="https://jqueryvalidation.org/" target="_blank"> Official jQuery Validation Documentation </a>for a full list of instructions and other options.</p>
<form id="signupForm">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input id="name" class="form-control" name="name" type="text">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input id="email" class="form-control" name="email" type="email">
</div>
<div class="mb-3">
<label for="ageSelect" class="form-label">Age</label>
<select class="form-select" name="age_select" id="ageSelect">
<option selected disabled>Select your age</option>
<option>12-18</option>
<option>18-22</option>
<option>22-30</option>
<option>30-60</option>
<option>Above 60</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Gender</label>
<div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender1">
<label class="form-check-label" for="gender1">
Male
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender2">
<label class="form-check-label" for="gender2">
Female
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender3">
<label class="form-check-label" for="gender3">
Other
</label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Skills</label>
<div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline1">
<label class="form-check-label" for="checkInline1">
Angular
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline2">
<label class="form-check-label" for="checkInline2">
ReactJs
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline3">
<label class="form-check-label" for="checkInline3">
VueJs
</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input id="password" class="form-control" name="password" type="password">
</div>
<div class="mb-3">
<label for="confirm_password" class="form-label">Confirm password</label>
<input id="confirm_password" class="form-control" name="confirm_password" type="password">
</div>
<div class="mb-3">
<div class="form-check">
<label class="form-check-label" for="termsCheck">
Agree to <a href="#"> terms and conditions </a>
</label>
<input type="checkbox" class="form-check-input" name="terms_agree" id="termsCheck">
</div>
</div>
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bootstrap MaxLength</h4>
<p class="text-muted mb-3">Read the <a href="https://github.com/mimo84/bootstrap-maxlength" target="_blank"> Official Bootstrap MaxLength Documentation </a>for a full list of instructions and other options.</p>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig" class="col-form-label">Default usage</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig-2" class="col-form-label">Few options</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="20" name="defaultconfig-2" id="defaultconfig-2" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig-3" class="col-form-label">All the options</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="10" name="defaultconfig-3" id="defaultconfig-3" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="defaultconfig-4" class="col-form-label">Text Area</label>
</div>
<div class="col-lg-8">
<textarea id="maxlength-textarea" class="form-control" id="defaultconfig-4" maxlength="100" rows="8" placeholder="This textarea has a limit of 100 chars."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Input Mask</h6>
<p class="text-muted mb-3">Read the <a href="https://github.com/RobinHerbots/Inputmask" target="_blank"> Official Inputmask Documentation </a>for a full list of instructions and other options.</p>
<form class="forms-sample">
<div class="row mb-3">
<div class="col">
<label class="form-label">Date:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy"/>
</div>
<div class="col-md-6">
<label class="form-label">Time (12 hour):</label>
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="hh:mm tt" />
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Date time:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy HH:MM:ss" />
</div>
<div class="col-md-6">
<label class="form-label">Date with custom placeholder:</label>
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-placeholder="*" data-inputmask-inputformat="dd/mm/yyyy" />
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Phone:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask-alias="(+99) 9999-9999"/>
</div>
<div class="col-md-6">
<label class="form-label">Credit card:</label>
<input class="form-control" data-inputmask-alias="9999-9999-9999-9999"/>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Currency:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'currency', 'prefix':'$'"/>
</div>
<div class="col-md-6">
<label class="form-label">Serial key:</label>
<input class="form-control" data-inputmask-alias="****-****-****-****"/>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Email:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'email'"/>
</div>
<div class="col-md-6">
<label class="form-label">Ip address:</label>
<input class="form-control" data-inputmask="'alias': 'ip'"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Select 2</h4>
<p class="text-muted mb-3">Read the <a href="https://select2.org/" target="_blank"> Official Select2 Documentation </a>for a full list of instructions and other options.</p>
<div class="mb-3">
<label class="form-label">Single select box using select 2</label>
<select class="js-example-basic-single form-select" data-width="100%">
<option value="TX">Texas</option>
<option value="NY">New York</option>
<option value="FL">Florida</option>
<option value="KN">Kansas</option>
<option value="HW">Hawaii</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Multiple select using select 2</label>
<select class="js-example-basic-multiple form-select" multiple="multiple" data-width="100%">
<option value="TX">Texas</option>
<option value="WY">Wyoming</option>
<option value="NY">New York</option>
<option value="FL">Florida</option>
<option value="KN">Kansas</option>
<option value="HW">Hawaii</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Typeahead</h4>
<p class="text-muted mb-3">Read the <a href="https://github.com/twitter/typeahead.js" target="_blank"> Official Typeahead.js Documentation </a>for a full list of instructions and other options.</p>
<div class="row">
<div class="col">
<label class="form-label">Basic</label>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</div>
<div class="col">
<label class="form-label">Bloodhound</label>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Tags input</h6>
<p class="text-muted mb-3">Read the <a href="https://www.npmjs.com/package/jquery-tags-input" target="_blank"> Official jQuery-tags-input Documentation </a>for a full list of instructions and other options.</p>
<p class="mb-2">Type something to add a new tag</p>
<div>
<input name="tags" id="tags" value="New York,Texas,Florida,New Mexico" />
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Color picker</h6>
<p class="text-muted mb-3">Flat, simple, and responsive Color-Picker library. Read the <a href="https://github.com/Simonwep/pickr" target="_blank"> Official @simonwep/pickr Documentation </a>for a full list of instructions and other options.</p>
<p class="mb-2">Click the color square to activate the Color Picker</p>
<div class="d-flex">
<div class="me-2">
<div id="pickr_1"></div>
</div>
<div class="me-2">
<div id="pickr_2"></div>
</div>
<div class="me-2">
<div id="pickr_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Date picker</h6>
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
<div class="input-group flatpickr" id="flatpickr-date">
<input type="text" class="form-control" placeholder="Select date" data-input>
<span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Time picker</h6>
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
<div class="input-group flatpickr" id="flatpickr-time">
<input type="text" class="form-control" placeholder="Select time" data-input>
<span class="input-group-text input-group-addon" data-toggle><i data-feather="clock"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 stretch-card grid-margin grid-margin-md-0">
<div class="card">
<div class="card-body">
<h6 class="card-title">Dropzone</h6>
<p class="text-muted mb-3">Read the <a href="https://www.dropzonejs.com/" target="_blank"> Official Dropzone.js Documentation </a>for a full list of instructions and other options.</p>
<form action="/file-upload" class="dropzone" id="exampleDropzone"></form>
</div>
</div>
</div>
<div class="col-md-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Dropify</h6>
<p class="text-muted mb-3">Read the <a href="https://github.com/JeremyFagis/dropify" target="_blank"> Official Dropify Documentation </a>for a full list of instructions and other options.</p>
<input type="file" id="myDropify"/>
</div>
</div>
</div>
</div>
</div>
<!-- partial:../../partials/_footer.html -->
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
</footer>
<!-- partial -->
</div>
</div>
<!-- core:js -->
<script src="../../../assets/vendors/core/core.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="../../../assets/vendors/jquery-validation/jquery.validate.min.js"></script>
<script src="../../../assets/vendors/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
<script src="../../../assets/vendors/inputmask/jquery.inputmask.min.js"></script>
<script src="../../../assets/vendors/select2/select2.min.js"></script>
<script src="../../../assets/vendors/typeahead.js/typeahead.bundle.min.js"></script>
<script src="../../../assets/vendors/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script src="../../../assets/vendors/dropzone/dropzone.min.js"></script>
<script src="../../../assets/vendors/dropify/dist/dropify.min.js"></script>
<script src="../../../assets/vendors/pickr/pickr.min.js"></script>
<script src="../../../assets/vendors/moment/moment.min.js"></script>
<script src="../../../assets/vendors/flatpickr/flatpickr.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
<script src="../../../assets/js/template.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="../../../assets/js/form-validation.js"></script>
<script src="../../../assets/js/bootstrap-maxlength.js"></script>
<script src="../../../assets/js/inputmask.js"></script>
<script src="../../../assets/js/select2.js"></script>
<script src="../../../assets/js/typeahead.js"></script>
<script src="../../../assets/js/tags-input.js"></script>
<script src="../../../assets/js/dropzone.js"></script>
<script src="../../../assets/js/dropify.js"></script>
<script src="../../../assets/js/pickr.js"></script>
<script src="../../../assets/js/flatpickr.js"></script>
<!-- End custom js for this page -->
</body>
</html>