gentelella
Version:
Gentelella Admin is a free to use Bootstrap admin template
1,830 lines • 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>
<div class="col-md-3 text-center mb-3">
<label class="form-label">Progress Meter</label>
<input type="text" class="knob" value="65" data-min="0" data-max="100" data-width="120" data-height="120" data-fgColor="#3498DB">
</div>
<div class="col-md-3 text-center mb-3">
<label class="form-label">Temperature</label>
<input type="text" class="knob" value="22" data-min="-20" data-max="40" data-suffix="°C" data-width="120" data-height="120" data-fgColor="#E74C3C">
</div>
<div class="col-md-3 text-center mb-3">
<label class="form-label">Volume Control</label>
<input type="text" class="knob" value="8" data-min="0" data-max="10" data-step="0.1" data-width="120" data-height="120" data-fgColor="#9B59B6">
</div>
</div>
<!-- Toggle Switches Section -->
<div class="row mb-4">
<div class="col-md-12">
<h5>iOS-style Toggle Switches <small>Modern switch controls</small></h5>
</div>
<div class="col-md-3 mb-3">
<label class="form-label d-block">Enable Notifications</label>
<input type="checkbox" class="js-switch" checked />
</div>
<div class="col-md-3 mb-3">
<label class="form-label d-block">Auto-save</label>
<input type="checkbox" class="js-switch" />
</div>
<div class="col-md-3 mb-3">
<label class="form-label d-block">Dark Mode</label>
<input type="checkbox" class="js-switch" checked />
</div>
<div class="col-md-3 mb-3">
<label class="form-label d-block">Email Alerts</label>
<input type="checkbox" class="js-switch" />
</div>
</div>
</div>
</div>
<!-- /form date pickers -->
<!-- form datetimepicker -->
<div class="x_panel" style="">
<div class="x_title">
<h4>Date Pickers <small> Available with multiple designs</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">
<div class="container">
<div class="row">
<div class='col-sm-4'>
Basic Example
<div class="mb-3">
<div class='input-group' id='myDatepicker' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#myDatepicker" />
<span class="input-group-text" data-td-target="#myDatepicker" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
Only Date Picker
<div class="mb-3">
<div class='input-group' id='myDatepicker2' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#myDatepicker2" />
<span class="input-group-text" data-td-target="#myDatepicker2" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
Only Time Picker <small>For 24H format use format: 'HH:mm'</small>
<div class="mb-3">
<div class='input-group' id='myDatepicker3' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#myDatepicker3" />
<span class="input-group-text" data-td-target="#myDatepicker3" data-td-toggle="datetimepicker">
<span class="fas fa-clock"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
Using ReadOnly
<div class="mb-3">
<div class='input-group' id='myDatepicker4' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" readonly="readonly" data-td-target="#myDatepicker4" />
<span class="input-group-text" data-td-target="#myDatepicker4" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
Linked Picker Parent
<div class="mb-3">
<div class='input-group' id='datetimepicker6' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#datetimepicker6" />
<span class="input-group-text" data-td-target="#datetimepicker6" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
Linked Picker Children
<div class="mb-3">
<div class='input-group' id='datetimepicker7' data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type='text' class="form-control" data-td-target="#datetimepicker7" />
<span class="input-group-text" data-td-target="#datetimepicker7" data-td-toggle="datetimepicker">
<span class="fas fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /form datetimepicker -->
<!-- Range Sliders -->
<div class="x_panel" style="">
<div class="x_title">
<h4>Ion Range Sliders <small>Modern range and value sliders</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">
<div class="row">
<div class="col-md-6">
<div class="slider-container price-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-dollar-sign text-success me-2"></i>Price Range Slider
</label>
<input type="text" class="range_01" value="" name="range" />
<p class="text-muted small mt-2">Double slider for price ranges from $200 to $800</p>
</div>
</div>
<div class="col-md-6">
<div class="slider-container percentage-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-percentage text-primary me-2"></i>Percentage Slider
</label>
<input type="text" class="range_02" value="" name="range" />
<p class="text-muted small mt-2">Single slider with percentage values</p>
</div>
</div>
<div class="col-md-6">
<div class="slider-container age-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-users text-purple me-2"></i>Age Range
</label>
<input type="text" class="range_03" value="" name="range" />
<p class="text-muted small mt-2">Age selection from 18 to 65 years</p>
</div>
</div>
<div class="col-md-6">
<div class="slider-container temperature-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-thermometer-half text-warning me-2"></i>Temperature Range
</label>
<input type="text" class="range_04" value="" name="range" />
<p class="text-muted small mt-2">Temperature range with step values</p>
</div>
</div>
<div class="col-md-6">
<div class="slider-container time-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-clock text-dark me-2"></i>Time Range (24H)
</label>
<input type="text" class="range_time24" value="" name="range" />
<p class="text-muted small mt-2">Time selection in 24-hour format</p>
</div>
</div>
<div class="col-md-6">
<div class="slider-container memory-slider">
<label class="form-label fw-bold text-dark mb-2">
<i class="fas fa-memory text-danger me-2"></i>Memory Size
</label>
<input type="text" class="range_memory" value="" name="range" />
<p class="text-muted small mt-2">Memory allocation with custom values</p>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<!-- /range sliders -->
<!-- legacy cropper section removed -->
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="float-end">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<!-- Initialize Form Advanced Components -->
<script type="text/javascript">
// Listen for both DOMContentLoaded and our custom library event
let domReady = false;
let librariesReady = false;
document.addEventListener('DOMContentLoaded', function() {
console.log('📋 DOM loaded, waiting for libraries...');
domReady = true;
tryInitialize();
});
window.addEventListener('form-libraries-loaded', function(e) {
console.log('📚 Libraries loaded event received:', e.detail);
librariesReady = true;
tryInitialize();
});
function tryInitialize() {
if (domReady && librariesReady) {
console.log('🚀 Both DOM and libraries ready, starting initialization...');
waitForLibraries();
}
}
// Fallback: try to initialize after a short delay even if custom event doesn't fire
setTimeout(() => {
if (!librariesReady) {
console.log('⚠️ Custom event not received, trying fallback initialization...');
librariesReady = true;
tryInitialize();
}
}, 1000);
// Make functions globally available for debugging
window.initializeFormComponents = initializeComponents;
window.tryInitialize = tryInitialize;
window.waitForLibraries = waitForLibraries;
function waitForLibraries() {
// Check if all required libraries are available
const hasJQuery = typeof window.$ !== 'undefined' && typeof window.jQuery !== 'undefined';
const hasInputmask = typeof window.Inputmask !== 'undefined';
const hasPickr = typeof window.Pickr !== 'undefined';
const hasCropper = typeof window.Cropper !== 'undefined';
const hasTempusDominus = typeof window.TempusDominus !== 'undefined';
console.log('🔍 Checking available libraries...');
console.log('jQuery available:', hasJQuery);
console.log('Inputmask available:', hasInputmask);
console.log('Pickr available:', hasPickr);
console.log('Cropper available:', hasCropper);
console.log('TempusDominus available:', hasTempusDominus);
if (hasJQuery) {
// Use jQuery from window object
const $ = window.$;
console.log('ionRangeSlider available:', $.fn.ionRangeSlider ? 'yes' : 'no');
console.log('knob available:', $.fn.knob ? 'yes' : 'no');
}
if (!hasJQuery) {
console.warn('⚠️ jQuery not ready yet, waiting...');
setTimeout(waitForLibraries, 100);
return;
}
// All libraries are ready, start initialization
initializeComponents();
}
function initializeComponents() {
// Use jQuery from window object
const $ = window.$;
console.log('🚀 Starting component initialization...');
// Initialize Input Masks
if (typeof window.Inputmask !== 'undefined') {
const Inputmask = window.Inputmask;
console.log('🎭 Initializing input masks...');
// Initialize all elements with data-inputmask attribute
const inputmaskElements = document.querySelectorAll('[data-inputmask]');
console.log(`Found ${inputmaskElements.length} input mask elements`);
inputmaskElements.forEach((element, index) => {
try {
// Let Inputmask read the data-inputmask attribute itself (auto-configuration)
Inputmask().mask(element);
console.log(`✅ Successfully initialized mask for element ${index + 1}`);
} catch (error) {
console.warn(`❌ Error initializing input mask for element ${index + 1}:`, element, error);
}
});
// Add some additional advanced masks
try {
// Email mask (more permissive)
const emailElements = document.querySelectorAll('[data-mask="email"]');
emailElements.forEach(element => {
Inputmask({
mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~-]",
casing: "lower"
}
}
}).mask(element);
});
// IP Address mask
const ipElements = document.querySelectorAll('[data-mask="ip"]');
ipElements.forEach(element => {
Inputmask("ip").mask(element);
});
// Currency mask
const currencyElements = document.querySelectorAll('[data-mask="currency"]');
currencyElements.forEach(element => {
Inputmask("currency", {
prefix: "$ ",
radixPoint: ".",
groupSeparator: ",",
digits: 2,
autoGroup: true,
rightAlign: false
}).mask(element);
});
} catch (error) {
console.warn('Error setting up advanced masks:', error);
}
console.log('✅ Input masks initialization completed');
} else {
console.error('❌ Inputmask library not available');
}
// Initialize Modern Color Pickers
if (typeof window.Pickr !== 'undefined') {
const Pickr = window.Pickr;
console.log('🎨 Initializing color pickers...');
// Helper to create pickers for every matching element
function createPickrForEach(selector, config, onChangeCb, resultSelector) {
document.querySelectorAll(selector).forEach((el) => {
const instance = Pickr.create({
el,
...config
});
if (onChangeCb) {
instance.on('change', (color) => onChangeCb(color, el));
}
instance.on('save', () => instance.hide());
});
}
const commonComponents = {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
input: true,
clear: true,
save: true
}
};
// Classic theme pickers (all occurrences)
createPickrForEach('.color-picker-classic', {
theme: 'classic',
default: '#5367ce',
components: commonComponents
}, (color) => {
document.querySelectorAll('#classic-result').forEach(r=>r.value = color.toHEXA().toString());
});
// Monolith theme pickers
createPickrForEach('.color-picker-monolith', {
theme: 'monolith',
default: '#e91e63',
components: commonComponents
}, (color)=>{
document.querySelectorAll('#monolith-result').forEach(r=>r.value = color.toHEXA().toString());
});
// Nano theme pickers
createPickrForEach('.color-picker-nano', {
theme: 'nano',
default: '#ff9800',
components: commonComponents
}, (color)=>{
document.querySelectorAll('#nano-result').forEach(r=>r.value = color.toHEXA().toString());
});
// Opacity picker
createPickrForEach('.color-picker-opacity', {
theme: 'monolith',
default: 'rgba(156, 39, 176, 0.7)',
components: commonComponents
}, (color)=>{
document.querySelectorAll('#opacity-result').forEach(r=>r.value = color.toRGBA().toString());
});
// Swatches picker
createPickrForEach('.color-picker-swatches', {
theme: 'classic',
default: '#4caf50',
swatches: [
'#1abc9c','#2ecc71','#3498db','#9b59b6','#34495e',
'#16a085','#27ae60','#2980b9','#8e44ad','#2c3e50',
'#f1c40f','#e67e22','#e74c3c','#ecf0f1','#95a5a6',
'#f39c12','#d35400','#c0392b','#bdc3c7','#7f8c8d'
],
components: commonComponents
}, (color)=>{
document.querySelectorAll('#swatches-result').forEach(r=>r.value = color.toHEXA().toString());
});
// Formats picker
createPickrForEach('.color-picker-formats', {
theme: 'nano',
default: '#2196f3',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
}, (color)=>{
document.querySelectorAll('#formats-result').forEach(r=>r.value = color.toHEXA().toString());
});
console.log('✅ Modern Pickr color pickers initialized');
}
// Initialize jQuery Knob controls
if ($ && $.fn.knob) {
console.log('🎛️ Initializing jQuery Knob controls...');
$('.knob').knob({
draw: function() {
if (this.$.data('skin') == 'tron') {
var a = this.angle(this.cv),
sa = this.startAngle,
sat = this.startAngle,
ea,
eat = sat + a,
r = true;
this.g.lineWidth = this.lineWidth;
this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.value);
this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.previousColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
console.log('✅ jQuery Knob controls initialized');
}
// Initialize Cropper.js for image cropping
if (typeof window.Cropper !== 'undefined') {
const Cropper = window.Cropper;
const image = document.getElementById('image');
if (image) {
console.log('🖼️ Initializing Cropper.js...');
const cropper = new Cropper(image, {
viewMode: 1,
aspectRatio: 16 / 9,
autoCropArea: 0.8,
responsive: true,
preview: '.img-preview'
});
// Store cropper instance globally for demo buttons
window.cropper = cropper;
// Simplified controls
const rotateBtn = document.getElementById('crop-rotate');
const resetBtn = document.getElementById('crop-reset');
const downloadBtn = document.getElementById('crop-download');
if (rotateBtn) rotateBtn.addEventListener('click', () => cropper.rotate(90));
if (resetBtn) resetBtn.addEventListener('click', () => cropper.reset());
if (downloadBtn) downloadBtn.addEventListener('click', () => {
const canvas = cropper.getCroppedCanvas({fillColor:'#fff'});
if (!canvas) return;
canvas.toBlob((blob)=>{
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'cropped.jpg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/jpeg', 0.95);
});
// Handle file input for image upload
const inputImage = document.getElementById('inputImage');
if (inputImage) {
inputImage.addEventListener('change', function(e) {
const files = e.target.files;
if (files && files.length > 0) {
const file = files[0];
if (file.type.indexOf('image') === 0) {
const reader = new FileReader();
reader.onload = function(e) {
if (window.cropper) {
window.cropper.replace(e.target.result);
}
};
reader.readAsDataURL(file);
}
}
});
}
console.log('✅ Cropper.js initialized');
}
}
// Initialize Switchery for iOS-style toggle switches
if (typeof window.Switchery !== 'undefined') {
const Switchery = window.Switchery;
console.log('🔄 Initializing Switchery toggles...');
const elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
const switchery = new Switchery(html, { color: '#26B99A' });
});
console.log('✅ Switchery toggles initialized');
}
// Initialize Ion Range Slider
if ($ && $.fn.ionRangeSlider) {
console.log('🎚️ Initializing Ion Range Sliders...');
// Price Range Slider
$('.range_01').ionRangeSlider({
skin: 'gentelella',
type: 'double',
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: '$',
grid: true,
grid_num: 4, // Further reduced for better spacing
grid_margin: true, // Add margin to grid
force_edges: false, // Don't force edges to prevent overlap
hide_min_max: false,
hide_from_to: false,
prettify_enabled: true,
prettify_separator: ',',
onChange: function (data) {
console.log('Price range changed:', data.from, '-', data.to);
}
});
// Percentage Slider
$('.range_02').ionRangeSlider({
skin: 'gentelella',
type: 'single',
min: 0,
max: 100,
from: 50,
postfix: '%',
grid: true,
grid_num: 4, // Further reduced for better spacing
grid_margin: true,
force_edges: false,
hide_min_max: false,
hide_from_to: false,
onChange: function (data) {
console.log('Percentage changed:', data.from);
}
});
// Age Range Slider
$('.range_03').ionRangeSlider({
skin: 'gentelella',
type: 'double',
min: 18,
max: 65,
from: 25,
to: 45,
postfix: ' years',
grid: true,
grid_num: 3, // Further reduced for better spacing
grid_margin: true,
force_edges: false,
hide_min_max: false,
hide_from_to: false,
onChange: function (data) {
console.log('Age range changed:', data.from, '-', data.to);
}
});
// Temperature Range Slider
$('.range_04').ionRangeSlider({
skin: 'gentelella',
type: 'double',
min: -10,
max: 40,
from: 15,
to: 25,
postfix: '°C',
step: 0.5,
grid: true,
grid_num: 4, // Further reduced for better spacing
grid_margin: true,
force_edges: false,
hide_min_max: false,
hide_from_to: false,
prettify: function(value) {
return value > 0 ? '+' + value : value;
},
onChange: function (data) {
console.log('Temperature range changed:', data.from, '-', data.to);
}
});
// Time Range Slider (24H)
$('.range_time24').ionRangeSlider({
skin: 'gentelella',
type: 'double',
min: 0,
max: 1440, // minutes in a day
from: 480, // 8:00 AM
to: 1020, // 5:00 PM
step: 15,
grid: true,
grid_num: 6, // Reduced for better spacing (every 4 hours)
grid_margin: true,
force_edges: false,
hide_min_max: false,
hide_from_to: false,
prettify: function(num) {
var hours = Math.floor(num / 60);
var minutes = num % 60;
return String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0');
},
onChange: function (data) {
console.log('Time range changed:',
Math.floor(data.from / 60) + ':' + String(data.from % 60).padStart(2, '0'),
'-',
Math.floor(data.to / 60) + ':' + String(data.to % 60).padStart(2, '0')
);
}
});
// Memory Size Slider
$('.range_memory').ionRangeSlider({
skin: 'gentelella',
type: 'single',
min: 1,
max: 64,
from: 8,
values: ['1GB', '2GB', '4GB', '8GB', '16GB', '32GB', '64GB'],
grid: false, // Disable grid for custom values to prevent overlap
force_edges: false,
hide_min_max: true, // Hide min/max since we have custom values
hide_from_to: false,
onChange: function (data) {
console.log('Memory size changed:', data.from_value);
}
});
console.log('✅ Ion Range Sliders initialized');
}
// Initialize TempusDominus DateTimePickers
if (typeof window.TempusDominus !== 'undefined') {
const TempusDominus = window.TempusDominus;
console.log('📅 Initializing TempusDominus date pickers...');
// Basic DateTime Picker
const picker1 = new TempusDominus(document.getElementById('myDatepicker'), {
display: {
components: {
clock: true,
date: true
}
},
localization: {
format: 'MM/dd/yyyy HH:mm'
}
});
// Date Only Picker
const picker2 = new TempusDominus(document.getElementById('myDatepicker2'), {
display: {
components: {
clock: false,
date: true
}
},
localization: {
format: 'dd.MM.yyyy'
}
});
// Time Only Picker
const picker3 = new TempusDominus(document.getElementById('myDatepicker3'), {
display: {
components: {
clock: true,
date: false,
hours: true,
minutes: true,
useTwentyfourHour: false
}
},
localization: {
format: 'hh:mm a'
}
});
// ReadOnly Picker
const picker4 = new TempusDominus(document.getElementById('myDatepicker4'), {
display: {
components: {
clock: true,
date: true
}
},
localization: {
format: 'MM/dd/yyyy HH:mm'
}
});
// Linked Pickers
const picker6 = new TempusDominus(document.getElementById('datetimepicker6'), {
display: {
components: {
clock: false,
date: true
}
},
localization: {
format: 'MM/dd/yyyy'
}
});
const picker7 = new TempusDominus(document.getElementById('datetimepicker7'), {
display: {
components: {
clock: false,
date: true
}
},
localization: {
format: 'MM/dd/yyyy'
},
useCurrent: false
});
// Link the pickers
picker6.subscribe('change.td', (e) => {
if (e.date) {
picker7.updateOptions({
restrictions: {
minDate: e.date
}
});
}
});
picker7.subscribe('change.td', (e) => {
if (e.date) {
picker6.updateOptions({
restrictions: {
maxDate: e.date
}
});
}
});
console.log('✅ TempusDominus date pickers initialized');
}
console.log('🎉 All components initialized successfully!');
}
</script>
</body>
</html>