jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Moved to VIte 6 for build process

Bootstrap-5
Aigars Silkalns 2025-06-11 14:11:41 +03:00
parent 476de210af
commit 553cba448a
55 changed files with 1789 additions and 7461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -3,8 +3,8 @@ npm-debug.log
node_modules
.sass-cache
# Build output
build/
# Build outputs
dist/
# Vendor dependencies (generated from node_modules)
vendors/

163
gulpfile.js
View File

@ -1,163 +0,0 @@
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass')(require('sass')),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create();
var DEST = 'build/';
gulp.task('fonts', function() {
// Copy Font Awesome fonts to build directory
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('build/fonts/'));
});
gulp.task('vendors', gulp.series('fonts', function() {
// Copy core essential dependencies only
// Copy jQuery
gulp.src('node_modules/jquery/dist/jquery.min.js')
.pipe(gulp.dest('vendors/jquery/dist/'));
// Copy Bootstrap CSS and JS
gulp.src('node_modules/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('vendors/bootstrap/dist/css/'));
gulp.src('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js')
.pipe(gulp.dest('vendors/bootstrap/dist/js/'));
// Copy Font Awesome
gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
.pipe(gulp.dest('vendors/font-awesome/css/'));
gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('vendors/font-awesome/fonts/'));
// Copy Chart.js
gulp.src('node_modules/chart.js/dist/Chart.min.js')
.pipe(gulp.dest('vendors/Chart.js/dist/'));
// Copy Moment.js
gulp.src('node_modules/moment/min/moment.min.js')
.pipe(gulp.dest('vendors/moment/min/'));
// Copy NProgress
gulp.src('node_modules/nprogress/nprogress.css')
.pipe(gulp.dest('vendors/nprogress/'));
gulp.src('node_modules/nprogress/nprogress.js')
.pipe(gulp.dest('vendors/nprogress/'));
// Copy FastClick
gulp.src('node_modules/fastclick/lib/fastclick.js')
.pipe(gulp.dest('vendors/fastclick/lib/'));
// Copy iCheck
gulp.src('node_modules/icheck/skins/flat/green.css')
.pipe(gulp.dest('vendors/iCheck/skins/flat/'));
gulp.src('node_modules/icheck/icheck.min.js')
.pipe(gulp.dest('vendors/iCheck/'));
// Copy Bootstrap Progressbar
gulp.src('node_modules/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css')
.pipe(gulp.dest('vendors/bootstrap-progressbar/css/'));
gulp.src('node_modules/bootstrap-progressbar/bootstrap-progressbar.min.js')
.pipe(gulp.dest('vendors/bootstrap-progressbar/'));
// Copy Gauge.js
gulp.src('node_modules/gauge.js/dist/gauge.min.js')
.pipe(gulp.dest('vendors/gauge.js/dist/'));
// Copy Skycons
gulp.src('node_modules/skycons/skycons.js')
.pipe(gulp.dest('vendors/skycons/'));
// Copy Flot
gulp.src('node_modules/flot/dist/es5/jquery.flot.js')
.pipe(gulp.dest('vendors/Flot/'));
// Copy DateRangePicker
gulp.src('node_modules/daterangepicker/daterangepicker.css')
.pipe(gulp.dest('vendors/bootstrap-daterangepicker/'));
return gulp.src('node_modules/daterangepicker/daterangepicker.js')
.pipe(gulp.dest('vendors/bootstrap-daterangepicker/'));
}));
gulp.task('scripts', function() {
return gulp.src([
// Include vendor JavaScript first
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
'node_modules/fastclick/lib/fastclick.js',
'node_modules/nprogress/nprogress.js',
'node_modules/chart.js/dist/Chart.min.js',
'node_modules/bootstrap-progressbar/bootstrap-progressbar.min.js',
'node_modules/icheck/icheck.min.js',
'node_modules/moment/min/moment.min.js',
'node_modules/daterangepicker/daterangepicker.js',
'node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js',
// Custom scripts
'src/js/helpers/smartresize.js',
'src/js/sidebar.js',
'src/js/init.js'
])
.pipe(concat('custom.js'))
.pipe(gulp.dest(DEST+'/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(DEST+'/js'))
.pipe(browserSync.stream());
});
// Compile CSS from both vendor dependencies and custom SCSS
var compileSASS = function (filename, options) {
return gulp.src([
// Include vendor CSS first
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/font-awesome/css/font-awesome.min.css',
'node_modules/nprogress/nprogress.css',
'node_modules/icheck/skins/flat/green.css',
'node_modules/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css',
'node_modules/daterangepicker/daterangepicker.css',
'node_modules/switchery/switchery.css',
'node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css',
// Then include custom SCSS
'src/scss/*.scss'
])
.pipe(sass(options).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions', '> 5%'))
.pipe(concat(filename))
.pipe(gulp.dest(DEST+'/css'))
.pipe(browserSync.stream());
};
gulp.task('sass', function() {
return compileSASS('custom.css', {});
});
gulp.task('sass-minify', function() {
return compileSASS('custom.min.css', {outputStyle: 'compressed'});
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './'
},
startPath: './production/index.html'
});
});
gulp.task('watch', function() {
// Watch .html files
gulp.watch('production/*.html', browserSync.reload);
// Watch .js files
gulp.watch('src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('src/scss/*.scss', ['sass', 'sass-minify']);
});
// Build Task
gulp.task('build', gulp.series('vendors', 'sass', 'sass-minify', 'scripts'));
// Default Task
gulp.task('default', gulp.series('browser-sync', 'watch'));

8011
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -3,7 +3,9 @@
"version": "2.0-beta2",
"description": "Gentelella Admin is a free to use Bootstrap admin template",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"repository": {
"type": "git",
@ -31,15 +33,8 @@
},
"homepage": "https://github.com/puikinsh/gentelella#readme",
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-rename": "^2.0.0",
"gulp-ruby-sass": "^4.0.0",
"gulp-sass": "^6.0.1",
"gulp-uglify": "^3.0.2",
"sass": "^1.89.2"
"sass": "^1.89.2",
"vite": "^6.3.5"
},
"dependencies": {
"autosize": "^6.0.1",
@ -59,6 +54,7 @@
"ion-rangeslider": "^2.3.1",
"jquery": "^3.6.1",
"jquery-sparkline": "^2.4.0",
"jquery-ui": "^1.14.1",
"jqvmap": "^1.5.1",
"malihu-custom-scrollbar-plugin": "^3.1.5",
"moment": "^2.30.1",

4
production/calendar.html
View File

@ -14,7 +14,7 @@
<!-- NProgress -->
<!-- FullCalendar -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -396,7 +396,7 @@
<div id="fc_create" data-toggle="modal" data-target="#CalenderModalNew"></div>
<div id="fc_edit" data-toggle="modal" data-target="#CalenderModalEdit"></div>
<!-- /calendar modal --> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/chartjs.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chart JS Graph Examples | Gentelella Alela! by Colorlib</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -443,7 +443,7 @@
<!-- footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/chartjs2.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chart JS Graph Examples Part 2 | Gentelella Alela! by Colorlib</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -441,7 +441,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/contacts.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form | Gentelella Alela! by Colorlib</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -652,6 +652,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/e_commerce.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -443,6 +443,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/echarts.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ECharts Chart Bootstrap Examples | Gentelella Alela! by Colorlib</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -615,7 +615,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/fixed_footer.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md footer_fixed">
@ -274,6 +274,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/fixed_sidebar.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -274,6 +274,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/form.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -1298,6 +1298,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body></html>

4
production/form_advanced.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -1277,7 +1277,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
<!-- Initialize datetimepicker -->
<script type="text/javascript">

4
production/form_buttons.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -721,7 +721,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/form_upload.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -320,6 +320,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/form_validation.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -439,7 +439,7 @@
}).prop('checked', false);
</script> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>

4
production/form_wizards.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -572,7 +572,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>

4
production/general_elements.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -1428,7 +1428,7 @@
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/glyphicons.html
View File

@ -13,7 +13,7 @@
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -1714,6 +1714,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/icons.html
View File

@ -13,7 +13,7 @@
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -2322,6 +2322,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/inbox.html
View File

@ -14,7 +14,7 @@
<!-- NProgress -->
<!-- bootstrap-wysiwyg -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -610,7 +610,7 @@
</div>
</div>
<!-- /compose --> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

38
production/index.html
View File

@ -10,8 +10,22 @@
<title>Gentelella Alela!</title>
<!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Vite Entry Point - will bundle all styles -->
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -635,12 +649,12 @@
<div class="block">
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
<a>Who Needs Sundance When You've Got&nbsp;Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read&nbsp;More</a>
</p>
</div>
</div>
@ -649,12 +663,12 @@
<div class="block">
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
<a>Who Needs Sundance When You've Got&nbsp;Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read&nbsp;More</a>
</p>
</div>
</div>
@ -663,12 +677,12 @@
<div class="block">
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
<a>Who Needs Sundance When You've Got&nbsp;Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read&nbsp;More</a>
</p>
</div>
</div>
@ -677,12 +691,12 @@
<div class="block">
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
<a>Who Needs Sundance When You've Got&nbsp;Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read&nbsp;More</a>
</p>
</div>
</div>
@ -947,9 +961,5 @@
<!-- /footer content -->
</div>
</div>
<!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/index2.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -713,6 +713,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/index3.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -815,7 +815,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/invoice.html
View File

@ -13,7 +13,7 @@
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -469,6 +469,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/level2.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -275,6 +275,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

2
production/login.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="login">

4
production/media_gallery.html
View File

@ -14,7 +14,7 @@
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -509,6 +509,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/morisjs.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moris JS Chart Examples | Gentelella Alela! by Colorlib</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -452,7 +452,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/other_charts.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -417,7 +417,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/page_403.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -41,6 +41,6 @@
<!-- /page content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/page_404.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -41,6 +41,6 @@
<!-- /page content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/page_500.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -41,6 +41,6 @@
<!-- /page content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/plain_page.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -316,6 +316,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/pricing_tables.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -455,6 +455,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/profile.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -540,7 +540,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/project_detail.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -448,7 +448,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/projects.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -654,6 +654,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/sidebar_test.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sidebar Debug Test</title>
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
<div style="position: fixed; top: 10px; right: 10px; background: yellow; padding: 10px; z-index: 9999;">
@ -53,7 +53,7 @@
</div>
<!-- JavaScript (same as production) -->
<script src="../build/js/custom.min.js"></script>
<script>
var errors = [];

4
production/tables.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -707,6 +707,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/tables_dynamic.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DataTables | Gentelella</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -3669,7 +3669,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/typography.html
View File

@ -13,7 +13,7 @@
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -358,6 +358,6 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

4
production/widgets.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<script type="module" src="../src/main.js"></script>
</head>
<body class="nav-md">
@ -863,7 +863,7 @@
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
<script src="../build/js/custom.min.js"></script>
</body>
</html>

1
src/css/switchery.min.css vendored Normal file
View File

@ -0,0 +1 @@
.switchery{background-color:#fff;border:1px solid #dfdfdf;border-radius:20px;cursor:pointer;display:inline-block;height:30px;position:relative;vertical-align:middle;width:50px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;box-sizing:content-box;background-clip:content-box}.switchery>small{background:#fff;border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:30px;position:absolute;top:0;width:30px}.switchery-small{border-radius:20px;height:20px;width:33px}.switchery-small>small{height:20px;width:20px}.switchery-large{border-radius:40px;height:40px;width:66px}.switchery-large>small{height:40px;width:40px}

20
src/jquery-setup.js vendored Normal file
View File

@ -0,0 +1,20 @@
// jQuery Global Setup
import $ from 'jquery';
// Ensure jQuery is available globally before anything else
if (typeof window !== 'undefined') {
window.jQuery = window.$ = $;
// Verify the assignment worked
if (!window.jQuery || !window.$) {
console.error('CRITICAL: jQuery global assignment failed!');
} else {
console.log('✓ jQuery globally available:', {
version: $.fn.jquery,
jQuery: !!window.jQuery,
$: !!window.$
});
}
}
export default $;

2
src/js/bootstrap-progressbar.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/*! bootstrap-progressbar v0.9.0 | Copyright (c) 2012-2015 Stephan Groß | MIT license | http://www.minddust.com */
!function(t){"use strict";var e=function(n,s){this.$element=t(n),this.options=t.extend({},e.defaults,s)};e.defaults={transition_delay:300,refresh_speed:50,display_text:"none",use_percentage:!0,percent_format:function(t){return t+"%"},amount_format:function(t,e){return t+" / "+e},update:t.noop,done:t.noop,fail:t.noop},e.prototype.transition=function(){var n=this.$element,s=n.parent(),a=this.$back_text,r=this.$front_text,i=this.options,o=parseInt(n.attr("data-transitiongoal")),h=parseInt(n.attr("aria-valuemin"))||0,d=parseInt(n.attr("aria-valuemax"))||100,f=s.hasClass("vertical"),p=i.update&&"function"==typeof i.update?i.update:e.defaults.update,u=i.done&&"function"==typeof i.done?i.done:e.defaults.done,c=i.fail&&"function"==typeof i.fail?i.fail:e.defaults.fail;if(isNaN(o))return void c("data-transitiongoal not set");var l=Math.round(100*(o-h)/(d-h));if("center"===i.display_text&&!a&&!r){this.$back_text=a=t("<span>").addClass("progressbar-back-text").prependTo(s),this.$front_text=r=t("<span>").addClass("progressbar-front-text").prependTo(n);var g;f?(g=s.css("height"),a.css({height:g,"line-height":g}),r.css({height:g,"line-height":g}),t(window).resize(function(){g=s.css("height"),a.css({height:g,"line-height":g}),r.css({height:g,"line-height":g})})):(g=s.css("width"),r.css({width:g}),t(window).resize(function(){g=s.css("width"),r.css({width:g})}))}setTimeout(function(){var t,e,c,g,_;f?n.css("height",l+"%"):n.css("width",l+"%");var x=setInterval(function(){f?(c=n.height(),g=s.height()):(c=n.width(),g=s.width()),t=Math.round(100*c/g),e=Math.round(h+c/g*(d-h)),t>=l&&(t=l,e=o,u(n),clearInterval(x)),"none"!==i.display_text&&(_=i.use_percentage?i.percent_format(t):i.amount_format(e,d,h),"fill"===i.display_text?n.text(_):"center"===i.display_text&&(a.text(_),r.text(_))),n.attr("aria-valuenow",e),p(t,n)},i.refresh_speed)},i.transition_delay)};var n=t.fn.progressbar;t.fn.progressbar=function(n){return this.each(function(){var s=t(this),a=s.data("bs.progressbar"),r="object"==typeof n&&n;a&&r&&t.extend(a.options,r),a||s.data("bs.progressbar",a=new e(this,r)),a.transition()})},t.fn.progressbar.Constructor=e,t.fn.progressbar.noConflict=function(){return t.fn.progressbar=n,this}}(window.jQuery);

6
src/js/helpers/smartresize.js
View File

@ -6,7 +6,8 @@
* // code here
* });
*/
(function($,sr){
(function($) {
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
@ -32,4 +33,5 @@
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
})(jQuery,'smartresize');
})(jQuery);

499
src/js/init.js
View File

@ -1,86 +1,485 @@
/**
* Essential initialization for Gentelella template
* This file contains the core functionality that should work even with missing vendor dependencies
(function($) {
/**
* This file contains all the component initialization logic.
* It is loaded after all vendor and custom libraries, so it has access to everything.
*/
$(window).on('load', function() {
$(document).ready(function() {
console.log('Gentelella initialization starting...');
// Always initialize sidebar (this is the most important functionality)
if (typeof init_sidebar === 'function') {
init_sidebar();
console.log('Sidebar initialized');
// NProgress (we start it on document ready, but stop it on window load)
if (typeof NProgress != 'undefined') {
NProgress.done();
}
// Initialize basic functionality that doesn't require external dependencies
// Panel toolbox (collapse/close panels)
$('.collapse-link').on('click', function () {
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// Panel Toolbox
$('.collapse-link').on('click', function() {
var $BOX_PANEL = $(this).closest('.x_panel');
var $ICON = $(this).find('i');
var $BOX_CONTENT = $BOX_PANEL.find('.x_content');
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function () {
$BOX_CONTENT.slideToggle(200, function() {
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
$('.close-link').click(function() {
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
// Bootstrap tooltips
// Tooltip
if ($.fn.tooltip) {
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
}
// Initialize components that have dependencies available
// iCheck if available
if ($.fn.iCheck && $("input.flat")[0]) {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
// Popover
if ($.fn.popover) {
$('body').popover({
selector: '[data-popover]',
trigger: 'click hover',
delay: {
show: 50,
hide: 400
}
});
console.log('iCheck initialized');
}
// Bootstrap progress bars if available
if ($.fn.progressbar && $(".progress .progress-bar")[0]) {
// Switchery
if (typeof Switchery !== 'undefined') {
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html, {
size: 'small'
});
});
}
// Bootstrap Progressbar
if ($(".progress .progress-bar")[0]) {
$('.progress .progress-bar').progressbar();
console.log('Progress bars initialized');
}
// Try to initialize other components if their dependencies are available
var components = [
'init_sparklines',
'init_flot_chart',
'init_JQVmap',
'init_chart_doughnut',
'init_gauge',
'init_skycons'
];
// Chart.js initialization - Main Dashboard Chart
console.log("Chart.js init script started");
if (typeof Chart !== 'undefined') {
console.log("Chart.js is loaded");
components.forEach(function(componentName) {
if (typeof window[componentName] === 'function') {
try {
window[componentName]();
console.log(componentName + ' initialized');
} catch(e) {
console.warn(componentName + ' failed to initialize:', e.message);
// Main chart in dashboard (chart_plot_01 is a div, so we create canvas inside)
if ($('#chart_plot_01').length) {
console.log("#chart_plot_01 found, creating main chart");
var chartDiv = document.getElementById("chart_plot_01");
// Clear any existing content and create canvas
chartDiv.innerHTML = '';
var canvas = document.createElement('canvas');
canvas.id = 'mainChart';
canvas.width = chartDiv.offsetWidth || 800;
canvas.height = 300;
chartDiv.appendChild(canvas);
var ctx = canvas.getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [31, 74, 6, 39, 20, 85, 7, 45, 38, 62, 29, 41],
fill: true,
tension: 0.4
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.3)",
borderColor: "rgba(3, 88, 106, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 44, 55, 33],
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
} else {
console.log("#chart_plot_01 not found");
}
// Doughnut Chart (using class selector since DOM shows class="canvasDoughnut")
if ($('.canvasDoughnut').length) {
console.log(".canvasDoughnut found, re-rendering inside a clean container.");
var originalCanvas = document.querySelector('.canvasDoughnut');
var xContent = originalCanvas.closest('.x_content');
var panel = originalCanvas.closest('.x_panel');
// Make the widget taller to fit the chart and legend
if (panel) {
panel.style.height = 'auto';
panel.style.minHeight = '320px';
}
if (xContent) {
// 1. Clear the problematic table layout
xContent.innerHTML = '';
// 2. Create a new, simple container for the chart
var chartContainer = document.createElement('div');
chartContainer.style.height = '250px'; // Adjust container height
chartContainer.style.position = 'relative';
var newCanvas = document.createElement('canvas');
chartContainer.appendChild(newCanvas);
xContent.appendChild(chartContainer);
// 3. Initialize the chart in the new clean container
var ctx_doughnut = newCanvas.getContext('2d');
var data = {
labels: ["IOS", "Android", "Blackberry", "Symbian", "Others"],
datasets: [{
data: [30, 10, 20, 15, 30],
backgroundColor: ["#3498DB", "#2ECC71", "#9B59B6", "#1ABC9C", "#E74C3C"],
hoverBackgroundColor: ["#5DADE2", "#58D68D", "#BB8FCE", "#52C9B4", "#EC7063"]
}]
};
new Chart(ctx_doughnut, {
type: 'doughnut',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
padding: 15,
boxWidth: 12
}
}
}
}
});
console.log('Gentelella initialization completed');
});
} else {
console.error("Doughnut chart's .x_content container not found.");
}
} else {
console.log(".canvasDoughnut not found");
}
// Chart.js pages - Line Chart
if ($('#lineChart').length) {
console.log("#lineChart found, creating line chart");
var canvas = document.getElementById("lineChart");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [31, 74, 6, 39, 20, 85, 7],
tension: 0.4
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.3)",
borderColor: "rgba(3, 88, 106, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2],
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Chart.js pages - Bar Chart
if ($('#mybarChart').length) {
console.log("#mybarChart found, creating bar chart");
var canvas = document.getElementById("mybarChart");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: '# of Votes',
data: [51, 30, 40, 28, 92, 50, 45],
backgroundColor: [
'rgba(38, 185, 154, 0.31)',
'rgba(3, 88, 106, 0.3)',
'rgba(38, 185, 154, 0.31)',
'rgba(3, 88, 106, 0.3)',
'rgba(38, 185, 154, 0.31)',
'rgba(3, 88, 106, 0.3)',
'rgba(38, 185, 154, 0.31)'
],
borderColor: [
'rgba(38, 185, 154, 0.7)',
'rgba(3, 88, 106, 0.70)',
'rgba(38, 185, 154, 0.7)',
'rgba(3, 88, 106, 0.70)',
'rgba(38, 185, 154, 0.7)',
'rgba(3, 88, 106, 0.70)',
'rgba(38, 185, 154, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
// Chart.js pages - Radar Chart
if ($('#canvasRadar').length) {
console.log("#canvasRadar found, creating radar chart");
var canvas = document.getElementById("canvasRadar");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'radar',
data: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.2)",
borderColor: "rgba(38, 185, 154, 0.85)",
pointBackgroundColor: "rgba(38, 185, 154, 0.85)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38, 185, 154, 0.85)",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.2)",
borderColor: "rgba(3, 88, 106, 0.85)",
pointBackgroundColor: "rgba(3, 88, 106, 0.85)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(3, 88, 106, 0.85)",
data: [28, 48, 40, 19, 96, 27, 100]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Chart.js pages - Doughnut Chart (ID version)
if ($('#canvasDoughnut').length) {
console.log("#canvasDoughnut found, creating doughnut chart");
var canvas = document.getElementById("canvasDoughnut");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Dark Grey", "Purple", "Blue", "Grey", "Green"],
datasets: [{
data: [15, 20, 30, 10, 30],
backgroundColor: [
"#455C73",
"#9B59B6",
"#26B99A",
"#3498DB",
"#BDC3C7"
],
hoverBackgroundColor: [
"#34495E",
"#B370CF",
"#36CAAB",
"#49A9EA",
"#CFD4D8"
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Chart.js pages - Pie Chart
if ($('#pieChart').length) {
console.log("#pieChart found, creating pie chart");
var canvas = document.getElementById("pieChart");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: ["Dark Grey", "Purple", "Blue", "Grey", "Green"],
datasets: [{
data: [20, 50, 30, 25, 40],
backgroundColor: [
"#455C73",
"#9B59B6",
"#26B99A",
"#3498DB",
"#BDC3C7"
],
hoverBackgroundColor: [
"#34495E",
"#B370CF",
"#36CAAB",
"#49A9EA",
"#CFD4D8"
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Chart.js pages - Polar Area Chart
if ($('#polarArea').length) {
console.log("#polarArea found, creating polar area chart");
var canvas = document.getElementById("polarArea");
canvas.style.height = '400px'; // Set explicit height
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'polarArea',
data: {
labels: ["Dark Grey", "Purple", "Blue", "Grey", "Green"],
datasets: [{
data: [20, 50, 30, 25, 40],
backgroundColor: [
"#455C73",
"#9B59B6",
"#26B99A",
"#3498DB",
"#BDC3C7"
],
hoverBackgroundColor: [
"#34495E",
"#B370CF",
"#36CAAB",
"#49A9EA",
"#CFD4D8"
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
} else {
console.log("Chart.js is not loaded");
}
});
// We still want NProgress to start early, so we'll keep this separate.
$(document).ready(function() {
if (typeof NProgress != 'undefined') {
NProgress.start();
}
// ---------------------------------
// Gauge (Quick Settings)
// ---------------------------------
if (typeof Gauge !== 'undefined' && document.getElementById('chart_gauge_01')) {
var chartGaugeSettings = {
lines: 12,
angle: 0,
lineWidth: 0.4,
pointer: {
length: 0.75,
strokeWidth: 0.042,
color: '#1D212A'
},
limitMax: false,
colorStart: '#1ABC9C',
colorStop: '#1ABC9C',
strokeColor: '#F0F3F3',
generateGradient: true
};
var gaugeElem = document.getElementById('chart_gauge_01');
var gaugeChart = new Gauge(gaugeElem).setOptions(chartGaugeSettings);
gaugeChart.maxValue = 6000;
gaugeChart.animationSpeed = 32;
gaugeChart.set(3200);
var gaugeText = document.getElementById('gauge-text');
if (gaugeText) {
gaugeChart.setTextField(gaugeText);
}
}
// ---------------------------------
// Skycons (Daily Active Users)
// ---------------------------------
if (typeof Skycons !== 'undefined') {
var skycons = new Skycons({ color: '#73879C' });
var skyconTypes = [
'clear-day', 'clear-night', 'partly-cloudy-day',
'partly-cloudy-night', 'cloudy', 'rain', 'sleet', 'snow', 'wind',
'fog'
];
skyconTypes.forEach(function (type) {
skycons.add(type, Skycons[type.replace(/-([a-z])/g, function(_, c){ return c.toUpperCase(); })] || type);
});
skycons.play();
}
});
})(jQuery);

35
src/js/require-shim.js Normal file
View File

@ -0,0 +1,35 @@
// Minimal CommonJS/AMD compatibility shim for third-party libraries in the browser.
// Must be loaded *after* jQuery so that `window.jQuery` / `window.$` already exist.
// 1. Exposes a global `require()` that returns jQuery when asked for "jquery".
// 2. Ensures `module` / `exports` point to jQuery so libraries taking the CommonJS
// branch receive the real jQuery function.
// 3. Provides stubbed AMD helpers so AMD checks don't error out.
(function (global) {
// Helper – link module.exports to jQuery if possible
function ensureModuleExports() {
if (typeof global.jQuery !== 'undefined' && (typeof global.module === 'undefined' || !global.module.exports)) {
global.module = { exports: global.jQuery };
global.exports = global.jQuery;
}
}
// Define require() if it doesn't already exist
if (typeof global.require === 'undefined') {
global.require = function (name) {
if (name === 'jquery' || name === 'jquery') {
return global.jQuery || global.$;
}
return {};
};
global.require.config = function () {};
global.require.amd = {};
}
// Define module/exports if they're missing, pointing them at jQuery.
ensureModuleExports();
// If jQuery is loaded later (unlikely but safe), run again after the load event.
if (typeof global.jQuery === 'undefined') {
global.addEventListener('load', ensureModuleExports);
}
})(typeof window !== 'undefined' ? window : this);

187
src/js/sidebar.js
View File

@ -1,11 +1,10 @@
/**
* This is the final, corrected implementation of the sidebar menu.
(function($) {
/**
* This file contains the logic for the sidebar menu only.
* It has been cleaned of all other component initializations.
*/
function init_sidebar() {
//
function init_sidebar() {
// Helper function to set the content height
//
var setContentHeight = function () {
var $BODY = $('body'),
$RIGHT_COL = $('.right_col'),
@ -32,35 +31,25 @@ function init_sidebar() {
$BODY = $('body'),
CURRENT_URL = window.location.href.split('#')[0].split('?')[0];
//
// The definitive sidebar menu click handler
//
// Sidebar menu click handler
$SIDEBAR_MENU.find('a').on('click', function(ev) {
var $li = $(this).parent();
// If the clicked menu has no submenu, let the link work as normal
if(!$li.children('ul').length) {
if (!$li.children('ul').length) {
return;
}
// For menus with submenus, prevent the browser from navigating away
ev.preventDefault();
// If the one we clicked is already active...
if ($li.hasClass('active')) {
// ...close it.
$li.removeClass('active');
$li.children('ul').slideUp(function() {
setContentHeight();
});
} else {
// It's not active.
// First, find and close any other open menu.
var $activeLi = $SIDEBAR_MENU.find('li.active');
if ($activeLi.length) {
// If an active menu exists, slide it up.
// In its callback, slide down the new one.
$activeLi.children('ul').slideUp(function() {
$activeLi.removeClass('active');
$li.addClass('active');
@ -69,7 +58,6 @@ function init_sidebar() {
});
});
} else {
// If no other menu is active, just open the new one.
$li.addClass('active');
$li.children('ul').slideDown(function() {
setContentHeight();
@ -78,9 +66,7 @@ function init_sidebar() {
}
});
//
// Menu toggle (hamburger menu)
//
var $MENU_TOGGLE = $('#menu_toggle');
$MENU_TOGGLE.on('click', function() {
if ($BODY.hasClass('nav-md')) {
@ -93,9 +79,7 @@ function init_sidebar() {
setContentHeight();
});
//
// Set current page as active and open the menu
//
$SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');
$SIDEBAR_MENU.find('a').filter(function () {
return this.href == CURRENT_URL;
@ -103,166 +87,17 @@ function init_sidebar() {
setContentHeight();
}).parent().addClass('active');
//
// Recalculate content height on window resize
//
$(window).smartresize(function() {
setContentHeight();
});
// Set initial height
setContentHeight();
}
}
// Initialize the sidebar when the document is ready
$(document).ready(function() {
// Initialize the sidebar when the document is ready
$(document).ready(function() {
init_sidebar();
});
// Panel toolbox
$(document).ready(function () {
$('.collapse-link').on('click', function () {
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function () {
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
// /Panel toolbox
// Tooltip
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
// /Tooltip
// Progressbar
$(document).ready(function () {
if ($(".progress .progress-bar")[0]) {
$('.progress .progress-bar').progressbar();
}
});
// /Progressbar
// Switchery
$(document).ready(function () {
if ($(".js-switch")[0]) {
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function (html) {
var switchery = new Switchery(html, {
color: '#26B99A'
});
});
}
});
// /Switchery
// iCheck
$(document).ready(function () {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
});
}
});
// /iCheck
// Table
$('table input').on('ifChecked', function () {
checkState = '';
$(this).parent().parent().parent().addClass('selected');
countChecked();
});
$('table input').on('ifUnchecked', function () {
checkState = '';
$(this).parent().parent().parent().removeClass('selected');
countChecked();
});
var checkState = '';
$('.bulk_action input').on('ifChecked', function () {
checkState = '';
$(this).parent().parent().parent().addClass('selected');
countChecked();
});
$('.bulk_action input').on('ifUnchecked', function () {
checkState = '';
$(this).parent().parent().parent().removeClass('selected');
countChecked();
});
$('.bulk_action input#check-all').on('ifChecked', function () {
checkState = 'all';
countChecked();
});
$('.bulk_action input#check-all').on('ifUnchecked', function () {
checkState = 'none';
countChecked();
});
function countChecked() {
if (checkState === 'all') {
$(".bulk_action input[name='table_records']").iCheck('check');
}
if (checkState === 'none') {
$(".bulk_action input[name='table_records']").iCheck('uncheck');
}
var checkCount = $(".bulk_action input[name='table_records']:checked").length;
if (checkCount) {
$('.column-title').hide();
$('.bulk-actions').show();
$('.action-cnt').html(checkCount + ' Records Selected');
} else {
$('.column-title').show();
$('.bulk-actions').hide();
}
}
// Accordion
$(document).ready(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle(200);
$expand = $(this).find(">:first-child");
if ($expand.text() == "+") {
$expand.text("-");
} else {
$expand.text("+");
}
});
});
// NProgress
if (typeof NProgress != 'undefined') {
$(document).ready(function () {
NProgress.start();
});
$(window).on('load', function () {
NProgress.done();
});
}
})(jQuery);

1
src/js/switchery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

24
src/main.js Normal file
View File

@ -0,0 +1,24 @@
// Import jQuery setup first - this ensures global availability
import $ from './jquery-setup.js';
// Import jQuery UI core and widget factory first
import 'jquery-ui/ui/widget.js';
import 'jquery-ui/ui/widgets/progressbar.js';
// Import Chart.js and make it globally available
import Chart from 'chart.js/dist/Chart.bundle.js';
window.Chart = Chart;
console.log('✓ Chart.js loaded:', !!window.Chart);
console.log('✓ jQuery UI progressbar available:', !!$.fn.progressbar);
// Global styles
import './main.scss';
// Bootstrap (after jQuery is ready)
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// Legacy scripts that depend on global jQuery
import './js/helpers/smartresize.js';
import './js/sidebar.js';
import './js/init.js';

9
src/main.scss Normal file
View File

@ -0,0 +1,9 @@
@import "bootstrap/dist/css/bootstrap.min.css";
@import "font-awesome/css/font-awesome.min.css";
@import "nprogress/nprogress.css";
@import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";
@import "jquery-ui/dist/themes/ui-lightness/jquery-ui.css";
@import "./css/switchery.min.css";
// Your existing custom SCSS
@import "./scss/custom.scss";

32
vite.config.js Normal file
View File

@ -0,0 +1,32 @@
import { defineConfig } from 'vite';
export default defineConfig({
root: '.',
publicDir: 'production',
build: {
outDir: 'dist',
emptyOutDir: true,
rollupOptions: {
input: {
main: 'production/index.html',
index2: 'production/index2.html',
index3: 'production/index3.html'
}
}
},
server: {
open: '/production/index.html',
port: 3000
},
optimizeDeps: {
include: ['jquery', 'bootstrap']
},
resolve: {
alias: {
jquery: 'jquery'
}
},
define: {
global: 'globalThis'
}
});