Release 1.0.0-beta20

Co-authored-by: Matt Smith <quaffapint@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>

.all-contributorsrc

@@ -0,0 +1,89 @@
+{
+  "projectName": "tabler",
+  "projectOwner": "tabler",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "CONTRIBUTORS.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "codecalm",
+      "name": "Paweł Kuna",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1282324?v=4",
+      "profile": "https://tabler.io/",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "martynaaj",
+      "name": "Martyna",
+      "avatar_url": "https://avatars.githubusercontent.com/u/60158888?v=4",
+      "profile": "https://github.com/martynaaj",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "deralaxo",
+      "name": "Dawid Harat",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40028795?v=4",
+      "profile": "https://github.com/deralaxo",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "rjd22",
+      "name": "Robert-Jan de Dreu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/160743?v=4",
+      "profile": "https://codersopinion.com/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "FreexD",
+      "name": "Michał Wolny",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7117869?v=4",
+      "profile": "https://github.com/FreexD",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "wangkanai",
+      "name": "Sarin Na Wangkanai",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10666633?v=4",
+      "profile": "https://www.wangkanai.com/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "WinterSilence",
+      "name": "Anton",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3521094?v=4",
+      "profile": "https://ensostudio.ru/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "dheineman",
+      "name": "Dave Heineman",
+      "avatar_url": "https://avatars.githubusercontent.com/u/516028?v=4",
+      "profile": "https://github.com/dheineman",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "linkToUsage": false
+}

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/beige-hats-prove.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated link to icons documentation

.changeset/clean-carrots-sort.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add new `Tag` component

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/curvy-fishes-lie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add customizable Star Ratings component using `star-rating.js` library

.changeset/dull-kiwis-notice.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix text color in dark version of navbar

.changeset/eight-pumas-fry.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.21 with 18 new icons added

.changeset/flags.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add `flags.html` page with list of all flags

.changeset/fluffy-insects-lay.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Adding Two-Step Verification Pages

.changeset/gorgeous-windows-study.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility

.changeset/healthy-bikes-cry.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+`Dockerfile` fix 

.changeset/heavy-chicken-cover.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.20 with 37 new icons added

.changeset/hip-jobs-double.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adding `alerts.html` page with example of alerts.

.changeset/itchy-bottles-cheat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unify size of avatar, flag and payment components

.changeset/khaki-wasps-provide.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Bootstrap to v5.3.0

.changeset/late-zoos-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `rgba` color values in `_variables.scss`

.changeset/odd-terms-tap.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix form controls bugs in dark mode

.changeset/olive-cars-admire.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Change primary color value to new Tabler branding

.changeset/orange-donuts-cough.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unified Box Shadows with Bootstrap Compatibility

.changeset/rare-pumpkins-pull.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Unify dark mode with latest Bootstrap API and improve dark mode elements

.changeset/red-vans-doubt.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.22 with 18 new icons added

.changeset/rich-dingos-promise.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add All Contributions package to project for easy contribution tracking

.changeset/sharp-colts-grab.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Resolved light dropdown issue on dark theme

.changeset/shiny-dolls-shop.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+New Chat component 

.changeset/shy-rockets-deliver.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.19 with 18 new icons added

.changeset/silver-drinks-yell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adjusting form element sizes for enhanced mobile devices compatibility

.changeset/slow-buses-breathe.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Switch from `npm` to `pnpm` for faster package installation

.changeset/soft-mangos-tie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add variable to configure `avatar-list` spacing

.changeset/sour-teachers-collect.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update required Node.js version to 18 and add `.nvmrc` file

.changeset/spotty-avocados-doubt.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix table default background color

.changeset/stupid-dingos-train.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Avoid SCSS color dependency on `:focus`

.changeset/tasty-boats-work.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.18 with 18 new icons added

.changeset/thick-apples-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Prettier to project for consistent code formatting

.changeset/thick-poems-battle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.25 with 48 new icons added

.changeset/thin-eagles-mix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add new color picker component using `coloris.js` library

.changeset/thirty-tomatoes-end.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix responsiveness issue in Settings menu

.changeset/twenty-tables-judge.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add new Filled section to Icons page

.changeset/unlucky-eels-vanish.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update `bootstrap` to v5.3.1

.changeset/violet-moles-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update Tabler Icons to version 2.23 with 18 new icons added

.changeset/wet-games-float.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add support for changeset tool for more efficient and organized code changes

.dependabot/config.yml

@@ -1,11 +0,0 @@
-# https://dependabot.com/docs/config-file/
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "weekly"
-    default_reviewers:
-      - "codecalm"
-    default_labels:
-      - "dependencies"
-    version_requirement_updates: "increase_versions"

.dockerignore

@@ -0,0 +1,3 @@
+demo/
+.git/
+.github/

.editorconfig

@@ -1,23 +1,14 @@
 [*]
 charset=utf-8
 end_of_line=lf
-insert_final_newline=true
+insert_final_newline=false
+indent_style=tab
+tab_width=3
+max_line_length=off
+
+[*.{rb,yml,scss,json}]
 indent_style=space
 indent_size=2
 
-[*.svg]
-indent_style=tab
-tab_width=3
-
-[*.html]
-indent_style=tab
-indent_size=3
-insert_final_newline=false
-
-[*.md]
-indent_style=tab
-tab_width=3
-
 [*.js.map]
-indent_style=tab
 indent_size=3

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,10 @@
+# Tabler UI Community Conduct Guideline
+
+The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
+
+This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tabler project. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
+
+- Participants will be tolerant of opposing views.
+- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behaviour which can be reasonably considered harassment will not be tolerated.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+
+A clear and concise description of what the bug is.
+
+**Device**
+
+ - Browser [e.g. Chrome ver.22, Safari ver.10]
+ - OS: [e.g. Windows 10]
+ - Screen size [e.g. 800x600]
+
+**To reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Screenshots**
+
+If applicable, add screenshots to help explain this problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for Tabler
+title: "[FEATURE] "
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/add_to_project.yml

@@ -0,0 +1,19 @@
+name: Add new issues and pr to project
+
+on:
+  pull_request:
+    types:
+      - opened
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add new issue and pr to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.5.0
+        with:
+          project-url: https://github.com/orgs/tabler/projects/9/views/1
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/bundlewatch.yml

@@ -0,0 +1,48 @@
+name: Bundlewatch
+
+on:
+  pull_request: null
+  push:
+    branches:
+      - main
+      - dev
+
+env:
+  FORCE_COLOR: 2
+  NODE: 18
+
+jobs:
+  bundlewatch:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "${{ env.NODE }}"
+     
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Set up Bundler
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - name: Install pnpm dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Run build
+        run: pnpm run build
+
+      - name: Run bundlewatch
+        run: pnpm run bundlewatch
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
+          CI_BRANCH_BASE: dev

.github/workflows/calibreapp-image-actions.yml

@@ -0,0 +1,26 @@
+name: Compress Images
+
+on:
+  pull_request:
+    paths:
+      - '**.jpg'
+      - '**.jpeg'
+      - '**.png'
+      - '**.webp'
+
+jobs:
+  build:
+    # Only run on Pull Requests within the same repository, and not from forks.
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    name: calibreapp/image-actions
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Compress Images
+        uses: calibreapp/image-actions@main
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/close_inactive.yml

@@ -0,0 +1,26 @@
+name: Close inactive issues and pr
+
+on:
+  schedule:
+    - cron: "00 11 * * *"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-issue-stale: 360
+          days-before-issue-close: 14
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 360 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-pr-stale: 360
+          days-before-pr-close: 14
+          stale-pr-label: "stale"
+          stale-pr-message: "This pr is stale because it has been open for 360 days with no activity."
+          close-pr-message: "This pr was closed because it has been inactive for 14 days since being marked as stale."    

.github/workflows/lockfiles.yaml

@@ -0,0 +1,25 @@
+name: Changed lock files
+on:
+  pull_request: null
+  push:
+    branches:
+      - main
+      - dev
+
+permissions:
+  pull-requests: read
+
+jobs:
+  lockfiles:
+    runs-on: ubuntu-latest
+    name: Verify lock file integrity
+    steps:
+      - name: Clone Tabler
+        uses: actions/checkout@v2
+
+      - name: Prevent lock file change
+        uses: xalvarez/prevent-file-change-action@v1
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          pattern: Gemfile.lock|pnpm-lock.json
+          trustedAuthors: codecalm, dependabot

.github/workflows/release.yml

@@ -0,0 +1,45 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - dev
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,44 @@
+name: Test build
+
+on:
+  pull_request:
+    types: [ opened, reopened ]
+
+env:
+  NODE: 18
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: pnpm
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - run: ruby --version
+      - run: node --version
+
+      - name: Install pnpm dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build

.gitignore

@@ -1,15 +1,16 @@
 node_modules/
-/package-lock.json
 .idea/
 /db.json
 .jekyll-metadata
 .jekyll-cache
-tmp/
+/tmp/
+/.tmp/
+/tmp-dist/
 /yarn.lock
 .DS_Store
-/Gemfile.lock
 /_site/
 /.cache/
+.sass-cache/
 
 .vscode/
 
@@ -19,3 +20,14 @@ tmp/
 /resources/
 /svg-tmp/
 /components/
+/percy.sh
+/src/pages/playground.html
+/src/pages/playground-*.html
+/src/pages/features.html
+
+.pnp.loader.mjs
+.pnp.cjs
+.yarn
+.next
+.vercel
+package-lock.json

.gitpod.yml

@@ -0,0 +1,3 @@
+tasks:
+  - init: pnpm install && pnpm run build
+    command: pnpm run start

.nvmrc

@@ -0,0 +1 @@
+18

.percy.yml

