[ { "path": ".babelrc.js", "content": "module.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n loose: true,\n bugfixes: true,\n modules: false\n }\n ]\n ]\n};\n" }, { "path": ".browserslistrc", "content": "# https://github.com/browserslist/browserslist#readme\n\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 60\nFirefox >= 60\nFirefox ESR\niOS >= 12\nSafari >= 12\nnot Explorer <= 11\n" }, { "path": ".cursorrules", "content": "# CoreUI Free Bootstrap Admin Template - AI Context\n\n## Project Overview\nThis is a Bootstrap 5 admin dashboard template built with CoreUI components. It uses Pug templating, Sass for styles, and vanilla JavaScript for interactivity.\n\n## Critical Rules\n\n### Component Library\n- **ALWAYS use CoreUI Bootstrap components**: https://coreui.io/bootstrap/docs/\n- **NEVER use Tailwind CSS** - this project uses Bootstrap 5 and custom Sass\n- Use CoreUI's CSS classes and JavaScript components from `@coreui/coreui` package\n- Reference the official CoreUI docs for component syntax and options\n\n### Technology Stack\n- **HTML Generation**: Pug templates (NOT raw HTML)\n- **Styling**: Sass/SCSS with Bootstrap 5 (NO Tailwind)\n- **JavaScript**: Vanilla JS with ES6 modules (NO frameworks like React/Vue)\n- **Build System**: npm scripts with Babel, PostCSS, and custom build scripts\n\n## Code Conventions\n\n### JavaScript\n- **No semicolons** - enforced by ESLint\n- **2-space indentation**\n- **ES6 modules** with import/export\n- **Strict mode** enabled\n- Use `/* global VariableName */` for external libraries\n- Follow XO ESLint config with Unicorn plugin rules\n\n### File Structure\n```\nsrc/\n├── js/ # JavaScript modules (keep small and focused)\n├── scss/ # Sass stylesheets (imports Bootstrap and CoreUI)\n├── pug/ # Pug templates (source of truth for HTML)\n│ ├── _layout/ # Base layouts\n│ ├── _partials/ # Reusable components\n│ ├── _mixins/ # Pug mixins\n│ └── views/ # Page templates\n├── assets/ # Images, icons, static files\n└── views/ # Compiled HTML (auto-generated, don't edit)\n```\n\n### Pug Templates\n- Use `extends ../_layout/default.pug` for new pages\n- Override blocks: `block content`, `block scripts`\n- Use mixins from `_mixins/` for common patterns\n- Follow existing naming conventions for consistency\n\n### CSS/Sass\n- Use Bootstrap utilities first before custom CSS\n- Use CSS custom properties (CSS variables) for theming\n- Use Bootstrap/CoreUI class naming conventions (e.g., `.sidebar`, `.header`, `.card-title`)\n- Support dark mode via `[data-coreui-theme=\"dark\"]`\n- **Never use**: `border-radius`, `transition`, `calc()` directly (Stylelint enforced)\n\n### Naming Conventions\n- **Files**: kebab-case (e.g., `color-modes.js`, `_header.pug`)\n- **CSS classes**: Bootstrap/CoreUI conventions (e.g., `.btn-primary`, `.card-header`)\n- **JavaScript variables**: camelCase\n- **Constants**: UPPER_SNAKE_CASE\n\n## Development Workflow\n\n### Adding New Pages\n1. Create Pug template in `src/pug/views/`\n2. Extend base layout: `extends ../_layout/default.pug`\n3. Add page-specific styles in `src/scss/` if needed\n4. Add page-specific JS in `src/js/` if needed\n5. Run `npm start` to compile and preview\n\n### Adding New Components\n1. **First check CoreUI docs**: https://coreui.io/bootstrap/docs/\n2. Use CoreUI component markup in Pug files\n3. Import required CoreUI JS modules if needed\n4. Style using CoreUI/Bootstrap classes, not custom CSS\n5. Create Pug mixin in `src/pug/_mixins/` for reusable patterns\n\n### Build Commands\n- `npm start` - Development with live reload\n- `npm run build` - Production build\n- `npm run watch-css` - Watch Sass changes\n- `npm run watch-js` - Watch JavaScript changes\n- `npm run watch-pug` - Watch Pug changes\n\n## Code Quality\n\n### Linting\n- **JavaScript**: ESLint with XO config (flat config format)\n- **Styles**: Stylelint with Bootstrap config\n- **Formatting**: Prettier for HTML output\n- Run `npm run lint` before committing\n\n### Comments and Documentation\n- **JSDoc required** for all functions with parameters\n- Explain \"why\", not \"what\"\n- Document complex template logic in Pug files\n- Add file-level comments explaining module purpose\n\n### Git Commits\nFollow semantic commit format:\n- `feat:` - New feature\n- `fix:` - Bug fix\n- `docs:` - Documentation changes\n- `style:` - Code style changes (formatting)\n- `refactor:` - Code refactoring\n- `test:` - Test additions/changes\n- `chore:` - Build/tooling changes\n\n## Common Patterns\n\n### Chart Integration\n```javascript\n/* global Chart */\nimport { getStyle } from '@coreui/utils'\n\nconst chart = new Chart(ctx, {\n type: 'line',\n data: { /* ... */ },\n options: { /* ... */ }\n})\n```\n\n### Theme Switching\n```javascript\nimport { ColorModeStorageManager } from '@coreui/coreui/js/color-modes'\n\ndocument.addEventListener('ColorSchemeChange', () => {\n // React to theme changes\n})\n```\n\n### Pug Mixin Usage\n```pug\ninclude _mixins/breadcrumb\n+breadcrumb(['Home', 'Components', 'Buttons'])\n```\n\n## AI Assistance Guidelines\n\n### When AI Should\n- Use CoreUI Bootstrap components from official docs\n- Generate Pug templates, not raw HTML\n- Follow existing patterns in the codebase\n- Add JSDoc comments to new JavaScript functions\n- Respect ESLint/Stylelint rules\n- Suggest npm scripts for tasks\n\n### When AI Should NOT\n- Use Tailwind CSS classes\n- Use React/Vue/Angular components\n- Edit compiled files in `dist/` or `src/views/`\n- Add unnecessary dependencies\n- Break existing build pipeline\n- Ignore linting errors\n\n## External Dependencies\n\n### Core Libraries\n- `@coreui/coreui` - CoreUI component library\n- `chart.js` - Charts and graphs\n- `simplebar` - Custom scrollbars\n\n### Build Tools\n- `sass` - CSS preprocessor\n- `@babel/core` - JavaScript transpiler\n- `pug` - HTML templating\n- `postcss` - CSS post-processing\n- `browser-sync` - Live reload server\n\n## Browser Support\nDefined in `.browserslistrc`:\n- Last 1 major version of modern browsers\n- Chrome, Firefox, Edge, Safari\n- iOS Safari, Chrome Android\n\n## Resources\n- CoreUI Docs: https://coreui.io/bootstrap/docs/\n- Chart.js Docs: https://www.chartjs.org/\n- Pug Docs: https://pugjs.org/\n\n## Project Maintainer Notes\n- License: MIT\n- Version: 5.3.0\n- Repository: https://github.com/coreui/coreui-free-bootstrap-admin-template\n" }, { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n\n[*.pug]\ntrim_trailing_whitespace = false\n" }, { "path": ".gitattributes", "content": "# Enforce Unix newlines\n* text=auto eol=lf\n\n# Don't diff or textually merge source maps\n*.map binary\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing to CoreUI\n\nLooking to contribute something to CoreUI? **Here's how you can help.**\n\nPlease take a moment to review this document in order to make the contribution process easy and effective for everyone involved.\n\nFollowing these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing\npatches and features.\n\n## Using the issue tracker\n\nThe [issue tracker](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues) is\nthe preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)\nand [submitting pull requests](#pull-requests), but please respect the following\nrestrictions:\n\n* Please **do not** use the issue tracker for personal support requests.\n\n* Please **do not** post comments consisting solely of \"+1\" or \":thumbsup:\".\n Use [GitHub's \"reactions\" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)\n instead.\n\n## Bug reports\n\nA bug is a _demonstrable problem_ that is caused by the code in the repository.\nGood bug reports are extremely helpful, so thanks!\n\nGuidelines for bug reports:\n\n0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code.\n\n1. **Use the GitHub issue search** — check if the issue has already been reported.\n\n2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.\n\n3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.\n\n\nA good bug report shouldn't leave others needing to chase you up for more\ninformation. Please try to be as detailed as possible in your report. What is\nyour environment? What steps will reproduce the issue? What browser(s) and OS\nexperience the problem? Do other browsers show the bug differently? What\nwould you expect to be the outcome? All these details will help people to fix\nany potential bugs.\n\nExample:\n\n> Short and descriptive example bug report title\n>\n> A summary of the issue and the browser/OS environment in which it occurs. If\n> suitable, include the steps required to reproduce the bug.\n>\n> 1. This is the first step\n> 2. This is the second step\n> 3. Further steps, etc.\n>\n> `` - a link to the reduced test case\n>\n> Any other information you want to share that is relevant to the issue being\n> reported. This might include the lines of code that you have identified as\n> causing the bug, and potential solutions (and your opinions on their\n> merits).\n\n## Feature requests\n\nFeature requests are welcome. Before opening a feature request, please take a\nmoment to find out whether your idea fits with the scope and aims of the\nproject. It's up to *you* to make a strong case to convince the project's\ndevelopers of the merits of this feature. Please provide as much detail\nand context as possible.\n\n\n## Pull requests\n\nGood pull requests—patches, improvements, new features—are a fantastic\nhelp. They should remain focused in scope and avoid containing unrelated\ncommits.\n\n**Please ask first** before embarking on any significant pull request (e.g.\nimplementing features, refactoring code, porting to a different language),\notherwise you risk spending a lot of time working on something that the\nproject's developers might not want to merge into the project.\n\nAdhering to the following process is the best way to get your work\nincluded in the project:\n\n1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,\n and configure the remotes:\n\n ```bash\n # Clone your fork of the repo into the current directory\n git clone https://github.com//coreui.git\n # Navigate to the newly cloned directory\n cd coreui\n # Assign the original repo to a remote called \"upstream\"\n git remote add upstream https://github.com/coreui/coreui.git\n ```\n\n2. If you cloned a while ago, get the latest changes from upstream:\n\n ```bash\n git checkout master\n git pull upstream master\n ```\n\n3. Create a new topic branch (off the main project development branch) to\n contain your feature, change, or fix:\n\n ```bash\n git checkout -b \n ```\n\n4. Commit your changes in logical chunks. Please adhere to these [git commit\n message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)\n or your code is unlikely to be merged into the main project. Use Git's\n [interactive rebase](https://help.github.com/articles/interactive-rebase)\n feature to tidy up your commits before making them public.\n\n5. Locally merge (or rebase) the upstream development branch into your topic branch:\n\n ```bash\n git pull [--rebase] upstream master\n ```\n\n6. Push your topic branch up to your fork:\n\n ```bash\n git push origin \n ```\n\n7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)\n with a clear title and description against the `master` branch.\n\n**IMPORTANT**: By submitting a patch, you agree to allow the project owners to\nlicense your work under the terms of the [MIT License](LICENSE).\n\n### Semantic Git commit messages\n\nInspired by Sparkbox's awesome article on\n[semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).\nPlease use following commit message format.\n\n* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```\n* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```\n* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```\n* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```\n* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```\n* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```\n* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```\n\n## Code guidelines\n\n### HTML\n\n[Adhere to the Code Guide.](http://codeguide.co/#html)\n\n- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).\n- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.\n- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.\n\n### CSS\n\n[Adhere to the Code Guide.](http://codeguide.co/#css)\n\n- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).\n- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.\n\n### JS\n\n- No semicolons (in client-side JS)\n- 2 spaces (no tabs)\n- strict mode\n- \"Attractive\"\n- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.\n\n## License\n\nBy contributing your code, you agree to license your contribution under the [MIT License](LICENSE).\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ncustom: \"https://coreui.io/pricing?support=bootstrap\"\nopen_collective: coreui\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Tell us about a bug you may have identified in CoreUI.\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\nBefore opening:\n\n- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)\n- [Validate](https://html5.validator.nu/) any HTML to avoid common problems\n- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)\n\nBug reports must include:\n\n- Operating system and version (Windows, macOS, Android, iOS)\n- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)\n- A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "contact_links:\n - name: Ask a question\n url: https://community.coreui.io/\n about: Ask and discuss questions with other CoreUI community members\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for a new feature in CoreUI.\ntitle: ''\nlabels: feature\nassignees: ''\n\n---\n\nBefore opening:\n\n- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)\n- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)\n\nFeature requests must include:\n\n- As much detail as possible for what we should add and why it's important to Bootstrap\n- Relevant links to prior art, screenshots, or live demos whenever possible\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "Before opening an issue:\n\n- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)\n- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs\n- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)\n\nWhen asking general \"how to\" questions:\n\n- Please do not open an issue here\n\nWhen reporting a bug, include:\n\n- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)\n- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)\n- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)\n\nWhen suggesting a feature, include:\n\n- As much detail as possible for what we should add and why it's important to CoreUI Admin Template\n- Relevant links to prior art, screenshots, or live demos whenever possible\n" }, { "path": ".github/SUPPORT.md", "content": "### Bug reports\n\nSee the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.\n\n### How-to\n\nFor general troubleshooting or help getting started:\n\n- Join [the official community](https://community.coreui.io/).\n- Ask and explore Stack Overflow with the [`coreui`](https://stackoverflow.com/questions/tagged/coreui) tag.\n" }, { "path": ".github/stale.yml", "content": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 360\n# Number of days of inactivity before a stale issue is closed\ndaysUntilClose: 7\n# Issues with these labels will never be considered stale\nexemptLabels:\n - pinned\n - security\n# Label to use when marking an issue as stale\nstaleLabel: wontfix\n# Comment to post when marking an issue as stale. Set to `false` to disable\nmarkComment: >\n This issue has been automatically marked as stale because it has not had\n recent activity. It will be closed if no further activity occurs. Thank you\n for your contributions.\n# Comment to post when closing a stale issue. Set to `false` to disable\ncloseComment: false\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# eslint cache\n.eslintcache\n\n# Numerous always-ignore extensions\n*.diff\n*.err\n*.log\n*.orig\n*.rej\n*.swo\n*.swp\n*.vi\n*.zip\n*~\n\n# OS or Editor folders\n._*\n.cache\n.DS_Store\n.idea\n.project\n.settings\n.tmproj\n*.esproj\n*.sublime-project\n*.sublime-workspace\nnbproject\nThumbs.db\n/.vscode/\n\n# Komodo\n.komodotools\n*.komodoproject\n\n# Folders to ignore\n/node_modules/\n/dist/\n" }, { "path": ".prettierignore", "content": "\n# Ignore artifacts:\nbuild\ncoverage\n\n#ignore source\nsrc\n" }, { "path": ".prettierrc.json", "content": "{\n \"overrides\": [\n {\n \"files\": \"*.html\",\n \"options\": { \"parser\": \"html\" }\n }\n ]\n}\n" }, { "path": ".stylelintignore", "content": "**/*.min.css\n**/dist/\n**/vendor/\n" }, { "path": ".stylelintrc", "content": "{\n \"extends\": [\n \"stylelint-config-twbs-bootstrap\"\n ],\n \"reportInvalidScopeDisables\": true,\n \"reportNeedlessDisables\": true,\n \"overrides\": [\n {\n \"files\": \"**/*.scss\",\n \"rules\": {\n \"declaration-property-value-disallowed-list\": {\n \"border\": \"none\",\n \"outline\": \"none\"\n },\n \"function-disallowed-list\": [\n \"calc\",\n \"lighten\",\n \"darken\"\n ],\n \"property-disallowed-list\": [\n \"border-radius\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-bottom-right-radius\",\n \"border-bottom-left-radius\",\n \"transition\"\n ],\n \"scss/dollar-variable-default\": [\n true,\n {\n \"ignore\": \"local\"\n }\n ],\n \"scss/selector-no-union-class-name\": true\n }\n }\n ]\n}" }, { "path": "ARCHITECTURE.md", "content": "# Architecture Documentation\n\n## Project Purpose\n\nCoreUI Free Bootstrap Admin Template is a professional admin dashboard template built on Bootstrap 5 and CoreUI components. It provides a ready-to-use foundation for building admin panels, dashboards, and web applications with a clean, modern interface.\n\n**Key Characteristics:**\n- Server-side templating approach (Pug → HTML)\n- Bootstrap 5 + CoreUI component library\n- Vanilla JavaScript (no framework dependencies)\n- Multi-page application (MPA) architecture\n- Static file generation with build-time compilation\n\n## High-Level Architecture\n\n```\n┌─────────────────────────────────────────────────────┐\n│ Source Files │\n│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │\n│ │ Pug │ │ Sass │ │ JS │ │\n│ │Templates │ │ Styles │ │ Modules │ │\n│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │\n│ │ │ │ │\n└───────┼─────────────┼─────────────┼─────────────────┘\n │ │ │\n ▼ ▼ ▼\n┌─────────────────────────────────────────────────────┐\n│ Build Pipeline │\n│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │\n│ │ Pug │ │PostCSS + │ │ Babel │ │\n│ │Compiler │ │ Sass │ │Transpiler│ │\n│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │\n│ │ │ │ │\n└───────┼─────────────┼─────────────┼─────────────────┘\n │ │ │\n ▼ ▼ ▼\n┌─────────────────────────────────────────────────────┐\n│ Distribution Files │\n│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │\n│ │ HTML │ │ CSS │ │ JS │ │\n│ │ Files │ │ (minified)│ │(bundled) │ │\n│ └──────────┘ └──────────┘ └──────────┘ │\n│ (served via browser-sync or web server) │\n└─────────────────────────────────────────────────────┘\n```\n\n## Technology Stack\n\n### Frontend\n- **HTML Generation**: Pug 3.0.3 (template engine)\n- **CSS Framework**: Bootstrap 5.3.x\n- **Component Library**: CoreUI 5.x (@coreui/coreui)\n- **Icons**: CoreUI Icons (@coreui/icons)\n- **JavaScript**: Vanilla ES6+ (no framework)\n- **Charts**: Chart.js 4.x\n- **Scrollbars**: SimpleBar 6.x\n\n### Build Tools\n- **Package Manager**: npm\n- **CSS Processing**: Sass 1.97.0 → PostCSS → Autoprefixer\n- **JS Transpilation**: Babel 7.28.x with preset-env\n- **Task Runner**: npm scripts with npm-run-all\n- **File Watching**: Nodemon\n- **Live Server**: Browser-sync 3.0.4\n\n### Code Quality\n- **Linting**: ESLint 9.x (flat config) with XO + Unicorn\n- **Style Linting**: Stylelint 16.x with Bootstrap config\n- **Formatting**: Prettier 3.7.4\n- **Editor Config**: .editorconfig for consistency\n\n## Directory Structure\n\n```\ncoreui-free-bootstrap-admin-template/\n│\n├── src/ # Source files (edit these)\n│ ├── pug/ # Pug templates (HTML source)\n│ │ ├── _layout/ # Base layout templates\n│ │ │ └── default.pug # Main layout with sidebar/header\n│ │ ├── _partials/ # Reusable components\n│ │ │ ├── _header.pug # Top navigation bar\n│ │ │ ├── _sidebar.pug # Left sidebar navigation\n│ │ │ ├── _footer.pug # Page footer\n│ │ │ └── _breadcrumb.pug # Breadcrumb navigation\n│ │ ├── _mixins/ # Pug helper mixins\n│ │ │ ├── breadcrumb.pug # Breadcrumb generator\n│ │ │ ├── callout.pug # Alert/callout boxes\n│ │ │ └── example.pug # Code example displays\n│ │ └── views/ # Page templates\n│ │ ├── dashboard.pug # Main dashboard page\n│ │ ├── base/ # UI base components\n│ │ ├── buttons/ # Button examples\n│ │ ├── forms/ # Form components\n│ │ ├── icons/ # Icon libraries\n│ │ ├── notifications/ # Alerts, toasts, modals\n│ │ ├── pages/ # Auth pages (login, register)\n│ │ └── ...\n│ │\n│ ├── scss/ # Sass stylesheets\n│ │ ├── style.scss # Main stylesheet entry\n│ │ ├── style-rtl.scss # RTL (right-to-left) styles\n│ │ └── examples.scss # Demo/example page styles\n│ │\n│ ├── js/ # JavaScript modules\n│ │ ├── main.js # Main entry point\n│ │ ├── charts.js # Chart.js configurations\n│ │ ├── color-modes.js # Dark/light theme switcher\n│ │ ├── tooltips.js # Tooltip initialization\n│ │ ├── popovers.js # Popover initialization\n│ │ └── ...\n│ │\n│ ├── assets/ # Static assets\n│ │ ├── brand/ # Logo files\n│ │ ├── favicon/ # Favicon files\n│ │ └── img/ # Images\n│ │\n│ └── views/ # Compiled HTML (auto-generated)\n│ └── *.html # Do NOT edit these manually\n│\n├── dist/ # Production build output\n│ ├── css/ # Minified CSS\n│ ├── js/ # Transpiled JS\n│ ├── assets/ # Copied assets\n│ ├── vendors/ # Third-party libraries\n│ └── *.html # Production HTML files\n│\n├── build/ # Build scripts\n│ ├── pug.mjs # Pug compilation script\n│ ├── postcss.config.mjs # PostCSS configuration\n│ ├── vendors.mjs # Vendor file bundling\n│ └── change-version.mjs # Version management\n│\n├── node_modules/ # npm dependencies (ignored)\n│\n└── Configuration files\n ├── package.json # Dependencies and scripts\n ├── .editorconfig # Editor settings\n ├── eslint.config.mjs # ESLint flat config\n ├── .prettierrc.json # Prettier formatting\n ├── .stylelintrc # Stylelint rules\n ├── .browserslistrc # Target browsers\n ├── .babelrc.js # Babel transpiler config\n └── .cursorrules # AI context (Cursor IDE)\n```\n\n## Build Pipeline Details\n\n### Development Mode (`npm start`)\n\n1. **Clean**: Remove old compiled files\n2. **Compile Pug**: `src/pug/**/*.pug` → `src/views/*.html`\n3. **Compile Sass**: `src/scss/*.scss` → `dist/css/*.css` (expanded, autoprefixed)\n4. **Transpile JS**: `src/js/*.js` → `dist/js/*.js` (Babel with source maps)\n5. **Copy Assets**: `src/assets/**/*` → `dist/assets/`\n6. **Build Vendors**: Bundle third-party libraries\n7. **Watch Files**: Monitor changes and recompile\n8. **Browser-sync**: Live reload server on http://localhost:3000\n\n### Production Build (`npm run build`)\n\n1. **All development steps**\n2. **Minify CSS**: Compress stylesheets with cssnano\n3. **Minify JS**: Already transpiled by Babel\n4. **Optimize Assets**: Copy optimized files\n5. **Generate zip**: Create distribution package\n\n### File Watching\n\n```\nnpm run watch # Watch all file types\nnpm run watch-pug # Watch Pug templates only\nnpm run watch-css # Watch Sass files only\nnpm run watch-js # Watch JavaScript files only\n```\n\nEach watch task uses **nodemon** to monitor file changes and trigger appropriate compilation.\n\n## Data Flow\n\n### Page Rendering Flow\n\n```\n1. Browser Request\n └─> /index.html\n\n2. Server Response\n └─> Serve dist/index.html (static file)\n\n3. HTML Loads Resources\n ├─> dist/css/style.css (Bootstrap + CoreUI + custom styles)\n ├─> dist/js/main.js (app initialization)\n └─> dist/vendors/*.js (Chart.js, SimpleBar, etc.)\n\n4. JavaScript Execution\n ├─> Initialize CoreUI components\n ├─> Set up event listeners\n ├─> Configure charts (if on dashboard)\n └─> Enable tooltips/popovers\n\n5. User Interaction\n └─> JavaScript handles UI updates (no page reload)\n```\n\n### Theme Switching Flow\n\n```\n1. User clicks theme toggle button\n └─> color-modes.js listens for click\n\n2. ColorModeStorageManager updates preference\n ├─> Save to localStorage\n └─> Update [data-coreui-theme] attribute\n\n3. CSS custom properties respond\n └─> Variables change (--cui-primary-bg, --cui-text-color, etc.)\n\n4. ColorSchemeChange event fires\n └─> Charts re-render with new theme colors\n```\n\n### Chart Rendering Flow\n\n```\n1. charts.js module loads\n └─> import Chart from 'chart.js/auto'\n\n2. DOM ready\n └─> Find chart canvas elements\n\n3. Fetch data (or use inline data)\n └─> Random data generator for demo\n\n4. Create Chart.js instance\n ├─> Configure chart type (line, bar, pie, etc.)\n ├─> Apply theme colors from CSS variables\n └─> Set responsive options\n\n5. Theme changes\n └─> Re-initialize charts with new colors\n```\n\n## Component Organization\n\n### Pug Template Hierarchy\n\n```\ndefault.pug (base layout)\n├─> _header.pug (navigation bar)\n├─> _sidebar.pug (side navigation)\n├─> block content\n│ └─> dashboard.pug (page content)\n├─> block scripts (page-specific JS)\n└─> _footer.pug (page footer)\n```\n\n**Block System:**\n- `block content`: Main page content area\n- `block scripts`: Page-specific JavaScript includes\n- Each view extends the layout and overrides blocks\n\n### CSS Architecture\n\n```\nstyle.scss\n├─> Import Bootstrap 5\n├─> Import CoreUI components\n├─> Import custom variables\n└─> Import custom component styles\n\nTheme System:\n[data-coreui-theme=\"light\"] # Light mode (default)\n[data-coreui-theme=\"dark\"] # Dark mode\n[data-coreui-theme=\"auto\"] # System preference\n```\n\n**CSS Custom Properties:**\n- `--cui-primary`, `--cui-secondary`, etc. (colors)\n- `--cui-bg`, `--cui-text-color` (backgrounds/text)\n- `--cui-border-color`, `--cui-shadow` (UI elements)\n\n### JavaScript Module Pattern\n\nEach JS file in `src/js/` is an ES6 module:\n\n```javascript\n// Import dependencies\nimport { Something } from '@coreui/coreui'\n\n// Define functionality\nconst doSomething = () => { /* ... */ }\n\n// Initialize on DOM ready\ndocument.addEventListener('DOMContentLoaded', () => {\n doSomething()\n})\n\n// Export if needed (most files use side effects only)\n```\n\n## Key Dependencies\n\n### Runtime Dependencies\n\n| Package | Purpose | Used In |\n|---------|---------|---------|\n| `@coreui/coreui` | UI component library | All pages |\n| `@coreui/icons` | Icon library | Icon pages |\n| `chart.js` | Charts and graphs | Dashboard |\n| `simplebar` | Custom scrollbars | Sidebar |\n| `@coreui/utils` | Utility functions | Theme switching |\n\n### Build Dependencies\n\n| Package | Purpose |\n|---------|---------|\n| `sass` | CSS preprocessing |\n| `@babel/core` | JavaScript transpilation |\n| `pug` | HTML templating |\n| `postcss` | CSS post-processing |\n| `autoprefixer` | Vendor prefix automation |\n| `browser-sync` | Development server |\n| `eslint` | JavaScript linting |\n| `stylelint` | CSS linting |\n\n## Browser Support\n\nDefined in `.browserslistrc`:\n\n```\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 60\nFirefox >= 60\nEdge >= 79\nSafari >= 12\niOS >= 12\n```\n\nModern browsers with ES6+ support (Babel handles transpilation for older browsers if needed).\n\n## Deployment\n\n### Static Hosting (Recommended)\n\n1. Run `npm run build`\n2. Deploy `dist/` folder to:\n - Netlify\n - Vercel\n - GitHub Pages\n - AWS S3 + CloudFront\n - Any static file server\n\n### Traditional Web Server\n\n1. Run `npm run build`\n2. Copy `dist/` contents to web root\n3. Configure server to serve `index.html` as default\n4. Set proper MIME types for CSS/JS files\n\n### Docker (Optional)\n\n```dockerfile\nFROM nginx:alpine\nCOPY dist/ /usr/share/nginx/html/\nEXPOSE 80\n```\n\n## Performance Considerations\n\n### CSS Optimization\n- Sass compilation removes unused styles\n- PostCSS autoprefixer adds only necessary prefixes\n- Minification in production build\n- CSS is render-blocking (loaded in ``)\n\n### JavaScript Optimization\n- Babel transpiles only necessary polyfills (preset-env)\n- Source maps for debugging (development only)\n- Modules loaded as separate files (no bundler)\n- Deferred script loading where possible\n\n### Asset Optimization\n- SVG icons (scalable, small file size)\n- Favicon in multiple formats for compatibility\n- Images in `src/assets/` should be optimized before adding\n\n## Security Considerations\n\n### Content Security Policy (CSP)\nTemplate includes inline scripts and styles. For strict CSP:\n1. Extract inline scripts to external files\n2. Use nonces or hashes for required inline scripts\n3. Update CSP headers accordingly\n\n### XSS Prevention\n- Pug automatically escapes HTML by default\n- Use `!= html` only for trusted content\n- Sanitize user input on server-side (if adding backend)\n\n### Dependency Management\n- Regularly update npm dependencies\n- Run `npm audit` to check for vulnerabilities\n- Pin major versions in `package.json`\n\n## Extensibility\n\n### Adding New Pages\n\n1. Create `src/pug/views/my-page.pug`\n2. Extend layout: `extends ../_layout/default.pug`\n3. Override content block:\n ```pug\n block content\n .container-lg.px-4\n h1 My Page Title\n p Page content here\n ```\n4. Run `npm start` to compile\n5. Access at `/my-page.html`\n\n### Adding New Components\n\n1. Check CoreUI docs: https://coreui.io/bootstrap/docs/\n2. Copy component markup to Pug file\n3. Convert HTML to Pug syntax (use html2pug.com if needed)\n4. Import required JavaScript:\n ```javascript\n import { Modal } from '@coreui/coreui'\n ```\n5. Initialize component in page-specific JS\n\n### Adding New Styles\n\n1. Edit `src/scss/style.scss` or create new partial\n2. Import Bootstrap/CoreUI variables to reuse:\n ```scss\n @import \"~bootstrap/scss/functions\";\n @import \"~bootstrap/scss/variables\";\n ```\n3. Use CSS custom properties for theme compatibility\n4. Run `npm run css` to compile\n\n### Integrating Backend APIs\n\nThis template is frontend-only. To add backend:\n\n1. **Fetch API** for AJAX requests:\n ```javascript\n fetch('/api/endpoint')\n .then(response => response.json())\n .then(data => updateUI(data))\n ```\n\n2. **Authentication**: Implement token-based auth\n - Store JWT in localStorage/sessionStorage\n - Add Authorization header to requests\n - Redirect to login on 401 responses\n\n3. **State Management**: For complex apps, consider:\n - Vanilla JS with custom events\n - Lightweight state library (Zustand, Nano Stores)\n - Full framework migration (React, Vue, etc.)\n\n## Common Issues and Solutions\n\n### Pug Compilation Errors\n- **Error**: \"Cannot find module\"\n - **Fix**: Check Pug include/extend paths (relative to file)\n\n### Sass Compilation Errors\n- **Error**: \"Undefined variable\"\n - **Fix**: Import Bootstrap/CoreUI variables before using\n\n### JavaScript Errors\n- **Error**: \"X is not defined\"\n - **Fix**: Add `/* global X */` comment or import module\n\n### Live Reload Not Working\n- **Error**: Browser-sync not updating\n - **Fix**: Check if `watch` scripts are running, restart `npm start`\n\n### Build Fails\n- **Error**: npm scripts fail\n - **Fix**: Delete `node_modules/` and `dist/`, run `npm install`, then `npm run build`\n\n## Resources\n\n- **CoreUI Bootstrap Docs**: https://coreui.io/bootstrap/docs/\n- **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/\n- **Pug Documentation**: https://pugjs.org/\n- **Chart.js Documentation**: https://www.chartjs.org/\n- **Sass Documentation**: https://sass-lang.com/documentation/\n\n## Changelog\n\nSee [releases](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for version history and updates.\n" }, { "path": "DEVELOPMENT.md", "content": "# Development Guide\n\nThis guide provides practical information for developers working on the CoreUI Free Bootstrap Admin Template.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Project Structure](#project-structure)\n- [Development Workflow](#development-workflow)\n- [Adding New Features](#adding-new-features)\n- [Working with Components](#working-with-components)\n- [Styling Guidelines](#styling-guidelines)\n- [JavaScript Patterns](#javascript-patterns)\n- [Testing Your Changes](#testing-your-changes)\n- [Common Tasks](#common-tasks)\n- [Troubleshooting](#troubleshooting)\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 16+ and npm\n- Basic knowledge of HTML, CSS (Sass), and JavaScript\n- Familiarity with Pug templating (optional but helpful)\n- Text editor or IDE (VS Code recommended)\n\n### Initial Setup\n\n1. Clone the repository:\n ```bash\n git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git\n cd coreui-free-bootstrap-admin-template\n ```\n\n2. Install dependencies:\n ```bash\n npm install\n ```\n\n3. Start development server:\n ```bash\n npm start\n ```\n\n4. Open your browser to [http://localhost:3000](http://localhost:3000)\n\nThe development server includes live reload - changes to Pug, Sass, or JavaScript files will automatically refresh the browser.\n\n## Project Structure\n\n```\nsrc/\n├── pug/ # HTML templates (edit these, not HTML files!)\n│ ├── _layout/ # Base page layouts\n│ ├── _partials/ # Reusable components (header, sidebar, footer)\n│ ├── _mixins/ # Pug helper functions\n│ └── views/ # Individual page templates\n├── scss/ # Stylesheets\n│ └── style.scss # Main stylesheet (imports Bootstrap + CoreUI)\n├── js/ # JavaScript modules\n│ ├── main.js # Dashboard charts\n│ ├── color-modes.js # Theme switcher\n│ └── *.js # Other page-specific scripts\n└── assets/ # Images, icons, static files\n```\n\n**Important**: Always edit source files in `src/`, never the compiled files in `dist/` or `src/views/`.\n\n## Development Workflow\n\n### File Watching\n\nThe `npm start` command runs multiple watchers in parallel:\n\n- **Pug watcher**: Compiles `.pug` files to HTML\n- **Sass watcher**: Compiles `.scss` files to CSS\n- **JS watcher**: Transpiles JavaScript with Babel\n- **Browser-sync**: Live reload server\n\n### Individual Watchers\n\nRun specific watchers if you're only working on one file type:\n\n```bash\nnpm run watch-pug # Watch Pug templates only\nnpm run watch-css # Watch Sass files only\nnpm run watch-js # Watch JavaScript files only\n```\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\nThis creates optimized files in the `dist/` directory ready for deployment.\n\n## Adding New Features\n\n### Adding a New Page\n\n1. **Create Pug template** in `src/pug/views/`:\n\n ```pug\n //- src/pug/views/my-new-page.pug\n extends ../_layout/default.pug\n\n block content\n .container-lg.px-4\n .row\n .col-12\n h1 My New Page\n p Welcome to my new page!\n ```\n\n2. **Compile the template**:\n ```bash\n npm run pug\n ```\n\n This creates `src/views/my-new-page.html`\n\n3. **View in browser**:\n Navigate to [http://localhost:3000/my-new-page.html](http://localhost:3000/my-new-page.html)\n\n4. **Add to navigation** (optional):\n Edit `src/pug/_partials/_sidebar.pug` to add a menu link\n\n### Adding Page-Specific JavaScript\n\n1. **Create JS file** in `src/js/`:\n\n ```javascript\n // src/js/my-feature.js\n\n /**\n * My Feature Module\n *\n * Description of what this module does\n */\n\n /**\n * Initialize the feature\n */\n const initMyFeature = () => {\n console.log('My feature initialized')\n }\n\n // Run on DOM ready\n document.addEventListener('DOMContentLoaded', () => {\n initMyFeature()\n })\n ```\n\n2. **Include in your Pug template**:\n\n ```pug\n block scripts\n script(src='js/my-feature.js')\n ```\n\n3. **Compile**:\n ```bash\n npm run js\n ```\n\n### Adding Page-Specific Styles\n\n1. **Create partial** in `src/scss/`:\n\n ```scss\n // src/scss/_my-feature.scss\n\n .my-feature {\n padding: 1rem;\n background-color: var(--cui-body-bg);\n\n &__title {\n color: var(--cui-primary);\n }\n }\n ```\n\n2. **Import in main stylesheet**:\n\n ```scss\n // src/scss/style.scss\n @import \"my-feature\";\n ```\n\n3. **Compile**:\n ```bash\n npm run css\n ```\n\n## Working with Components\n\n### Using CoreUI Components\n\n**Always use CoreUI Bootstrap components** from the official documentation: https://coreui.io/bootstrap/docs/\n\n#### Example: Adding a Modal\n\n1. **Find component in CoreUI docs**: https://coreui.io/bootstrap/docs/components/modal/\n\n2. **Convert HTML to Pug** (use https://html2pug.com if needed):\n\n ```pug\n //- Modal Button\n button.btn.btn-primary(type='button' data-coreui-toggle='modal' data-coreui-target='#myModal')\n | Launch Modal\n\n //- Modal\n .modal.fade#myModal(tabindex='-1' aria-labelledby='myModalLabel' aria-hidden='true')\n .modal-dialog\n .modal-content\n .modal-header\n h5.modal-title#myModalLabel Modal Title\n button.btn-close(type='button' data-coreui-dismiss='modal' aria-label='Close')\n .modal-body\n p Modal content goes here\n .modal-footer\n button.btn.btn-secondary(type='button' data-coreui-dismiss='modal') Close\n button.btn.btn-primary(type='button') Save changes\n ```\n\n3. **Initialize if needed**:\n\n Some components require JavaScript initialization:\n\n ```javascript\n import { Modal } from '@coreui/coreui'\n\n const myModal = new Modal(document.getElementById('myModal'))\n myModal.show()\n ```\n\n### Creating Reusable Components\n\nFor components used across multiple pages, create a Pug mixin:\n\n1. **Create mixin file** in `src/pug/_mixins/`:\n\n ```pug\n //- src/pug/_mixins/alert.pug\n\n mixin alert(type, message)\n .alert(class=`alert-${type}` role='alert')\n = message\n ```\n\n2. **Use the mixin** in your pages:\n\n ```pug\n include _mixins/alert\n\n +alert('success', 'Your changes have been saved!')\n +alert('danger', 'An error occurred.')\n ```\n\n## Styling Guidelines\n\n### Use Bootstrap/CoreUI Classes First\n\nBefore writing custom CSS, check if Bootstrap or CoreUI provides a utility class:\n\n```pug\n//- Good: Using utility classes\n.d-flex.justify-content-between.align-items-center.mb-3\n h2 Title\n button.btn.btn-primary Action\n\n//- Avoid: Custom CSS when utilities exist\n.my-custom-header\n h2 Title\n button Action\n```\n\n### CSS Custom Properties (Variables)\n\nUse CoreUI's CSS variables for theming:\n\n```scss\n.my-component {\n color: var(--cui-body-color); // Text color (theme-aware)\n background: var(--cui-body-bg); // Background color\n border-color: var(--cui-border-color); // Border color\n}\n```\n\n### Common CSS Variables\n\n| Variable | Purpose |\n|----------|---------|\n| `--cui-primary` | Primary brand color |\n| `--cui-secondary` | Secondary color |\n| `--cui-success`, `--cui-danger`, etc. | Status colors |\n| `--cui-body-color` | Default text color |\n| `--cui-body-bg` | Default background |\n| `--cui-border-color` | Border color |\n\n### Naming Conventions\n\nUse Bootstrap/CoreUI class naming conventions for custom styles:\n\n```scss\n.my-custom-section {\n padding: 1rem;\n\n .section-title {\n font-weight: bold;\n }\n}\n\n// Or extend existing CoreUI/Bootstrap components\n.sidebar-custom {\n background-color: var(--cui-sidebar-bg);\n}\n```\n\n### Dark Mode Support\n\nCSS variables automatically adapt to dark mode. Test both themes:\n\n```javascript\n// Switch theme programmatically for testing\nlocalStorage.setItem('coreui-free-bootstrap-admin-template-theme', 'dark')\nlocation.reload()\n```\n\n## JavaScript Patterns\n\n### Module Structure\n\nFollow this pattern for new JavaScript modules:\n\n```javascript\n/* global LibraryName */\n\n/**\n * Module Name\n *\n * Description of what this module does and which pages use it.\n */\n\n/**\n * Function description\n * @param {type} paramName - Parameter description\n * @returns {type} Return value description\n */\nconst myFunction = (paramName) => {\n // Implementation\n}\n\n// Initialize on DOM ready\ndocument.addEventListener('DOMContentLoaded', () => {\n myFunction()\n})\n```\n\n### ESLint Rules\n\n- **No semicolons** (enforced by ESLint)\n- **2-space indentation**\n- **Single quotes** for strings\n- Use arrow functions `() => {}` instead of `function() {}`\n\n### Accessing CoreUI Utilities\n\n```javascript\n/* global coreui */\n\n// Get CSS variable value\nconst primaryColor = coreui.Utils.getStyle('--cui-primary')\n\n// Convert RGB to HEX\nconst hexColor = coreui.Utils.rgbToHex('rgb(255, 0, 0)')\n```\n\n### Working with Chart.js\n\n```javascript\n/* global Chart, coreui */\n\nconst myChart = new Chart(document.getElementById('my-chart'), {\n type: 'line',\n data: {\n labels: ['Jan', 'Feb', 'Mar'],\n datasets: [{\n label: 'Sales',\n data: [12, 19, 3],\n borderColor: coreui.Utils.getStyle('--cui-primary'),\n backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-primary-rgb')}, 0.1)`\n }]\n },\n options: {\n responsive: true\n }\n})\n\n// Update chart when theme changes\ndocument.documentElement.addEventListener('ColorSchemeChange', () => {\n myChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color')\n myChart.update()\n})\n```\n\n## Testing Your Changes\n\n### Visual Testing\n\n1. **Test in both themes**:\n - Click theme toggle in header\n - Verify dark mode looks correct\n\n2. **Test responsive design**:\n - Resize browser window\n - Test mobile view (Chrome DevTools: Cmd+Shift+M / Ctrl+Shift+M)\n\n3. **Test in multiple browsers**:\n - Chrome/Edge\n - Firefox\n - Safari (if on macOS)\n\n### Code Quality Checks\n\nRun linters before committing:\n\n```bash\nnpm run lint # Run all linters\nnpm run lint:js # JavaScript only\nnpm run lint:css # Styles only\n```\n\nFix auto-fixable issues:\n\n```bash\nnpm run lint:js -- --fix\n```\n\n## Common Tasks\n\n### Update Dependencies\n\n```bash\nnpm update # Update to latest compatible versions\nnpm outdated # Check for outdated packages\nnpm audit fix # Fix security vulnerabilities\n```\n\n### Change Template Version\n\n```bash\nnpm run change-version 5.4.0\n```\n\nThis updates version numbers across all files.\n\n### Create Distribution Package\n\n```bash\nnpm run zip\n```\n\nCreates a `.zip` file with the production build.\n\n### Clean Build\n\nIf you encounter build issues:\n\n```bash\nrm -rf node_modules dist\nnpm install\nnpm run build\n```\n\n## Troubleshooting\n\n### Pug Compilation Errors\n\n**Error**: \"Cannot find module\"\n\n```\nError: src/pug/views/my-page.pug\n > 1| extends ../_layout/wrong-path.pug\n```\n\n**Solution**: Check that include/extend paths are correct and relative to the current file.\n\n### Sass Compilation Errors\n\n**Error**: \"Undefined variable $primary\"\n\n**Solution**: Import Bootstrap/CoreUI variables before using them:\n\n```scss\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variables\";\n\n// Now you can use variables\n.my-class {\n color: $primary;\n}\n```\n\n### JavaScript Errors\n\n**Error**: \"ReferenceError: Chart is not defined\"\n\n**Solution**: Add global comment at top of file:\n\n```javascript\n/* global Chart */\n```\n\n### Live Reload Not Working\n\n1. Check that `npm start` is running without errors\n2. Restart the development server: `Ctrl+C` then `npm start`\n3. Clear browser cache: `Cmd+Shift+R` / `Ctrl+Shift+F5`\n4. Check that files are being saved in `src/` not `dist/`\n\n### Port Already in Use\n\n**Error**: \"Port 3000 is already in use\"\n\n**Solution**: Kill the process or use a different port:\n\n```bash\n# macOS/Linux\nlsof -ti:3000 | xargs kill -9\n\n# Windows\nnetstat -ano | findstr :3000\ntaskkill /PID /F\n\n# Or use different port\nPORT=3001 npm start\n```\n\n### ESLint Errors\n\n**Error**: \"Unexpected console statement\"\n\n**Solution**: Disable ESLint for specific lines when console is needed:\n\n```javascript\n// eslint-disable-next-line no-console\nconsole.log('Debug info')\n```\n\nOr disable for entire file (not recommended):\n\n```javascript\n/* eslint-disable no-console */\n```\n\n## Best Practices\n\n### Do's\n\n- ✅ Use CoreUI Bootstrap components from official docs\n- ✅ Edit source files in `src/`, never compiled files\n- ✅ Use CSS variables for colors and theme values\n- ✅ Add JSDoc comments to all functions\n- ✅ Test in both light and dark modes\n- ✅ Follow existing code patterns and conventions\n- ✅ Run linters before committing\n- ✅ Keep JavaScript modules focused and small\n\n### Don'ts\n\n- ❌ Don't use Tailwind CSS (this project uses Bootstrap)\n- ❌ Don't edit files in `dist/` or `src/views/` (auto-generated)\n- ❌ Don't add unnecessary dependencies\n- ❌ Don't use inline styles (use utility classes or Sass)\n- ❌ Don't hardcode colors (use CSS variables)\n- ❌ Don't ignore ESLint/Stylelint warnings\n- ❌ Don't commit `node_modules/` or `dist/`\n\n## Getting Help\n\n- **CoreUI Documentation**: https://coreui.io/bootstrap/docs/\n- **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/\n- **Pug Documentation**: https://pugjs.org/\n- **Chart.js Documentation**: https://www.chartjs.org/\n- **GitHub Issues**: https://github.com/coreui/coreui-free-bootstrap-admin-template/issues\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on:\n- Code style and conventions\n- Commit message format\n- Pull request process\n- Bug reporting\n\n---\n\n**Need more help?** Check [ARCHITECTURE.md](ARCHITECTURE.md) for technical details about the project structure and build pipeline.\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2025 creativeLabs Łukasz Holeczek.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "# CoreUI Free Bootstrap Admin Template — Built for AI-Assisted Development [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)\n[![npm package][npm-coreui-badge]][npm-coreui]\n[![NPM downloads][npm-coreui-download]][npm-coreui]\n\n[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui\n[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square\n[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square\n\n[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-bootstrap-admin-template/)\n\nCoreUI Bootstrap Admin Panel Template is not another blend of 3rd parties free components and libraries. It's **the only Open Source Bootstrap Admin Dashboard Template built on the enterprise-grade hand-crafted [UI Components Library](https://github.com/coreui/coreui)** created and backed by professionals.\n**CoreUI Admin Template helps you build reliable web apps faster than before.** CoreUI offers 4 versions: [Angular](https://github.com/coreui/coreui-free-angular-admin-template), [Bootstrap](https://github.com/coreui/coreui-free-bootstrap-admin-template), [React.js](https://github.com/coreui/coreui-free-react-admin-template), and [Vue.js](https://github.com/coreui/coreui-free-vue-admin-template).\n\nCurious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)\n\n## Table of Contents\n\n* [Frameworks](#frameworks)\n* [CoreUI PRO](#coreui-pro)\n* [CoreUI PRO Bootstrap Admin Templates](#coreui-pro-bootstrap-admin-templates)\n* [Installation](#installation)\n* [Usage](#usage)\n* [What's included](#whats-included)\n* [AI-Friendly Development](#ai-friendly-development)\n* [Documentation](#documentation)\n* [Components](#components)\n* [Contributing](#contributing)\n* [Versioning](#versioning)\n* [Creators](#creators)\n* [Community](#community)\n* [Support CoreUI Development](#support-coreui-development)\n* [Copyright and license](#copyright-and-license)\n\n## Frameworks\n\nCoreUI is built on top of Bootstrap 5 and supports popular frameworks.\n\n* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)\n* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)\n* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)\n* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)\n\n## CoreUI PRO\n\n* 💪 [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)\n* 💪 [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)\n* 💪 [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)\n* 💪 [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)\n* 💪 [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)\n\n\n## CoreUI PRO Bootstrap Admin Templates\n\n| Default Theme | Light Theme |\n| --- | --- |\n| [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=default) | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=light)|\n\n| Modern Theme | Bright Theme |\n| --- | --- |\n| [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=modern) | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=bright)|\n\n## CoreUI Icons (522 Free icons) - Premium designed free icon set with marks in SVG, Webfont and raster formats.\n\nCoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. Ready-to-use fonts and stylesheets that work with your favorite frameworks.\n\n[![CoreUI Free Icons](https://coreui.io/images/icons_free_bg_set.png)](https://github.com/coreui/coreui-icons/)\n\n[Download CoreUI Free Icons](https://github.com/coreui/coreui-icons/)\n\n## Installation\n\n### Clone repo\n\n``` bash\n# clone the repo\n$ git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project\n\n# go into app's directory\n$ cd my-project\n\n# install app's dependencies\n$ npm install\n```\n\n## Usage\n\n``` bash\n# serve with hot reload at localhost:3000.\n$ npm start\n\n# build for production with minification\n$ npm run build\n```\n\n## What's included\n\nWithin the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:\n\n```\nfree-bootstrap-admin-template/\n├── build/\n├── src/\n│ ├── assets/\n│ │ ├── brand/\n│ │ ├── favicon/\n│ │ ├── icons/\n│ │ ├── img/\n│ ├── js/\n│ ├── pug/\n│ │ ├── _layout/\n│ │ ├── _partial/\n│ │ ├── base/\n│ │ ├── buttons/\n│ │ ├── icons/\n│ │ ├── notifications/\n│ │ ├── ...\n│ │ ├── index.pug\n│ │ └── ...\n│ ├── scss/\n│ ├── vendors/\n│ └── views/\n│ ├── base/\n│ ├── buttons/\n│ ├── css/\n│ ├── icons/\n│ ├── notifications/\n│ ├── ...\n│ ├── index.html\n│ └── ...\n└── package.json\n```\n\n## AI-Friendly Development\n\nThis template is optimized for AI-assisted development, making it easier to work with AI coding assistants like Cursor, Claude Code, and GitHub Copilot.\n\n### What's Included\n\n- **`.cursorrules`** - Comprehensive AI context file with project conventions, patterns, and guidelines\n- **`ARCHITECTURE.md`** - Detailed technical documentation covering the project structure, build pipeline, and component organization\n- **`DEVELOPMENT.md`** - Practical developer guide with examples and best practices\n- **JSDoc Comments** - All JavaScript modules include detailed documentation with @param and @returns annotations\n\n### Benefits\n\n- 🤖 **Smart Code Generation** - AI understands your project uses CoreUI Bootstrap (not Tailwind CSS)\n- 📚 **Better Context Awareness** - AI knows the project structure, conventions, and patterns\n- ✨ **Consistent Code Style** - AI generates code following ESLint/Stylelint rules automatically\n- 🚀 **Faster Development** - Less time explaining, more time building\n- 💡 **Intelligent Suggestions** - AI provides relevant component examples from CoreUI documentation\n\n### Quick Start with AI\n\nSimply open the project in your AI-powered IDE (Cursor, VS Code with Copilot, etc.) and the AI will automatically understand:\n- Project architecture and file organization\n- CoreUI Bootstrap component usage\n- Pug templating patterns\n- Sass/SCSS styling conventions\n- JavaScript module patterns\n\n## Documentation\n\nThe documentation for the CoreUI Free Bootstrap Admin Template is hosted at our website [CoreUI](https://coreui.io/bootstrap/docs/templates/installation/)\n\n## Components\n\nCoreUI Bootstrap Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.\n\n- [Bootstrap Accordion](https://coreui.io/bootstrap/docs/components/accordion/)\n- [Bootstrap Alert](https://coreui.io/bootstrap/docs/components/alert/)\n- [Bootstrap Autocomplete](https://coreui.io/bootstrap/docs/forms/autocomplete/) **PRO**\n- [Bootstrap Avatar](https://coreui.io/bootstrap/docs/components/avatar/)\n- [Bootstrap Badge](https://coreui.io/bootstrap/docs/components/badge/)\n- [Bootstrap Breadcrumb](https://coreui.io/bootstrap/docs/components/breadcrumb/)\n- [Bootstrap Button](https://coreui.io/bootstrap/docs/components/button/)\n- [Bootstrap Button Group](https://coreui.io/bootstrap/docs/components/button-group/)\n- [Bootstrap Callout](https://coreui.io/bootstrap/docs/components/callout/)\n- [Bootstrap Card](https://coreui.io/bootstrap/docs/components/card/)\n- [Bootstrap Carousel](https://coreui.io/bootstrap/docs/components/carousel/)\n- [Bootstrap Checkbox](https://coreui.io/bootstrap/docs/forms/checkbox/)\n- [Bootstrap Close Button](https://coreui.io/bootstrap/docs/components/close-button/)\n- [Bootstrap Calendar](https://coreui.io/bootstrap/docs/components/calendar/) **PRO**\n- [Bootstrap Collapse](https://coreui.io/bootstrap/docs/components/collapse/)\n- [Bootstrap Date Picker](https://coreui.io/bootstrap/docs/forms/date-picker/) **PRO**\n- [Bootstrap Date Range Picker](https://coreui.io/bootstrap/docs/forms/date-range-picker/) **PRO**\n- [Bootstrap Dropdown](https://coreui.io/bootstrap/docs/components/dropdown/)\n- [Bootstrap Floating Labels](https://coreui.io/bootstrap/docs/forms/floating-labels/)\n- [Bootstrap Footer](https://coreui.io/bootstrap/docs/components/footer/)\n- [Bootstrap Header](https://coreui.io/bootstrap/docs/components/header/)\n- [Bootstrap Image](https://coreui.io/bootstrap/docs/components/image/)\n- [Bootstrap Input](https://coreui.io/bootstrap/docs/forms/input/)\n- [Bootstrap Input Group](https://coreui.io/bootstrap/docs/forms/input-group/)\n- [Bootstrap List Group](https://coreui.io/bootstrap/docs/components/list-group/)\n- [Bootstrap Loading Button](https://coreui.io/bootstrap/docs/components/loading-button/) **PRO**\n- [Bootstrap Modal](https://coreui.io/bootstrap/docs/components/modal/)\n- [Bootstrap Multi Select](https://coreui.io/bootstrap/docs/forms/multi-select/) **PRO**\n- [Bootstrap Navs & Tabs](https://coreui.io/bootstrap/docs/components/navs-tabs/)\n- [Bootstrap Navbar](https://coreui.io/bootstrap/docs/components/navbar/)\n- [Bootstrap Offcanvas](https://coreui.io/bootstrap/docs/components/offcanvas/)\n- [Bootstrap Pagination](https://coreui.io/bootstrap/docs/components/pagination/)\n- [Bootstrap Password Input](https://coreui.io/bootstrap/docs/forms/password-input/) **PRO**\n- [Bootstrap Placeholder](https://coreui.io/bootstrap/docs/components/placeholder/)\n- [Bootstrap Popover](https://coreui.io/bootstrap/docs/components/popover/)\n- [Bootstrap Progress](https://coreui.io/bootstrap/docs/components/progress/)\n- [Bootstrap Radio](https://coreui.io/bootstrap/docs/forms/radio/)\n- [Bootstrap Range](https://coreui.io/bootstrap/docs/forms/range/)\n- [Bootstrap Range Slider](https://coreui.io/bootstrap/docs/forms/range-slider/) **PRO**\n- [Bootstrap Rating](https://coreui.io/bootstrap/docs/forms/rating/) **PRO**\n- [Bootstrap Select](https://coreui.io/bootstrap/docs/forms/select/)\n- [Bootstrap Sidebar](https://coreui.io/bootstrap/docs/components/sidebar/)\n- [Bootstrap Spinner](https://coreui.io/bootstrap/docs/components/spinner/)\n- [Bootstrap Stepper](https://coreui.io/bootstrap/docs/forms/stepper/) **PRO**\n- [Bootstrap Switch](https://coreui.io/bootstrap/docs/forms/switch/)\n- [Bootstrap Table](https://coreui.io/bootstrap/docs/components/table/)\n- [Bootstrap Textarea](https://coreui.io/bootstrap/docs/forms/textarea/)\n- [Bootstrap Time Picker](https://coreui.io/bootstrap/docs/forms/time-picker/) **PRO**\n- [Bootstrap Toast](https://coreui.io/bootstrap/docs/components/toast/)\n- [Bootstrap Tooltip](https://coreui.io/bootstrap/docs/components/tooltip/)\n\n## Contributing\n\nPlease read through our [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.\n\nEditor preferences are available in the [editor config](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at .\n\n## Versioning\n\nFor transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).\n\nSee [the Releases section of our project](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for changelogs for each release version.\n\n## Creators\n\n**Łukasz Holeczek**\n\n* \n* \n\n**Andrzej Kopański**\n\n* \n\n**CoreUI Team**\n\n* \n* \n* \n\n## Community\n\nGet updates on CoreUI's development and chat with the project maintainers and community members.\n\n- Follow [@core_ui on Twitter](https://twitter.com/core_ui).\n- Read and subscribe to [CoreUI Blog](https://coreui.io/blog/).\n\n## Support CoreUI Development\n\nCoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui-free-bootstrap-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).\n\n\n## Copyright and license\n\ncopyright 2025 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE).\n" }, { "path": "build/change-version.mjs", "content": "#!/usr/bin/env node\n\n/*!\n * Script to update version number references in the project.\n * Copyright 2017-2022 The Bootstrap Authors\n * Copyright 2017-2022 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\nimport fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { globby } from 'globby'\n\nconst VERBOSE = process.argv.includes('--verbose')\nconst DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')\n\n// These are the filetypes we only care about replacing the version\nconst GLOB = [\n '**/*.{css,html,js,json,md,pug,scss,txt,yml}'\n]\nconst GLOBBY_OPTIONS = {\n cwd: path.join(__dirname, '..'),\n gitignore: true\n}\nconst EXCLUDED_FILES = [\n 'CHANGELOG.md'\n]\n\n// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37\nfunction regExpQuote(string) {\n return string.replace(/[$()*+-.?[\\\\\\]^{|}]/g, '\\\\$&')\n}\n\nfunction regExpQuoteReplacement(string) {\n return string.replace(/\\$/g, '$$')\n}\n\nasync function replaceRecursively(file, oldVersion, newVersion) {\n const originalString = await fs.readFile(file, 'utf8')\n const newString = originalString.replace(\n new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion)\n )\n\n // No need to move any further if the strings are identical\n if (originalString === newString) {\n return\n }\n\n if (VERBOSE) {\n console.log(`FILE: ${file}`)\n }\n\n if (DRY_RUN) {\n return\n }\n\n await fs.writeFile(file, newString, 'utf8')\n}\n\nasync function main(args) {\n const [oldVersion, newVersion] = args\n\n if (!oldVersion || !newVersion) {\n console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')\n console.error('Got arguments:', args)\n process.exit(1)\n }\n\n // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s\n [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg)\n\n try {\n const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES)\n\n await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion)))\n } catch (error) {\n console.error(error)\n process.exit(1)\n }\n}\n\nmain(process.argv.slice(2))\n" }, { "path": "build/postcss.config.mjs", "content": "const mapConfig = {\n inline: false,\n annotation: true,\n sourcesContent: true\n}\n\nexport default () => {\n return {\n map: mapConfig,\n plugins: {\n autoprefixer: {\n cascade: false\n },\n 'postcss-combine-duplicated-selectors': {},\n 'postcss-drop-empty-css-vars': {}\n }\n }\n}\n" }, { "path": "build/pug.mjs", "content": "#!/usr/bin/env node\n\nimport fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { globby } from 'globby'\nimport pug from 'pug'\nimport { mkdirp } from 'mkdirp'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\nconst GLOB = [\n '**/*.pug'\n]\n\nconst SRC = 'src/pug/views/'\n\nconst GLOBBY_OPTIONS = {\n cwd: path.join(__dirname, '..', SRC)\n}\n\nconst { basename, dirname, resolve, sep } = path\n\nconst base = levels => {\n let path = './'\n while (levels > 0) {\n levels -= 1\n path += '../'\n }\n\n return path\n}\n\nconst compile = (filename, basedir) => {\n const levels = basedir.split(`${sep}`).filter(el => el !== '').length\n\n const fn = pug.compileFile(filename, {\n basedir: './pug/',\n pretty: true\n })\n const html = fn({\n base: base(levels)\n })\n return html\n}\n\nconst compilePugToHtml = (file, dest) => {\n const dir = dirname(file)\n const filename = basename(file).replace('.pug', '.html')\n const relative = path.relative(path.join(__dirname, '..'), dir.replace(SRC, ''))\n const html = compile(path.join(__dirname, '..', SRC, file), `${relative}`)\n\n mkdirp(path.join(__dirname, '..', dest, relative)).then(() => {\n fs.writeFile(resolve(__dirname, '..', dest, relative, filename), html, err => {\n if (err) {\n throw err\n }\n\n console.log(`${resolve(__dirname, '..', dest, relative, filename)} file saved!`)\n })\n })\n}\n\nasync function main() {\n try {\n const files = await globby(GLOB, GLOBBY_OPTIONS)\n\n await Promise.all(files.map(file => compilePugToHtml(file, 'src/views/')))\n } catch (error) {\n console.error(error)\n process.exit(1)\n }\n}\n\nmain()\n" }, { "path": "build/vendors.mjs", "content": "#!/usr/bin/env node\n\nimport fs from 'node:fs'\nimport path from 'node:path'\nimport injectVendors from '@coreui/vendors-injector'\n\nconst DIST = 'dist/'\n\nconst { extname, join } = path\n\nconst walkSync = (dir, filelist = []) => {\n for (const file of fs.readdirSync(dir)) {\n filelist = fs.statSync(join(dir, file)).isDirectory() ? walkSync(join(dir, file), filelist) : filelist.concat(join(dir, file))\n }\n\n return filelist\n}\n\nconst main = () => {\n const filenames = walkSync(DIST)\n for (const filename of filenames) {\n if (extname(filename) === '.html') {\n injectVendors.toFile(filename)\n }\n }\n}\n\nmain()\n" }, { "path": "eslint.config.mjs", "content": "import xo from 'eslint-config-xo'\nimport xoBrowser from 'eslint-config-xo/browser'\nimport eslintPluginImport from 'eslint-plugin-import'\nimport eslintPluginUnicorn from 'eslint-plugin-unicorn'\nimport globals from 'globals'\n\nexport default [\n eslintPluginImport.flatConfigs.errors,\n eslintPluginImport.flatConfigs.warnings,\n eslintPluginUnicorn.configs.recommended,\n ...xo,\n ...xoBrowser,\n {\n ignores: [\n '**/*.json',\n '**/*.min.js',\n '**/dist/',\n '.babelrc.js'\n ]\n },\n {\n rules: {\n '@stylistic/comma-dangle': 'off',\n '@stylistic/function-paren-newline': 'off',\n '@stylistic/indent': 'off',\n '@stylistic/indent-binary-ops': 'off',\n '@stylistic/jsx-quotes': 'off',\n '@stylistic/max-len': 'off',\n '@stylistic/object-curly-spacing': 'off',\n '@stylistic/operator-linebreak': 'off',\n '@stylistic/quotes': 'off',\n '@stylistic/semi': 'off',\n 'arrow-body-style': 'off',\n 'capitalized-comments': 'off',\n 'comma-dangle': ['error', 'never'],\n 'import/extensions': [\n 'error',\n 'ignorePackages',\n {\n js: 'always'\n }\n ],\n 'import/first': 'error',\n 'import/newline-after-import': 'error',\n 'import/no-absolute-path': 'error',\n 'import/no-amd': 'error',\n 'import/no-cycle': [\n 'error',\n {\n ignoreExternal: true\n }\n ],\n 'import/no-duplicates': 'error',\n 'import/no-extraneous-dependencies': 'error',\n 'import/no-mutable-exports': 'error',\n 'import/no-named-as-default': 'error',\n 'import/no-named-as-default-member': 'error',\n 'import/no-named-default': 'error',\n 'import/no-self-import': 'error',\n 'import/no-unassigned-import': ['error'],\n 'import/no-useless-path-segments': 'error',\n 'import/order': 'error',\n indent: [\n 'error',\n 2,\n {\n MemberExpression: 'off',\n SwitchCase: 1\n }\n ],\n 'logical-assignment-operators': 'off',\n 'max-params': ['warn', 5],\n 'multiline-ternary': ['error', 'always-multiline'],\n 'new-cap': [\n 'error',\n {\n properties: false\n }\n ],\n 'no-console': 'error',\n 'no-negated-condition': 'off',\n 'object-curly-spacing': ['error', 'always'],\n 'operator-linebreak': ['error', 'after'],\n 'prefer-object-has-own': 'off',\n 'prefer-template': 'error',\n semi: ['error', 'never'],\n strict: 'error',\n 'unicorn/explicit-length-check': 'off',\n 'unicorn/filename-case': 'off',\n 'unicorn/no-anonymous-default-export': 'off',\n 'unicorn/no-array-callback-reference': 'off',\n 'unicorn/no-array-method-this-argument': 'off',\n 'unicorn/no-null': 'off',\n 'unicorn/no-typeof-undefined': 'off',\n 'unicorn/no-unused-properties': 'error',\n 'unicorn/numeric-separators-style': 'off',\n 'unicorn/prefer-array-flat': 'off',\n 'unicorn/prefer-at': 'off',\n 'unicorn/prefer-dom-node-dataset': 'off',\n 'unicorn/prefer-global-this': 'off', // added to avoid the error: 'Use `globalThis` instead of `window` or `global`'\n 'unicorn/prefer-module': 'off',\n 'unicorn/prefer-query-selector': 'off',\n 'unicorn/prefer-spread': 'off',\n 'unicorn/prefer-string-raw': 'off',\n 'unicorn/prefer-string-replace-all': 'off',\n 'unicorn/prefer-structured-clone': 'off',\n 'unicorn/prevent-abbreviations': 'off'\n }\n },\n {\n files: ['**/*.{js,mjs}'],\n languageOptions: {\n sourceType: 'module'\n }\n },\n {\n files: ['build/**'],\n languageOptions: {\n globals: {\n ...globals.node\n },\n sourceType: 'module'\n },\n rules: {\n 'no-console': 'off',\n 'unicorn/prefer-top-level-await': 'off'\n }\n }\n]\n" }, { "path": "nodemon.json", "content": "{\n \"ignoreRoot\": [\".git\"],\n \"ignore\": [\n \"build\",\n \"dist\"\n ],\n \"delay\": 2500\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"@coreui/coreui-free-bootstrap-admin-template\",\n \"version\": \"5.3.0\",\n \"description\": \"Free Bootstrap Admin Template\",\n \"keywords\": [\n \"admin\",\n \"admin panel\",\n \"admin template\",\n \"bootstrap\",\n \"css\",\n \"dashboard\",\n \"framework\",\n \"front-end\",\n \"responsive\",\n \"sass\",\n \"ui kit\",\n \"webapp\"\n ],\n \"homepage\": \"https://coreui.io\",\n \"bugs\": {\n \"url\": \"https://github.com/coreui/coreui-free-bootstrap-admin-template/issues\",\n \"email\": \"support@coreui.io\"\n },\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"creativeLabs Łukasz Holeczek\",\n \"url\": \"https://coreui.io\",\n \"github\": \"https://github.com/coreui\",\n \"twitter\": \"https://twitter.com/core_ui\"\n },\n \"contributors\": [\n {\n \"name\": \"CoreUI Core Team\",\n \"url\": \"https://github.com/orgs/coreui/people\"\n }\n ],\n \"main\": \"dist/index.html\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/coreui/coreui-free-bootstrap-admin-template.git\"\n },\n \"funding\": [\n {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/coreui\"\n },\n {\n \"type\": \"subscription\",\n \"url\": \"hhttps://coreui.io/pricing/?framework=bootstrap\"\n }\n ],\n \"scripts\": {\n \"build\": \"npm-run-all clean --parallel css js sync --sequential build-vendors\",\n \"build-vendors\": \"node build/vendors.mjs\",\n \"clean\": \"rimraf dist\",\n \"css\": \"npm-run-all --parallel css-compile* --sequential css-prefix css-minify*\",\n \"css-compile\": \"sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/ src/scss/:dist/css/\",\n \"css-lint\": \"npm-run-all --continue-on-error --parallel css-lint-*\",\n \"css-lint-stylelint\": \"stylelint \\\"**/*.{css,scss}\\\" --cache --cache-location .cache/.stylelintcache --rd\",\n \"css-minify\": \"cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \\\".min\\\" \\\"dist/css/*.css\\\" \\\"!dist/css/*.min.css\\\" \\\"!dist/css/*rtl*.css\\\"\",\n \"css-prefix\": \"postcss --config build/postcss.config.mjs --replace \\\"dist/css/*.css\\\" \\\"!dist/css/*.min.css\\\"\",\n \"js\": \"npm-run-all --parallel js-compile* \",\n \"js-compile\": \"cross-env babel src/js/ --out-dir dist/js/ --source-maps\",\n \"js-lint\": \"eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives\",\n \"localhost\": \"browser-sync start --server \\\"./dist\\\" --serveStatic \\\"./\\\" --files \\\"./dist/\\\"\",\n \"pug\": \"node build/pug.mjs\",\n \"release-version\": \"node build/change-version.mjs\",\n \"serve\": \"serve dist\",\n \"start\": \"npm-run-all --sequential clean css js sync --parallel localhost watch\",\n \"sync\": \"npm-run-all --parallel sync-*\",\n \"sync-assets\": \"syncdir src/assets dist/assets\",\n \"sync-views\": \"syncdir src/views dist\",\n \"watch\": \"npm-run-all --parallel watch-*\",\n \"watch-assets\": \"nodemon --watch src/assets --exec \\\"npm run sync-assets\\\"\",\n \"watch-css\": \"nodemon --watch scss/ --ext scss --exec \\\"npm-run-all css-lint css-compile css-prefix\\\"\",\n \"watch-html\": \"nodemon --watch src/views --ext html --exec \\\"npm run sync-views\\\"\",\n \"watch-js\": \"nodemon --watch src/js --ext js --exec \\\"npm-run-all js-lint js-compile\\\"\",\n \"watch-pug\": \"nodemon --watch src/pug --ext pug --exec \\\"npm run pug\\\"\",\n \"zip\": \"npm-run-all --sequential build zip-*\",\n \"zip-dist\": \"cross-env-shell \\\"rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip && cp -r dist/ coreui-free-bootstrap-admin-template-v$npm_package_version-dist && zip -qr9 coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip coreui-free-bootstrap-admin-template-v$npm_package_version-dist && rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist\\\"\",\n \"zip-src\": \"git archive -o coreui-free-bootstrap-admin-template-v$npm_package_version.zip -9 HEAD\"\n },\n \"dependencies\": {\n \"@coreui/chartjs\": \"^4.1.0\",\n \"@coreui/coreui\": \"^5.5.0\",\n \"@coreui/icons\": \"^3.0.1\",\n \"@coreui/utils\": \"^2.0.2\",\n \"chart.js\": \"^4.5.1\",\n \"simplebar\": \"^6.3.3\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.28.3\",\n \"@babel/core\": \"^7.28.5\",\n \"@babel/preset-env\": \"^7.28.5\",\n \"@coreui/vendors-injector\": \"^1.1.4\",\n \"autoprefixer\": \"^10.4.23\",\n \"browser-sync\": \"^3.0.4\",\n \"clean-css-cli\": \"^5.6.3\",\n \"cross-env\": \"^10.1.0\",\n \"eslint\": \"^9.39.2\",\n \"eslint-config-xo\": \"^0.49.0\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-unicorn\": \"^62.0.0\",\n \"find-unused-sass-variables\": \"^6.1.1\",\n \"globals\": \"^16.5.0\",\n \"globby\": \"^16.0.0\",\n \"mkdirp\": \"^3.0.1\",\n \"nodemon\": \"^3.1.11\",\n \"npm-run-all\": \"^4.1.5\",\n \"postcss\": \"^8.5.6\",\n \"postcss-cli\": \"^11.0.1\",\n \"postcss-combine-duplicated-selectors\": \"^10.0.3\",\n \"postcss-drop-empty-css-vars\": \"^0.0.0\",\n \"prettier\": \"3.7.4\",\n \"pug\": \"^3.0.3\",\n \"rimraf\": \"^6.1.2\",\n \"sass\": \"1.97.0\",\n \"serve\": \"^14.2.5\",\n \"shelljs\": \"^0.10.0\",\n \"stylelint\": \"16.26.1\",\n \"stylelint-config-twbs-bootstrap\": \"^16.1.0\",\n \"sync-directory\": \"^6.0.5\"\n }\n}\n" }, { "path": "src/assets/favicon/browserconfig.xml", "content": "\n#ffffff" }, { "path": "src/assets/favicon/manifest.json", "content": "{\n \"name\": \"App\",\n \"icons\": [\n {\n \"src\": \"/android-icon-36x36.png\",\n \"sizes\": \"36x36\",\n \"type\": \"image/png\",\n \"density\": \"0.75\"\n },\n {\n \"src\": \"/android-icon-48x48.png\",\n \"sizes\": \"48x48\",\n \"type\": \"image/png\",\n \"density\": \"1.0\"\n },\n {\n \"src\": \"/android-icon-72x72.png\",\n \"sizes\": \"72x72\",\n \"type\": \"image/png\",\n \"density\": \"1.5\"\n },\n {\n \"src\": \"/android-icon-96x96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image/png\",\n \"density\": \"2.0\"\n },\n {\n \"src\": \"/android-icon-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\",\n \"density\": \"3.0\"\n },\n {\n \"src\": \"/android-icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\",\n \"density\": \"4.0\"\n }\n ]\n}\n" }, { "path": "src/js/charts.js", "content": "/* global Chart */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template charts.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Chart.js Demo Examples\n *\n * This module provides demonstration examples for various Chart.js chart types\n * used in the Charts page (views/charts.html). Each chart is initialized with\n * sample data to showcase different visualization patterns.\n *\n * Chart types included:\n * - Line chart (canvas-1)\n * - Bar chart (canvas-2)\n * - Doughnut chart (canvas-3)\n * - Radar chart (canvas-4)\n * - Pie chart (canvas-5)\n * - Polar area chart (canvas-6)\n *\n * All charts use randomly generated data for demonstration purposes.\n */\n\n/**\n * Generates a random number between 0 and 100\n * @returns {number} Random integer from 0 to 100\n */\nconst random = () => Math.round(Math.random() * 100)\n\n// eslint-disable-next-line no-unused-vars\nconst lineChart = new Chart(document.getElementById('canvas-1'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(220, 220, 220, 0.2)',\n borderColor: 'rgba(220, 220, 220, 1)',\n pointBackgroundColor: 'rgba(220, 220, 220, 1)',\n pointBorderColor: '#fff',\n data: [random(), random(), random(), random(), random(), random(), random()]\n },\n {\n label: 'My Second dataset',\n backgroundColor: 'rgba(151, 187, 205, 0.2)',\n borderColor: 'rgba(151, 187, 205, 1)',\n pointBackgroundColor: 'rgba(151, 187, 205, 1)',\n pointBorderColor: '#fff',\n data: [random(), random(), random(), random(), random(), random(), random()]\n }\n ]\n },\n options: {\n responsive: true\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst barChart = new Chart(document.getElementById('canvas-2'), {\n type: 'bar',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n backgroundColor: 'rgba(220, 220, 220, 0.5)',\n borderColor: 'rgba(220, 220, 220, 0.8)',\n highlightFill: 'rgba(220, 220, 220, 0.75)',\n highlightStroke: 'rgba(220, 220, 220, 1)',\n data: [random(), random(), random(), random(), random(), random(), random()]\n },\n {\n backgroundColor: 'rgba(151, 187, 205, 0.5)',\n borderColor: 'rgba(151, 187, 205, 0.8)',\n highlightFill: 'rgba(151, 187, 205, 0.75)',\n highlightStroke: 'rgba(151, 187, 205, 1)',\n data: [random(), random(), random(), random(), random(), random(), random()]\n }\n ]\n },\n options: {\n responsive: true\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst doughnutChart = new Chart(document.getElementById('canvas-3'), {\n type: 'doughnut',\n data: {\n labels: ['Red', 'Green', 'Yellow'],\n datasets: [{\n data: [300, 50, 100],\n backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],\n hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']\n }]\n },\n options: {\n responsive: true\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst radarChart = new Chart(document.getElementById('canvas-4'), {\n type: 'radar',\n data: {\n labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(220, 220, 220, 0.2)',\n borderColor: 'rgba(220, 220, 220, 1)',\n pointBackgroundColor: 'rgba(220, 220, 220, 1)',\n pointBorderColor: '#fff',\n pointHighlightFill: '#fff',\n pointHighlightStroke: 'rgba(220, 220, 220, 1)',\n data: [65, 59, 90, 81, 56, 55, 40]\n },\n {\n label: 'My Second dataset',\n backgroundColor: 'rgba(151, 187, 205, 0.2)',\n borderColor: 'rgba(151, 187, 205, 1)',\n pointBackgroundColor: 'rgba(151, 187, 205, 1)',\n pointBorderColor: '#fff',\n pointHighlightFill: '#fff',\n pointHighlightStroke: 'rgba(151, 187, 205, 1)',\n data: [28, 48, 40, 19, 96, 27, 100]\n }\n ]\n },\n options: {\n responsive: true\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst pieChart = new Chart(document.getElementById('canvas-5'), {\n type: 'pie',\n data: {\n labels: ['Red', 'Green', 'Yellow'],\n datasets: [{\n data: [300, 50, 100],\n backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],\n hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']\n }]\n },\n options: {\n responsive: true\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst polarAreaChart = new Chart(document.getElementById('canvas-6'), {\n type: 'polarArea',\n data: {\n labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],\n datasets: [{\n data: [11, 16, 7, 3, 14],\n backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']\n }]\n },\n options: {\n responsive: true\n }\n})\n" }, { "path": "src/js/color-modes.js", "content": "/*!\n* Color mode toggler for CoreUI's docs (https://coreui.io/)\n* Copyright (c) 2025 creativeLabs Łukasz Holeczek\n* Licensed under the Creative Commons Attribution 3.0 Unported License.\n*/\n\n/**\n * Dark/Light Theme Switcher\n *\n * This module manages the application's color scheme (light/dark/auto mode).\n * It handles:\n * - Persisting theme preference to localStorage\n * - Detecting system color scheme preference (prefers-color-scheme)\n * - Updating the DOM with the selected theme\n * - Managing the theme toggle UI in the header\n * - Dispatching ColorSchemeChange events for chart updates\n *\n * Theme modes:\n * - 'light': Force light theme\n * - 'dark': Force dark theme\n * - 'auto': Follow system preference\n *\n * The theme is applied via [data-coreui-theme] attribute on element.\n */\n\n(() => {\n const THEME = 'coreui-free-bootstrap-admin-template-theme'\n\n /**\n * Retrieves the stored theme preference from localStorage\n * @returns {string|null} Theme name ('light', 'dark', 'auto') or null\n */\n const getStoredTheme = () => localStorage.getItem(THEME)\n\n /**\n * Saves the theme preference to localStorage\n * @param {string} theme - Theme name ('light', 'dark', or 'auto')\n */\n const setStoredTheme = theme => localStorage.setItem(THEME, theme)\n\n /**\n * Determines the preferred theme based on stored preference or system setting\n * @returns {string} Preferred theme ('light' or 'dark')\n */\n const getPreferredTheme = () => {\n const storedTheme = getStoredTheme()\n\n if (storedTheme) {\n return storedTheme\n }\n\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n }\n\n /**\n * Applies the theme to the document and dispatches a change event\n * @param {string} theme - Theme to apply ('light', 'dark', or 'auto')\n */\n const setTheme = theme => {\n if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n document.documentElement.setAttribute('data-coreui-theme', 'dark')\n } else {\n document.documentElement.setAttribute('data-coreui-theme', theme)\n }\n\n const event = new Event('ColorSchemeChange')\n document.documentElement.dispatchEvent(event)\n }\n\n setTheme(getPreferredTheme())\n\n /**\n * Updates the theme toggle UI to reflect the active theme\n * @param {string} theme - Currently active theme\n */\n const showActiveTheme = theme => {\n const activeThemeIcon = document.querySelector('.theme-icon-active use')\n const btnToActive = document.querySelector(`[data-coreui-theme-value=\"${theme}\"]`)\n const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('xlink:href')\n\n for (const element of document.querySelectorAll('[data-coreui-theme-value]')) {\n element.classList.remove('active')\n }\n\n btnToActive.classList.add('active')\n activeThemeIcon.setAttribute('xlink:href', svgOfActiveBtn)\n }\n\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n const storedTheme = getStoredTheme()\n if (storedTheme !== 'light' || storedTheme !== 'dark') {\n setTheme(getPreferredTheme())\n }\n })\n\n window.addEventListener('DOMContentLoaded', () => {\n showActiveTheme(getPreferredTheme())\n\n for (const toggle of document.querySelectorAll('[data-coreui-theme-value]')) {\n toggle.addEventListener('click', () => {\n const theme = toggle.getAttribute('data-coreui-theme-value')\n setStoredTheme(theme)\n setTheme(theme)\n showActiveTheme(theme)\n })\n }\n })\n})()\n" }, { "path": "src/js/colors.js", "content": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template colors.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Theme Color Display\n *\n * This module enhances the Colors page (views/theme/colors.html) by automatically\n * generating color information tables for each theme color swatch. It extracts the\n * computed background color from elements with the .theme-color class and displays\n * both HEX and RGB values below each color sample.\n *\n * This provides developers with easy access to color values for use in custom styles.\n */\n\nfor (const element of document.querySelectorAll('.theme-color')) {\n const color = getComputedStyle(element, null).getPropertyValue('background-color')\n const table = document.createElement('table')\n table.classList.add('w-100')\n table.innerHTML = `\n \n \n \n \n \n \n \n \n \n
HEX:${coreui.Utils.rgbToHex(color)}
RGB:${color}
\n `\n element.parentNode.append(table)\n}\n" }, { "path": "src/js/config.js", "content": "/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template config.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Theme Configuration from URL Parameters\n *\n * This module allows setting the initial theme via URL query parameters.\n * Useful for sharing links with specific theme preferences or testing different themes.\n *\n * Usage: Add ?theme=dark, ?theme=light, or ?theme=auto to the URL\n * Example: http://localhost:3000/index.html?theme=dark\n *\n * The selected theme is persisted to localStorage and will be used as the default\n * until changed by the user or another URL parameter.\n */\n\n(() => {\n const THEME = 'coreui-free-bootstrap-admin-template-theme'\n const urlParams = new URLSearchParams(window.location.href.split('?')[1])\n\n if (urlParams.get('theme') && ['auto', 'dark', 'light'].includes(urlParams.get('theme'))) {\n localStorage.setItem(THEME, urlParams.get('theme'))\n }\n})()\n" }, { "path": "src/js/main.js", "content": "/* global Chart, coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template main.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Dashboard Charts\n *\n * This module initializes and manages all charts on the main Dashboard page (index.html).\n * It includes:\n * - Card charts (small charts in statistic cards)\n * - Main chart (large chart showing traffic/metrics over time)\n * - Custom tooltip configuration using CoreUI's ChartJS utilities\n * - Theme-aware chart updates (responds to dark/light mode changes)\n *\n * All charts use Chart.js with CoreUI's custom styling and color variables.\n */\n\n// Configure Chart.js defaults for custom tooltips\nChart.defaults.pointHitDetectionRadius = 1\nChart.defaults.plugins.tooltip.enabled = false\nChart.defaults.plugins.tooltip.mode = 'index'\nChart.defaults.plugins.tooltip.position = 'nearest'\nChart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips\nChart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')\n\ndocument.documentElement.addEventListener('ColorSchemeChange', () => {\n cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')\n cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')\n mainChart.options.scales.x.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')\n mainChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color')\n mainChart.options.scales.y.border.color = coreui.Utils.getStyle('--cui-border-color-translucent')\n mainChart.options.scales.y.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')\n mainChart.options.scales.y.ticks.color = coreui.Utils.getStyle('--cui-body-color')\n\n cardChart1.update()\n cardChart2.update()\n mainChart.update()\n})\n\n/**\n * Generates a random integer between min and max (inclusive)\n * @param {number} min - Minimum value\n * @param {number} max - Maximum value\n * @returns {number} Random integer between min and max\n */\nconst random = (min, max) =>\n Math.floor((Math.random() * (max - min + 1)) + min)\n\nconst cardChart1 = new Chart(document.getElementById('card-chart1'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'transparent',\n borderColor: 'rgba(255,255,255,.55)',\n pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'),\n data: [65, 59, 84, 84, 51, 55, 40]\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false\n },\n ticks: {\n display: false\n }\n },\n y: {\n min: 30,\n max: 89,\n display: false,\n grid: {\n display: false\n },\n ticks: {\n display: false\n }\n }\n },\n elements: {\n line: {\n borderWidth: 1,\n tension: 0.4\n },\n point: {\n radius: 4,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\nconst cardChart2 = new Chart(document.getElementById('card-chart2'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'transparent',\n borderColor: 'rgba(255,255,255,.55)',\n pointBackgroundColor: coreui.Utils.getStyle('--cui-info'),\n data: [1, 18, 9, 17, 34, 22, 11]\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false\n },\n ticks: {\n display: false\n }\n },\n y: {\n min: -9,\n max: 39,\n display: false,\n grid: {\n display: false\n },\n ticks: {\n display: false\n }\n }\n },\n elements: {\n line: {\n borderWidth: 1\n },\n point: {\n radius: 4,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst cardChart3 = new Chart(document.getElementById('card-chart3'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(255,255,255,.2)',\n borderColor: 'rgba(255,255,255,.55)',\n data: [78, 81, 80, 45, 34, 12, 40],\n fill: true\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n },\n elements: {\n line: {\n borderWidth: 2,\n tension: 0.4\n },\n point: {\n radius: 0,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst cardChart4 = new Chart(document.getElementById('card-chart4'), {\n type: 'bar',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(255,255,255,.2)',\n borderColor: 'rgba(255,255,255,.55)',\n data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],\n barPercentage: 0.6\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n grid: {\n display: false,\n drawTicks: false\n\n },\n ticks: {\n display: false\n }\n },\n y: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false,\n drawTicks: false\n },\n ticks: {\n display: false\n }\n }\n }\n }\n})\n\nconst mainChart = new Chart(document.getElementById('main-chart'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-info-rgb')}, .1)`,\n borderColor: coreui.Utils.getStyle('--cui-info'),\n pointHoverBackgroundColor: '#fff',\n borderWidth: 2,\n data: [\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200)\n ],\n fill: true\n },\n {\n label: 'My Second dataset',\n borderColor: coreui.Utils.getStyle('--cui-success'),\n pointHoverBackgroundColor: '#fff',\n borderWidth: 2,\n data: [\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200),\n random(50, 200)\n ]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n annotation: {\n annotations: {\n line1: {\n type: 'line',\n yMin: 95,\n yMax: 95,\n borderColor: coreui.Utils.getStyle('--cui-danger'),\n borderWidth: 1,\n borderDash: [8, 5]\n }\n }\n },\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n grid: {\n color: coreui.Utils.getStyle('--cui-border-color-translucent'),\n drawOnChartArea: false\n },\n ticks: {\n color: coreui.Utils.getStyle('--cui-body-color')\n }\n },\n y: {\n border: {\n color: coreui.Utils.getStyle('--cui-border-color-translucent')\n },\n grid: {\n color: coreui.Utils.getStyle('--cui-border-color-translucent')\n },\n ticks: {\n beginAtZero: true,\n color: coreui.Utils.getStyle('--cui-body-color'),\n max: 250,\n maxTicksLimit: 5,\n stepSize: Math.ceil(250 / 5)\n }\n }\n },\n elements: {\n line: {\n tension: 0.4\n },\n point: {\n radius: 0,\n hitRadius: 10,\n hoverRadius: 4,\n hoverBorderWidth: 3\n }\n }\n }\n})\n" }, { "path": "src/js/popovers.js", "content": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template popovers.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Popover Initialization\n *\n * This module automatically initializes all CoreUI Popover components on the page.\n * Popovers are similar to tooltips but can contain more content and are triggered\n * by clicks instead of hover.\n *\n * Any element with [data-coreui-toggle=\"popover\"] will be initialized automatically.\n * Used on pages like views/notifications/popovers.html\n *\n * @see https://coreui.io/bootstrap/docs/components/popovers/\n */\n\nfor (const element of document.querySelectorAll('[data-coreui-toggle=\"popover\"]')) {\n // eslint-disable-next-line no-new\n new coreui.Popover(element)\n}\n\n" }, { "path": "src/js/toasts.js", "content": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template toasts.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Toast Notifications\n *\n * This module handles the live toast notification demo on views/notifications/toasts.html\n * Toasts are lightweight notifications that appear temporarily to show messages to users.\n *\n * This implementation shows a toast when the demo button is clicked.\n *\n * @see https://coreui.io/bootstrap/docs/components/toasts/\n */\n\nconst toastTrigger = document.getElementById('liveToastBtn')\nconst toastLiveExample = document.getElementById('liveToast')\nif (toastTrigger) {\n toastTrigger.addEventListener('click', () => {\n const toast = new coreui.Toast(toastLiveExample)\n toast.show()\n })\n}\n" }, { "path": "src/js/tooltips.js", "content": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template tooltips.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Tooltip Initialization\n *\n * This module automatically initializes all CoreUI Tooltip components on the page.\n * Tooltips display helpful text on hover and are used throughout the template\n * for additional context and information.\n *\n * Any element with [data-coreui-toggle=\"tooltip\"] will be initialized automatically.\n * Used on pages like views/notifications/tooltips.html\n *\n * @see https://coreui.io/bootstrap/docs/components/tooltips/\n */\n\nfor (const element of document.querySelectorAll('[data-coreui-toggle=\"tooltip\"]')) {\n // eslint-disable-next-line no-new\n new coreui.Tooltip(element)\n}\n" }, { "path": "src/js/widgets.js", "content": "/* global Chart, coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template widgets.js\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * Widgets Page Charts\n *\n * This module initializes and manages all charts on the Widgets page (views/widgets.html).\n * It includes multiple chart types:\n * - Card charts (compact charts for cards)\n * - Sparkline charts (mini bar and line charts)\n * - Social box charts (brand-specific charts)\n *\n * All charts are configured with:\n * - Custom CoreUI tooltips\n * - Theme-aware color updates (dark/light mode support)\n * - Randomly generated demo data\n */\n\n// Configure Chart.js defaults for custom tooltips\nChart.defaults.pointHitDetectionRadius = 1\nChart.defaults.plugins.tooltip.enabled = false\nChart.defaults.plugins.tooltip.mode = 'index'\nChart.defaults.plugins.tooltip.position = 'nearest'\nChart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips\nChart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')\n\ndocument.documentElement.addEventListener('ColorSchemeChange', () => {\n cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')\n cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')\n\n cardChart1.update()\n cardChart2.update()\n})\n\nconst cardChart1 = new Chart(document.getElementById('card-chart1'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'transparent',\n borderColor: 'rgba(255,255,255,.55)',\n pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'),\n data: [65, 59, 84, 84, 51, 55, 40]\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false\n },\n ticks: {\n display: false\n }\n },\n y: {\n min: 30,\n max: 89,\n display: false,\n grid: {\n display: false\n },\n ticks: {\n display: false\n }\n }\n },\n elements: {\n line: {\n borderWidth: 1,\n tension: 0.4\n },\n point: {\n radius: 4,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\nconst cardChart2 = new Chart(document.getElementById('card-chart2'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'transparent',\n borderColor: 'rgba(255,255,255,.55)',\n pointBackgroundColor: coreui.Utils.getStyle('--cui-info'),\n data: [1, 18, 9, 17, 34, 22, 11]\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false\n },\n ticks: {\n display: false\n }\n },\n y: {\n min: -9,\n max: 39,\n display: false,\n grid: {\n display: false\n },\n ticks: {\n display: false\n }\n }\n },\n elements: {\n line: {\n borderWidth: 1\n },\n point: {\n radius: 4,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst cardChart3 = new Chart(document.getElementById('card-chart3'), {\n type: 'line',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(255,255,255,.2)',\n borderColor: 'rgba(255,255,255,.55)',\n data: [78, 81, 80, 45, 34, 12, 40],\n fill: true\n }\n ]\n },\n options: {\n plugins: {\n legend: {\n display: false\n }\n },\n maintainAspectRatio: false,\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n },\n elements: {\n line: {\n borderWidth: 2,\n tension: 0.4\n },\n point: {\n radius: 0,\n hitRadius: 10,\n hoverRadius: 4\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst cardChart4 = new Chart(document.getElementById('card-chart4'), {\n type: 'bar',\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(255,255,255,.2)',\n borderColor: 'rgba(255,255,255,.55)',\n data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],\n barPercentage: 0.6\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n grid: {\n display: false,\n drawTicks: false\n\n },\n ticks: {\n display: false\n }\n },\n y: {\n border: {\n display: false\n },\n grid: {\n display: false,\n drawBorder: false,\n drawTicks: false\n },\n ticks: {\n display: false\n }\n }\n }\n }\n})\n\n// Random Numbers\nconst random = (min, max) => Math.floor((Math.random() * (max - min + 1)) + min)\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart1 = new Chart(document.getElementById('sparkline-chart-1'), {\n type: 'bar',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],\n datasets: [\n {\n backgroundColor: coreui.Utils.getStyle('--cui-primary'),\n borderColor: 'transparent',\n borderWidth: 1,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart2 = new Chart(document.getElementById('sparkline-chart-2'), {\n type: 'bar',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],\n datasets: [\n {\n backgroundColor: coreui.Utils.getStyle('--cui-warning'),\n borderColor: 'transparent',\n borderWidth: 1,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart3 = new Chart(document.getElementById('sparkline-chart-3'), {\n type: 'bar',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],\n datasets: [\n {\n backgroundColor: coreui.Utils.getStyle('--cui-success'),\n borderColor: 'transparent',\n borderWidth: 1,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart4 = new Chart(document.getElementById('sparkline-chart-4'), {\n type: 'line',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n datasets: [\n {\n backgroundColor: 'transparent',\n borderColor: coreui.Utils.getStyle('--cui-info'),\n borderWidth: 2,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n elements: {\n line: {\n tension: 0.4\n },\n point: {\n radius: 0\n }\n },\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart5 = new Chart(document.getElementById('sparkline-chart-5'), {\n type: 'line',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n datasets: [\n {\n backgroundColor: 'transparent',\n borderColor: coreui.Utils.getStyle('--cui-success'),\n borderWidth: 2,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n elements: {\n line: {\n tension: 0.4\n },\n point: {\n radius: 0\n }\n },\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\n// eslint-disable-next-line no-unused-vars\nconst sparklineChart6 = new Chart(document.getElementById('sparkline-chart-6'), {\n type: 'line',\n data: {\n labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n datasets: [\n {\n backgroundColor: 'transparent',\n borderColor: coreui.Utils.getStyle('--cui-danger'),\n borderWidth: 2,\n data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]\n }\n ]\n },\n options: {\n maintainAspectRatio: false,\n elements: {\n line: {\n tension: 0.4\n },\n point: {\n radius: 0\n }\n },\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n }\n})\n\nconst brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']\nconst brandBoxChartOptions = {\n elements: {\n line: {\n tension: 0.4\n },\n point: {\n radius: 0,\n hitRadius: 10,\n hoverRadius: 4,\n hoverBorderWidth: 3\n }\n },\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n}\n\n// eslint-disable-next-line no-unused-vars\nconst brandBoxChart1 = new Chart(document.getElementById('social-box-chart-1'), {\n type: 'line',\n data: {\n labels: brandBoxChartLabels,\n datasets: [{\n backgroundColor: 'rgba(255,255,255,.1)',\n borderColor: 'rgba(255,255,255,.55)',\n pointHoverBackgroundColor: '#fff',\n borderWidth: 2,\n data: [65, 59, 84, 84, 51, 55, 40],\n fill: true\n }]\n },\n options: brandBoxChartOptions\n})\n\n// eslint-disable-next-line no-unused-vars\nconst brandBoxChart2 = new Chart(document.getElementById('social-box-chart-2'), {\n type: 'line',\n data: {\n labels: brandBoxChartLabels,\n datasets: [{\n backgroundColor: 'rgba(255,255,255,.1)',\n borderColor: 'rgba(255,255,255,.55)',\n pointHoverBackgroundColor: '#fff',\n borderWidth: 2,\n data: [1, 13, 9, 17, 34, 41, 38],\n fill: true\n }]\n },\n options: brandBoxChartOptions\n})\n\n// eslint-disable-next-line no-unused-vars\nconst brandBoxChart3 = new Chart(document.getElementById('social-box-chart-3'), {\n type: 'line',\n data: {\n labels: brandBoxChartLabels,\n datasets: [{\n backgroundColor: 'rgba(255,255,255,.1)',\n borderColor: 'rgba(255,255,255,.55)',\n pointHoverBackgroundColor: '#fff',\n borderWidth: 2,\n data: [78, 81, 80, 45, 34, 12, 40],\n fill: true\n }]\n },\n options: brandBoxChartOptions\n})\n" }, { "path": "src/pug/_layout/default.pug", "content": "- var count = 1000\ndoctype html\ninclude ../_partials/banner.pug\ninclude ../_mixins/breadcrumb.pug\ninclude ../_mixins/callout.pug\ninclude ../_mixins/callout-custom.pug\ninclude ../_mixins/docs-components.pug\ninclude ../_mixins/example.pug\n\nhtml(lang='en')\n head\n base(href=base)\n include ../_partials/head.pug\n block canonical\n block styles\n body\n include ../_partials/sidebar.pug\n .wrapper.d-flex.flex-column.min-vh-100\n include ../_partials/header.pug\n .body.flex-grow-1\n .container-lg.px-4\n block view\n include ../_partials/footer.pug\n include ../_partials/scripts.pug\n" }, { "path": "src/pug/_layout/pages.pug", "content": "- var page = true\ndoctype html\ninclude ../_partials/banner.pug\n\nhtml(lang='en')\n head\n base(href=base)\n include ../_partials/head.pug\n block styles\n body\n .bg-body-tertiary.min-vh-100.d-flex.flex-row.align-items-center\n block view\n\n include ../_partials/scripts.pug\n" }, { "path": "src/pug/_mixins/breadcrumb.pug", "content": "mixin breadcrumb(items)\n nav(aria-label=\"breadcrumb\")\n ol.breadcrumb.my-0\n each item, index in items\n - var href = item.href\n - var label = item.label\n\n li.breadcrumb-item(class=(index === items.length - 1 ? 'active' : false))\n if (href)\n a(href=(href ? href : '#'))= label ? label : item\n else\n span= label ? label : item\n" }, { "path": "src/pug/_mixins/callout-custom.pug", "content": "mixin callout-custom\n .callout.callout-info.bg-body\n block\n" }, { "path": "src/pug/_mixins/callout.pug", "content": "mixin callout(name, href)\n .callout.callout-info.bg-white\n | CoreUI #{name} has been created as an extension of Bootstrap #{name}. #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.\n br\n br\n | For more information please visit our official\n |\n a(href=href target=\"_blank\") documentation\n | .\n" }, { "path": "src/pug/_mixins/docs-components.pug", "content": "mixin docs-components(href)\n .bg-primary.bg-opacity-10.border.border-2.border-primary.rounded.mb-4\n .row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap\n .col-xl-auto.col-12.d-none.d-xl-block.p-0\n img.img-fluid(src='assets/img/components.webp' width='160px' height='160px' alt='CoreUI PRO hexagon')\n .col-md.col-12.px-lg-4\n | Our Admin Panel isn’t just a mix of third-party components. It’s the only open-source Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. \n | This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.\n .col-md-auto.col-12.mt-3.mt-lg-0\n a.btn.btn-primary.text-nowrap.text-white(href=href target=\"_blank\" rel='noopener noreferrer') Explore Documentation" }, { "path": "src/pug/_mixins/example.pug", "content": "mixin example(url, classNames)\n .example\n ul.nav.nav-underline-border(role=\"tablist\")\n li.nav-item\n a.nav-link.active(data-coreui-toggle=\"tab\" href=\"#preview-\"+count role=\"tab\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-media-play\")\n |\n | Preview\n if url\n li.nav-item\n a.nav-link(href=url target=\"_blank\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-code\")\n |\n | Code\n .tab-content.rounded-bottom(class=classNames)\n .tab-pane.p-3.active.preview(role=\"tabpanel\" id=\"preview-\"+count++ )\n block\n" }, { "path": "src/pug/_partials/banner.pug", "content": "//\n * CoreUI - Free Bootstrap Admin Template\n * @version v5.3.0\n * @link https://coreui.io/product/free-bootstrap-admin-template/\n * Copyright (c) 2025 creativeLabs Łukasz Holeczek\n * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)\n= \"\\n\"\n" }, { "path": "src/pug/_partials/docs-icons.pug", "content": ".bg-warning.bg-opacity-10.border.border-2.border-warning.rounded.mb-4\n .row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap\n .col-xl-auto.col-12.d-none.d-xl-block.p-0\n img.img-fluid(src='assets/img/icons.webp' width='160px' height='160px' alt='CoreUI Icons')\n .col-md.col-12.px-lg-4\n | CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,\n | and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You\n | can use them in your digital products for web or mobile app. For more information please\n | visit our documentation.\n .col-md-auto.col-12.mt-3.mt-lg-0\n a.btn.btn-warning.text-nowrap.text-white(href='https://coreui.io/bootstrap/docs/icons/' target='_blank' rel='noopener noreferrer')\n | Explore Documentation\n" }, { "path": "src/pug/_partials/footer.pug", "content": "footer.footer.px-4\n div\n a(href='https://coreui.io') CoreUI \n a(href='https://coreui.io/product/free-bootstrap-admin-template/') Bootstrap Admin Template\n | © 2025 creativeLabs.\n div.ms-auto\n | Powered by \n a(href='https://coreui.io/bootstrap/docs/') CoreUI UI Components\n" }, { "path": "src/pug/_partials/head.pug", "content": "meta(charset='utf-8')\nmeta(http-equiv='X-UA-Compatible', content='IE=edge')\nmeta(name='viewport', content='width=device-width, initial-scale=1.0, shrink-to-fit=no')\nmeta(name='description', content='CoreUI - Open Source Bootstrap Admin Template')\nmeta(name='author', content='Łukasz Holeczek')\nmeta(name='keyword', content='Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard')\ntitle CoreUI Free Bootstrap Admin Template\n\nlink(rel='apple-touch-icon', sizes='57x57', href='assets/favicon/apple-icon-57x57.png')\nlink(rel='apple-touch-icon', sizes='60x60', href='assets/favicon/apple-icon-60x60.png')\nlink(rel='apple-touch-icon', sizes='72x72', href='assets/favicon/apple-icon-72x72.png')\nlink(rel='apple-touch-icon', sizes='76x76', href='assets/favicon/apple-icon-76x76.png')\nlink(rel='apple-touch-icon', sizes='114x114', href='assets/favicon/apple-icon-114x114.png')\nlink(rel='apple-touch-icon', sizes='120x120', href='assets/favicon/apple-icon-120x120.png')\nlink(rel='apple-touch-icon', sizes='144x144', href='assets/favicon/apple-icon-144x144.png')\nlink(rel='apple-touch-icon', sizes='152x152', href='assets/favicon/apple-icon-152x152.png')\nlink(rel='apple-touch-icon', sizes='180x180', href='assets/favicon/apple-icon-180x180.png')\nlink(rel='icon', type='image/png', sizes='192x192', href='assets/favicon/android-icon-192x192.png')\nlink(rel='icon', type='image/png', sizes='32x32', href='assets/favicon/favicon-32x32.png')\nlink(rel='icon', type='image/png', sizes='96x96', href='assets/favicon/favicon-96x96.png')\nlink(rel='icon', type='image/png', sizes='16x16', href='assets/favicon/favicon-16x16.png')\nlink(rel='manifest', href='assets/favicon/manifest.json')\nmeta(name='msapplication-TileColor', content='#ffffff')\nmeta(name='msapplication-TileImage', content='assets/favicon/ms-icon-144x144.png')\nmeta(name='theme-color', content='#ffffff')\n\n// Vendors styles\nlink(rel='stylesheet' href='node_modules/simplebar/dist/simplebar.css')\nlink(rel='stylesheet' href='css/vendors/simplebar.css')\n\n// Main styles for this application\nlink(href='css/style.css', rel='stylesheet')\n\n// We use those styles to show code examples, you should remove them in your application.\nlink(href='css/examples.css', rel='stylesheet')\n\nscript(src='js/config.js')\nscript(src='js/color-modes.js')\n" }, { "path": "src/pug/_partials/header.pug", "content": "header.header.header-sticky.p-0.mb-4\n .container-fluid.border-bottom.px-4\n button.header-toggler(type=\"button\" onclick=\"coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()\" style=\"margin-inline-start: -14px;\")\n svg.icon.icon-lg\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-menu\")\n ul.header-nav.d-none.d-lg-flex\n li.nav-item\n a.nav-link(href=\"#\") Dashboard\n li.nav-item\n a.nav-link(href=\"#\") Users\n li.nav-item\n a.nav-link(href=\"#\") Settings\n ul.header-nav.ms-auto\n li.nav-item\n a.nav-link(href=\"#\")\n svg.icon.icon-lg\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-bell\")\n li.nav-item\n a.nav-link(href=\"#\")\n svg.icon.icon-lg\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-list-rich\")\n li.nav-item\n a.nav-link(href=\"#\")\n svg.icon.icon-lg\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open\")\n ul.header-nav\n li.nav-item.py-1\n .vr.h-100.mx-2.text-body.text-opacity-75\n li.nav-item.dropdown\n button.btn.btn-link.nav-link.py-2.px-2.d-flex.align-items-center(type=\"button\" aria-expanded=\"false\" data-coreui-toggle=\"dropdown\")\n svg.icon.icon-lg.theme-icon-active\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-contrast\")\n ul.dropdown-menu.dropdown-menu-end(style='--cui-dropdown-min-width: 8rem;')\n li\n button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='light')\n svg.icon.icon-lg.me-3\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-sun\")\n | Light\n li\n button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='dark')\n svg.icon.icon-lg.me-3\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-moon\")\n | Dark\n li\n button.dropdown-item.d-flex.align-items-center.active(type='button' data-coreui-theme-value='auto')\n svg.icon.icon-lg.me-3\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-contrast\")\n | Auto\n li.nav-item.py-1\n .vr.h-100.mx-2.text-body.text-opacity-75\n li.nav-item.dropdown\n a.nav-link.py-0.pe-0(data-coreui-toggle=\"dropdown\" href=\"#\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\")\n .avatar.avatar-md\n img.avatar-img(src=\"assets/img/avatars/8.jpg\" alt=\"user@email.com\")\n .dropdown-menu.dropdown-menu-end.pt-0\n .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.rounded-top.mb-2 Account\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-bell\")\n |\n | Updates\n span.badge.badge-sm.bg-info.ms-2 42\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open\")\n |\n | Messages\n span.badge.badge-sm.bg-success.ms-2 42\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-task\")\n |\n | Tasks\n span.badge.badge-sm.bg-danger.ms-2 42\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-comment-square\")\n |\n | Comments\n span.badge.badge-sm.bg-warning.ms-2 42\n .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.my-2\n .fw-semibold Settings\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-user\")\n |\n | Profile\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-settings\")\n |\n | Settings\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-credit-card\")\n |\n | Payments\n span.badge.badge-sm.bg-secondary.ms-2 42\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-file\")\n |\n | Projects\n span.badge.badge-sm.bg-primary.ms-2 42\n .dropdown-divider\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked\")\n |\n | Lock Account\n a.dropdown-item(href=\"#\")\n svg.icon.me-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-account-logout\")\n |\n | Logout\n .container-fluid.px-4\n block breadcrumb\n\n" }, { "path": "src/pug/_partials/scripts.pug", "content": "// CoreUI and necessary plugins\nscript(src='node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')\nscript(src='node_modules/simplebar/dist/simplebar.min.js')\n\nscript.\n const header = document.querySelector('header.header');\n\n document.addEventListener('scroll', () => {\n if (header) {\n header.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0);\n }\n });\n\nblock scripts\n\nscript \n block js\n\n" }, { "path": "src/pug/_partials/sidebar.pug", "content": ".sidebar.sidebar-dark.sidebar-fixed.border-end#sidebar\n .sidebar-header.border-bottom\n .sidebar-brand\n svg.sidebar-brand-full(width=\"88\" height=\"32\" alt=\"CoreUI Logo\")\n use(xlink:href=\"assets/brand/coreui.svg#full\")\n |\n svg.sidebar-brand-narrow(width=\"32\" height=\"32\" alt=\"CoreUI Logo\")\n use(xlink:href=\"assets/brand/coreui.svg#signet\")\n button.btn-close.d-lg-none(type='button' data-coreui-theme=\"dark\" aria-label='Close' onclick='coreui.Sidebar.getInstance(document.querySelector(\"#sidebar\")).toggle()')\n ul.sidebar-nav(data-coreui=\"navigation\" data-simplebar)\n li.nav-item\n a.nav-link(href='index.html')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-speedometer\")\n | Dashboard\n span.badge.badge-sm.bg-info.ms-auto NEW\n li.nav-title\n | Theme\n li.nav-item\n a.nav-link(href='colors.html')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-drop\")\n | Colors\n li.nav-item\n a.nav-link(href='typography.html')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-pencil\")\n | Typography\n li.nav-title\n | Components\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-puzzle\")\n | Base\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='base/accordion.html')\n span.nav-icon\n span.nav-icon-bullet\n | Accordion\n li.nav-item\n a.nav-link(href='base/breadcrumb.html')\n span.nav-icon\n span.nav-icon-bullet\n | Breadcrumb\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/components/calendar/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Calendar\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='base/cards.html')\n span.nav-icon\n span.nav-icon-bullet\n | Cards\n li.nav-item\n a.nav-link(href='base/carousel.html')\n span.nav-icon\n span.nav-icon-bullet\n | Carousel\n li.nav-item\n a.nav-link(href='base/collapse.html')\n span.nav-icon\n span.nav-icon-bullet\n | Collapse\n li.nav-item\n a.nav-link(href='base/list-group.html')\n span.nav-icon\n span.nav-icon-bullet\n | List group\n li.nav-item\n a.nav-link(href='base/navs-tabs.html')\n span.nav-icon\n span.nav-icon-bullet\n | Navs & Tabs\n li.nav-item\n a.nav-link(href='base/pagination.html')\n span.nav-icon\n span.nav-icon-bullet\n | Pagination\n li.nav-item\n a.nav-link(href='base/placeholders.html')\n span.nav-icon\n span.nav-icon-bullet\n | Placeholders\n li.nav-item\n a.nav-link(href='base/popovers.html')\n span.nav-icon\n span.nav-icon-bullet\n | Popovers\n li.nav-item\n a.nav-link(href='base/progress.html')\n span.nav-icon\n span.nav-icon-bullet\n | Progress\n li.nav-item\n a.nav-link(href='base/spinners.html')\n span.nav-icon\n span.nav-icon-bullet\n | Spinners\n li.nav-item\n a.nav-link(href='base/tables.html')\n span.nav-icon\n span.nav-icon-bullet\n | Tables\n li.nav-item\n a.nav-link(href='base/tooltips.html')\n span.nav-icon\n span.nav-icon-bullet\n | Tooltips\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-cursor\")\n | Buttons\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='buttons/buttons.html')\n span.nav-icon\n span.nav-icon-bullet\n | Buttons\n li.nav-item\n a.nav-link(href='buttons/button-group.html')\n span.nav-icon\n span.nav-icon-bullet\n | Buttons Group\n li.nav-item\n a.nav-link(href='buttons/dropdowns.html')\n span.nav-icon\n span.nav-icon-bullet\n | Dropdowns\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/components/loading-buttons/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Loading Buttons\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='charts.html')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie\")\n | Charts\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-notes\")\n | Forms\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/autocomplete/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Autocomplete\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='forms/checks-radios.html')\n span.nav-icon\n span.nav-icon-bullet\n | Checks and radios\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-picker/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Date Picker\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-range-picker/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Date Range Picker\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='forms/floating-labels.html')\n span.nav-icon\n span.nav-icon-bullet\n | Floating labels\n li.nav-item\n a.nav-link(href='forms/form-control.html')\n span.nav-icon\n span.nav-icon-bullet\n | Form Control\n li.nav-item\n a.nav-link(href='forms/input-group.html')\n span.nav-icon\n span.nav-icon-bullet\n | Input group\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/multi-select/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Multi Select\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='forms/range.html')\n span.nav-icon\n span.nav-icon-bullet\n | Range\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/range-slider/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Range Slider\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/rating/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Rating\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='forms/select.html')\n span.nav-icon\n span.nav-icon-bullet\n | Select\n li.nav-item\n a.nav-link(href='https://coreui.io/bootstrap/docs/forms/time-picker/' target='_blank')\n span.nav-icon\n span.nav-icon-bullet\n | Time Picker\n svg.icon.icon-sm.ms-2\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-external-link\")\n span.badge.badge-sm.bg-danger.ms-auto PRO\n li.nav-item\n a.nav-link(href='forms/layout.html')\n span.nav-icon\n span.nav-icon-bullet\n | Layout\n li.nav-item\n a.nav-link(href='forms/validation.html')\n span.nav-icon\n span.nav-icon-bullet\n | Validation\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-star\")\n | Icons\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='icons/coreui-icons-free.html')\n span.nav-icon\n span.nav-icon-bullet\n | CoreUI Icons\n span.badge.badge-sm.bg-success.ms-auto Free\n li.nav-item\n a.nav-link(href='icons/coreui-icons-brand.html')\n span.nav-icon\n span.nav-icon-bullet\n | CoreUI Icons - Brand\n li.nav-item\n a.nav-link(href='icons/coreui-icons-flag.html')\n span.nav-icon\n span.nav-icon-bullet\n | CoreUI Icons - Flag\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-bell\")\n | Notifications\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='notifications/alerts.html')\n span.nav-icon\n span.nav-icon-bullet\n | Alerts\n li.nav-item\n a.nav-link(href='notifications/badge.html')\n span.nav-icon\n span.nav-icon-bullet\n | Badge\n li.nav-item\n a.nav-link(href='notifications/modals.html')\n span.nav-icon\n span.nav-icon-bullet\n | Modals\n li.nav-item\n a.nav-link(href='notifications/toasts.html')\n span.nav-icon\n span.nav-icon-bullet\n | Toasts\n li.nav-item\n a.nav-link(href='widgets.html')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-calculator\")\n | Widgets\n span.badge.badge-sm.bg-info.ms-auto NEW\n li.nav-divider\n li.nav-title\n | Extras\n li.nav-group\n a.nav-link.nav-group-toggle(href='#')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-star\")\n | Pages\n ul.nav-group-items.compact\n li.nav-item\n a.nav-link(href='login.html' target=\"_top\")\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-account-logout\")\n | Login\n li.nav-item\n a.nav-link(href='register.html' target=\"_top\")\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-account-logout\")\n | Register\n li.nav-item\n a.nav-link(href='404.html' target=\"_top\")\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-bug\")\n | Error 404\n li.nav-item\n a.nav-link(href='500.html' target=\"_top\")\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-bug\")\n | Error 500\n li.nav-item.mt-auto\n a.nav-link(href='https://coreui.io/bootstrap/docs/templates/installation/' target='_blank')\n svg.nav-icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-description\")\n | Docs\n li.nav-item\n a.nav-link.text-primary.fw-semibold(href=\"https://coreui.io/product/bootstrap-dashboard-template/\" target=\"_top\")\n svg.nav-icon.text-primary\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-layers\")\n | Try CoreUI PRO\n .sidebar-footer.border-top.d-none.d-md-flex \n button.sidebar-toggler(type=\"button\" data-coreui-toggle=\"unfoldable\")\n" }, { "path": "src/pug/views/404.pug", "content": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-md-6\n .clearfix\n h1.float-start.display-3.me-4 404\n h4.pt-3 Oops! You're lost.\n p.text-body-secondary The page you are looking for was not found.\n .input-group\n span.input-group-text\n svg.icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass\")\n |\n input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')\n button.btn.btn-info(type='button') Search\n" }, { "path": "src/pug/views/500.pug", "content": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-md-6\n .clearfix\n h1.float-start.display-3.me-4 500\n h4.pt-3 Houston, we have a problem!\n p.text-body-secondary The page you are looking for is temporarily unavailable.\n .input-group\n span.input-group-text\n svg.icon\n use(xlink:href=\"node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass\")\n |\n input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')\n button.btn.btn-info(type='button') Search\n" }, { "path": "src/pug/views/base/accordion.pug", "content": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/accordion/')\n\nblock breadcrumb\n +breadcrumb(\n [\n { href: '#', label: 'Home'},\n { label: 'Components'},\n { label: 'Base'},\n 'Accordion'\n ],\n )\n\nblock view\n +docs-components('https://coreui.io/bootstrap/docs/components/accordion/')\n .row\n .col-12\n .card.mb-4\n .card-header\n strong Accordion\n .card-body\n p.text-body-secondary.small\n | Click the accordions below to expand/collapse the accordion content.\n +example('https://coreui.io/bootstrap/docs/components/accordion/#how-it-works')\n #accordionExample.accordion\n .accordion-item\n h2#headingOne.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseOne' aria-expanded='false' aria-controls='collapseOne')\n | Accordion Item #1\n #collapseOne.accordion-collapse.collapse(aria-labelledby='headingOne' data-coreui-parent='#accordionExample' style='')\n .accordion-body\n strong This is the first item's accordion body.\n | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the\n code .accordion-body\n | , though the transition does limit overflow.\n .accordion-item\n h2#headingTwo.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo')\n | Accordion Item #2\n #collapseTwo.accordion-collapse.collapse(aria-labelledby='headingTwo' data-coreui-parent='#accordionExample' style='')\n .accordion-body\n strong This is the second item's accordion body.\n | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the\n code .accordion-body\n | , though the transition does limit overflow.\n .accordion-item\n h2#headingThree.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree')\n | Accordion Item #3\n #collapseThree.accordion-collapse.collapse(aria-labelledby='headingThree' data-coreui-parent='#accordionExample' style='')\n .accordion-body\n strong This is the third item's accordion body.\n | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the\n code .accordion-body\n | , though the transition does limit overflow.\n .col-12\n .card.mb-4\n .card-header\n strong Accordion\n span.small.ms-1 Flush\n .card-body\n p.text-body-secondary.small\n | Add \n code .accordion-flush\n | to remove the default \n code background-color\n | , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.\n +example('https://coreui.io/bootstrap/docs/components/accordion/#flush')\n #accordionFlushExample.accordion.accordion-flush\n .accordion-item\n h2#flush-headingOne.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseOne' aria-expanded='false' aria-controls='flush-collapseOne')\n | Accordion Item #1\n #flush-collapseOne.accordion-collapse.collapse(aria-labelledby='flush-headingOne' data-coreui-parent='#accordionFlushExample')\n .accordion-body\n | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n .accordion-item\n h2#flush-headingTwo.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseTwo' aria-expanded='false' aria-controls='flush-collapseTwo')\n | Accordion Item #2\n #flush-collapseTwo.accordion-collapse.collapse(aria-labelledby='flush-headingTwo' data-coreui-parent='#accordionFlushExample')\n .accordion-body\n | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n .accordion-item\n h2#flush-headingThree.accordion-header\n button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseThree' aria-expanded='false' aria-controls='flush-collapseThree')\n | Accordion Item #3\n #flush-collapseThree.accordion-collapse.collapse(aria-labelledby='flush-headingThree' data-coreui-parent='#accordionFlushExample')\n .accordion-body\n | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n" }, { "path": "src/pug/views/base/breadcrumb.pug", "content": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/breadcrumb/')\n\nblock breadcrumb\n +breadcrumb(\n [\n { href: '#', label: 'Home'},\n { label: 'Components'},\n { label: 'Base'},\n 'Breadcrumb'\n ]\n )\n\nblock view\n +docs-components('https://coreui.io/bootstrap/docs/components/breadcrumb/')\n .row\n .col-lg-12\n .card.mb-4\n .card-header\n strong Breadcrumb\n .card-body\n p.text-body-secondary.small\n | The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through \n a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before') \n code ::before\n | and \n a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/content') \n code content\n | .\n +example('https://coreui.io/bootstrap/docs/components/breadcrumb/#example')\n nav(aria-label='breadcrumb', role='navigation')\n ol.breadcrumb\n li.breadcrumb-item.active(aria-current='page') Home\n nav(aria-label='breadcrumb', role='navigation')\n ol.breadcrumb\n li.breadcrumb-item\n a(href='#') Home\n li.breadcrumb-item.active(aria-current='page') Library\n nav(aria-label='breadcrumb', role='navigation')\n ol.breadcrumb\n li.breadcrumb-item\n a(href='#') Home\n li.breadcrumb-item\n a(href='#') Library\n li.breadcrumb-item.active(aria-current='page') Data\n nav.breadcrumb\n a.breadcrumb-item(href='#') Home\n a.breadcrumb-item(href='#') Library\n a.breadcrumb-item(href='#') Data\n span.breadcrumb-item.active Bootstrap\n // /.row\n" }, { "path": "src/pug/views/base/cards.pug", "content": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/card/')\n\nblock breadcrumb\n +breadcrumb(\n [\n { href: '#', label: 'Home'},\n { label: 'Components'},\n { label: 'Base'},\n 'Cards'\n ],\n )\n\nblock view\n +docs-components('https://coreui.io/bootstrap/docs/components/card/')\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Example\n .card-body\n p.text-body-secondary.small\n | Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no top, left, and right margins by default, so use \n a(href='https://coreui.io/bootstrap/docs/utilities/spacing/') spacing utilities\n | as needed. They have no fixed width to start, so they’ll fill the full width of its parent.\n p.text-body-secondary.small\n | Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various \n a(href='#sizing') sizing options\n | .\n +example('https://coreui.io/bootstrap/docs/components/card/#example')\n .card(style='width: 18rem;')\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Body\n .card-body\n p.text-body-secondary.small\n | The main block of a card is the \n code .card-body\n | . Use it whenever you need a padded section within a card.\n +example('https://coreui.io/bootstrap/docs/components/card/#body')\n .card\n .card-body\n | This is some text within a card body.\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Titles, text, and links\n .card-body\n p.text-body-secondary.small\n | Card titles are managed by adding \n code .card-title\n | to a \n code \n = ''\n | tag. Identically, links are attached and collected next to each other by adding \n code .card-link\n | to an \n code \n = ''\n | tag.\n p.text-body-secondary.small\n | Subtitles are managed by adding a \n code .card-subtitle\n | to a \n code \n = ''\n | tag. If the \n code .card-title\n | also, the \n code .card-subtitle\n | items are stored in a \n code .card-body\n | item, the card title, and subtitle are arranged rightly.\n +example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links')\n .card(style='width: 18rem;')\n .card-body\n h5.card-title Card title\n h6.card-subtitle.mb-2.text-body-secondary Card subtitle\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n a.card-link(href='#') Card link\n a.card-link(href='#') Another link\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Images\n .card-body\n p.text-body-secondary.small\n code .card-img-top\n | places a picture to the top of the card. With \n code .card-text\n | , text can be added to the card. Text within \n code .card-text\n | can additionally be styled with the regular HTML tags.\n +example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links')\n .card(style='width: 18rem;')\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 List groups\n .card-body\n p.text-body-secondary.small Create lists of content in a card with a flush list group.\n +example('https://coreui.io/bootstrap/docs/components/card/#list-groups')\n .row\n .col-lg-4\n .card\n ul.list-group.list-group-flush\n li.list-group-item An item\n li.list-group-item A second item\n li.list-group-item A third item\n .col-lg-4\n .card\n .card-header\n | Featured\n ul.list-group.list-group-flush\n li.list-group-item An item\n li.list-group-item A second item\n li.list-group-item A third item\n .col-lg-4\n .card\n ul.list-group.list-group-flush\n li.list-group-item An item\n li.list-group-item A second item\n li.list-group-item A third item\n .card-footer\n | Card footer\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Kitchen sink\n .card-body\n p.text-body-secondary.small\n | Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.\n +example('https://coreui.io/bootstrap/docs/components/card/#kitchen-sink')\n .card(style='width: 18rem;')\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n ul.list-group.list-group-flush\n li.list-group-item An item\n li.list-group-item A second item\n li.list-group-item A third item\n .card-body\n a.card-link(href='#') Card link\n a.card-link(href='#') Another link\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Header and footer\n .card-body\n p.text-body-secondary.small Add an optional header and/or footer within a card.\n +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')\n .card.mb-3\n .card-header\n | Featured\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n p.text-body-secondary.small\n | Card headers can be styled by adding \n code .card-header\n | to \n code \n = ''\n | elements.\n +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')\n .card.mb-3\n h5.card-header Featured\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')\n .card.mb-3\n .card-header\n | Quote\n .card-body\n blockquote.blockquote.mb-0\n p A well-known quote, contained in a blockquote element.\n footer.blockquote-footer\n | Someone famous in \n cite(title='Source Title') Source Title\n +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')\n .card.text-center\n .card-header\n | Featured\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card-footer.text-body-secondary\n | 2 days ago\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Sizing - Using grid markup\n .card-body\n p.text-body-secondary.small Using the grid, wrap cards in columns and rows as needed.\n +example('https://coreui.io/bootstrap/docs/components/card/#using-grid-markup')\n .row\n .col-sm-6\n .card\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .col-sm-6\n .card\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Sizing - Using utilities\n .card-body\n p.text-body-secondary.small\n | Use some of \n a(href='https://coreui.io/bootstrap/docs/utilities/sizing/') available sizing utilities\n | to rapidly set a card’s width.\n +example('https://coreui.io/bootstrap/docs/components/card/#using-utilities')\n .card.w-75.mb-3\n .card-body\n h5.card-title Card title\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Button\n .card.w-50\n .card-body\n h5.card-title Card title\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Button\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Sizing - Using custom CSS\n .card-body\n p.text-body-secondary.small Use custom CSS in your stylesheets or as inline styles to set a width.\n +example('https://coreui.io/bootstrap/docs/components/card/#using-custom-css')\n .card(style='width: 18rem;')\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Text alignment\n .card-body\n p.text-body-secondary.small\n | You can instantly change the text arrangement of any card—in its whole or specific parts—with \n a(href='https://coreui.io/bootstrap/docs/utilities/text/#text-alignment') text align classes\n | .\n +example('https://coreui.io/bootstrap/docs/components/card/#text-alignment')\n .card.mb-3(style='width: 18rem;')\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-3.text-center(style='width: 18rem;')\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-3.text-end(style='width: 18rem;')\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Navigation\n .card-body\n p.text-body-secondary.small\n | Add some navigation to a card’s header (or block) with Bootstrap’s \n a(href='https://coreui.io/bootstrap/docs/components/navs-tabs/') nav components\n | .\n +example('https://coreui.io/bootstrap/docs/components/card/#navigation')\n .card.text-center\n .card-header\n ul.nav.nav-tabs.card-header-tabs\n li.nav-item\n a.nav-link.active(aria-current='true' href='#') Active\n li.nav-item\n a.nav-link(href='#') Link\n li.nav-item\n a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n +example('https://coreui.io/bootstrap/docs/components/card/#navigation')\n .card.text-center\n .card-header\n ul.nav.nav-pills.card-header-pills\n li.nav-item\n a.nav-link.active(href='#') Active\n li.nav-item\n a.nav-link(href='#') Link\n li.nav-item\n a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled\n .card-body\n h5.card-title Special title treatment\n p.card-text With supporting text below as a natural lead-in to additional content.\n a.btn.btn-primary(href='#') Go somewhere\n\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Image caps\n .card-body\n p.text-body-secondary.small\n | Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.\n +example('https://coreui.io/bootstrap/docs/components/card/#image-caps')\n .row\n .col-md-6\n .card.mb-3\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n .col-md-6\n .card\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n img.card-img-bottom(src='assets/img/full.jpg' alt='')\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Image overlays\n .card-body\n p.text-body-secondary.small\n | Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.\n +example('https://coreui.io/bootstrap/docs/components/card/#image-overlays')\n .card.bg-dark.text-white\n img.card-img(src='assets/img/full.jpg' alt='')\n .card-img-overlay\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.card-text Last updated 3 mins ago\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Horizontal\n .card-body\n p.text-body-secondary.small\n | Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with \n code .g-0\n | and use \n code .col-md-*\n | classes to make the card horizontal at the \n code md\n | breakpoint. Further adjustments may be needed depending on your card content.\n +example('https://coreui.io/bootstrap/docs/components/card/#horizontal')\n .card\n .row.g-0\n .col-md-4\n img.card-img(src='assets/img/full.jpg' alt='')\n .col-md-8\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Card styles - Background and color\n .card-body\n p.text-body-secondary.small\n | Cards include various options for customizing their backgrounds, borders, and color.\n | Use \n a(href='https://coreui.io/bootstrap/docs/utilities/colors/') text color\n | and \n a(href='https://coreui.io/bootstrap/docs/utilities/background/') background utilities\n | to change the appearance of a card.\n +example('https://coreui.io/bootstrap/docs/components/card/#background-and-color')\n .row\n .col-xl-4\n .card.text-white.bg-primary.mb-3\n .card-header Header\n .card-body\n h5.card-title Primary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-secondary.mb-3\n .card-header Header\n .card-body\n h5.card-title Secondary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-success.mb-3\n .card-header Header\n .card-body\n h5.card-title Success card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-danger.mb-3\n .card-header Header\n .card-body\n h5.card-title Danger card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-warning.mb-3\n .card-header Header\n .card-body\n h5.card-title Warning card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-info.mb-3\n .card-header Header\n .card-body\n h5.card-title Info card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-dark.bg-light.mb-3\n .card-header Header\n .card-body\n h5.card-title Light card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.text-white.bg-dark.mb-3\n .card-header Header\n .card-body\n h5.card-title Dark card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Card styles - Border\n .card-body\n p.text-body-secondary.small\n | Use \n a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities\n | to change just the \n code border-color\n | of a card. Note that you can put \n code .text-{color}\n | classes on the parent \n code .card\n | or a subset of the card’s contents as shown below.\n +example('https://coreui.io/bootstrap/docs/components/card/#border')\n .row\n .col-xl-4\n .card.border-primary.mb-3\n .card-header Header\n .card-body.text-primary\n h5.card-title Primary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4 \n .card.border-secondary.mb-3\n .card-header Header\n .card-body.text-body-secondary\n h5.card-title Secondary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-success.mb-3\n .card-header Header\n .card-body.text-success\n h5.card-title Success card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4 \n .card.border-danger.mb-3\n .card-header Header\n .card-body.text-danger\n h5.card-title Danger card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-warning.mb-3\n .card-header Header\n .card-body.text-warning\n h5.card-title Warning card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-info.mb-3\n .card-header Header\n .card-body.text-info\n h5.card-title Info card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-light.mb-3\n .card-header Header\n .card-body\n h5.card-title Light card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-dark.mb-3\n .card-header Header\n .card-body.text-dark\n h5.card-title Dark card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Top border\n .card-body\n p.text-body-secondary.small\n | Use \n a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities\n | to change just the \n code border-top-color\n | of a card. Note that you can put \n code .text-{color}\n | classes on the parent \n code .card\n | or a subset of the card’s contents as shown below.\n +example('https://coreui.io/bootstrap/docs/components/card/#top-border')\n .row\n .col-xl-4\n .card.border-top-primary.border-top-3.mb-3\n .card-header Header\n .card-body.text-primary\n h5.card-title Primary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-secondary.border-top-3.mb-3\n .card-header Header\n .card-body.text-body-secondary\n h5.card-title Secondary card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-success.border-top-3.mb-3\n .card-header Header\n .card-body.text-success\n h5.card-title Success card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-danger.border-top-3.mb-3\n .card-header Header\n .card-body.text-danger\n h5.card-title Danger card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-warning.border-top-3.mb-3\n .card-header Header\n .card-body.text-warning\n h5.card-title Warning card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-info.border-top-3.mb-3\n .card-header Header\n .card-body.text-info\n h5.card-title Info card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-light.border-top-3.mb-3\n .card-header Header\n .card-body\n h5.card-title Light card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .col-xl-4\n .card.border-top-dark.border-top-3.mb-3\n .card-header Header\n .card-body.text-dark\n h5.card-title Dark card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Mixins utilities\n .card-body\n p.text-body-secondary.small\n | You are able to adjust the borders on the card elements as needed, and even exclude their \n code background-color\n | with \n code .bg-transparent\n | .\n +example('https://coreui.io/bootstrap/docs/components/card/#mixins-utilities')\n .card.border-success.mb-3(style='max-width: 18rem;')\n .card-header.bg-transparent.border-success Header\n .card-body.text-success\n h5.card-title Success card title\n p.card-text\n | Some quick example text to build on the card title and make up the bulk of the card's content.\n .card-footer.bg-transparent.border-success Footer\n\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Card groups\n .card-body\n p.text-body-secondary.small\n | Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use \n code display: flex;\n | to become attached with uniform dimensions starting at the \n code sm\n | breakpoint.\n +example()\n .card-group\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text This card has supporting text below as a natural lead-in to additional content.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n p.card-text\n small.text-body-secondary Last updated 3 mins ago\n p.text-body-secondary.small When using card groups with footers, their content will automatically line up.\n +example('https://coreui.io/bootstrap/docs/components/card/#card-groups')\n .card-group\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text This card has supporting text below as a natural lead-in to additional content.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n .card.mb-4\n .card-header\n strong Card\n span.small.ms-1 Grid cards\n .card-body\n p.text-body-secondary.small\n | Use the Bootstrap grid system and its \n a(href='https://coreui.io/bootstrap/docs/layout/grid/#row-columns')\n code .row-cols\n | classes\n | to control how many grid columns (wrapped around your cards) you show per row. For example, here’s \n code .row-cols-1\n | laying out the cards on one column, and \n code .row-cols-md-2\n | splitting four cards to equal width across multiple rows, from the medium breakpoint up.\n +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')\n .row.row-cols-1.row-cols-md-2.g-4\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.text-body-secondary.small\n | Change it to \n code .row-cols-3\n | and you’ll see the fourth card wrap.\n +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')\n .row.row-cols-1.row-cols-md-3.g-4\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content.\n .col\n .card\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.text-body-secondary.small\n | When you need equal height, add \n code .h-100\n | to the cards. If you want equal heights by default, you can set \n code $card-height: 100%\n | in Sass.\n +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')\n .row.row-cols-1.row-cols-md-3.g-4\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text This is a short card.\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content.\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n p.text-body-secondary.small Just like with card groups, card footers will automatically line up.\n +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')\n .row.row-cols-1.row-cols-md-3.g-4\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text This card has supporting text below as a natural lead-in to additional content.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n .col\n .card.h-100\n img.card-img-top(src='assets/img/full.jpg' alt='')\n .card-body\n h5.card-title Card title\n p.card-text\n | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n .card-footer\n small.text-body-secondary Last updated 3 mins ago\n" }, { "path": "src/pug/views/base/carousel.pug", "content": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/carousel/')\n\nblock breadcrumb\n +breadcrumb(\n [\n { href: '#', label: 'Home'},\n { label: 'Components'},\n { label: 'Base'},\n 'Carousel'\n ],\n )\n\nblock view\n +docs-components('https://coreui.io/bootstrap/docs/components/carousel/')\n .card.mb-4\n .card-header\n strong Carousel\n span.small.ms-1 Slides only\n .card-body\n p.text-body-secondary.small\n | Here’s a carousel with slides. Note the appearance of the \n code .d-block\n | also, \n code .w-100\n | on carousel images to override browser default image alignment.\n +example('https://coreui.io/bootstrap/docs/components/carousel/#slides-only')\n #carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel')\n .carousel-inner\n .carousel-item\n svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')\n title Placeholder\n rect(width='100%' height='100%' fill='#777')\n text(x='50%' y='50%' fill='#555' dy='.3em') First slide\n .carousel-item\n svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')\n title Placeholder\n rect(width='100%' height='100%' fill='#666')\n text(x='50%' y='50%' fill='#444' dy='.3em') Second slide\n .carousel-item.active\n svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')\n title Placeholder\n rect(width='100%' height='100%' fill='#555')\n text(x='50%' y='50%' fill='#333' dy='.3em') Third slide\n .card.mb-4 \n .card-header\n strong Carousel\n span.small.ms-1 With controls\n .card-body\n p.text-body-secondary.small\n | Adding in the previous and next controls. We recommend using \n code \n = '