gentelella
Version:
Gentelella Admin is a free to use Bootstrap admin template
966 lines (879 loc) • 84.9 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title>
<!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<script type="module" src="/src/main-form-basic.js"></script>
<!-- Custom Ion Range Slider Styling -->
<style>
/* Custom Ion Range Slider Styling for Gentelella Template */
.irs {
height: 80px; /* Increased height to prevent overlapping */
margin-bottom: 25px; /* More bottom margin */
margin-top: 15px; /* Top margin for labels */
position: relative;
}
.irs--gentelella .irs-line {
height: 6px;
background: linear-gradient(to right, #E8E9EA 0%, #DADEE4 100%);
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
top: 35px; /* Position line lower to make room for labels */
}
.irs--gentelella .irs-bar {
height: 6px;
background: linear-gradient(to right, #26B99A 0%, #2BBFAB 100%);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(38, 185, 154, 0.3);
top: 35px; /* Match line position */
}
.irs--gentelella .irs-bar--single {
background: linear-gradient(to right, #5A738E 0%, #6C84A0 100%);
box-shadow: 0 1px 3px rgba(90, 115, 142, 0.3);
}
.irs--gentelella .irs-handle {
width: 22px;
height: 22px;
background: #FFFFFF;
border: 3px solid #26B99A;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.2s ease;
top: 24px; /* Position handle to align with line */
}
.irs--gentelella .irs-handle:hover {
transform: scale(1.1);
border-color: #2BBFAB;
box-shadow: 0 4px 12px rgba(38, 185, 154, 0.3), 0 2px 6px rgba(0,0,0,0.1);
}
.irs--gentelella .irs-handle.state_hover,
.irs--gentelella .irs-handle:active {
background: #26B99A;
border-color: #26B99A;
}
.irs--gentelella .irs-min,
.irs--gentelella .irs-max {
background: #F0F3F4;
color: #73879C;
font-size: 10px;
padding: 2px 4px;
border-radius: 3px;
border: 1px solid #E6E9ED;
font-weight: 500;
top: 55px; /* Position further below to avoid overlap */
height: 16px;
line-height: 12px;
white-space: nowrap;
min-width: 30px;
text-align: center;
}
.irs--gentelella .irs-min {
left: 0;
transform: translateX(0);
}
.irs--gentelella .irs-max {
right: 0;
transform: translateX(0);
}
.irs--gentelella .irs-from,
.irs--gentelella .irs-to,
.irs--gentelella .irs-single {
background: #26B99A;
color: white;
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(38, 185, 154, 0.3);
border: none;
top: 5px; /* Position above the line */
height: 20px;
line-height: 12px;
white-space: nowrap;
min-width: 40px;
text-align: center;
}
.irs--gentelella .irs-from:before,
.irs--gentelella .irs-to:before,
.irs--gentelella .irs-single:before {
border-top-color: #26B99A;
top: 20px; /* Adjust arrow position */
}
.irs--gentelella .irs-grid {
top: 55px; /* Position grid at same level as min/max */
margin: 0 20px; /* Add margin to create space from edges */
height: 20px;
}
.irs--gentelella .irs-grid-pol {
background: #D1D5DB;
height: 6px; /* Shorter grid lines */
width: 1px;
}
.irs--gentelella .irs-grid-text {
color: #73879C;
font-size: 9px;
font-weight: 500;
padding-top: 8px;
white-space: nowrap;
}
/* Hide duplicate grid text at edges to prevent overlap with min/max */
.irs--gentelella .irs-grid-text:first-child,
.irs--gentelella .irs-grid-text:last-child {
display: none !important;
}
/* Hide grid lines at edges too to prevent visual clutter */
.irs--gentelella .irs-grid-pol:first-child,
.irs--gentelella .irs-grid-pol:last-child {
display: none !important;
}
/* Slider container improvements */
.slider-container {
padding: 20px 15px 25px 15px; /* Extra bottom padding */
margin-bottom: 15px;
background: #FAFAFA;
border-radius: 6px;
border: 1px solid #E6E9ED;
overflow: hidden; /* Prevent any overflow issues */
}
.slider-container .form-label {
margin-bottom: 10px;
display: block;
}
.slider-container .text-muted {
margin-top: 15px; /* More space from slider */
margin-bottom: 0;
}
/* Special styling for different slider types */
.price-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #1ABB9C 0%, #26B99A 100%);
}
.price-slider .irs--gentelella .irs-from,
.price-slider .irs--gentelella .irs-to {
background: #1ABB9C;
box-shadow: 0 2px 6px rgba(26, 187, 156, 0.3);
}
.price-slider .irs--gentelella .irs-from:before,
.price-slider .irs--gentelella .irs-to:before {
border-top-color: #1ABB9C;
}
.percentage-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #3498DB 0%, #5DADE2 100%);
}
.percentage-slider .irs--gentelella .irs-single {
background: #3498DB;
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}
.percentage-slider .irs--gentelella .irs-single:before {
border-top-color: #3498DB;
}
.age-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #9B59B6 0%, #BB8FCE 100%);
}
.age-slider .irs--gentelella .irs-from,
.age-slider .irs--gentelella .irs-to {
background: #9B59B6;
box-shadow: 0 2px 6px rgba(155, 89, 182, 0.3);
}
.age-slider .irs--gentelella .irs-from:before,
.age-slider .irs--gentelella .irs-to:before {
border-top-color: #9B59B6;
}
.temperature-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #E67E22 0%, #F39C12 100%);
}
.temperature-slider .irs--gentelella .irs-from,
.temperature-slider .irs--gentelella .irs-to {
background: #E67E22;
box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
}
.temperature-slider .irs--gentelella .irs-from:before,
.temperature-slider .irs--gentelella .irs-to:before {
border-top-color: #E67E22;
}
.time-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #2C3E50 0%, #34495E 100%);
}
.time-slider .irs--gentelella .irs-from,
.time-slider .irs--gentelella .irs-to {
background: #2C3E50;
box-shadow: 0 2px 6px rgba(44, 62, 80, 0.3);
}
.time-slider .irs--gentelella .irs-from:before,
.time-slider .irs--gentelella .irs-to:before {
border-top-color: #2C3E50;
}
.memory-slider .irs--gentelella .irs-bar {
background: linear-gradient(to right, #E74C3C 0%, #EC7063 100%);
}
.memory-slider .irs--gentelella .irs-single {
background: #E74C3C;
box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}
.memory-slider .irs--gentelella .irs-single:before {
border-top-color: #E74C3C;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.irs {
height: 90px;
}
.irs--gentelella .irs-from,
.irs--gentelella .irs-to,
.irs--gentelella .irs-single {
font-size: 10px;
padding: 3px 6px;
}
.slider-container {
padding: 15px 10px;
}
}
/* Hide legacy Cropper.js v1 demo that is no longer needed */
.container.cropper { display: none !important; }
/* Ensure Cropper custom elements fill the designated area */
#cropper-container cropper-canvas,
#cropper-container cropper-image,
#cropper-container cropper-selection,
#cropper-container cropper-shade {
width: 100% !important;
height: 100% !important;
}
</style>
<!-- Bootstrap CSS -->
<!-- Cropper.js CSS is now bundled with Vite - CDN reference removed -->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h4>John Doe</h4>
</div>
</div>
<!-- /menu profile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="index.html">Dashboard 1</a></li>
<li><a href="index2.html">Dashboard 2</a></li>
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
<li><a href="index3.html">Dashboard 3</a></li>
</ul>
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="form.html">General Form</a></li>
<li><a href="form_advanced.html">Advanced Components</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="form_wizards.html">Form Wizard</a></li>
<li><a href="form_upload.html">Form Upload</a></li>
<li><a href="form_buttons.html">Form Buttons</a></li>
</ul>
<li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="general_elements.html">General Elements</a></li>
<li><a href="media_gallery.html">Media Gallery</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="widgets.html">Widgets</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="inbox.html">Inbox</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
<li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="tables.html">Tables</a></li>
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
</ul>
<li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li>
<li><a href="chart3.html">Chart JS3</a></li>
<li><a href="echarts.html">ECharts</a></li>
<li><a href="other_charts.html">Other Charts</a></li>
</ul>
<li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
<li><a href="fixed_footer.html">Fixed Footer</a></li>
</ul>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project_detail.html">Project Detail</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
</ul>
<li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="page_403.html">403 Error</a></li>
<li><a href="page_404.html">404 Error</a></li>
<li><a href="page_500.html">500 Error</a></li>
<li><a href="plain_page.html">Plain Page</a></li>
<li><a href="login.html">Login Page</a></li>
<li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul>
<li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#level1_1">Level One</a></li>
<li><a>Level One<span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu"><a href="level2.html">Level Two</a>
<li><a href="#level2_1">Level Two</a>
<li><a href="#level2_2">Level Two</a>
</ul>
<li><a href="#level1_2">Level One</a></li>
</ul>
<li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
<span class="fas fa-cog" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
<span class="fas fa-expand" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
<span class="fas fa-eye-slash" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
<span class="fas fa-power-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<div class="nav toggle">
<a id="menu_toggle"><i class="fas fa-bars"></i></a>
</div>
<nav class="nav navbar-nav">
<ul class="navbar-right">
<li class="nav-item dropdown open" style="padding-left: 15px;">
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
</a>
<div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="javascript:;"> Profile</a>
<a class="dropdown-item" href="javascript:;">
<span class="badge bg-red float-end">50%</span>
<span>Settings</span>
</a>
<a class="dropdown-item" href="javascript:;">Help</a>
<a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
</div>
<li role="presentation" class="nav-item dropdown open">
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-envelope"></i>
<span class="badge bg-green">6</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<div class="text-center">
<a class="dropdown-item">
<strong>See All Alerts</strong>
<i class="fas fa-angle-right"></i>
</a>
</div>
</ul>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Form advanced</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 mb-3 float-end top_search">
<div class="input-group search-bar-fix">
<input type="text" class="form-control" placeholder="Search for...">
<button class="btn btn-outline-secondary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<!-- form input mask -->
<div class="col-md-6 col-sm-12">
<div class="x_panel">
<div class="x_title">
<h4>Input Mask</h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
<a class="dropdown-item" href="#">Settings 2</a>
</div>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form class="form-horizontal form-label-left">
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">Date Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '99/99/9999'">
<span class="fas fa-calendar form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">Phone mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '(999) 999-9999'">
<span class="fas fa-phone form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">Custom Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '99-999999'">
<span class="fas fa-tag form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">Serial Number</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '****-****-****-****-****-***'">
<span class="fas fa-barcode form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">TaxID Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '99-99999999'">
<span class="fas fa-receipt form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3 col-xs-3">Credit Card Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-inputmask="'mask': '9999-9999-9999-9999'">
<span class="fas fa-credit-card form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="ln_solid"></div>
<div class="mb-3 row">
<div class="col-md-9 offset-md-3">
<button type="submit" class="btn btn-primary">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /form input mask -->
<!-- modern color picker -->
<div class="col-md-6 col-sm-12">
<div class="x_panel">
<div class="x_title">
<h4>Modern Color Picker <small>Powered by Pickr</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
<li><a href="#">Settings 2</a>
</ul>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form class="form-horizontal form-label-left">
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">Classic Theme</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-classic" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="classic-result" readonly value="#5367ce" />
<span class="input-group-text"><i class="fas fa-palette"></i></span>
</div>
<small class="text-muted">Full-featured picker with all components</small>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">Monolith Theme</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-monolith" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="monolith-result" readonly value="#e91e63" />
<span class="input-group-text"><i class="fas fa-droplet"></i></span>
</div>
<small class="text-muted">Compact design with modern styling</small>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">Nano Theme</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-nano" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="nano-result" readonly value="#ff9800" />
<span class="input-group-text"><i class="fas fa-circle"></i></span>
</div>
<small class="text-muted">Minimal picker for simple color selection</small>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">With Opacity</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-opacity" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="opacity-result" readonly value="rgba(156, 39, 176, 0.7)" />
<span class="input-group-text"><i class="fas fa-adjust"></i></span>
</div>
<small class="text-muted">Includes alpha/transparency control</small>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">Swatches & Presets</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-swatches" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="swatches-result" readonly value="#4caf50" />
<span class="input-group-text"><i class="fas fa-swatchbook"></i></span>
</div>
<small class="text-muted">Pre-defined color palette with custom swatches</small>
</div>
</div>
<div class="mb-3 row">
<label class="control-label col-md-3 col-sm-3">Output Formats</label>
<div class="col-md-9 col-sm-9">
<div class="input-group">
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
<div class="color-picker-formats" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
</span>
<input type="text" class="form-control" id="formats-result" readonly value="#2196f3" />
<span class="input-group-text"><i class="fas fa-code"></i></span>
</div>
<small class="text-muted">Supports HEX, RGB, HSL, HSV formats</small>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /modern color picker -->
<!-- image cropper (Cropper.js v2) -->
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h4>Image Cropper <small>Powered by Cropper.js v2</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row g-3">
<!-- Source image -->
<div id="cropper-container" class="col-md-8 text-center" style="height:450px;">
<img id="cropper-source" src="/images/cropper.jpg" alt="Source" class="img-fluid rounded shadow-sm" style="width:100%; height:auto; max-height:100%; object-fit:contain;">
</div>
<!-- Preview + controls -->
<div class="col-md-4 d-flex flex-column align-items-center gap-3">
<div id="cropper-preview" class="border rounded w-100" style="height: 300px; background: #f7f7f7; display: flex; align-items: center; justify-content: center; overflow: hidden;"><span class="text-muted small">Crop preview</span></div>
<div class="btn-group w-100" role="group" aria-label="Cropper actions">
<button id="cropper-rotate" type="button" class="btn btn-outline-secondary"><i class="fas fa-sync-alt me-1"></i>Rotate 90°</button>
<button id="cropper-reset" type="button" class="btn btn-outline-warning"><i class="fas fa-undo me-1"></i>Reset</button>
<button id="cropper-download" type="button" class="btn btn-outline-success"><i class="fas fa-download me-1"></i>Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /image cropper (Cropper.js v2) -->
<!-- form input knob -->
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h4>Input knob</h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
<li><a href="#">Settings 2</a>
</ul>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-2">
<p>Display value</p>
<input class="knob" data-width="100" data-height="120" data-min="-100" data-displayPrevious=true data-fgColor="#26B99A" value="44">
</div>
<div class="col-md-2">
<p>× 'cursor' mode</p>
<input class="knob" data-width="100" data-height="120" data-cursor=true data-fgColor="#34495E" value="29">
</div>
<div class="col-md-2">
<p>Step 0.1</p>
<input class="knob" data-width="100" data-height="120" data-min="-10000" data-displayPrevious=true data-fgColor="#26B99A" data-max="10000" data-step=".1" value="0">
</div>
<div class="col-md-2">
<p>Angle arc</p>
<input class="knob" data-width="100" data-height="120" data-angleOffset=-125 data-angleArc=250 data-fgColor="#34495E" data-rotation="anticlockwise" value="35">
</div>
<div class="col-md-2">
<p>Alternate design</p>
<input class="knob" data-width="110" data-height="120" data-displayPrevious=true data-fgColor="#26B99A" data-skin="tron" data-thickness=".2" value="75">
</div>
<div class="col-md-2">
<p>Angle offset</p>
<input class="knob" data-width="100" data-height="120" data-angleOffset=90 data-linecap=round data-fgColor="#26B99A" value="35">
</div>
</div>
</div>
</div>
<!-- /form input knob -->
</div>
<div class="row">
<div class="col-md-12">
<!-- form date pickers -->
<div class="x_panel" style="">
<div class="x_title">
<h4>Date Range Pickers <small>Functional date and time range selection</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
<li><a href="#">Settings 2</a>
</ul>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<!-- Modern Date Range Examples -->
<div class="row mb-4">
<div class="col-md-6">
<h5>Date Range Picker (Start - End)</h5>
<div class="d-flex gap-2">
<div class='input-group' id='startDateRange' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#startDateRange" placeholder="Start Date" />
<span class="input-group-text" data-td-target="#startDateRange" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
<span class="align-self-center">to</span>
<div class='input-group' id='endDateRange' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#endDateRange" placeholder="End Date" />
<span class="input-group-text" data-td-target="#endDateRange" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<h5>DateTime Range Picker</h5>
<div class="d-flex gap-2">
<div class='input-group' id='startDateTimeRange' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#startDateTimeRange" placeholder="Start DateTime" />
<span class="input-group-text" data-td-target="#startDateTimeRange" data-td-toggle="datetimepicker">
<span class="fas fa-calendar-plus"></span>
</span>
</div>
<span class="align-self-center">to</span>
<div class='input-group' id='endDateTimeRange' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#endDateTimeRange" placeholder="End DateTime" />
<span class="input-group-text" data-td-target="#endDateTimeRange" data-td-toggle="datetimepicker">
<span class="fas fa-calendar-plus"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Input Masks Section -->
<div class="row mb-4">
<div class="col-md-12">
<h5>Input Masks <small>Formatted input controls</small></h5>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Date Mask (MM/DD/YYYY)</label>
<input type="text" class="form-control" data-inputmask="'mask': '99/99/9999'" placeholder="MM/DD/YYYY">
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Phone Number</label>
<input type="text" class="form-control" data-inputmask="'mask': '(999) 999-9999'" placeholder="(999) 999-9999">
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Credit Card</label>
<input type="text" class="form-control" data-inputmask="'mask': '9999-9999-9999-9999'" placeholder="9999-9999-9999-9999">
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Serial Number</label>
<input type="text" class="form-control" data-inputmask="'mask': '****-****-****-****-****-***'" placeholder="Serial Number">
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Tax ID</label>
<input type="text" class="form-control" data-inputmask="'mask': '99-99999999'" placeholder="99-99999999">
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Custom Mask</label>
<input type="text" class="form-control" data-inputmask="'mask': '99-999999'" placeholder="99-999999">
</div>
</div>
<!-- Color Pickers Section -->
<div class="row mb-4">
<div class="col-md-12">
<h5>Modern Color Pickers <small>Multiple themes and formats</small></h5>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Classic Theme</label>
<div class="d-flex gap-2">
<div class="color-picker-classic" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="classic-result" class="form-control" placeholder="#5367ce" readonly>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Monolith Theme</label>
<div class="d-flex gap-2">
<div class="color-picker-monolith" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="monolith-result" class="form-control" placeholder="#e91e63" readonly>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Nano Theme</label>
<div class="d-flex gap-2">
<div class="color-picker-nano" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="nano-result" class="form-control" placeholder="#ff9800" readonly>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">With Opacity</label>
<div class="d-flex gap-2">
<div class="color-picker-opacity" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="opacity-result" class="form-control" placeholder="rgba(156, 39, 176, 0.7)" readonly>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">With Swatches</label>
<div class="d-flex gap-2">
<div class="color-picker-swatches" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="swatches-result" class="form-control" placeholder="#4caf50" readonly>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Format Demo</label>
<div class="d-flex gap-2">
<div class="color-picker-formats" style="width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid #ddd;"></div>
<input type="text" id="formats-result" class="form-control" placeholder="#2196f3" readonly>
</div>
</div>
</div>
<!-- jQuery Knob Controls Section -->
<div class="row mb-4">
<div class="col-md-12">
<h5>jQuery Knob Controls <small>Circular progress and value controls</small></h5>
</div>
<div class="col-md-3 text-center mb-3">
<label class="form-label">Percentage</label>
<input type="text" class="knob" value="75" data-width="120" data-height="120" data-fgColor="#26B99A" data-readonly="true">
</div>