@@ -0,0 +1,3 @@
+version: 1
+snapshot:
+  widths: [1440]

.prettierignore

@@ -0,0 +1,5 @@
+dist
+.tmp
+.vscode
+.cache
+node_modules

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"bracketSpacing": true,
+	"jsxSingleQuote": false,
+	"printWidth": 240,
+	"proseWrap": "always",
+	"semi": false,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "all"
+}

CHANGELOG.md

@@ -0,0 +1,317 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+
+## `1.0.0-beta20` - 2023-08-24
+
+- Update `bootstrap` to v5.3.1
+- Add new `Chat` component
+- Add new `Tag` component
+- Add customizable Star Ratings component using `star-rating.js` library
+- Add new color picker component using `coloris.js` library
+- Add `alerts.html` page with example of alerts.
+- Add `flags.html` page with list of all flags
+- Add Two-Step Verification Pages
+- Add variable to configure `avatar-list` spacing
+- Unify dark mode with latest Bootstrap API and improve dark mode elements
+- Unify Box Shadows with Bootstrap Compatibility
+- Avoid SCSS color dependency on `:focus`
+- Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility
+- Fix text color in dark version of navbar
+- Adjusting form element sizes for enhanced mobile devices compatibility
+- Resolved light dropdown issue on dark theme
+- Update Tabler Icons to version 2.32 with 48 new icons added
+- Fix table default background color
+- Fix responsiveness issue in Settings menu
+- Update required Node.js version to 18 and add `.nvmrc` file
+- Add support for changeset tool for more efficient and organized code changes
+- `Dockerfile` fix
+- Switch from `npm` to `pnpm` for faster package installation
+
+
+## `1.0.0-beta19` - 2023-05-15
+
+- Add customizable Star Ratings component using `star-rating.js` library (#1571)
+- Add new "Filled" section to Icons page (#1574)
+- Fix form controls bugs in dark mode (#1573)
+- Fix text color in dark version of navbar (#1569)
+- Changelog update
+
+
+## `1.0.0-beta18` - 2023-05-14
+
+- new page: Cookie banner
+- Unify dark mode with latest Bootstrap API and improve dark mode elements (#1561)
+- Update Tabler Icons to version 2.18 with 18 new icons added (#1560)
+- Switch from `npm` to `pnpm` for faster package installation (#1559)
+- Add Prettier to project for consistent code formatting (#1558)
+- Update required Node.js version to 18 and add `.nvmrc` file (#1555)
+- Add All Contributions package to project for easy contribution tracking (#1556)
+- Add support for changeset tool for more efficient and organized code changes (#1553)
+- Fix bug where `border-1`, `border-2`, etc don't work (#1526)
+- Fix indeterminate input background color (#1536)
+- Update Bootstrap to `5.3.0-alpha3` (#1543)
+- `tom-select` dark mode styling fixes
+- Advanced udage of `tom-select` (#1480)
+- Fix Dropdown menu in rtl mode (#801)
+- Fix `tom-select` dropdown will be shaded in table-responsive (#1409)
+- Remove overflow scroll from body
+- Fix avatars overlap transparently (#1464)
+- Fix TinyMCE dropdown icon list transparent (#1426)
+- Dark mode lite colors improvement
+- Fix non full width selects (#1392)
+
+
+## `1.0.0-beta17` - 2023-01-28
+
+- update `bootstrap` to v5.3.0
+- update icons to v2.1.2
+- add 72 new brands, browsers logos update
+- new `Trial ended` page
+- new `Page loader` page
+- new `Profile` page
+- headings fix
+- dropdown background color fix
+- fix rgba conversion bug
+- fix autofill text color, not matching in dark mode
+- update license
+- header html5 tags
+- add input with appended `<kbd>`
+- `bootstrap` import fix
+- font improvements
+- change `$body-color` to CSS variable
+- scrollbars improvements
+- move `@tabler/icons` to `dev-dependencies`
+- fix #1370: avatar stacked list is not stacked anymore
+
+
+## `1.0.0-beta16` - 2022-11-12
+
+- new `Photogrid` page
+- `Steps` component improvements
+- fix #1348: Make job listing responsive for smaller devices
+- fix #1357: buttons group not active
+- fix #1352: fix deprecation warning
+- fix #1180: number input with `form-control-sm` looks weird
+- fix #1328: color input should show different color for inner check symbol on white ellipse
+- fix #1355 - missing font sizes
+- update icons to v1.111.0
+- homepage navbar fix
+- fix #1262 - `.bg-opacity-xx` class is not functioning properly
+
+
+## `1.0.0-beta15` - 2022-11-01
+
+- new `badges` page
+- `<kbd>` styling
+- update icons to v1.109.0
+- `tom-select` border fix
+- exclude `playgrounds` from build
+- update jekyll to v4.3.1
+- fix: facebook color update
+- navbar aria atributes fixes
+- fix #808 - `navbar-menu` and `sidebar-menu` has the same `id`
+- fix #1335 - missing color variables usage in `alert` and `btn-ghost-*`
+- move border style to CSS variables
+- add missing forms
+- `btn-actions` fixes
+- replace `$text-muted` to css variable
+
+
+## `1.0.0-beta14` - 2022-10-21
+
+- fix active items in dark mode
+- update Jekyll to newest version
+
+
+## `1.0.0-beta13` - 2022-10-18
+
+- update Bootstrap to 5.2.1, update dependencies
+- new `tracking` component
+- new radio button version of `form-imagecheck`
+- update icons to v1.105.0
+- dark mode improvements
+- corrects the spelling of New Zealand (#1318)
+- remove `$border-color-dark`
+- fix #1301 - code snippets in docs look bad in dark mode
+- fix #1305 - different default link color for dark mode
+- fix popover background in dark mode
+- fix button default border color
+- fix `form-imagecheck` bg in dark mode
+- navbar logo fix
+- move card ribbons config to variables
+- navbar border fix
+- dark mode active fix
+- using globalThis instead of window (#1315)
+- fix #1210 - lastmod not generated for pages in `sitemap.xml`
+- fix card border in dark mode
+- fix #895 - background color overwrites background image
+- fix #1302 - wrong card header in dark mode
+- fix #1303 - wrong color when hovering over `selectgroup` in dark mode
+- fix #1308 - bad coloring in table in dark mode
+- fix #1273 - datepicker background color broken
+- fix `$prefix` hard coded `layout/_dark.scss`
+- fix #1275 - remove last border-right on progress bar
+- fix #1261 - broken offcanvas bg
+
+
+## `1.0.0-beta12` - 2022-09-19
+
+- new "Job listing" page
+- new "Sign in with cover" page
+- new "Logs" page
+- new `progressbg` component
+- add a lot of CSS variables
+- add Dockerfile with alpine base
+- add icon pulse/tada/rotate animations
+- use `:host` in selectors to support Web Components
+- use dark table variant colors in dark mode (#1200)
+- update Tabler Icons to v1.96
+- change `space-y` component
+- headings, shadows and borders unify
+- toggle TinyMCE dark mode and skin based on the set Tabler theme
+- fix `card-footer` background
+- fix headers weight
+- fix transparent hover background in pagination
+- fix dark mode card text color
+- fix `--#{$prefix}card-bg` is undefined
+- fix global variable for `.card` and `.btn`
+- fix code sample in the customize tabler docs
+- fix form elements demo page radio buttons
+- replace `gulp-minify` with `gulp-terser`
+
+
+## `1.0.0-beta11` - 2022-07-05
+
+- new `Dropzone` component
+- new `Lightbox` component
+- new `TinyMCS` component
+- new `Inline Player` component
+- new `Pricing table` component
+- new `Datagrid` component
+- new optgroup form examples
+- new settings page
+- update Tabler Icons to v1.78
+- added popover docs page
+- fix: #1125 incorrect chart display in the mobile version
+- update Bootstrap to 5.2.0
+
+
+## `1.0.0-beta10` - 2022-04-29
+
+- new `datatable` component
+- update Tabler Icons to v1.67
+- fix: #1024 - fix Tom-select in dark mode
+- new carousel indicators: dots, vertical, thumbs (#1101)
+- replace !important modifier with more specific selectors (#1100)
+- new `FAQ` page
+
+
+## `1.0.0-beta9` - 2022-02-26
+
+- fix: #1061 - list group item colors in light and dark modes
+- new `tasks` dashboard
+- fix: #1059 - upload button in form element in dark view has problem
+- fix: #1052 - card background icon is practically invisible
+- remove Inter font and use default font system stack
+- fix: #1018 - vector map not working
+- fix: #1035 - wrong background color of hovered list group items in dark mode
+- dependencies update
+- add `font-display: swap;` to improve font loading
+- new `Boxed` layout
+
+
+## `1.0.0-beta8` - 2022-02-05
+
+- update dependencies
+- new vector maps demos
+- fixes update map on resize
+- docs improvement
+- replace `badge` with `status-dot` in `navbar-notifications.html`
+- map tooltip fixes
+
+
+## `1.0.0-beta7` - 2022-02-05
+
+- fix: #1019 - project-overview.html link not working
+- fix: #1010 - card with bottom tabs has incorrect border radius
+- uptime monitor mobile fixes
+- navbar dark button fix
+- `tabler-icons` link
+- autoloading webfonts
+- cards fixes, new cards demos
+- ruby dependencies update
+- RTL stylesheet fixes
+- new card action demos
+
+
+## `1.0.0-beta6` - 2022-01-18
+
+- pricing cards fix
+- fix bug `fw-...`, `.fs-...` is missed (#987)
+- avatar class fix
+- fix bug #903 `litepicker` with date range not having correct border
+- page wrapper fix
+- fix #900 `is-invalid-lite` class is not working under `was-validated` form class
+- update `@tabler/icons` to version 1.48
+- fix #960 - Badges not honoring font sizes
+- fix #959 - `node-sass` does not properly compile nested media queries
+- update package dependencies to newest version
+
+
+## `1.0.0-beta5` - 2021-12-07
+
+**Tabler has finally lived to see dark mode! 🌝🌚**
+
+- **Dark mode enabled!**
+- add more cursors (#947)
+- fix #892 - media queries need to be nested when negating
+- update `@tabler/icons` to newest version
+- move optional dependencies to peerDependencies (#924)
+- move deployment to Github Actions (#934)
+- table border fixes
+- antialiased fix
+- update `@tabler/icons` to version 1.42
+- change default font to 'Inter'
+- colors unify
+- add `tom-select` and remove `choices.js`
+
+
+## `1.0.0-beta4` - 2021-10-24
+
+- upgrade required node.js version to 14
+- upgrade Bootstrap to 5.1
+- upgrade dependencies
+- fix #775 - litepicker not initializing
+- fix `nouislider` import in dev
+
+
+## `1.0.0-beta3` - 2021-05-08
+
+- upgrade Bootstrap to 5.0
+- upgrade dependencies
+- change `$border-radius-pill` variable
+- badge vertical align fix
+
+
+## `1.0.0-beta2` - 2021-03-29
+
+- update dependencies
+- `li` marker fix
+- page wrapper, nav fixes
+- scripts optimize, remove `capture_once`
+- `page-body` fixes
+- layout navbar fix
+- typography fix
+- ribbon fix
+- charts label fixes
+- charts docs
+
+
+## `1.0.0-beta` - 2021-02-17
+
+**Initial beta release of Tabler v1.0! Lots more coming soon though 😁**
+
+- update Bootstrap to 5.0.0-beta2
+- update other dependencies.

CONTRIBUTORS.md

@@ -0,0 +1,28 @@
+## Contributors
+
+Thanks goes to these wonderful people
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://tabler.io/"><img src="https://avatars.githubusercontent.com/u/1282324?v=4?s=100" width="100px;" alt="Paweł Kuna"/><br /><sub><b>Paweł Kuna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Code">💻</a> <a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/martynaaj"><img src="https://avatars.githubusercontent.com/u/60158888?v=4?s=100" width="100px;" alt="Martyna"/><br /><sub><b>Martyna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=martynaaj" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/deralaxo"><img src="https://avatars.githubusercontent.com/u/40028795?v=4?s=100" width="100px;" alt="Dawid Harat"/><br /><sub><b>Dawid Harat</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=deralaxo" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://codersopinion.com/"><img src="https://avatars.githubusercontent.com/u/160743?v=4?s=100" width="100px;" alt="Robert-Jan de Dreu"/><br /><sub><b>Robert-Jan de Dreu</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=rjd22" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/FreexD"><img src="https://avatars.githubusercontent.com/u/7117869?v=4?s=100" width="100px;" alt="Michał Wolny"/><br /><sub><b>Michał Wolny</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=FreexD" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.wangkanai.com/"><img src="https://avatars.githubusercontent.com/u/10666633?v=4?s=100" width="100px;" alt="Sarin Na Wangkanai"/><br /><sub><b>Sarin Na Wangkanai</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=wangkanai" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://ensostudio.ru/"><img src="https://avatars.githubusercontent.com/u/3521094?v=4?s=100" width="100px;" alt="Anton"/><br /><sub><b>Anton</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=WinterSilence" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/dheineman"><img src="https://avatars.githubusercontent.com/u/516028?v=4?s=100" width="100px;" alt="Dave Heineman"/><br /><sub><b>Dave Heineman</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=dheineman" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->

Dockerfile

@@ -0,0 +1,23 @@
+FROM ruby:2.7-alpine
+
+WORKDIR /app
+ADD _config.yml /app/
+ADD _config_prod.yml /app/
+ADD Gemfile /app/
+ADD Gemfile.lock /app/
+ADD package.json /app/
+ADD pnpm-lock.yaml /app/
+ADD gulpfile.js /app/
+
+RUN apk add --virtual build-dependencies build-base
+RUN apk add npm --repository=http://dl-cdn.alpinelinux.org/alpine/edge/community/
+RUN npm i -g pnpm
+RUN pnpm install
+RUN bundle config --global silence_root_warning 1 && bundler install --verbose
+
+# website
+EXPOSE 3000
+# website management (browser auto reload)
+EXPOSE 3001
+# run tabler
+ENTRYPOINT [ "pnpm", "run", "start-plugins" ]

Gemfile

@@ -1,13 +1,14 @@
 source "https://rubygems.org"
 
-gem "jekyll"
+gem "jekyll", "4.3.1"
 
 group :jekyll_plugins do
-  gem "jekyll-random"
-  gem "jekyll-tidy"
-  gem "jekyll-timeago"
-  gem 'jekyll-redirect-from'
-  gem 'jekyll-include-cache'
+	gem "jekyll-random"
+	gem "jekyll-tidy"
+	gem "jekyll-timeago"
+	gem 'jekyll-redirect-from'
 end
 
 gem 'wdm', '>= 0.1.1' if Gem.win_platform?
+
+

Gemfile.lock

@@ -0,0 +1,86 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.4.2)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-random (0.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-timeago (0.14.0)
+      mini_i18n (>= 0.8.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_i18n (0.8.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.0)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.30.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.3.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 4.3.1)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+
+BUNDLED WITH
+   2.1.4

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2019 The Tabler Authors
+Copyright (c) 2018-2023 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,69 +1,178 @@
-# Tabler
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
+A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-Premium and Open Source dashboard template with responsive and high-quality UI.
+<p align="center">
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
+<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
+<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/actions/workflows/test.yml" target="__blank"><img alt="Test build" src="https://github.com/tabler/tabler/actions/workflows/test.yml/badge.svg"></a>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
-
-<br><br><br>
-
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</p>
 
 
-<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
+## 🔎 Preview
 
-![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/img/tabler-preview.png)
+Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me a demo</a>
 
-## Status
+<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
 
-<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
 
-## Features
+## 🚀 Features
 
-We created this admin panel for everyone who wants to create any templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 
-* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
-* **Cross Browser:** Our theme works perfectly with Latest Chrome, Firefox+, Latest Safari, Opera, Edge and mobile browsers. We work hard to continuously support them.
-* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtle CSS3 animations so you will get anyone’s attention.
-* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3C valid.
-* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom to choose and combine. All components can take variation in color and styling that can easily be modified using Sass. The sky is the limit!
+* **Responsive:** With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
+* **HTML5 & CSS3:** We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
+* **Clean Code:** We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
+* **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
-## Setup environment
+## 📖 Documentation
 
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow these steps:
+Documentation is available as a part of Tabler preview: https://tabler.io/docs/
+
+## 🪴 Project Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/61d1db34446967b0848af68198a392067e0f5870.svg "Repobeats analytics image")
+
+## 💕 Sponsor Tabler
+
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
+
+
+### Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. [Become a sponsor!](https://opencollective.com/tabler#sponsor)
+
+<a href="https://opencollective.com/tabler/tiers/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/0/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/1/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/2/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/3/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/4/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/5/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/6/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/7/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/8/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
+
+
+## 📦 Setup environment
+
+To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/), recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
+2. Navigate to the root `/tabler` directory and run `pnpm install` to install our local dependencies listed in `package.json`.
+3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
+4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
+
+**OSX users**:
+
+1. NPM ```pnpm install```
+2. install Ruby (2.5.* recommended)
+	```brew install ruby @2.5```
+3. install bundler
+	```gem install bundler```
+4. install
+	```bundle install```
+- if bundler get any errors try
+```
+sudo rm -rf /Library/Developer/CommandLineTools
+sudo xcode-select --install
+```
+5. Run NPM
+	```npm run start```
+
 
 **Windows users**:
-1. [Install Git](https://git-scm.com/download/win) in `C:\\Program Files\\git\\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/), recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
+
+1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
+2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.7.6](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.7.6-1/rubyinstaller-devkit-2.7.6-1-x64.exe).
 3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
 
-When completed, you'll be able to run the various commands provided from the command line.
+Once you complete the setup, you'll be able to run the various commands provided from the command line.
+
 
 ## Build locally
 
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/pages` directory will build application and refresh the page.
+You need to have `pnpm` and `bundler` installed.
+
+1. From the root `/tabler` directory, run installation in the command line:
+  - `pnpm install` 
+  - `bundler install` 
+2. Then execute `pnpm run start-plugins` to start up the application stack.
+3. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
+4. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
-Run `npm run build` for reforms a one off build application without refresh.
+Run `pnpm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
+## Installation
+
+Tabler is distributed via npm.
+
+```sh
+npm install --save @tabler/core
+```
+
+## Running with Docker
+
+If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
+This Dockerfile is provided as an example to spin-up a container running Tabler.
+
+Example of how to use this image:
+
+1. Build the tabler image : `docker build -t tabler .`
+2. Run the tabler image while mounting the `src` directory as well as the `_config.yml` file into the container.
+
+Don't forget to expose the port 3000 so you can browse the website locally.
+You can also expose the port 3001 to have access to BrowserSync
+
+```sh
+docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler
+```
+
+Now open your browser to [http://localhost:3000](http://localhost:3000). Edit anything in the `src/` folder and watch your browser refresh the page after it has been rebuilt.
+
+
+### CDN support
+
+All files included in `@tabler/core` npm package are available over a CDN.
+
+#### Javascript
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
+```
+
+#### Styles
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
+```
+
 ## Feature requests
 
 https://tabler.canny.io/feature-requests
 
+
 ## Bugs and feature requests
 
-Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
+Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
 
-## Creators
+
+## 🤓 Creators
 
 **Paweł Kuna**
 
@@ -71,33 +180,38 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 - <https://github.com/codecalm>
 - <https://codecalm.net>
 
-## Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
+## 👨‍🚀 Contributors
 
-## Backers
+This project exists thanks to all the people who contribute.
 
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tabler#backer)]
+<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />
 
-<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/backers.svg?width=890"></a>
+## 🌸 Backers
 
+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/tabler#backer)
 
-## Sponsors
+<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
+## ❤️ Thanks
 
-<a href="https://opencollective.com/tabler/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/9/avatar.svg"></a>
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
 
-## Copyright and license
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
 
-Code and documentation copyright 2018 the [Tabler Authors](https://github.com/tabler/tabler/graphs/contributors) and [codecalm.net](https://codecalm.net). Code released under the [MIT License](https://github.com/tabler/tabler/blob/master/LICENSE).
+## License
+
+See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

SECURITY.md

@@ -0,0 +1,16 @@
+# Security Policy
+
+We take security very seriously and ask that you follow the following process.
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 1.0.x   | :white_check_mark: |
+| 0.x     | :x:                |
+
+## Reporting a Vulnerability
+
+If you think you may have found a security bug we ask that you privately send the details to support@tabler.io. 
+Please make sure to use a descriptive title in the email.
+

_config.yml

@@ -1,109 +1,134 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0-alpha
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+  - playground.html
+
+use-iconfont: false
+rtl: false
+
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
-github_url: https://github.com/tabler/tabler
+theme-color: "#0054a6"
 
-debug: true
+email: support@tabler.io
+homepage: https://tabler.io
+github-url: https://github.com/tabler/tabler
+github-sponsors-url: https://github.com/sponsors/codecalm
+changelog-url: https://github.com/tabler/tabler/releases
+sponsor-url: https://github.com/sponsors/codecalm
+preview-url: https://tabler.io/demo
+docs-url: https://tabler.io/docs
+
+mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
+google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
+
+random-date-from: "2018-01-01"
+random-date-to: "2022-01-01"
+
+debug: false
+
+layout-dark: false
 
 plugins:
-- jekyll-random
-- jekyll-tidy
-- jekyll-timeago
-- jekyll-redirect-from
-- jekyll-include-cache
+  - jekyll-random
+  - jekyll-tidy
+  - jekyll-timeago
+  - jekyll-redirect-from
+
+tabler-css-plugins:
+  - tabler-flags
+  - tabler-payments
+  - tabler-vendors
 
 exclude:
-- .jekyll-cache
-
-keep_files:
-- css/ui-kit.css
-- css/dark.css
-- css/rtl.css
-#- js/ui-kit.js
+  - .jekyll-cache
+  - redirects.json
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-
-collections:
-  docs:
-    output: true
-  changelog:
-    output: false
-  components:
-    output: true
-
 defaults:
-  -
-    scope:
-      type: pages
+  - scope:
+      type: "pages"
+      path: "*.md"
+    values:
+      layout: markdown
+  - scope:
+      type: "pages"
     values:
       layout: default
-      nav-position: top
-  -
-    scope:
-      type: docs
-    values:
-      layout: docs
-      nav-position: top
-  -
-    scope:
-      type: components
-    values:
-      layout: component
-
 
 colors:
   blue:
-    hex: '#206bc4'
+    class: blue
+    hex: '#0054a6'
     title: Blue
   azure:
+    class: azure
     hex: '#45aaf2'
     title: Azure
   indigo:
+    class: indigo
     hex: '#6574cd'
     title: Indigo
   purple:
+    class: purple
     hex: '#a55eea'
     title: Purple
   pink:
+    class: pink
     hex: '#f66d9b'
     title: Pink
   red:
+    class: red
     hex: '#fa4654'
     title: Red
   orange:
+    class: orange
     hex: '#fd9644'
     title: Orange
   yellow:
+    class: yellow
     hex: '#f1c40f'
     title: Yellow
   lime:
+    class: lime
     hex: '#7bd235'
     title: Lime
   green:
+    class: green
     hex: '#5eba00'
     title: Green
   teal:
+    class: teal
     hex: '#2bcbba'
     title: Teal
   cyan:
+    class: cyan
     hex: '#17a2b8'
     title: Cyan
+
+colors-extra:
+  white:
+    hex: '#ffffff'
+    title: White
+  dark:
+    hex: '#303645'
+    title: Dark
   gray:
     hex: '#868e96'
     title: Gray
@@ -112,13 +137,13 @@ variants:
   - name: success
     icon: check
   - name: info
-    icon: info
+    icon: info-circle
   - name: warning
     icon: alert-triangle
   - name: danger
-    icon: x-octagon
+    icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
@@ -137,15 +162,12 @@ button-variants:
   info:
     class: info
     title: Info
-  light:
-    class: light
-    title: Light
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
+  light:
+    class: light
+    title: Light
 
 button-states:
   - class:
@@ -157,47 +179,55 @@ button-states:
 
 socials:
   facebook:
-    icon: brand/facebook
+    icon: brand-facebook
     title: Facebook
   twitter:
-    icon: brand/twitter
+    icon: brand-twitter
     title: Twitter
   google:
-    icon: brand/google
+    icon: brand-google
     title: Google
   youtube:
-    icon: brand/youtube
+    icon: brand-youtube
     title: Youtube
   vimeo:
-    icon: brand/vimeo
+    icon: brand-vimeo
     title: Vimeo
   dribbble:
-    icon: brand/dribbble
+    icon: brand-dribbble
     title: Dribbble
   github:
-    icon: brand/github
+    icon: brand-github
     title: Github
   instagram:
-    icon: brand/instagram
+    icon: brand-instagram
     title: Instagram
   pinterest:
-    icon: brand/pinterest
+    icon: brand-pinterest
     title: Pinterest
   vk:
-    icon: brand/vk
+    icon: brand-vk
     title: VK
   rss:
-    icon: brand/rss
+    icon: rss
     title: RSS
   flickr:
-    icon: brand/flickr
+    icon: brand-flickr
     title: Flickr
   bitbucket:
-    icon: brand/bitbucket
-    title: Bitbucker
+    icon: brand-bitbucket
+    title: Bitbucket
   tabler:
-    icon: brand/tabler
+    icon: brand-tabler
     title: Tabler
 
-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+icons:
+  link: https://tabler-icons.io
+
+emails:
+  price: "$29"
+  count: 54
+  buy_link: https://tabler.io/buy-emails

_config_prod.yml

@@ -0,0 +1,4 @@
+exclude:
+  - redirects.json
+  - playground.html
+  - playground-*.html

build/banner.js

@@ -1,21 +0,0 @@
-/*
- * Tabler (v0.9.0): banner.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-const pkg = require('../package.json'),
-  year = new Date().getFullYear();
-
-function getBanner(pluginFilename) {
-  return `/*!
-  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
-  * Copyright 2018-${year} ${pkg.author}
-  * Licensed under ${pkg.license} (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */`;
-}
-
-module.exports = getBanner;

build/browsersync.js

@@ -1,36 +0,0 @@
-/*
- * Tabler (v0.9.0): browsersync.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const bs = require('browser-sync').create();
-
-bs.init({
-  watch: true,
-  server: {
-    routes: {
-      '/': 'tmp',
-      '/dist': 'dist',
-      '/dist/fonts': 'fonts',
-      '/libs': 'static/libs',
-      '/img': 'static/img',
-      '/node_modules': 'node_modules',
-    },
-  },
-  files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
-  watchOptions: {
-    ignoreInitial: true,
-  },
-  notify: false,
-  open: false,
-  snippetOptions: {
-    rule: {
-      match: /<\/head>/i,
-      fn: function (snippet, match) {
-        return snippet + match;
-      }
-    }
-  }
-});

build/capture-components.sh

@@ -1,12 +0,0 @@
-rm -rf ../static/img/components/*
-
-for file in ../pages/_components/*.html
-do
-  file="$(basename -- $file)"
-  file="${file%.html}"
-  url="http://localhost:3001/components/$file.html"
-  echo $url
-
-  capture-website $url --element="#component-wrapper" --scale-factor=2 > ../static/img/components/$file.png
-  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
-done

build/copy-libs.js

@@ -1,11 +0,0 @@
-const libs = require('../pages/_data/libs'),
-  path = require('path'),
-  { exec } = require('child_process');
-
-const all_libs = libs.js.concat(libs.css);
-
-all_libs.forEach(function (lib) {
-  let dirname = path.dirname(lib).replace('@', '');
-  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
-  exec(cmd)
-});

build/download-images.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const YAML = require('yaml')
+const fs = require('node:fs')
+const path = require('node:path')
+const request = require('request')
+const filePath = path.join(__dirname, '../src/pages/_data/photos.yml')
+
+const photos = YAML.parse(fs.readFileSync(filePath, 'utf8'))
+
+const urlTitle = (str) => {
+  str = str
+		.toLowerCase()
+		.replaceAll('&', 'and')
+		.replace(/[^[a-z0-9-]/g, '-')
+		.replace(/-+/g, '-')
+
+  return str
+}
+
+const download = function(uri, filename, callback, error) {
+  request.head(uri, function(err, res, body) {
+	 request(uri).pipe(fs.createWriteStream(filename))
+		  .on('close', callback)
+		  .on('error', error)
+  })
+}
+
+async function downloadPhotos() {
+  for (const key in photos) {
+	 const photo = photos[key]
+
+	 let filename, i = 1;
+
+	 do {
+		filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
+		i++
+	 } while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
+
+	 await new Promise((resolve, reject) => {
+		download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function(){
+		  resolve()
+		}, function() {
+		  reject()
+		});
+	 })
+
+	 photos[key]['file'] = filename
+	 photos[key]['horizontal'] = photo['width'] > photo['height']
+  }
+
+  fs.writeFileSync(filePath, YAML.stringify(photos))
+}
+
+downloadPhotos();
+

build/postcss.config.js

@@ -1,24 +0,0 @@
-/*
- * Tabler (v0.9.0): postcss.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-module.exports = ctx => ({
-  map: ctx.file.dirname.includes('examples') ?
-    false :
-    {
-      inline: false,
-      annotation: true,
-      sourcesContent: true
-    },
-  plugins: {
-    autoprefixer: {
-      cascade: false,
-      grid: "autoplace"
-    }
-  }
-});

build/rollup.config.js

@@ -1,51 +0,0 @@
-/*
- * Tabler (v0.9.0): rollup.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-const BUNDLE  = process.env.BUNDLE === 'true';
-
-import path from 'path';
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import minify from 'rollup-plugin-babel-minify';
-import commonjs from 'rollup-plugin-commonjs';
-
-const fileDest = 'tabler',
-  banner = require('./banner');
-
-let plugins = [
-  resolve(),
-  commonjs()
-];
-
-if (BUNDLE) {
-  plugins = plugins.concat([
-    babel({
-      exclude: 'node_modules/**'
-    }),
-    minify({
-      comments: false
-    })
-  ]);
-}
-
-module.exports = {
-  context: "window",
-  input: {
-    tabler: path.resolve(__dirname, '../js/tabler.js'),
-    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
-  },
-  output: {
-    banner,
-    // name: 'tabler',
-    dir: path.resolve(__dirname, `../dist/js/`),
-    entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
-    format: 'cjs'
-  },
-  plugins,
-};

build/scss-compile.js

@@ -1,46 +0,0 @@
-/*
- * Tabler (v0.9.0): scss-compile.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const path = require('path'),
-  glob = require("glob"),
-  fs = require("fs"),
-  sass = require("node-sass"),
-  packageImporter = require('node-sass-package-importer');
-
-glob("scss/tabler*.scss", {}, function (er, files) {
-  files.forEach(function(file){
-    var basename = path.basename(file, '.scss');
-    
-    sass.render(
-      {
-        file: file,
-        outFile: `dist/css/${basename}.css`,
-        sourceMap: true,
-        sourceMapContents: true,
-        precision: 6,
-        importer: packageImporter()
-      },
-      (error, result) => {
-        if (!error) {
-          fs.writeFile(`dist/css/${basename}.css`, result.css, error => {
-            if (error) {
-              console.log(error);
-            }
-          });
-
-          fs.writeFile(`dist/css/${basename}.css.map`, result.map, error => {
-            if (error) {
-              console.log(error);
-            }
-          });
-        } else {
-          throw error;
-        }
-      }
-    );
-  });
-});

build/unused-files.js

@@ -1,27 +0,0 @@
-const glob = require("glob"),
-  fs = require("fs");
-
-let foundFiles = [];
-
-glob.sync("pages/**/*.{html,md}").forEach(function (file) {
-  let fileContent = fs.readFileSync(file);
-
-  fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function(f, c, filename){
-    filename = 'pages/_includes/' + filename;
-
-    if(!foundFiles.includes(filename)) {
-      foundFiles.push(filename);
-    }
-  });
-});
-
-let includeFiles = glob.sync("pages/_includes/**/*.html");
-
-includeFiles.forEach(function(file){
-  if(! foundFiles.includes(file)) {
-    console.log('file', file);
-  }
-});
-
-// console.log('foundFiles', foundFiles);
-// console.log('includeFiles', includeFiles);

demo/2-step-verification-code.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>2-Step Verification - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+        </div>
+        <form
+	class="card card-md"
+	action="./"
+	method="get"
+	autocomplete="off"
+	novalidate
+>
+          <div class="card-body">
+            <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+            <p class="my-4 text-center">Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.</p>
+            <div class="my-5">
+              <div class="row g-4">
+                <div class="col">
+                  <div class="row g-2">
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row g-2">
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="my-4">
+              <label class="form-check">
+                <input type="checkbox" class="form-check-input" />
+                Dont't ask for codes again on this device
+              </label>
+            </div>
+            <div class="form-footer">
+              <div class="btn-list flex-nowrap">
+                <a href="./2-step-verification.html" class="btn w-100">
+                  Cancel
+                </a>
+                <a href="#" class="btn btn-primary w-100">
+                  Verify
+                </a>
+              </div>
+            </div>
+          </div>
+        </form>
+        <div class="text-center text-secondary mt-3">
+          It may take a minute to receive your code. Haven't received it? <a href="./">Resend a new code.</a>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+      	var inputs = document.querySelectorAll('[data-code-input]');
+      	// Attach an event listener to each input element
+      	for(let i = 0; i < inputs.length; i++) {
+      		inputs[i].addEventListener('input', function(e) {
+      			// If the input field has a character, and there is a next input field, focus it
+      			if(e.target.value.length === e.target.maxLength && i + 1 < inputs.length) {
+      				inputs[i + 1].focus();
+      			}
+      		});
+      		inputs[i].addEventListener('keydown', function(e) {
+      			// If the input field is empty and the keyCode for Backspace (8) is detected, and there is a previous input field, focus it
+      			if(e.target.value.length === 0 && e.keyCode === 8 && i > 0) {
+      				inputs[i - 1].focus();
+      			}
+      		});
+      	}
+      });
+    </script>
+  </body>
+</html>

demo/2-step-verification.html

@@ -0,0 +1,331 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>2-Step Verification - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+        </div>
+        <form
+	class="card card-md"
+	action="./2-step-verification-code.html"
+	method="get"
+	autocomplete="off"
+	novalidate
+>
+          <div class="card-body">
+            <h2 class="card-title text-center mb-4">2-Step Verification</h2>
+            <div class="mb-3">
+              <label class="form-label">Country</label>
+              <select class="form-select">
+                <option value="">Andorra</option>
+                <option value="">United Arab Emirates</option>
+                <option value="">Afghanistan</option>
+                <option value="">Antigua</option>
+                <option value="">Anguilla</option>
+                <option value="">Armenia</option>
+                <option value="">Angolan</option>
+                <option value="">Antarctica</option>
+                <option value="">Argentina</option>
+                <option value="">American Samoa</option>
+                <option value="">Austria</option>
+                <option value="">Australia</option>
+                <option value="">Aruba</option>
+                <option value="">Aslan Islands</option>
+                <option value="">Azerbaijan</option>
+                <option value="">Bosnian</option>
+                <option value="">Barbados</option>
+                <option value="">Belgium</option>
+                <option value="">Burkina Faso</option>
+                <option value="">Bulgaria</option>
+                <option value="">Bahrain</option>
+                <option value="">Burundi</option>
+                <option value="">Benin</option>
+                <option value="">Saint-Barthélemy</option>
+                <option value="">Bermuda</option>
+                <option value="">Bruneian</option>
+                <option value="">Bolivia</option>
+                <option value="">Bonaire</option>
+                <option value="">Brazil</option>
+                <option value="">Bahamas</option>
+                <option value="">Bhutan</option>
+                <option value="">Bouvet Island</option>
+                <option value="">Batswana</option>
+                <option value="">Belarus</option>
+                <option value="">Belize</option>
+                <option value="">Canada</option>
+                <option value="">Cocos Island</option>
+                <option value="">Democratic Republic of Congo</option>
+                <option value="">Central African Republic</option>
+                <option value="">Republic of the Congo</option>
+                <option value="">Switzerland</option>
+                <option value="">Ivory Coast</option>
+                <option value="">Cook Island</option>
+                <option value="">Chile</option>
+                <option value="">Cameroon</option>
+                <option value="">China</option>
+                <option value="">Colombia</option>
+                <option value="">Costa Rica</option>
+                <option value="">Cuba</option>
+                <option value="">Cape Verde</option>
+                <option value="">Curacao</option>
+                <option value="">Christmas Island</option>
+                <option value="">Cyprus</option>
+                <option value="">Czech Republic</option>
+                <option value="">Germany</option>
+                <option value="">Djibouti</option>
+                <option value="">Denmark</option>
+                <option value="">Dominica</option>
+                <option value="">Dominican Republic</option>
+                <option value="">Algeria</option>
+                <option value="">Ecuador</option>
+                <option value="">Estonia</option>
+                <option value="">Egypt</option>
+                <option value="">Sahrawi</option>
+                <option value="">Eritrea</option>
+                <option value="">Spain</option>
+                <option value="">Catalonia</option>
+                <option value="">Ethiopia</option>
+                <option value="">European Union</option>
+                <option value="">Finland</option>
+                <option value="">Fiji</option>
+                <option value="">Falkland Islands</option>
+                <option value="">Federate States of Micronesia</option>
+                <option value="">Faroe Islands</option>
+                <option value="">France</option>
+                <option value="">Gabon</option>
+                <option value="">Great Britain</option>
+                <option value="">England</option>
+                <option value="">Nothern Ireland</option>
+                <option value="">Scotland</option>
+                <option value="">Wales</option>
+                <option value="">Grenada</option>
+                <option value="">Georgia</option>
+                <option value="">Guyana</option>
+                <option value="">Guernsey</option>
+                <option value="">Ghana</option>
+                <option value="">Gibraltar</option>
+                <option value="">Greenland</option>
+                <option value="">Gambia</option>
+                <option value="">Guinea</option>
+                <option value="">Guadeloupe</option>
+                <option value="">Equatorial Guinea</option>
+                <option value="">Greece</option>
+                <option value="">South Georgia</option>
+                <option value="">Guatemala</option>
+                <option value="">Guam</option>
+                <option value="">Guinea-Bissau</option>
+                <option value="">Guyana</option>
+                <option value="">Hong Kong</option>
+                <option value="">Heard and McDonald Islands</option>
+                <option value="">Honduras</option>
+                <option value="">Croatia</option>
+                <option value="">Haiti</option>
+                <option value="">Hungary</option>
+                <option value="">Indonesia</option>
+                <option value="">Ireland</option>
+                <option value="">Israel</option>
+                <option value="">Isle of Man</option>
+                <option value="">India</option>
+                <option value="">British Indian Ocean Territory</option>
+                <option value="">Iraq</option>
+                <option value="">Iran</option>
+                <option value="">Iceland</option>
+                <option value="">Italy</option>
+                <option value="">Jersey</option>
+                <option value="">Jamaica</option>
+                <option value="">Jordan</option>
+                <option value="">Japan</option>
+                <option value="">Kenya</option>
+                <option value="">Kyrgyzstan</option>
+                <option value="">Cambodia</option>
+                <option value="">Kiribati</option>
+                <option value="">Comoros</option>
+                <option value="">Saint Kitts and Nevis</option>
+                <option value="">North Korea</option>
+                <option value="">South Korea</option>
+                <option value="">Kuwait</option>
+                <option value="">Cayman Islands</option>
+                <option value="">Kazakhstan</option>
+                <option value="">Laos</option>
+                <option value="">Lebanese</option>
+                <option value="">Saint Lucia</option>
+                <option value="">Liechtenstein</option>
+                <option value="">Sri Lanka</option>
+                <option value="">Liberia</option>
+                <option value="">Lesotho</option>
+                <option value="">Lithuania</option>
+                <option value="">Luxembourg</option>
+                <option value="">Latvia</option>
+                <option value="">Libya</option>
+                <option value="">Morocco</option>
+                <option value="">Monaco</option>
+                <option value="">Moldova</option>
+                <option value="">Montenegro</option>
+                <option value="">Saint Martin</option>
+                <option value="">Madagascar</option>
+                <option value="">Marshall Islands</option>
+                <option value="">Macedonia</option>
+                <option value="">Mali</option>
+                <option value="">Myanmar</option>
+                <option value="">Mongolia</option>
+                <option value="">Macao</option>
+                <option value="">Nothern Mariana Islands</option>
+                <option value="">Martinique</option>
+                <option value="">Mauritania</option>
+                <option value="">Montserrat</option>
+                <option value="">Malta</option>
+                <option value="">Mauritius</option>
+                <option value="">Maldives</option>
+                <option value="">Malawi</option>
+                <option value="">Mexico</option>
+                <option value="">Malaysia</option>
+                <option value="">Mozambique</option>
+                <option value="">Namibia</option>
+                <option value="">New Caledonia</option>
+                <option value="">Niger</option>
+                <option value="">Norfolk Island</option>
+                <option value="">Nigeria</option>
+                <option value="">Nicaragua</option>
+                <option value="">Norway</option>
+                <option value="">Nepal</option>
+                <option value="">Nauruan</option>
+                <option value="">Niger</option>
+                <option value="">New Zealand</option>
+                <option value="">Oman</option>
+                <option value="">Panama</option>
+                <option value="">Peru</option>
+                <option value="">French Polynesia</option>
+                <option value="">Papua New Guinea</option>
+                <option value="">Philippines</option>
+                <option value="">Pakistan</option>
+                <option value="">Poland</option>
+                <option value="">Saint Pierre</option>
+                <option value="">Pitcairn Islands</option>
+                <option value="">Puerto Rico</option>
+                <option value="">Palestine</option>
+                <option value="">Portugal</option>
+                <option value="">Palau</option>
+                <option value="">Paraguay</option>
+                <option value="">Qatar</option>
+                <option value="">Reunion Island</option>
+                <option value="">Romania</option>
+                <option value="">Serbia</option>
+                <option value="">Russia</option>
+                <option value="">Rwanda</option>
+                <option value="">Saudi Arabia</option>
+                <option value="">Solomon Islands</option>
+                <option value="">Seychelles</option>
+                <option value="">Sudan</option>
+                <option value="">Sweden</option>
+                <option value="">Singapore</option>
+                <option value="">Saint Helena</option>
+                <option value="">Slovenia</option>
+                <option value="">Svalbard Island</option>
+                <option value="">Slovakia</option>
+                <option value="">Sierra Leone</option>
+                <option value="">San Marino</option>
+                <option value="">Senegal</option>
+                <option value="">Somalia</option>
+                <option value="">Suriname</option>
+                <option value="">South Sudan</option>
+                <option value="">Sao Tome</option>
+                <option value="">El Salvador</option>
+                <option value="">Sint Maarten</option>
+                <option value="">Syria</option>
+                <option value="">Swaziland</option>
+                <option value="">Turks and Caicos</option>
+                <option value="">Chad</option>
+                <option value="">French Southern and Antarctic Lands</option>
+                <option value="">Togo</option>
+                <option value="">Thailand</option>
+                <option value="">Tajikistan</option>
+                <option value="">Tokelau</option>
+                <option value="">Timor Leste</option>
+                <option value="">Turkmenistan</option>
+                <option value="">Tunisia</option>
+                <option value="">Tonga</option>
+                <option value="">Turkey</option>
+                <option value="">Trinidad and Tobago</option>
+                <option value="">Tuvalu</option>
+                <option value="">Tanzania</option>
+                <option value="">Ukraine</option>
+                <option value="">Uganda</option>
+                <option value="">United States Minor Islands</option>
+                <option value="">United Nations</option>
+                <option value="">United States of America</option>
+                <option value="">Uruguay</option>
+                <option value="">Uzbekistan</option>
+                <option value="">Vatican City</option>
+                <option value="">Saint Vincent</option>
+                <option value="">Venezuela</option>
+                <option value="">British Virgin Islands</option>
+                <option value="">Virgiin Islands</option>
+                <option value="">Vietnam</option>
+                <option value="">Vanuatu</option>
+                <option value="">Wallis and Futuna</option>
+                <option value="">Samoa</option>
+                <option value="">Yemen</option>
+                <option value="">South Africa</option>
+                <option value="">Zambia</option>
+                <option value="">Zimbabwe</option>
+              </select>
+            </div>
+            <div class="mb-4">
+              <label class="form-label">Your Phone Number</label>
+              <div class="input-group">
+                <span class="input-group-text">+1</span>
+                <input type="text" class="form-control" placeholder="Enter phone number" />
+              </div>
+            </div>
+            <div class="text-secondary">
+              Security is critical in Tabler. to help keep your account safe, we'll
+              text you a verification code when you sign in on a new device
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary w-100">
+                Send code
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/404.html

@@ -1,128 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased  border-top-2 border-primary">
-    <div class="empty">
-      <div class="empty-icon">
-        <div class="display-4">404</div>
-      </div>
-      <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-      <p class="empty-subtitle text-muted">
-        We are sorry but the page you are looking for was not found
-      </p>
-      <div class="empty-action">
-        <a href="#" class="btn btn-primary">
-          Search again
-        </a>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function(event) {
-         window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-            chart: {
-               type: 'area',
-               height: 40.0,
-            sparkline: {
-               enabled: true
-            },
-            },
-            fill: {
-               opacity: .16
-            },
-            series: [{
-               name: 'Profits',
-               data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-            }],
-            xaxis: {
-               type: 'datetime',
-            },
-            labels: [...Array(30).keys()].map(n => `2019-09-${n+1}`),
-            colors: [
-               tabler.colors["blue"]
-            ],
-         })).render();
-      });
-    </script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/accordion.html

@@ -0,0 +1,734 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item active" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Accordion
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div class="accordion" id="accordion-example">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-1">
+                      <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
+                        Accordion Item #1
+                      </button>
+                    </h2>
+                    <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the first item's accordion body.</strong> 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 <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-2">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                        Accordion Item #2
+                      </button>
+                    </h2>
+                    <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the second item's accordion body.</strong> 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 <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-3">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                        Accordion Item #3
+                      </button>
+                    </h2>
+                    <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the third item's accordion body.</strong> 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 <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-4">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                        Accordion Item #4
+                      </button>
+                    </h2>
+                    <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the fourth item's accordion body.</strong> 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 <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/activity.html

@@ -0,0 +1,936 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item active" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Activity
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row justify-content-center">
+              <div class="col-8">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="divide-y">
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">JL</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
+                            </div>
+                            <div class="text-secondary">yesterday</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
+                            </div>
+                            <div class="text-secondary">today</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
+                            </div>
+                            <div class="text-secondary">4 days ago</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Maryjo Lebarree</strong> liked your photo.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">EP</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
+                            </div>
+                            <div class="text-secondary">yesterday</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
+                            </div>
+                            <div class="text-secondary">4 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">HS</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
+                            </div>
+                            <div class="text-secondary">today</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
+                            </div>
+                            <div class="text-secondary">yesterday</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Leesa Beaty</strong> posted new video.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Perren Keemar</strong> and 3 others followed you.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">SA</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Thatcher Keel</strong> created a profile.
+                            </div>
+                            <div class="text-secondary">3 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
+                            </div>
+                            <div class="text-secondary">4 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">AA</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
+                            </div>
+                            <div class="text-secondary">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/alerts.html

@@ -0,0 +1,921 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Alerts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item active" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Alerts
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-lg-6">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">Basic alerts</h2>
+                    <p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
+                    <div class="alert alert-success" role="alert">
+                      Wow! Everything worked!
+                    </div>
+                    <div class="alert alert-warning" role="alert">
+                      Uh oh, something went wrong
+                    </div>
+                    <div class="alert alert-danger" role="alert">
+                      I'm so sorry…
+                    </div>
+                    <div class="alert alert-info" role="alert">
+                      Did you know?
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">Alerts with icon</h2>
+                    <p class="text-secondary">Build on any alert by adding an optional icon.</p>
+                    <div class="alert alert-success" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+                        </div>
+                        <div>
+                          Wow! Everything worked!
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-warning" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                        </div>
+                        <div>
+                          Uh oh, something went wrong
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-danger" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                        </div>
+                        <div>
+                          I'm so sorry…
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-info" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+                        </div>
+                        <div>
+                          Did you know?
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">Dismissible alerts</h2>
+                    <p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
+                    <div class="alert alert-success alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+                        </div>
+                        <div>
+                          Wow! Everything worked!
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-warning alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                        </div>
+                        <div>
+                          Uh oh, something went wrong
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-danger alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                        </div>
+                        <div>
+                          I'm so sorry…
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-info alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+                        </div>
+                        <div>
+                          Did you know?
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">Alert with a description</h2>
+                    <p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
+                    <div class="alert alert-success" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+                        </div>
+                        <div>
+                          <h4 class="alert-title">This is a custom alert box!</h4>
+                          <div class="text-secondary">Your account has been saved!</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-warning" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                        </div>
+                        <div>
+                          <h4 class="alert-title">This is a custom alert box!</h4>
+                          <div class="text-secondary">Sorry! There was a problem with your request.</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-danger" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                        </div>
+                        <div>
+                          <h4 class="alert-title">This is a custom alert box!</h4>
+                          <div class="text-secondary">Something went wrong. Please try again.</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="alert alert-info" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+                        </div>
+                        <div>
+                          <h4 class="alert-title">This is a custom alert box!</h4>
+                          <div class="text-secondary">Here is something that you might like to know.</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">Important alerts</h2>
+                    <div class="alert alert-important alert-success alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+                        </div>
+                        <div>
+                          Wow! Everything worked!
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-important alert-warning alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                        </div>
+                        <div>
+                          Uh oh, something went wrong
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-important alert-danger alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                        </div>
+                        <div>
+                          I'm so sorry…
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                    <div class="alert alert-important alert-info alert-dismissible" role="alert">
+                      <div class="d-flex">
+                        <div>
+                          <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+                        </div>
+                        <div>
+                          Did you know?
+                        </div>
+                      </div>
+                      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/all.html

@@ -1,588 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Index
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row justify-content-center mt-3 mt-lg-5">
-            <div class="col-lg-6 col-xl-5">
-              <div class="card">
-                <div class="card-header">
-                  <h2 class="card-title">
-                    All pages
-                  </h2>
-                </div>
-                <div class="card-body">
-                  <ul>
-                    <li>
-                      <a href="/components/index.html">
-                        redirect.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tmp.html">
-                        tmp.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layouts.html">
-                        layouts.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/redirects.json">
-                        redirects.json
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blank.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Blank page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blog.html">
-                        Blog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/buttons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Buttons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/calendar.html">
-                        Calendar
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards.html">
-                        Cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/carousel.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Carousel
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/changelog.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Changelog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts.html">
-                        Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/crypto-currencies.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Crypto currencies
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-header-dark.html">
-                        Dark header
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark-mode.html">
-                        Dark mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/docs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Documentation
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/dropdowns.html">
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/email.html">
-                        Email
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/empty.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Empty page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/flags.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Flags
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-folded.html">
-                        Folded sidebar
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/forgot-password.html">
-                        Forgot password
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/form-elements.html">
-                        Form elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/gallery.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Gallery
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts-heatmap.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Heatmap Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/homepage.html">
-                        Homepage
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/icons.html">
-                        Icons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/all.html">
-                        Index
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/invoice.html">
-                        Invoice
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-test.html">
-                        Layout test
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/login.html">
-                        Login
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/lookup.html">
-                        Lookup company
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maintenance.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Maintenance mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps.html">
-                        Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-top.html">
-                        Navbar top
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/404.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Page 404
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pagination.html">
-                        Pagination
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pricing.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/profile.html">
-                        Profile
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/rtl.html">
-                        RTL mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/register.html">
-                        Register
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/ribbons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Ribbons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-left.html">
-                        Sidebar left
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-right.html">
-                        Sidebar right
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        Sidebar white
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/snippets.html">
-                        Snippets
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/social.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Social elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-header-sticky.html">
-                        Sticky header
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/store.html">
-                        Store
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/components.html">
-                        Table UI components
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tabs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Tabs
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/typography.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Typography
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/users.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Users list
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/auth-lock.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+        </div>
+        <form class="card card-md" action="./" method="get" autocomplete="off" novalidate>
+          <div class="card-body text-center">
+            <div class="mb-4">
+              <h2 class="card-title">Account Locked</h2>
+              <p class="text-secondary">Please enter your password to unlock your account</p>
+            </div>
+            <div class="mb-4">
+              <span class="avatar avatar-xl mb-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
+              <h3>Paweł Kuna</h3>
+            </div>
+            <div class="mb-4">
+              <input type="password" class="form-control" placeholder="Password&hellip;">
+            </div>
+            <div>
+              <a href="#" class="btn btn-primary w-100">
+                <!-- Download SVG icon from http://tabler-icons.io/i/lock-open -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
+                Unlock
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/badges.html

@@ -0,0 +1,834 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Badges - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item active" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Badges
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-4">
+                <div class="card">
+                  <div class="card-body">
+                    <h1>Example heading <span class="badge">New</span></h1>
+                    <h2>Example heading <span class="badge">New</span></h2>
+                    <h3>Example heading <span class="badge">New</span></h3>
+                    <h4>Example heading <span class="badge">New</span></h4>
+                    <h5>Example heading <span class="badge">New</span></h5>
+                    <h6>Example heading <span class="badge">New</span></h6>
+                  </div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="row row-cards">
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="badges-list">
+                          <span class="badge bg-blue text-blue-fg">Blue</span>
+                          <span class="badge bg-azure text-azure-fg">Azure</span>
+                          <span class="badge bg-indigo text-indigo-fg">Indigo</span>
+                          <span class="badge bg-purple text-purple-fg">Purple</span>
+                          <span class="badge bg-pink text-pink-fg">Pink</span>
+                          <span class="badge bg-red text-red-fg">Red</span>
+                          <span class="badge bg-orange text-orange-fg">Orange</span>
+                          <span class="badge bg-yellow text-yellow-fg">Yellow</span>
+                          <span class="badge bg-lime text-lime-fg">Lime</span>
+                          <span class="badge bg-green text-green-fg">Green</span>
+                          <span class="badge bg-teal text-teal-fg">Teal</span>
+                          <span class="badge bg-cyan text-cyan-fg">Cyan</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="badges-list">
+                          <span class="badge bg-blue-lt">Blue</span>
+                          <span class="badge bg-azure-lt">Azure</span>
+                          <span class="badge bg-indigo-lt">Indigo</span>
+                          <span class="badge bg-purple-lt">Purple</span>
+                          <span class="badge bg-pink-lt">Pink</span>
+                          <span class="badge bg-red-lt">Red</span>
+                          <span class="badge bg-orange-lt">Orange</span>
+                          <span class="badge bg-yellow-lt">Yellow</span>
+                          <span class="badge bg-lime-lt">Lime</span>
+                          <span class="badge bg-green-lt">Green</span>
+                          <span class="badge bg-teal-lt">Teal</span>
+                          <span class="badge bg-cyan-lt">Cyan</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="badges-list">
+                          <span class="badge badge-outline text-blue">Blue</span>
+                          <span class="badge badge-outline text-azure">Azure</span>
+                          <span class="badge badge-outline text-indigo">Indigo</span>
+                          <span class="badge badge-outline text-purple">Purple</span>
+                          <span class="badge badge-outline text-pink">Pink</span>
+                          <span class="badge badge-outline text-red">Red</span>
+                          <span class="badge badge-outline text-orange">Orange</span>
+                          <span class="badge badge-outline text-yellow">Yellow</span>
+                          <span class="badge badge-outline text-lime">Lime</span>
+                          <span class="badge badge-outline text-green">Green</span>
+                          <span class="badge badge-outline text-teal">Teal</span>
+                          <span class="badge badge-outline text-cyan">Cyan</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-3">
+                <div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
+                  <a class="dropdown-item" href="#">
+                    Action
+                    <span class="badge bg-primary text-primary-fg ms-auto">12</span>
+                  </a>
+                  <a class="dropdown-item" href="#">
+                    Another action
+                    <span class="badge bg-green ms-auto"></span>
+                  </a>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-9">
+                <div class="row row-cards">
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="btn-list">
+                          <button class="btn">Blue badge <span class="badge bg-blue text-blue-fg ms-2">1</span></button>
+                          <button class="btn">Azure badge <span class="badge bg-azure text-azure-fg ms-2">2</span></button>
+                          <button class="btn">Indigo badge <span class="badge bg-indigo text-indigo-fg ms-2">3</span></button>
+                          <button class="btn">Purple badge <span class="badge bg-purple text-purple-fg ms-2">4</span></button>
+                          <button class="btn">Pink badge <span class="badge bg-pink text-pink-fg ms-2">5</span></button>
+                          <button class="btn">Red badge <span class="badge bg-red text-red-fg ms-2">6</span></button>
+                          <button class="btn">Orange badge <span class="badge bg-orange text-orange-fg ms-2">7</span></button>
+                          <button class="btn">Yellow badge <span class="badge bg-yellow text-yellow-fg ms-2">8</span></button>
+                          <button class="btn">Lime badge <span class="badge bg-lime text-lime-fg ms-2">9</span></button>
+                          <button class="btn">Green badge <span class="badge bg-green text-green-fg ms-2">10</span></button>
+                          <button class="btn">Teal badge <span class="badge bg-teal text-teal-fg ms-2">11</span></button>
+                          <button class="btn">Cyan badge <span class="badge bg-cyan text-cyan-fg ms-2">12</span></button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="btn-list">
+                          <button class="btn position-relative">Blue badge <span class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span></button>
+                          <button class="btn position-relative">Azure badge <span class="badge bg-azure text-azure-fg badge-notification badge-pill">2</span></button>
+                          <button class="btn position-relative">Indigo badge <span class="badge bg-indigo text-indigo-fg badge-notification badge-pill">3</span></button>
+                          <button class="btn position-relative">Purple badge <span class="badge bg-purple text-purple-fg badge-notification badge-pill">4</span></button>
+                          <button class="btn position-relative">Pink badge <span class="badge bg-pink text-pink-fg badge-notification badge-pill">5</span></button>
+                          <button class="btn position-relative">Red badge <span class="badge bg-red text-red-fg badge-notification badge-pill">6</span></button>
+                          <button class="btn position-relative">Orange badge <span class="badge bg-orange text-orange-fg badge-notification badge-pill">7</span></button>
+                          <button class="btn position-relative">Yellow badge <span class="badge bg-yellow text-yellow-fg badge-notification badge-pill">8</span></button>
+                          <button class="btn position-relative">Lime badge <span class="badge bg-lime text-lime-fg badge-notification badge-pill">9</span></button>
+                          <button class="btn position-relative">Green badge <span class="badge bg-green text-green-fg badge-notification badge-pill">10</span></button>
+                          <button class="btn position-relative">Teal badge <span class="badge bg-teal text-teal-fg badge-notification badge-pill">11</span></button>
+                          <button class="btn position-relative">Cyan badge <span class="badge bg-cyan text-cyan-fg badge-notification badge-pill">12</span></button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="btn-list">
+                          <button class="btn position-relative">Blue badge <span class="badge bg-blue badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Azure badge <span class="badge bg-azure badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Indigo badge <span class="badge bg-indigo badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Purple badge <span class="badge bg-purple badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Pink badge <span class="badge bg-pink badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Red badge <span class="badge bg-red badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Orange badge <span class="badge bg-orange badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Yellow badge <span class="badge bg-yellow badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Lime badge <span class="badge bg-lime badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Green badge <span class="badge bg-green badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Teal badge <span class="badge bg-teal badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Cyan badge <span class="badge bg-cyan badge-notification badge-blink"></span></button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/blank.html

@@ -1,295 +1,683 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
-      body { display: none; }
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
     </style>
   </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
                 </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
                 </a>
               </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <div class="empty">
-            <div class="empty-icon">
-              <img src="./img/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
             </div>
-            <p class="empty-title h3">No results found</p>
-            <p class="empty-subtitle text-muted">
-              Try adjusting your search or filter to find what you're looking for.
-            </p>
-            <div class="empty-action">
-              <a href="#" class="btn btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                Add your first client
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
               </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
             </div>
           </div>
-        </main>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item active" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl d-flex flex-column justify-content-center">
+            <div class="empty">
+              <div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" alt="">
+              </div>
+              <p class="empty-title">No results found</p>
+              <p class="empty-subtitle text-secondary">
+                Try adjusting your search or filter to find what you're looking for.
+              </p>
+              <div class="empty-action">
+                <a href="./." class="btn btn-primary">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
+                  Add your first client
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
       </div>
     </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/blog.html

@@ -1,537 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Blog
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row-deck">
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./img/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                  <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Dunn Slane</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./img/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                  <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Emmy Levet</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./img/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-                  <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/000f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                  <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Perren Keemar</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                  <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Sunny Airey</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
-                  <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md">SA</span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./img/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                      <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Dunn Slane</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./img/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                      <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Emmy Levet</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./img/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                      <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Perren Keemar</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./img/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                      <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Sunny Airey</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/calendar.html

@@ -1,379 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item active">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Calendar
-                </h2>
-              </div>
-              <!-- Page title actions -->
-              <div class="col-auto ml-auto">
-                <div class="d-flex">
-                  <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                    Add event
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-body">
-              <div id="calendar-main" class="card-calendar"></div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-            var calendarEl = document.getElementById('calendar-main'),
-               today = new Date(),
-               y = today.getFullYear(),
-               m = today.getMonth(),
-               d = today.getDate();
-            window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
-      	   plugins: [ 'interaction', 'dayGrid' ],
-               themeSystem: 'standard',
-      	   header: {
-      		   left: 'title',
-      		   center: '',
-      		   right: 'prev,next'
-      	   },
-      	   selectable: true,
-      	   selectHelper: true,
-      	   nowIndicator: true,
-      	   views: {
-      		   dayGridMonth: { buttonText: 'month' },
-      		   timeGridWeek: { buttonText: 'week' },
-      		   timeGridDay: { buttonText: 'day' }
-      	   },
-      	   defaultView: 'dayGridMonth',
-      	   timeFormat: 'H(:mm)',
-      	   events: [
-      	   	{
-                     title: 'All Day Event',
-                     start: new Date(y, m, 1),
-      			   className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 7, 6, 0),
-                     allDay: false,
-                     className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 14, 6, 0),
-                     allDay: false,
-                     className: 'bg-lime-lt'
-                  },
-                  {
-                     title: 'Meeting',
-                     start: new Date(y, m, 4, 10, 30),
-                     allDay: false,
-                     className: 'bg-green-lt'
-                  },
-                  {
-                     title: 'Lunch',
-                     start: new Date(y, m, 5, 12, 0),
-                     end: new Date(y, m, 5, 14, 0),
-                     allDay: false,
-                     className: 'bg-red-lt'
-                  },
-                  {
-                     title: 'LBD Launch',
-                     start: new Date(y, m, 19, 12, 0),
-                     allDay: true,
-                     className: 'bg-azure-lt'
-                  },
-                  {
-                     title: 'Birthday Party',
-                     start: new Date(y, m, 16, 19, 0),
-                     end: new Date(y, m, 16, 22, 30),
-                     allDay: false,
-      		      className: 'bg-orange-lt'
-                  }
-               ]
-         })).render();
-      });
-    </script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/card-actions.html

@@ -0,0 +1,882 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card actions - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Card actions
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Sample card</h3>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card with action</h3>
+                    <div class="card-actions">
+                      <a href="#" class="btn btn-primary">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
+                        Add new
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Cart title</h3>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </a>
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Paweł Kuna</div>
+                          <div class="card-subtitle">UI Designer</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </a>
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description and action
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn btn-primary">
+                        Create new job
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Dunn Slane</div>
+                          <div class="card-subtitle">Research Nurse</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-actions">
+                      <div class="dropdown">
+                        <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-end">
+                          <a class="dropdown-item" href="#">Edit user</a>
+                          <a class="dropdown-item" href="#">Change permissions</a>
+                          <a class="dropdown-item text-danger" href="#">Delete user</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card actions</h3>
+                    <div class="card-actions btn-actions">
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/refresh -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/x -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/cards-masonry.html

@@ -0,0 +1,823 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-secondary text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./dropzone.html">
+                          Dropzone
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./photogrid.html">
+                          Photogrid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./job-listing.html">
+                          Job listing
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Cards Masonry
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards" data-masonry='{"percentPosition": true }'>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="150"></line>
+                      <line x1="0" y1="150" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="400"></line>
+                      <line x1="0" y1="400" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="300"></line>
+                      <line x1="0" y1="300" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="350" viewBox="0 0 400 350" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="350"></line>
+                      <line x1="0" y1="350" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="600" viewBox="0 0 400 600" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="600"></line>
+                      <line x1="0" y1="600" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="700" viewBox="0 0 400 700" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="700"></line>
+                      <line x1="0" y1="700" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="150"></line>
+                      <line x1="0" y1="150" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="250" viewBox="0 0 400 250" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="250"></line>
+                      <line x1="0" y1="250" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="50" viewBox="0 0 400 50" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="50"></line>
+                      <line x1="0" y1="50" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="400"></line>
+                      <line x1="0" y1="400" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="300"></line>
+                      <line x1="0" y1="300" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta20
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" defer></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -1,523 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Heatmap Charts
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Basic Heatmap - Single Series</h4>
-                  <div id="heatmap-basic" class="chart"></div>
-                </div>
-              </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: false
-                	},
-                	colors: [tabler.colors.blue, ],
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-basic"),options)).render();
-              </script>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Multiple series</h4>
-                  <div id="heatmap-multiple" class="chart"></div>
-                </div>
-              </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: false
-                	},
-                	colors: [tabler.colors.blue, tabler.colors.azure, tabler.colors.indigo, tabler.colors.purple, tabler.colors.pink, tabler.colors.red, tabler.colors.orange, tabler.colors.yellow, tabler.colors.lime, tabler.colors.green, tabler.colors.teal, tabler.colors.cyan, ],
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-multiple"),options)).render();
-              </script>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Labels included</h4>
-                  <div id="heatmap-labels" class="chart"></div>
-                </div>
-              </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: true
-                	},
-                	colors: [tabler.colors.blue, ],
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-labels"),options)).render();
-              </script>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Color range</h4>
-                  <div id="heatmap-colors" class="chart"></div>
-                </div>
-              </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: false
-                	},
-                	plotOptions: {
-                		heatmap: {
-                			enableShades: true,
-                			colorScale: {
-                				ranges: [{
-                					from: 0,
-                					to: 20,
-                					name: "Low",
-                					color: tabler.colors.green
-                				}, {
-                					from: 21,
-                					to: 50,
-                					name: "Medium",
-                					color: tabler.colors.blue
-                				}, {
-                					from: 51,
-                					to: 75,
-                					name: "High",
-                					color: tabler.colors.yellow
-                				}, {
-                					from: 76,
-                					to: 100,
-                					name: "Extreme",
-                					color: tabler.colors.red
-                				}]
-                			}
-                		}
-                	},
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-colors"),options)).render();
-              </script>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>